@carbon/styles 1.77.0-rc.0 → 1.77.0

package/scss/__tests__/type-test.js

@@ -130,8 +130,8 @@ describe('@carbon/styles/scss/type', () => {
     const { stylesheet } = css.parse(result.css.toString());
     const [rule] = stylesheet.rules;
     for (const declaration of rule.declarations) {
-      expect(declaration.property).toEqual(
-        expect.stringContaining('--custom-')
+      expect(declaration.value).toEqual(
+        expect.stringContaining('var(--custom-')
       );
     }
   });

package/scss/_config.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -18,11 +18,11 @@ $css--body: true !default;
 /// @group config
 $css--font-face: true !default;
 
-/// If true, emit the custom type properties in in :root
+/// If true, emit the custom type properties in :root
 /// @access public
 /// @type Bool
 /// @group config
-$css--emit-type-custom-props: true !default;
+$css--emit-type-custom-props: false !default;
 
 /// If true, include reset CSS
 /// @access public

package/scss/components/menu/_menu.scss

@@ -98,14 +98,6 @@
     }
   }
 
-  .#{$prefix}--menu-item__icon {
-    display: none;
-  }
-
-  .#{$prefix}--menu--with-icons .#{$prefix}--menu-item__icon {
-    display: flex;
-  }
-
   .#{$prefix}--menu-item__label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -121,18 +113,74 @@
     @include component-reset.reset;
   }
 
+  .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu-item__selection-icon {
+    display: none;
+  }
+
   .#{$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,
+  .#{$prefix}--menu--with-selectable-items > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-selectable-items
     > .#{$prefix}--menu-item-radio-group
     > ul
     > .#{$prefix}--menu-item {
     grid-template-columns: 1rem 1fr max-content;
   }
 
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-icons
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon,
+  .#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item
+    > .#{$prefix}--menu-item__selection-icon {
+    display: flex;
+  }
+
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-group
+    > ul
+    > .#{$prefix}--menu-item,
+  .#{$prefix}--menu--with-icons.#{$prefix}--menu--with-selectable-items
+    > .#{$prefix}--menu-item-radio-group
+    > ul
+    > .#{$prefix}--menu-item {
+    grid-template-columns: 1rem 1rem 1fr max-content;
+  }
+
   .#{$prefix}--menu-item--disabled {
     color: $text-disabled;
     cursor: not-allowed;

package/scss/components/menu-button/_menu-button.scss

@@ -30,19 +30,4 @@
   .#{$prefix}--menu-button__trigger--open svg {
     transform: rotate(180deg);
   }
-
-  // Menu alignment classes
-  $popover-offset: custom-property.get-var('popover-offset', 3rem);
-
-  .#{$prefix}--menu-button__top {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
-
-  .#{$prefix}--menu-button__top-start {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
-
-  .#{$prefix}--menu-button__top-end {
-    transform: translate(0, calc(-100% - $popover-offset));
-  }
 }