chore(OverflowMenu): size prop for v11 (#10928)

* chore(OverflowMenu): size prop for v11 * chore(OverflowMenu): updated test * chore(OverflowMenu): updated test
carbon-design-system · Mar 8, 2022 · 9659ff8 · 9659ff8
1 parent 08c5afc
commit 9659ff8
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2420,7 +2420,7 @@ exports[`DataTable should render 1`] = `
                       aria-expanded={false}
                       aria-haspopup={true}
                       aria-label="Settings"
-                      className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
+                      className="bx--toolbar-action bx--overflow-menu bx--overflow-menu bx--overflow-menu--md"
                       onClick={[Function]}
                       onClose={[Function]}
                       onKeyDown={[Function]}
@@ -3408,7 +3408,7 @@ exports[`DataTable sticky header should render 1`] = `
                       aria-expanded={false}
                       aria-haspopup={true}
                       aria-label="Settings"
-                      className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
+                      className="bx--toolbar-action bx--overflow-menu bx--overflow-menu bx--overflow-menu--md"
                       onClick={[Function]}
                       onClose={[Function]}
                       onKeyDown={[Function]}

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -42,7 +42,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
         aria-expanded={false}
         aria-haspopup={true}
         aria-label="Add"
-        className="custom-class bx--toolbar-action bx--overflow-menu bx--overflow-menu"
+        className="custom-class bx--toolbar-action bx--overflow-menu bx--overflow-menu bx--overflow-menu--md"
         onClick={[Function]}
         onClose={[Function]}
         onKeyDown={[Function]}

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -224,9 +224,10 @@ class OverflowMenu extends Component {
 
     /**
      * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-     * TODO V11: remove `xl` (replaced with lg)
      */
-    size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+    size: FeatureFlags.enabled('enable-v11-release')
+      ? PropTypes.oneOf(['sm', 'md', 'lg'])
+      : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   };
 
   static contextType = PrefixContext;
@@ -479,7 +480,7 @@ class OverflowMenu extends Component {
       innerRef: ref,
       menuOptionsClass,
       light,
-      size,
+      size = 'md',
       ...other
     } = this.props;
 

diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js
@@ -14,19 +14,27 @@ import { Filter16 } from '@carbon/icons-react';
 export default {
   title: 'Components/OverflowMenu',
   component: OverflowMenu,
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    size: 'md',
+  },
   subcomponents: {
     OverflowMenuItem,
   },
-
   parameters: {
     docs: {
       page: mdx,
     },
   },
 };
 
-export const Default = () => (
-  <OverflowMenu>
+export const Default = (args) => (
+  <OverflowMenu {...args}>
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
     <OverflowMenuItem itemText="Rename app" />
@@ -39,8 +47,8 @@ Default.story = {
   name: 'OverflowMenu',
 };
 
-export const RenderCustomIcon = () => (
-  <OverflowMenu renderIcon={Filter16}>
+export const RenderCustomIcon = (args) => (
+  <OverflowMenu renderIcon={Filter16} {...args}>
     <OverflowMenuItem itemText="Filter A" />
     <OverflowMenuItem itemText="Filter B" />
   </OverflowMenu>

diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
@@ -52,8 +52,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu--xl,
   .#{$prefix}--overflow-menu--lg {
     width: rem(48px);
     height: rem(48px);
@@ -174,8 +172,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options,
   .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
@@ -225,9 +221,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl
-    .#{$prefix}--overflow-menu-options__option,
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
     height: rem(48px);