feat(menu): add support for different sizes (#9210)

* feat(menu): add support for different sizes * fix: update react public api snapshot
carbon-design-system · Jul 19, 2021 · 263d0d9 · 263d0d9
1 parent 2a75284
commit 263d0d9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 11 deletions.
diff --git a/packages/components/src/components/menu/_menu.scss b/packages/components/src/components/menu/_menu.scss
@@ -6,6 +6,7 @@
 //
 
 @import '../../globals/scss/vars';
+@import '../../globals/scss/vendor/@carbon/layout/scss/generated/size';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/helper-mixins';
 
@@ -39,7 +40,7 @@
 
   .#{$prefix}--menu-option {
     position: relative;
-    height: $spacing-07;
+    height: $size-sm;
     background-color: $layer;
     color: $text-primary;
     cursor: pointer;
@@ -120,6 +121,17 @@
     margin: $spacing-02 0;
     background-color: $border-subtle;
   }
+
+  $supported-sizes: (
+    'md': $size-md,
+    'lg': $size-lg,
+  );
+
+  @each $size, $value in $supported-sizes {
+    .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option {
+      height: $value;
+    }
+  }
 }
 
 @include exports('menu') {

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7730,6 +7730,16 @@ Map {
       "open": Object {
         "type": "bool",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "x": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/Menu/Menu.js b/packages/react/src/components/Menu/Menu.js
@@ -33,13 +33,15 @@ import MenuSelectableItem from './MenuSelectableItem';
 const { prefix } = settings;
 
 const margin = 16; // distance to keep to body edges, in px
+const defaultSize = 'sm';
 
 const Menu = function Menu({
   autoclose = true,
   children,
   id,
   level = 1,
   open,
+  size = defaultSize,
   x = 0,
   y = 0,
   onClose = () => {},
@@ -263,12 +265,16 @@ const Menu = function Menu({
     }
   });
 
-  const classes = classnames(`${prefix}--menu`, {
-    [`${prefix}--menu--open`]: open,
-    [`${prefix}--menu--invisible`]:
-      open && position[0] === 0 && position[1] === 0,
-    [`${prefix}--menu--root`]: isRootMenu,
-  });
+  const classes = classnames(
+    `${prefix}--menu`,
+    {
+      [`${prefix}--menu--open`]: open,
+      [`${prefix}--menu--invisible`]:
+        open && position[0] === 0 && position[1] === 0,
+      [`${prefix}--menu--root`]: isRootMenu,
+    },
+    size !== defaultSize && `${prefix}--menu--${size}`
+  );
 
   const ulAttributes = {
     id,
@@ -355,6 +361,11 @@ Menu.propTypes = {
    */
   open: PropTypes.bool,
 
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
   /**
    * Specify the x position where this menu is rendered
    */

diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu.js
@@ -15,9 +15,12 @@ import Menu from '../../Menu';
 
 const { prefix } = settings;
 
+const defaultSize = 'md';
+
 function OverflowMenu({
   children,
   renderIcon: IconElement = OverflowMenuVertical16,
+  size = defaultSize,
   ...rest
 }) {
   const id = useId('overflowmenu');
@@ -67,9 +70,13 @@ function OverflowMenu({
 
   const containerClasses = classNames(`${prefix}--overflow-menu__container`);
 
-  const triggerClasses = classNames(`${prefix}--overflow-menu`, {
-    [`${prefix}--overflow-menu--open`]: open,
-  });
+  const triggerClasses = classNames(
+    `${prefix}--overflow-menu`,
+    {
+      [`${prefix}--overflow-menu--open`]: open,
+    },
+    size !== defaultSize && `${prefix}--overflow-menu--${size}`
+  );
 
   return (
     <div className={containerClasses} aria-owns={id}>
@@ -86,6 +93,7 @@ function OverflowMenu({
       </button>
       <Menu
         id={id}
+        size={size}
         open={open}
         onClose={closeMenu}
         x={position[0]}
@@ -106,6 +114,11 @@ OverflowMenu.propTypes = {
    * Function called to override icon rendering.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 };
 
 export default OverflowMenu;
diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss
@@ -45,7 +45,8 @@
 
   .#{$prefix}--menu-option {
     position: relative;
-    height: $spacing-07;
+    // $size-sm
+    height: 2rem;
     background-color: $layer;
     color: $text-primary;
     cursor: pointer;
@@ -126,4 +127,17 @@
     margin: $spacing-02 0;
     background-color: $border-subtle;
   }
+
+  $supported-sizes: (
+    // $size-md
+    'md': 2.5rem,
+    // $size-lg
+    'lg': 3rem
+  );
+
+  @each $size, $value in $supported-sizes {
+    .#{$prefix}--menu--#{$size} .#{$prefix}--menu-option {
+      height: $value;
+    }
+  }
 }