chore(menu): move to stable (#13678)

* chore(menu): update copyright banners * chore(menu): remove unstable__ prefix from exports * chore(menu): update copyright banners * chore(menu): move to stable stories * test(overflow-menu-v2): add vrt and avt * fix(menu-item): move default prop function out * docs(overflow-menu-v2): add mdx * fix(combo-button): sync tooltipAlignment prop naming * feat(overflow-menu-v2): add props.label and props.tooltipAlignment * fix(overflow-menu-v2): fix a11y violation with aria-owns * refactor(overflowmenu): expose next overflowmenu under feature flag * fix(overflowmenu): add back explicit displayName * fix: add aria-controls, move aria-owns to parent container * fix(menu): vertically center-align nesting caret * ci: remove aria_child_tabbable from testing denylists * test: re-add aria_child_tabbable to AC denylist --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 6, 2023 · 7a5a989 · 7a5a989
1 parent e2f4eb9
commit 7a5a989
Show file tree

Hide file tree

Showing 39 changed files with 1,135 additions and 916 deletions.
diff --git a/e2e/components/ComboButton/ComboButton-test.e2e.js b/e2e/components/ComboButton/ComboButton-test.e2e.js
@@ -17,7 +17,7 @@ test.describe('ComboButton', () => {
       test('combo-button @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'ComboButton',
-          id: 'experimental-unstable-combobutton--default',
+          id: 'components-combobutton--default',
           theme,
         });
       });
@@ -27,7 +27,7 @@ test.describe('ComboButton', () => {
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'ComboButton',
-      id: 'experimental-unstable-combobutton--default',
+      id: 'components-combobutton--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/Menu/Menu-test.e2e.js b/e2e/components/Menu/Menu-test.e2e.js
@@ -17,7 +17,7 @@ test.describe('Menu', () => {
       test('menu @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Menu',
-          id: 'experimental-unstable-menu--playground',
+          id: 'components-menu--playground',
           theme,
         });
       });
@@ -27,7 +27,7 @@ test.describe('Menu', () => {
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
-      id: 'experimental-unstable-menu--playground',
+      id: 'components-menu--playground',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/MenuButton/MenuButton-test.e2e.js b/e2e/components/MenuButton/MenuButton-test.e2e.js
@@ -17,7 +17,7 @@ test.describe('MenuButton', () => {
       test('menu-button @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'MenuButton',
-          id: 'experimental-unstable-menubutton--default',
+          id: 'components-menubutton--default',
           theme,
         });
       });
@@ -27,7 +27,7 @@ test.describe('MenuButton', () => {
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'MenuButton',
-      id: 'experimental-unstable-menubutton--default',
+      id: 'components-menubutton--default',
       globals: {
         theme: 'white',
       },

diff --git a/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js b/e2e/components/OverflowMenu/OverflowMenu-test.e2e.js
@@ -29,6 +29,22 @@ test.describe('OverflowMenu', () => {
           theme,
         });
       });
+
+      test('feature flags default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'OverflowMenu',
+          id: 'experimental-feature-flags-overflowmenu--overflow-menu',
+          theme,
+        });
+      });
+
+      test('feature flags render custom icon @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'OverflowMenu',
+          id: 'experimental-feature-flags-overflowmenu--custom-icon',
+          theme,
+        });
+      });
     });
   });
 
@@ -42,4 +58,15 @@ test.describe('OverflowMenu', () => {
     });
     await expect(page).toHaveNoACViolations('OverflowMenu');
   });
+
+  test('feature flag accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'experimental-feature-flags-overflowmenu--overflow-menu',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('OverflowMenu');
+  });
 });
diff --git a/packages/feature-flags/feature-flags.yml b/packages/feature-flags/feature-flags.yml
@@ -30,3 +30,7 @@ feature-flags:
     description: >
       Enable rendering of default icons in the tile components
     enabled: false
+  - name: enable-v12-overflowmenu
+    description: >
+      Enable the use of the v12 OverflowMenu leveraging the Menu subcomponents
+    enabled: false
diff --git a/packages/react/.storybook/templates/Annotation/Annotation.scss b/packages/react/.storybook/templates/Annotation/Annotation.scss
@@ -47,6 +47,10 @@ $types: (
   column-gap: spacing.$spacing-02;
 }
 
+.#{$prefix}--annotation__label > :first-child {
+  flex-shrink: 0;
+}
+
 .#{$prefix}--annotation__label a {
   color: inherit;
   text-decoration: underline;

diff --git a/packages/react/.storybook/templates/WithDeprecationNotice/index.js b/packages/react/.storybook/templates/WithDeprecationNotice/index.js
@@ -16,7 +16,7 @@ function WithDeprecationNotice({ children, text }) {
       type="deprecation-notice"
       text={
         <div>
-          Deprecation notice
+          <strong>Deprecation notice</strong>
           <br />
           {text}
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ function WithDeprecationNotice({ children, text }) { @@
           type="deprecation-notice"
           text={
             <div>
-              Deprecation notice
+              <strong>Deprecation notice</strong>
               <br />
               {text}
             </div>
@@ Expand Down @@