chore(menu): move to stable

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',
       },

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',
       },

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',
       },

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');
+  });
 });

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

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;

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>