@carbon/ibm-products 2.1.0 → 2.1.1

package/scss/components/ButtonMenu/_button-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,10 @@
 
 // Standard imports.
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/type';
 
 // TODO: @use(s) of Carbon settings and component styles and other
 // related component styles used by ButtonMenu
@@ -17,9 +20,37 @@ $block-class: #{c4p-settings.$pkg-prefix}--button-menu;
 
 .#{$block-class} {
   min-width: 160px;
+  &.#{$block-class}__wrapper--primary,
+  &.#{$block-class}__wrapper--primary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: $button-primary;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--primary:hover {
+    background-color: $button-primary-hover;
+  }
+
+  &.#{$block-class}__wrapper--tertiary,
+  &.#{$block-class}__wrapper--tertiary.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: $button-tertiary;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--tertiary:hover {
+    background-color: $button-tertiary-hover;
+  }
+
+  &.#{$block-class}__wrapper--ghost,
+  &.#{$block-class}__wrapper--ghost.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+    background-color: transparent;
+  }
+  &.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__wrapper--ghost:hover {
+    background-color: $layer-hover;
+  }
 
   .#{$block-class}__trigger {
+    @include type.type-style('body-compact-01');
+
+    display: flex;
     width: 100%;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 $spacing-05;
   }
 }

package/scss/components/Datagrid/_datagrid.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -22,6 +22,7 @@
 
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by Datagrid
+@use '../ButtonMenu';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
@@ -33,7 +34,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     display: none;
   }
 
-  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
+    > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
     left: $spacing-01;
     width: 112px;
   }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -114,3 +114,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   margin-right: $spacing-03;
   background-color: $field-01;
 }
+
+.#{c4p-settings.$carbon-prefix}--body--with-modal-open {
+  .#{$block-class}__mobile-toolbar-modal.#{c4p-settings.$carbon-prefix}--modal {
+    top: -$spacing-07;
+    left: -$spacing-07;
+    width: 100vw;
+  }
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -582,12 +581,6 @@
   width: 100%;
 }
 
-.#{c4p-settings.$carbon-prefix}--body--with-modal-open
-  .#{$block-class}__grid-container {
-  overflow: hidden;
-  height: 100vh;
-}
-
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
   width: 100%;
 }
@@ -632,3 +625,9 @@
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
   background-color: $layer-accent;
 }
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$pkg-prefix}--button-menu {
+  padding: 0;
+}

package/scss/components/PageHeader/_page-header.scss

@@ -29,7 +29,6 @@ $block-class: #{$pkg-prefix}--page-header;
 $breadcrumb-block-class: #{$pkg-prefix}--breadcrumb-with-overflow;
 
 $raised-z-index: 99;
-/* stylelint-disable-next-line function-no-unknown */
 $z-index-header-minus: utilities.z('header') - 1;
 
 $left-section-std-width: 60%;

package/scss/components/SidePanel/_side-panel.scss

@@ -64,7 +64,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('modal');
   top: $spacing-09;
   height: calc(100% - 3rem);
@@ -441,7 +440,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class}__overlay {
   position: fixed;
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('overlay');
   width: 100%;
   height: 100%;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -30,7 +30,6 @@ $motion-duration: $duration-moderate-02;
 @include block-wrap($block-class) {
   &.#{$block-class} {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') + 1;
     align-items: flex-end;
     color: $text-primary;
@@ -44,7 +43,6 @@ $motion-duration: $duration-moderate-02;
 
   &.is-visible {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal');
     align-items: flex-end;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
@@ -58,7 +56,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--stacked-1-of-2 {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') - 1;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.33);
@@ -66,7 +63,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--stacked-1-of-3 {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') - 2;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.11);
@@ -74,7 +70,6 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--stacked-2-of-3 {
     // Need to disable stylelint until dart sass namespace support is added
-    /* stylelint-disable-next-line function-no-unknown */
     z-index: utilities.z('modal') - 1;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.25);