refactor: use storybook pseudo states addon (#4106)

* chore(deps): add devDep storybook-addon-pseudo-states * refactor: remove custom global pseudo state emulation classes and use SB pseudo states addon * docs(stickersheet): fix table a11y issue
cultureamp · Sep 27, 2023 · 92193dd · 92193dd
1 parent 410d26f
commit 92193dd
Show file tree

Hide file tree

Showing 28 changed files with 362 additions and 164 deletions.
diff --git a/.changeset/daring-doug-dances.md b/.changeset/daring-doug-dances.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/package.json b/package.json
@@ -138,6 +138,7 @@
     "rimraf": "^5.0.1",
     "sass-loader": "^13.3.2",
     "storybook": "^7.4.2",
+    "storybook-addon-pseudo-states": "^2.1.1",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^11.0.0",

diff --git a/packages/components/src/Button/Button/Button.module.scss b/packages/components/src/Button/Button/Button.module.scss
@@ -34,16 +34,15 @@
   }
 
   &:not(:disabled) {
-    &:active,
-    &#{$story-className--button-active} {
+    &:active {
       transform: translateY(1px);
     }
 
     &:focus {
       outline: none;
     }
 
-    #{$selectors--button-focus} {
+    &:focus-visible {
       &::after {
         $focus-ring-offset: calc(
           (#{$border-focus-ring-border-width} * 2) + 1px
@@ -63,7 +62,7 @@
 
   &.reversed {
     &:not(:disabled) {
-      #{$selectors--button-focus} {
+      &:focus-visible {
         &::after {
           border-color: $color-blue-300;
         }

diff --git a/packages/components/src/Button/Button/_docs/Button.stickersheet.stories.tsx b/packages/components/src/Button/Button/_docs/Button.stickersheet.stories.tsx
@@ -123,24 +123,24 @@ const StickerSheetTemplate: StickerSheetStory = {
                 <Button reversed={isReversed} {...props} />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-hover"
+                  data-sb-pseudo-styles="hover"
                   {...props}
                 />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-active"
+                  data-sb-pseudo-styles="active"
                   {...props}
                 />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-focus"
+                  data-sb-pseudo-styles="focus"
                   {...props}
                 />
                 <Button reversed={isReversed} {...props} disabled />
                 <Button reversed={isReversed} {...props} {...WORKING_PROPS} />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-focus"
+                  data-sb-pseudo-styles="focus"
                   {...props}
                   {...WORKING_PROPS}
                 />
@@ -171,19 +171,19 @@ const StickerSheetTemplate: StickerSheetStory = {
                 <Button reversed={isReversed} {...props} size="small" />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-hover"
+                  data-sb-pseudo-styles="hover"
                   {...props}
                   size="small"
                 />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-active"
+                  data-sb-pseudo-styles="active"
                   {...props}
                   size="small"
                 />
                 <Button
                   reversed={isReversed}
-                  classNameOverride="story__button-focus"
+                  data-sb-pseudo-styles="focus"
                   {...props}
                   size="small"
                 />
@@ -203,7 +203,7 @@ const StickerSheetTemplate: StickerSheetStory = {
                   reversed={isReversed}
                   {...props}
                   size="small"
-                  classNameOverride="story__button-focus"
+                  data-sb-pseudo-styles="focus"
                   {...WORKING_PROPS}
                 />
               </StickerSheet.Row>
@@ -251,6 +251,14 @@ const StickerSheetTemplate: StickerSheetStory = {
       </>
     )
   },
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      active: '[data-sb-pseudo-styles="active"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {
@@ -261,12 +269,18 @@ export const StickerSheetDefault: StickerSheetStory = {
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    backgrounds: { default: "Purple 700" },
+  },
   args: { isReversed: true },
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
-  parameters: { textDirection: "rtl" },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    textDirection: "rtl",
+  },
 }
diff --git a/...ages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx b/...ages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx
@@ -58,24 +58,32 @@ const StickerSheetTemplate: StickerSheetStory = {
             <DirectionalLink
               {...props}
               reversed={isReversed}
-              classNameOverride="story__button-hover"
+              data-sb-pseudo-styles="hover"
             />
             <DirectionalLink
               {...props}
               reversed={isReversed}
-              classNameOverride="story__button-active"
+              data-sb-pseudo-styles="active"
             />
             <DirectionalLink
               {...props}
               reversed={isReversed}
-              classNameOverride="story__button-focus"
+              data-sb-pseudo-styles="focus"
             />
             <DirectionalLink {...props} reversed={isReversed} disabled />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>
     </StickerSheet>
   ),
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      active: '[data-sb-pseudo-styles="active"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {
@@ -86,12 +94,18 @@ export const StickerSheetDefault: StickerSheetStory = {
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    backgrounds: { default: "Purple 700" },
+  },
   args: { isReversed: true },
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
-  parameters: { textDirection: "rtl" },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    textDirection: "rtl",
+  },
 }
diff --git a/packages/components/src/Button/IconButton/_docs/IconButton.stickersheet.stories.tsx b/packages/components/src/Button/IconButton/_docs/IconButton.stickersheet.stories.tsx
@@ -82,24 +82,25 @@ const StickerSheetTemplate: StickerSheetStory = {
       <StickerSheet isReversed={isReversed}>
         <StickerSheet.Header
           headings={["Base", "Hover", "Active", "Focus", "Disabled", "Working"]}
+          hasVerticalHeadings
         />
         <StickerSheet.Body>
           {VARIANTS_PROPS.map(({ title, props }) => (
             <StickerSheet.Row key={title} rowTitle={title}>
               <IconButton reversed={isReversed} {...props} />
               <IconButton
                 reversed={isReversed}
-                classNameOverride="story__button-hover"
+                data-sb-pseudo-styles="hover"
                 {...props}
               />
               <IconButton
                 reversed={isReversed}
-                classNameOverride="story__button-active"
+                data-sb-pseudo-styles="active"
                 {...props}
               />
               <IconButton
                 reversed={isReversed}
-                classNameOverride="story__button-focus"
+                data-sb-pseudo-styles="focus"
                 {...props}
               />
               <IconButton reversed={isReversed} {...props} disabled />
@@ -110,6 +111,14 @@ const StickerSheetTemplate: StickerSheetStory = {
       </StickerSheet>
     )
   },
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      active: '[data-sb-pseudo-styles="active"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {
@@ -120,12 +129,18 @@ export const StickerSheetDefault: StickerSheetStory = {
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    backgrounds: { default: "Purple 700" },
+  },
   args: { isReversed: true },
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
-  parameters: { textDirection: "rtl" },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    textDirection: "rtl",
+  },
 }
diff --git a/packages/components/src/Button/PaginationLink/PaginationLink.module.scss b/packages/components/src/Button/PaginationLink/PaginationLink.module.scss
@@ -13,7 +13,7 @@
   border-radius: 50%;
 
   &:not(:disabled) {
-    #{$selectors--button-focus} {
+    &:focus-visible {
       &::after {
         border-radius: 50%;
       }
@@ -68,7 +68,7 @@
   );
 
   &:not(:disabled) {
-    #{$selectors--button-active} {
+    &:active {
       transform: unset;
     }
   }

diff --git a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx b/packages/components/src/Button/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx
@@ -38,30 +38,43 @@ const PAGINATION_LINK_PROPS: Array<{
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Base", "Hover", "Active", "Focus"]} />
+      <StickerSheet.Header
+        headings={["Base", "Hover", "Active", "Focus"]}
+        hasVerticalHeadings
+        verticalHeadingsWidth="10rem"
+      />
       <StickerSheet.Body>
         {PAGINATION_LINK_PROPS.map(({ title, props }) => (
           <StickerSheet.Row key={title} rowTitle={title}>
+            <PaginationLink {...props} reversed={isReversed} />
             <PaginationLink
               {...props}
               reversed={isReversed}
-              classNameOverride="story__button-hover"
+              data-sb-pseudo-styles="hover"
             />
             <PaginationLink
               {...props}
               reversed={isReversed}
-              classNameOverride="story__button-active"
+              data-sb-pseudo-styles="active"
             />
             <PaginationLink
               {...props}
               reversed={isReversed}
-              classNameOverride="story__button-focus"
+              data-sb-pseudo-styles="focus"
             />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>
     </StickerSheet>
   ),
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      active: '[data-sb-pseudo-styles="active"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {
@@ -72,12 +85,18 @@ export const StickerSheetDefault: StickerSheetStory = {
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    backgrounds: { default: "Purple 700" },
+  },
   args: { isReversed: true },
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
-  parameters: { textDirection: "rtl" },
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    textDirection: "rtl",
+  },
 }
diff --git a/packages/components/src/Button/utils/_mixins.scss b/packages/components/src/Button/utils/_mixins.scss
@@ -3,9 +3,9 @@
   $border-color: undefined
 ) {
   &:not(:disabled) {
-    #{$selectors--button-hover},
-    #{$selectors--button-active},
-    #{$selectors--button-focus} {
+    &:hover,
+    &:active,
+    &:focus-visible {
       @if ($background-color != undefined) {
         background-color: $background-color;
       }

diff --git a/packages/components/src/Button/utils/_variables.scss b/packages/components/src/Button/utils/_variables.scss
@@ -12,13 +12,3 @@ $button-vertical-padding--small: calc(
 
 // Elements
 $className--content: ".content";
-
-// Classnames to simulate pseudo states in storybook
-$story-className--button-hover: ":global(.story__button-hover)";
-$story-className--button-active: ":global(.story__button-active)";
-$story-className--button-focus: ":global(.story__button-focus)";
-
-// Combined pseudo state classes
-$selectors--button-hover: "&:hover, &#{$story-className--button-hover}";
-$selectors--button-active: "&:active, &#{$story-className--button-active}";
-$selectors--button-focus: "&:focus-visible, &#{$story-className--button-focus}";