Merge pull request #6297 from electricg/sb-5959

Fixed Colorblindness Emulation
storybookjs · Mar 26, 2019 · ab8f948 · ab8f948
2 parents 0fb9047 + ff08dd0
commit ab8f948
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
@@ -8,6 +8,16 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 const getIframe = memoize(1)(() => document.getElementById('storybook-preview-iframe'));
 
+const getFilter = (filter: string | null) => {
+  if (filter === null) {
+    return 'none';
+  }
+  if (filter === 'mono') {
+    return 'grayscale(100%)';
+  }
+  return `url('#${filter}')`;
+};
+
 const ColorIcon = styled.span(
   {
     background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
@@ -17,7 +27,7 @@ const ColorIcon = styled.span(
     width: '1rem',
   },
   ({ filter }: { filter: string | null }) => ({
-    filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+    filter: getFilter(filter),
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
@@ -42,7 +52,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
     const iframe = getIframe();
 
     if (iframe) {
-      iframe.style.filter = filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`;
+      iframe.style.filter = getFilter(filter);
       this.setState({
         expanded: false,
         filter,
@@ -78,6 +88,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
         this.setFilter(i);
       },
       right: <ColorIcon filter={i} />,
+      active: filter === i,
     }));
 
     if (filter !== null) {
@@ -89,6 +100,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
             this.setFilter(null);
           },
           right: undefined,
+          active: false,
         },
         ...colorList,
       ];

diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/register.tsx
@@ -7,7 +7,11 @@ import { A11YPanel } from './components/A11YPanel';
 import { addons, types } from '@storybook/addons';
 
 const Hidden = styled.div(() => ({
-  display: 'none',
+  '&, & svg': {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
 }));
 
 const PreviewWrapper: FunctionComponent<{}> = p => (