@carbon/styles 1.23.0 → 1.23.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "6234f2b1304e340345fff3935342f80a1e36e08e"
+  "gitHead": "2f5261e26d75787ab906d678fde430dfbd394d14"
 }

package/scss/components/menu/_menu.scss

@@ -10,15 +10,18 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
-@use '../button/tokens' as button;
+@use '../button/tokens' as button-tokens;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/z-index' as *;
+@use '../../utilities/convert' as *;
 
 /// Menu styles
 /// @access public
 /// @group menu
 @mixin menu {
+  // Menu
+
   .#{$prefix}--menu {
     @include box-shadow;
 
@@ -28,6 +31,7 @@
     max-width: 18rem;
     padding: $spacing-02 0;
     background-color: $layer;
+    opacity: 0;
     visibility: hidden;
   }
 
@@ -39,19 +43,27 @@
     }
   }
 
-  .#{$prefix}--menu--invisible {
-    opacity: 0;
-    pointer-events: none;
+  .#{$prefix}--menu:not(.#{$prefix}--menu--open) .#{$prefix}--menu--open {
+    visibility: hidden;
+  }
+
+  .#{$prefix}--menu--shown {
+    opacity: 1;
   }
 
-  .#{$prefix}--menu-option {
-    position: relative;
-    display: list-item;
-    // $size-sm
+  // MenuItem
+
+  .#{$prefix}--menu-item {
+    @include type-style('body-short-01');
+
+    display: grid;
     height: 2rem;
-    background-color: $layer;
+    align-items: center;
     color: $text-primary;
+    column-gap: $spacing-03;
     cursor: pointer;
+    grid-template-columns: 0 1fr max-content;
+    padding-inline: $spacing-05;
     transition: background-color $duration-fast-01 motion(standard, productive);
 
     &:focus {
@@ -59,88 +71,67 @@
     }
   }
 
-  .#{$prefix}--menu-option--active,
-  .#{$prefix}--menu-option:hover {
+  .#{$prefix}--menu-item:hover {
     background-color: $layer-hover;
   }
 
-  .#{$prefix}--menu-option--danger:hover,
-  .#{$prefix}--menu-option--danger:focus {
-    background-color: button.$button-danger-primary;
-    color: $text-on-color;
-  }
+  $supported-sizes: (
+    'xs': 1.5rem,
+    'sm': 2rem,
+    'md': 2.5rem,
+    'lg': 3rem,
+  );
 
-  .#{$prefix}--menu-option > .#{$prefix}--menu {
-    margin-top: calc(#{$spacing-02} * -1);
+  @each $size, $value in $supported-sizes {
+    .#{$prefix}--menu--#{$size} .#{$prefix}--menu-item {
+      height: $value;
+    }
   }
 
-  .#{$prefix}--menu-option__content {
+  .#{$prefix}--menu-item__icon {
     display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 $spacing-05;
   }
 
-  .#{$prefix}--menu-option__content--disabled {
-    background-color: $layer;
-    color: $text-disabled;
-    cursor: not-allowed;
+  .#{$prefix}--menu-item__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__label,
-  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__info,
-  .#{$prefix}--menu-option__content--disabled .#{$prefix}--menu-option__icon {
-    color: $text-disabled;
+  .#{$prefix}--menu--with-icons > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item {
+    grid-template-columns: 1rem 1fr max-content;
   }
 
-  .#{$prefix}--menu-option__content--indented .#{$prefix}--menu-option__label {
-    margin-left: $spacing-05;
+  .#{$prefix}--menu-item--disabled {
+    color: $text-disabled;
+    cursor: not-allowed;
   }
 
-  .#{$prefix}--menu-option__label {
-    @include type-style('body-compact-01');
-
-    overflow: hidden;
-    flex-grow: 1;
-    // add top/bottom padding to make sure letters are not cut off by hidden overflow
-    padding: $spacing-02 0;
-    text-align: start;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .#{$prefix}--menu-item--disabled:hover {
+    background-color: $layer;
   }
 
-  .#{$prefix}--menu-option__info {
-    display: inline-flex;
-    margin-left: $spacing-05;
+  .#{$prefix}--menu-item--danger:focus,
+  .#{$prefix}--menu-item--danger:hover {
+    background-color: button-tokens.$button-danger-primary;
+    color: $text-on-color;
   }
 
-  .#{$prefix}--menu-option__icon {
-    display: flex;
-    width: 1rem;
-    height: 1rem;
-    align-items: center;
-    margin-right: $spacing-03;
-  }
+  // MenuItemDivider
 
-  .#{$prefix}--menu-divider {
-    display: list-item;
+  .#{$prefix}--menu-item-divider {
+    display: block;
     width: 100%;
-    height: 1px;
-    margin: $spacing-02 0;
+    height: rem(1px);
     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;
-    }
+    margin-block: $spacing-02;
   }
 }