Reconfigure UI Shell (#14127)

* fix: update uishell stories * test: fixed avt test * chore: renamed HeaderBase to Header * fix: added 26May2023 on achecker
carbon-design-system · Jul 6, 2023 · d48b98c · d48b98c
1 parent 0fb4836
commit d48b98c
Show file tree

Hide file tree

Showing 7 changed files with 1,205 additions and 1,151 deletions.
diff --git a/e2e/components/UIShell/UIShell-test.avt.e2e.js b/e2e/components/UIShell/UIShell-test.avt.e2e.js
@@ -11,10 +11,10 @@ const { expect, test } = require('@playwright/test');
 const { visitStory } = require('../../test-utils/storybook');
 
 test.describe('UIShell @avt', () => {
-  test('header base', async ({ page }) => {
+  test('header', async ({ page }) => {
     await visitStory(page, {
       component: 'UIShell',
-      id: 'components-ui-shell--header-base',
+      id: 'components-ui-shell-header--header-w-navigation',
       globals: {
         theme: 'white',
       },
@@ -25,36 +25,20 @@ test.describe('UIShell @avt', () => {
   test('sidenav rail w/header', async ({ page }) => {
     await visitStory(page, {
       component: 'UIShell',
-      id: 'components-ui-shell--side-nav-rail-w-header',
+      id: 'components-ui-shell-sidenav--side-nav-rail-w-header',
       globals: {
         theme: 'white',
       },
     });
     await expect(page).toHaveNoACViolations('UIShell-side-nav-rail-w-header');
   });
 
-  test('sidenav rail w/header - expanded state', async ({ page }) => {
-    await visitStory(page, {
-      component: 'UIShell',
-      id: 'components-ui-shell--side-nav-rail-w-header',
-      globals: {
-        theme: 'white',
-      },
-    });
-
-    // open the menu
-    page.getByRole('button', { name: 'Open menu' }).click();
-    await expect(page).toHaveNoACViolations(
-      'UIShell-side-nav-rail-w-header--expanded'
-    );
-  });
-
   test('sidenav rail w/header - expanded state open category sidenav', async ({
     page,
   }) => {
     await visitStory(page, {
       component: 'UIShell',
-      id: 'components-ui-shell--side-nav-rail-w-header',
+      id: 'components-ui-shell-sidenav--side-nav-rail-w-header',
       globals: {
         theme: 'white',
       },
@@ -75,7 +59,7 @@ test.describe('UIShell @avt', () => {
   }) => {
     await visitStory(page, {
       component: 'UIShell',
-      id: 'components-ui-shell--side-nav-rail-w-header',
+      id: 'components-ui-shell-sidenav--side-nav-rail-w-header',
       globals: {
         theme: 'white',
       },
@@ -94,7 +78,7 @@ test.describe('UIShell @avt', () => {
   test('sidenav rail w/header - keyboard nav', async ({ page }) => {
     await visitStory(page, {
       component: 'UIShell',
-      id: 'components-ui-shell--side-nav-rail-w-header',
+      id: 'components-ui-shell-sidenav--side-nav-rail-w-header',
       globals: {
         theme: 'white',
       },
@@ -105,7 +89,7 @@ test.describe('UIShell @avt', () => {
       page.getByRole('link', { name: 'Skip to main content' })
     ).toBeFocused();
     // tab through the links in the header, landing on the link with sublinks
-    await page.keyboard.press('Tab');
+    // await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');

diff --git a/e2e/components/UIShell/UIShell-test.e2e.js b/e2e/components/UIShell/UIShell-test.e2e.js
@@ -14,76 +14,76 @@ const { snapshotStory } = require('../../test-utils/storybook');
 test.describe('UIShell', () => {
   themes.forEach((theme) => {
     test.describe(theme, () => {
-      test('header base @vrt', async ({ page }) => {
+      test('header @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base',
+          id: 'components-ui-shell--header',
           theme,
         });
       });
 
-      test('header base w/ navigation @vrt', async ({ page }) => {
+      test('header w/ navigation @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-navigation',
+          id: 'components-ui-shell--header-w-navigation',
           theme,
         });
       });
 
-      test('header base w/ actions @vrt', async ({ page }) => {
+      test('header w/ actions @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-actions',
+          id: 'components-ui-shell--header-w-actions',
           theme,
         });
       });
 
-      test('header base w/ skiptocontent @vrt', async ({ page }) => {
+      test('header w/ skiptocontent @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-skip-to-content',
+          id: 'components-ui-shell--header-w-skip-to-content',
           theme,
         });
       });
 
-      test('header base w/ navigation and actions @vrt', async ({ page }) => {
+      test('header w/ navigation and actions @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-navigation-and-actions',
+          id: 'components-ui-shell--header-w-navigation-and-actions',
           theme,
         });
       });
 
-      test('header base w/ navigation, actions and sidenav @vrt', async ({
+      test('header w/ navigation, actions and sidenav @vrt', async ({
         page,
       }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-navigation-actions-and-side-nav',
+          id: 'components-ui-shell--header-w-navigation-actions-and-side-nav',
           theme,
         });
       });
 
-      test('header base w/ sidenav @vrt', async ({ page }) => {
+      test('header w/ sidenav @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-side-nav',
+          id: 'components-ui-shell--header-w-side-nav',
           theme,
         });
       });
 
-      test('header base w/ actions and right panel @vrt', async ({ page }) => {
+      test('header w/ actions and right panel @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-actions-and-right-panel',
+          id: 'components-ui-shell--header-w-actions-and-right-panel',
           theme,
         });
       });
 
-      test('header base w/ actions and switcher @vrt', async ({ page }) => {
+      test('header w/ actions and switcher @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id: 'components-ui-shell--header-base-w-actions-and-switcher',
+          id: 'components-ui-shell--header-w-actions-and-switcher',
           theme,
         });
       });

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3935,6 +3935,9 @@ Map {
       "isActive": Object {
         "type": "bool",
       },
+      "isCollapsible": Object {
+        "type": "bool",
+      },
       "onClick": Object {
         "type": "func",
       },

diff --git a/packages/react/src/components/UIShell/HeaderMenuButton.tsx b/packages/react/src/components/UIShell/HeaderMenuButton.tsx
@@ -82,6 +82,11 @@ HeaderMenuButton.propTypes = {
    */
   isActive: PropTypes.bool,
 
+  /**
+   * Specify whether the menu button is collapsible.
+   */
+  isCollapsible: PropTypes.bool,
+
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event