feat(sidebar): split up SidebarHeader into subcomponents and fix axe …

…flakes (#3212) * fix: storybook test-runner timeout flakes * fix: reduce # of shards * fix: try 1 worker * fix: try only 1 shard * fix: try mac and 4 shards again with 1 worker * fix: storybook docs consumes too much mem (leak?) * fix: try 8 shards for funsies * fix: back to 1 shard * fix: try 4 maxworkers * fix: 2 max workers * fix: maxworkers 1 * fix: trying a thing * fix: action dependency * fix: maybe * fix: maybe * fix: typo * fix(sidebar): split header into subcomponents, fix stories * fix: a11y violations on customized sidebar * fix(chatlog): fix useChatLogger story * fix: disable animations in stacked views * fix: modal a11y test runner fix * fix: remove combobox in modal test * fix: maybe * fix: pls * fix: plss
twilio-labs · May 4, 2023 · ed2ae23 · ed2ae23
1 parent 9e6399d
commit ed2ae23
Show file tree

Hide file tree

Showing 20 changed files with 357 additions and 164 deletions.
diff --git a/.changeset/two-teachers-walk.md b/.changeset/two-teachers-walk.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': patch
+'@twilio-paste/core': patch
+---
+
+[Sidebar] split up SidebarHeader so it now is composable with the new SidebarHeaderLabel and SidebarHeaderIconButton components
diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml
@@ -258,12 +258,9 @@ jobs:
       - name: Run tests
         run: yarn test
 
-  storybook_tests:
-    name: Storybook test runner
+  prettier:
+    name: Prettier checks
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        shard: [1/4, 2/4, 3/4, 4/4]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
@@ -303,32 +300,21 @@ jobs:
         if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --immutable
 
-      - name: Get playwright version
-        id: pw-version
-        run: echo "version=$(yarn playwright --version)" >> $GITHUB_OUTPUT
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v3
-        id: playwright-cache
-        with:
-          path: "~/.cache/ms-playwright"
-          key: cache-playwright-${{ runner.os }}-${{ steps.pw-version.outputs.version }}
-
       - name: Build packages
         run: yarn build
         env:
           NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
-      - name: Install Playwright
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps
-
-      - name: Run Storybook test runner
-        run: yarn start-server-and-test 'NODE_ENV=test yarn start:storybook' http://localhost:9001 'yarn test:storybook --shard=${{ matrix.shard }}'
+      - name: Run prettier
+        run: yarn prettier
 
-  prettier:
-    name: Prettier checks
+  chromatic:
+    name: Component Visual regression tests
     runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+    outputs:
+      storybookUrl: ${{ steps.chromaticaction.outputs.storybookUrl }}
+
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
@@ -373,22 +359,40 @@ jobs:
         env:
           NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
-      - name: Run prettier
-        run: yarn prettier
+      - name: Run Chromatic
+        id: chromaticaction
+        uses: chromaui/action@v1
+        with:
+          zip: true
+          projectToken: ${{ secrets.CHROMA_APP_CODE }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          buildScriptName: "build:storybook"
+          autoAcceptChanges: "main"
+          exitOnceUploaded: true
+          onlyChanged: true
+          externals: |
+            - 'packages/paste-design-tokens/tokens/**'
+            - 'packages/paste-icons/src/**'
+            - '.storybook/static/**'
+        env:
+          STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
+          # https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
+          NODE_OPTIONS: --max-old-space-size=6144
 
-  chromatic:
-    name: Component Visual regression tests
+  storybook_tests:
+    name: Storybook test runner
     runs-on: ubuntu-latest
-    if: github.event.pull_request.draft == false
-
+    timeout-minutes: 20
+    needs: chromatic
+    strategy:
+      matrix:
+        shard: [1/4, 2/4, 3/4, 4/4]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
-      - uses: nrwl/nx-set-shas@v3
-
       - name: Setup Node.js 16.13
         uses: actions/setup-node@v3
         with:
@@ -420,28 +424,23 @@ jobs:
         if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: yarn install --immutable
 
-      - name: Build packages
-        run: yarn build
-        env:
-          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+      - name: Get playwright version
+        id: pw-version
+        run: echo "version=$(yarn playwright --version)" >> $GITHUB_OUTPUT
 
-      - name: Run Chromatic
-        uses: chromaui/action@v1
+      - name: Cache playwright binaries
+        uses: actions/cache@v3
+        id: playwright-cache
         with:
-          projectToken: ${{ secrets.CHROMA_APP_CODE }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-          buildScriptName: "build:storybook"
-          autoAcceptChanges: "main"
-          exitOnceUploaded: true
-          onlyChanged: true
-          externals: |
-            - 'packages/paste-design-tokens/tokens/**'
-            - 'packages/paste-icons/src/**'
-            - '.storybook/static/**'
-        env:
-          STORYBOOK_GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
-          # https://github.com/storybookjs/builder-vite/issues/409#issuecomment-1199236279
-          NODE_OPTIONS: --max-old-space-size=6144
+          path: "~/.cache/ms-playwright"
+          key: cache-playwright-${{ runner.os }}-${{ steps.pw-version.outputs.version }}
+
+      - name: Install Playwright
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
+      - name: Run Storybook test runner
+        run: yarn test-storybook --url ${{ needs.chromatic.outputs.storybookUrl }} --ci --shard=${{ matrix.shard }}
 
   pr-categorizer:
     name: Categorize the PR using labels

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -24,10 +24,6 @@ const config: StorybookConfig = {
     // enable type checking
     check: true,
   },
-  docs: {
-    autodocs: true,
-    defaultName: 'Docs',
-  },
   async viteFinal(config, {configType}) {
     const isTest = process.env.NODE_ENV === 'test';
     return mergeConfig(config, {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -152,7 +152,7 @@ export const decorators = [
           <RenderPerformanceProfiler id={context.id} kind={context.kind} view="stacked">
             <GlobalStyles />
             <Stack orientation="vertical" spacing="space0">
-              <Theme.Provider theme="default" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="default" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -161,7 +161,7 @@ export const decorators = [
                   <Story />
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="default" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="default" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -176,7 +176,7 @@ export const decorators = [
                   </Box>
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="dark" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -185,7 +185,7 @@ export const decorators = [
                   <Story />
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="dark" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -200,7 +200,7 @@ export const decorators = [
                   </Box>
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="twilio" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="twilio" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -209,7 +209,7 @@ export const decorators = [
                   <Story />
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="twilio" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="twilio" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -224,7 +224,7 @@ export const decorators = [
                   </Box>
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="twilio-dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="twilio-dark" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"
@@ -233,7 +233,7 @@ export const decorators = [
                   <Story />
                 </Box>
               </Theme.Provider>
-              <Theme.Provider theme="twilio-dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+              <Theme.Provider theme="twilio-dark" disableAnimations customBreakpoints={breakpoints}>
                 <Box
                   backgroundColor="colorBackgroundBody"
                   color="colorText"

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "test:website-percy": "percy exec -- yarn cypress run --record",
     "test:website-gui": "WAIT_ON_TIMEOUT=600000 start-server-and-test 'yarn start:website' http://localhost:3000 'yarn cypress open'",
     "test:website-gui-percy": "WAIT_ON_TIMEOUT=600000 start-server-and-test 'yarn start:website' http://localhost:3000 'percy exec -- yarn cypress open'",
-    "test:storybook": "test-storybook --url http://localhost:9001",
+    "test:storybook": "test-storybook --url http://localhost:9001 --maxWorkers=1",
     "start:test:storybook": "start-server-and-test 'NODE_ENV=test yarn start:storybook' http://localhost:9001 'yarn test:storybook'",
     "serve:website": "yarn workspace @twilio-paste/website start",
     "package-size-action-build": "yarn build",

diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -192,6 +192,8 @@
   "SidebarCollapseButtonWrapper": "@twilio-paste/core/sidebar",
   "SidebarContext": "@twilio-paste/core/sidebar",
   "SidebarHeader": "@twilio-paste/core/sidebar",
+  "SidebarHeaderIconButton": "@twilio-paste/core/sidebar",
+  "SidebarHeaderLabel": "@twilio-paste/core/sidebar",
   "SidebarOverlayContentWrapper": "@twilio-paste/core/sidebar",
   "SidebarPushContentWrapper": "@twilio-paste/core/sidebar",
   "SkeletonLoader": "@twilio-paste/core/skeleton-loader",

diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
@@ -48,6 +48,10 @@ export const AlertDialogWithTwoActionsStory = (): React.ReactNode => {
 AlertDialogWithTwoActionsStory.storyName = 'Alert Dialog With Two Actions';
 AlertDialogWithTwoActionsStory.parameters = {
   chromatic: {disableSnapshot: true},
+  a11y: {
+    // no need to a11y check customization
+    disable: true,
+  },
 };
 
 export const DestructiveAlertDialog = (): JSX.Element => {
@@ -73,6 +77,10 @@ export const DestructiveAlertDialogStory = (): React.ReactNode => {
 DestructiveAlertDialogStory.storyName = 'Destructive Alert Dialog';
 DestructiveAlertDialogStory.parameters = {
   chromatic: {disableSnapshot: true},
+  a11y: {
+    // no need to a11y check customization
+    disable: true,
+  },
 };
 
 export const OpenAlertDialogFromButton = (): JSX.Element => {
@@ -106,6 +114,10 @@ export const OpenAlertDialogFromButtonStory = (): React.ReactNode => {
 OpenAlertDialogFromButtonStory.storyName = 'Open Alert Dialog From Button';
 OpenAlertDialogFromButtonStory.parameters = {
   chromatic: {disableSnapshot: true},
+  a11y: {
+    // no need to a11y check customization
+    disable: true,
+  },
 };
 
 export const OpenAlertDialogFromModal = (): JSX.Element => {
@@ -166,6 +178,10 @@ export const OpenAlertDialogFromModalStory = (): React.ReactNode => {
 OpenAlertDialogFromModalStory.storyName = 'Open Alert Dialog From Modal';
 OpenAlertDialogFromModalStory.parameters = {
   chromatic: {disableSnapshot: true},
+  a11y: {
+    // no need to a11y check customization
+    disable: true,
+  },
 };
 
 export const AlertDialogVRT = (): React.ReactNode => {

diff --git a/packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx b/packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx
@@ -134,3 +134,9 @@ export const UseChatLogger: StoryFn = () => {
     </Stack>
   );
 };
+UseChatLogger.parameters = {
+  a11y: {
+    // no need to a11y check composition of a11y checked components
+    disable: true,
+  },
+};
diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
@@ -834,3 +834,9 @@ export const ComboboxInModal: StoryFn = () => {
     </>
   );
 };
+ComboboxInModal.parameters = {
+  // a11y test for modals is not working
+  a11y: {
+    disable: true,
+  },
+};