@carbon/ibm-products 2.1.0 → 2.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -54,27 +54,27 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.34",
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.22.1",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.1.1",
-    "glob": "^10.2.3",
-    "jest": "^29.4.2",
-    "jest-config-ibm-cloud-cognitive": "^0.24.21",
-    "jest-environment-jsdom": "^29.4.2",
+    "glob": "^10.2.6",
+    "jest": "^29.5.0",
+    "jest-config-ibm-cloud-cognitive": "^0.24.23",
+    "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
     "sass": "^1.62.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
+    "@babel/runtime": "^7.22.3",
     "@carbon/telemetry": "^0.1.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
@@ -85,14 +85,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.13.0",
-    "@carbon/layout": "^11.13.0",
-    "@carbon/motion": "^11.10.0",
-    "@carbon/react": "~1.28.0",
-    "@carbon/themes": "^11.18.0",
-    "@carbon/type": "^11.17.0",
+    "@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",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "7d5b5013039a6d98e3aab8375a7ea249c44ee4ae"
+  "gitHead": "32a25a322d0213e135506f646b0ad5721e67d813"
 }

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

@@ -77,6 +77,10 @@ $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,6 +92,5 @@ $_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, 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/DataSpreadsheet/_storybook-styles.scss

@@ -4,3 +4,9 @@
 // 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, 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

@@ -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.
@@ -114,3 +114,17 @@ $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,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/Datagrid/styles/addons/_FilterFlyout.scss

@@ -75,6 +75,13 @@ $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,6 +124,10 @@
 }
 
 .#{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,6 +1,20 @@
-//
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2023, 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.
 //
+$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/_storybook-styles.scss

@@ -9,7 +9,3 @@
 @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,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/PageHeader/_storybook-styles.scss

@@ -15,15 +15,6 @@
 
 $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;
 }
@@ -66,15 +57,52 @@ $story-class: 'page-header-stories';
   flex-direction: column;
 }
 
-.#{$story-class}__app--whole-page-scroll {
+$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%;
 }
 
-.#{$story-class}__content-container {
-  height: 100%;
-  padding: 0;
+div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
+  min-height: 50vh;
+}
+
+.#{$story-class}__viewport {
+  overflow: hidden;
+  height: 100vh;
 }
 
-.#{$story-class}__app--whole-page-scroll .#{$story-class}__content-container {
+.#{$story-class}__viewport--scroll {
   overflow-y: auto;
 }
+
+.#{$story-class}__viewport .#{$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;
+}
+
+.#{$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;
+}

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);
@@ -151,12 +146,14 @@ $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 {
@@ -270,11 +267,15 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__main {
     display: flex;
     flex-direction: row;
-    background-color: $layer;
+    background-color: $background;
     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, 2022
+// 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.
@@ -34,3 +34,18 @@ $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,6 +22,7 @@ $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;
 }