GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 16:41:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Styling for Range and Select

Browse Source
This commit is contained in:
domyen 2020-06-19 18:48:18 -04:00
parent 0510bfb0b0
commit c42f725420
2 changed files with 88 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/components/src/controls/Range.tsx
View File

@ -32,21 +32,22 @@ const RangeInput = styled.input(({ theme }) => ({
width: 16,
height: 16,
border: `1px solid ${rgba(theme.color.border, 0.2)}`,
border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
borderRadius: '50px',
boxShadow: `0 1px 3px 0px ${rgba(theme.color.border, 0.2)}`,
boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`,
cursor: 'grab',
appearance: 'none',
background: `${theme.color.lightest}`,
background: `${theme.input.background}`,
transition: 'all 150ms ease-out',
'&:hover': {
background: `${theme.color.lighter}`,
background: `${darken(0.05, theme.input.background)}`,
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
transition: 'all 50ms ease-out',
},
'&:active': {
background: `${theme.color.lighter}`,
background: `${theme.input.background}`,
transform: 'scale3d(1, 1, 1) translateY(0px)',
cursor: 'grabbing',
},
@ -86,16 +87,17 @@ const RangeInput = styled.input(({ theme }) => ({
borderRadius: '50px',
boxShadow: `0 1px 3px 0px ${rgba(theme.color.border, 0.2)}`,
cursor: 'grab',
background: `${theme.color.lightest}`,
background: `${theme.input.background}`,
transition: 'all 150ms ease-out',
'&:hover': {
background: `${theme.color.lighter}`,
background: `${darken(0.05, theme.input.background)}`,
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
transition: 'all 50ms ease-out',
},
'&:active': {
background: `${theme.color.lighter}`,
background: `${theme.input.background}`,
transform: 'scale3d(1, 1, 1) translateY(0px)',
cursor: 'grabbing',
},
@ -125,8 +127,8 @@ const RangeInput = styled.input(({ theme }) => ({
'&::-ms-thumb': {
width: 16,
height: 16,
background: `${theme.color.lightest}`,
border: `1px solid ${rgba(theme.color.border, 0.2)}`,
background: `${theme.input.background}`,
border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
borderRadius: 50,
cursor: 'grab',
marginTop: 0,

93
lib/components/src/controls/options/Select.tsx
View File

@ -2,12 +2,66 @@ import React, { FC, ChangeEvent } from 'react';
import { styled } from '@storybook/theming';
import { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
import { selectedKey, selectedKeys, selectedValues } from './helpers';
import { Icons } from '../../icon/icon';
const OptionsSelect = styled.select({
const OptionsSelect = styled.select(({ theme }) => ({
// Resets
appearance: 'none',
border: '0',
lineHeight: '20px',
padding: '6px 10px 6px 10px',
position: 'relative',
outline: 'none',
width: '100%',
maxWidth: '300px',
color: 'black',
});
overflow: 'auto',
// end resets
borderRadius: theme.input.borderRadius,
fontSize: theme.typography.size.s2 - 1,
boxShadow: `${theme.input.border} 0 0 0 1px inset`,
'&:focus': {
boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
},
'&[multiple]': {
paddingLeft: 0,
paddingRight: 0,
option: {
display: 'block',
paddingLeft: 10,
paddingRight: 10,
paddingTop: 6,
paddingBottom: 6,
marginLeft: 1,
marginRight: 1,
},
},
}));
const SelectWrapper = styled.span`
display: inline-block;
line-height: normal;
overflow: hidden;
position: relative;
vertical-align: top;
width: 100%;
svg {
position: absolute;
z-index: 1;
pointer-events: none;
height: 12px;
margin-top: -6px;
right: 12px;
top: 50%;
path {
fill: currentColor;
}
}
`;
type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean };
type SelectProps = ControlProps<OptionsSelection> & SelectConfig;
@ -21,14 +75,17 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
const selection = selectedKey(value, options) || NO_SELECTION;
return (
<OptionsSelect value={selection} onChange={handleChange}>
<option key="no-selection" disabled>
{NO_SELECTION}
</option>
{Object.keys(options).map((key) => (
<option key={key}>{key}</option>
))}
</OptionsSelect>
<SelectWrapper>
<Icons icon="arrowdown" />
<OptionsSelect value={selection} onChange={handleChange}>
<option key="no-selection" disabled>
{NO_SELECTION}
</option>
{Object.keys(options).map((key) => (
<option key={key}>{key}</option>
))}
</OptionsSelect>
</SelectWrapper>
);
};
@ -42,11 +99,13 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
const selection = selectedKeys(value, options);
return (
<OptionsSelect multiple value={selection} onChange={handleChange}>
{Object.keys(options).map((key) => (
<option key={key}>{key}</option>
))}
</OptionsSelect>
<SelectWrapper>
<OptionsSelect multiple value={selection} onChange={handleChange}>
{Object.keys(options).map((key) => (
<option key={key}>{key}</option>
))}
</OptionsSelect>
</SelectWrapper>
);
};