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

Merge pull request #5712 from storybooks/minor-addon-UX-tweaks

Browse Source 
Minor addon ux tweaks
This commit is contained in:
Norbert de Langen 2019-02-21 22:14:31 +01:00 committed by GitHub
commit d986e59721
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
addons/a11y/src/components/ColorBlindness.js
View File

@ -18,6 +18,9 @@ const ColorIcon = styled.span(
},
({ filter }) => ({
filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
}),
({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
})
);

19
addons/backgrounds/src/components/ColorIcon.tsx
View File

@ -1,9 +1,14 @@
import { styled } from '@storybook/theming';
export const ColorIcon = styled.span(({ background }: { background: string }) => ({
borderRadius: '1rem',
display: 'block',
height: '1rem',
width: '1rem',
background,
}));
export const ColorIcon = styled.span(
({ background }: { background: string }) => ({
borderRadius: '1rem',
display: 'block',
height: '1rem',
width: '1rem',
background,
}),
({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
}),
);

2
addons/backgrounds/src/containers/BackgroundSelector.tsx
View File

@ -8,7 +8,7 @@ import { SET_STORIES } from '@storybook/core-events';
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { PARAM_KEY } from '../constants';
import { ColorIcon } from '../components';
import { ColorIcon } from '../components/ColorIcon';
import { BackgroundConfig, BackgroundSelectorItem } from '../models';
const iframeId = 'storybook-preview-background';

2
addons/viewport/src/Tool.js
View File

@ -20,7 +20,7 @@ const createItem = memoize(1000)((id, name, value, change) => ({
onClick: () => {
change({ selected: id, expanded: false });
},
right: `${value.width}-${value.height}`,
right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
value,
}));