@carbon/ibm-products 2.1.2 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.22.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.37",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -64,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.2.6",
     "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.23",
+    "jest-config-ibm-cloud-cognitive": "^0.24.24",
     "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
@@ -85,14 +85,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.14.0",
-    "@carbon/layout": "^11.14.0",
-    "@carbon/motion": "^11.11.0",
-    "@carbon/react": "~1.30.0",
-    "@carbon/themes": "^11.19.0",
-    "@carbon/type": "^11.18.0",
+    "@carbon/grid": "^11.15.0",
+    "@carbon/layout": "^11.15.0",
+    "@carbon/motion": "^11.12.0",
+    "@carbon/react": "~1.31.3",
+    "@carbon/themes": "^11.20.0",
+    "@carbon/type": "^11.19.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "32a25a322d0213e135506f646b0ad5721e67d813"
+  "gitHead": "36a061543213748633227ce75ea1441e1edaca7d"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -77,10 +77,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     align-items: center;
   }
 
-  &-form-control-wrapper--radio {
-    cursor: pointer;
-  }
-
   &-form-control-label-wrapper {
     display: flex;
     margin-left: $spacing-05;

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -92,5 +92,6 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
 
 .#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
   // Need to disable stylelint until dart sass namespace support is added
+  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('header');
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2023
+// Copyright IBM Corp. 2021, 2021
 //
 // 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,10 +7,7 @@
 
 // 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
@@ -20,37 +17,9 @@ $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/DataSpreadsheet/_storybook-styles.scss

@@ -4,9 +4,3 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
-$story-anchor: 'data-spreadsheet';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
-  overflow: auto;
-  width: 100%;
-}

package/scss/components/Datagrid/_datagrid.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2023
+// Copyright IBM Corp. 2022, 2022
 //
 // 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,7 +22,6 @@
 
 // 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;
@@ -34,8 +33,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     display: none;
   }
 
-  .#{c4p-settings.$carbon-prefix}--overflow-menu-options
-    > .#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
+  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
     left: $spacing-01;
     width: 112px;
   }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2023
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -114,17 +114,3 @@ $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;
-  }
-}
-
-$story-anchor: 'datagrid';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
-  overflow: auto;
-  width: 100%;
-}

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

@@ -1,9 +1,10 @@
-//
-// 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.
-//
+/*
+* 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.
+*/
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
@@ -581,6 +582,12 @@
   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%;
 }
@@ -625,9 +632,3 @@
 .#{$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/Datagrid/styles/addons/_FilterFlyout.scss

@@ -75,13 +75,6 @@ $action-set-height: rem(64px);
 }
 
 // Carbon overrides
-.#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
-  display: flex;
-  width: 3rem;
-  height: 3rem;
-  justify-content: center;
-}
-
 .#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
   position: relative;
   background-color: $layer-02;

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -124,10 +124,6 @@
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
-  display: flex;
-  width: 3rem;
-  height: 3rem;
-  justify-content: center;
   border-right: 1px solid $layer-accent-01;
   border-bottom: none;
 }

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

@@ -1,20 +1,6 @@
-// Copyright IBM Corp. 2023, 2023
+//
+// Copyright IBM Corp. 2021, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-$story-anchor: 'http-errors';
-div[id*='#{$story-anchor}'] .docs-story {
-  min-height: 50vh;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  transform: translateZ(0);
-}
-
-div[id*='#{$story-anchor}'] .docs-story > div:first-child {
-  overflow: auto;
-  width: 100%;
-}
-
-div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
-  min-height: 50vh;
-}

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -54,7 +54,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
   top: $spacing-09;
   right: 0;
   overflow: auto;
-  min-width: 20rem;
+  min-width: 22.75rem;
   max-width: 22.75rem;
   min-height: 38.5rem;
   max-height: 38.5rem;

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

@@ -9,3 +9,7 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
+
+.#{$storybook-block-class}--header {
+  @include theme(themes.$g100);
+}

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

@@ -29,6 +29,7 @@ $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/PageHeader/_storybook-styles.scss

@@ -15,6 +15,15 @@
 
 $story-class: 'page-header-stories';
 
+// cspell:disable-next-line
+.sbdocs .#{$story-class}__viewport {
+  max-height: 500px;
+  background-color: $background;
+  box-shadow: 0 0 4px 1px $layer-accent-01;
+  color: $text-primary;
+  overflow-y: auto;
+}
+
 .#{$story-class}__content-switcher {
   justify-content: flex-start;
 }
@@ -57,52 +66,15 @@ $story-class: 'page-header-stories';
   flex-direction: column;
 }
 
-$story-anchor: 'page-header';
-div[id*='#{$story-anchor}'] .docs-story {
-  --story-height: 50vh;
-
-  min-height: var(--story-height);
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  transform: translateZ(0);
-}
-
-div[id*='#{$story-anchor}'] .docs-story > div:first-child {
-  overflow: hidden;
-  width: 100%;
-}
-
-div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
-  min-height: 50vh;
-}
-
-.#{$story-class}__viewport {
+.#{$story-class}__app--whole-page-scroll {
   overflow: hidden;
-  height: 100vh;
-}
-
-.#{$story-class}__viewport--scroll {
-  overflow-y: auto;
 }
 
-.#{$story-class}__viewport .#{$story-class}__content-container {
+.#{$story-class}__content-container {
   height: 100%;
-  overflow-y: auto;
-}
-
-.#{$story-class}__viewport
-  .#{$story-class}__content-container--with-global-header {
-  height: calc(100% - #{$spacing-09});
-  margin-top: $spacing-09;
+  padding: 0;
 }
 
-.#{$story-class}__viewport--scroll .#{$story-class}__content-container {
-  overflow-y: initial;
-}
-
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  max-height: 50vh;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $layer-accent-01;
-  color: $text-primary;
+.#{$story-class}__app--whole-page-scroll .#{$story-class}__content-container {
+  overflow-y: auto;
 }

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

@@ -64,6 +64,7 @@ $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);
@@ -440,6 +441,7 @@ $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,6 +30,7 @@ $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;
@@ -43,6 +44,7 @@ $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
@@ -56,6 +58,7 @@ $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);
@@ -63,6 +66,7 @@ $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);
@@ -70,6 +74,7 @@ $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);
@@ -146,14 +151,12 @@ $motion-duration: $duration-moderate-02;
     padding: $spacing-06 $spacing-07;
     border-bottom: 1px solid $border-subtle-01;
     margin: 0;
-    background-color: $layer;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header {
     padding: $spacing-05;
     border-bottom: 1px solid $border-subtle-01;
     margin: 0;
-    background-color: $layer;
   }
 
   .#{$block-class}__header-content {
@@ -267,15 +270,11 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__main {
     display: flex;
     flex-direction: row;
-    background-color: $background;
+    background-color: $layer;
     grid-column: 1 / -1;
     grid-row: 1 / -1;
   }
 
-  &.#{$block-class}--narrow .#{$block-class}__main {
-    background-color: $layer;
-  }
-
   .#{$block-class}__main .#{$block-class}__influencer {
     border-right: none;
     border-left: 1px solid $border-subtle-01;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2023
+// Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -34,18 +34,3 @@ $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
     font-size: 14px;
   }
 }
-
-$story-anchor: 'web-terminal';
-div[id*='#{$story-anchor}'] .docs-story {
-  min-height: 50vh;
-  transform: translateZ(0);
-}
-
-div[id*='#{$story-anchor}'] .docs-story > div:first-child {
-  width: 100%;
-  overflow: hidden;
-}
-
-div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
-  min-height: 50vh;
-}

package/scss/global/styles/_display-box.scss

@@ -22,7 +22,6 @@ $indicator-height: $spacing-04;
   position: relative;
   display: inline-block;
   padding-top: $spacing-05; // space for the indicators
-  margin-top: $spacing-09; // provides space in docs
   color: $text-helper;
 }