@carbon/ibm-products-styles 2.66.0 → 2.67.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.66.0",
+  "version": "2.67.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -42,9 +42,7 @@
     "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
     "clean": "rimraf css scss",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
-    "test": "jest --colors",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
+    "test": "jest --colors"
   },
   "devDependencies": {
     "chalk": "^4.1.2",
@@ -52,23 +50,22 @@
     "cross-env": "^7.0.3",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.29.0",
+    "jest-config-ibm-cloud-cognitive": "^1.30.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
-    "npm-check-updates": "^18.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
     "sass": "^1.85.1",
     "yargs": "^18.0.0"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.37.0",
-    "@carbon/layout": "^11.35.0",
-    "@carbon/motion": "^11.29.0",
-    "@carbon/themes": "^11.54.0",
-    "@carbon/type": "^11.41.0"
+    "@carbon/grid": "^11.38.0",
+    "@carbon/layout": "^11.36.0",
+    "@carbon/motion": "^11.30.0",
+    "@carbon/themes": "^11.55.0",
+    "@carbon/type": "^11.42.0"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "49c16755842ebdb793878e0389dfcb7ec8ac44a7"
+  "gitHead": "3a78a0b2422b0bca25c4ec2622384d93dba11a5d"
 }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -29,6 +29,7 @@
 $elements-block-class: #{c4p-settings.$pkg-prefix}--coachmark-stack-element;
 $overlay-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay;
 $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
+$style-stack-home: #{c4p-settings.$pkg-prefix}--coachmark-stack;
 
 .#{$elements-block-class} {
   $block: &;
@@ -44,7 +45,7 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &--is-mounted {
     inset-block-end: 0;
     /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
-    transition: $duration-moderate-02 motion(exit, productive);
+    transition: $duration-fast-02 motion(exit, productive);
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -120,3 +121,13 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     white-space: nowrap;
   }
 }
+
+.#{$style-stack-home}--scaled-home {
+  opacity: 0.8;
+  transform: scale(0.9);
+}
+
+.#{$style-stack-home}--unscaled-home {
+  opacity: 1;
+  transform: none;
+}

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -44,7 +44,7 @@ $one-grid-column: calc(100% / 16);
   &__carousel {
     block-size: 100%;
     .#{$carousel-item} {
-      flex: 0 0 100% !important;
+      flex: 0 0 100%;
       scroll-snap-align: start;
     }
   }
@@ -54,6 +54,10 @@ $one-grid-column: calc(100% / 16);
     margin: 0 !important;
   }
 
+  &--content {
+    block-size: 100%;
+  }
+
   // HEADER
   &--internal-header {
     position: relative;
@@ -102,6 +106,7 @@ $one-grid-column: calc(100% / 16);
   // FOOTER
   &--footer {
     display: flex;
+    box-sizing: initial;
     flex-direction: row;
     justify-content: flex-end;
     background: $background;
@@ -119,7 +124,7 @@ $one-grid-column: calc(100% / 16);
     #{$block}--skip-btn {
       flex-grow: 1 !important;
       max-inline-size: none;
-      padding-inline-start: $spacing-07 !important;
+      padding-inline-start: $spacing-07;
     }
     .#{c4p-settings.$carbon-prefix}--inline-loading {
       position: absolute;
@@ -149,14 +154,5 @@ $one-grid-column: calc(100% / 16);
       block-size: 100vh;
       max-inline-size: 100vw;
     }
-
-    #{$block}--footer {
-      #{$block}--skip-btn {
-        padding-inline-start: $spacing-08 !important;
-        @include breakpoint-down(xlg) {
-          padding-inline-start: $spacing-07 !important;
-        }
-      }
-    }
   }
 }

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

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/utilities';
+@use '@carbon/layout/scss/convert' as *;
 
 // Standard imports.
 @use '../../global/styles/project-settings' as *;
@@ -704,3 +705,200 @@ $duration: 1000ms;
   > button.#{$carbon-prefix}--menu-button__trigger {
   min-inline-size: 0;
 }
+
+/// Experimental Page header styles
+/// @access public
+/// @group page-header
+@include block-wrap(#{$block-class}__next) {
+  &.#{$block-class} {
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$block-class}__breadcrumb-bar {
+    block-size: to-rem(40px);
+  }
+
+  .#{$block-class}__breadcrumb-bar .#{$carbon-prefix}--subgrid {
+    block-size: 100%;
+  }
+
+  .#{$block-class}__breadcrumb-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}__breadcrumb__actions-flush {
+    .#{$carbon-prefix}--css-grid {
+      padding-inline-end: 0;
+    }
+
+    .#{$carbon-prefix}--css-grid-column {
+      margin-inline-end: 0;
+    }
+  }
+
+  .#{$block-class}__breadcrumb-bar-border {
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$block-class}__breadcrumb__icon {
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$block-class}__breadcrumb__actions {
+    display: inline-flex;
+  }
+
+  .#{$block-class}__breadcrumb__content-actions {
+    margin-inline-end: $spacing-04;
+  }
+
+  .#{$block-class}__breadcrumb-wrapper {
+    display: inline-flex;
+  }
+
+  .#{$block-class}__content {
+    padding: $spacing-06 0;
+  }
+
+  .#{$block-class}__content__title-wrapper {
+    @include breakpoint-down(md) {
+      display: flex;
+      flex-direction: column;
+      grid-gap: $spacing-05;
+    }
+
+    display: grid;
+    gap: $spacing-05;
+    grid-template-columns: auto minmax(
+        var(--page-header-title-grid-width, 0),
+        1fr
+      );
+    margin-block-end: $spacing-05;
+    min-block-size: to-rem(40px);
+  }
+
+  .#{$block-class}__content__start {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-05;
+  }
+
+  .#{$block-class}__content__title-container {
+    display: flex;
+  }
+
+  .#{$block-class}__content__title-container
+    .#{$carbon-prefix}--definition-term {
+    border-block-end: none;
+  }
+
+  .#{$block-class}__content__contextual-actions {
+    display: flex;
+  }
+
+  .#{$block-class}__content__title {
+    @include type.type-style('productive-heading-04');
+
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-inline-size: to-rem(640px);
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+
+  .#{$block-class}__content:has(.#{$block-class}__content__contextual-actions)
+    .#{$block-class}__content__title {
+    -webkit-line-clamp: 1;
+  }
+
+  .#{$block-class}__content__icon {
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$block-class}__content__page-actions {
+    display: flex;
+    justify-content: right;
+
+    @include breakpoint-down('md') {
+      justify-content: left;
+      margin-block-start: 0;
+    }
+  }
+
+  .#{$block-class}__content__page-actions
+    .#{$carbon-prefix}--menu-button__trigger:not(
+      .#{$carbon-prefix}--btn--ghost
+    ) {
+    min-inline-size: 0;
+  }
+
+  .#{$block-class}__content__subtitle {
+    @include type.type-style('productive-heading-03');
+
+    margin-block-end: $spacing-03;
+  }
+
+  .#{$block-class}__content__body {
+    @include type.type-style('body-01');
+
+    margin-block-start: $spacing-03;
+    max-inline-size: to-rem(640px);
+  }
+
+  [data-hidden]:not([data-fixed]) {
+    display: none;
+  }
+
+  .#{$block-class}__hero-image {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: flex-end;
+    block-size: 100%;
+  }
+
+  .#{$block-class}__tab-bar {
+    margin-inline-start: -$spacing-05;
+  }
+
+  .#{$block-class}__tab-bar--tablist {
+    display: grid;
+    grid-gap: $spacing-10;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .#{$carbon-prefix}--tabs .#{$carbon-prefix}--tab--overflow-nav-button {
+    background-color: $layer-01;
+
+    &.#{$carbon-prefix}--tab--overflow-nav-button--next::before {
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), $layer-01);
+    }
+
+    &.#{$carbon-prefix}--tab--overflow-nav-button--previous::before {
+      background: linear-gradient(to left, rgba(255, 255, 255, 0), $layer-01);
+    }
+  }
+
+  .#{$block-class}__tags {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+  }
+
+  .#{$block-class}__tags-popover-list {
+    display: flex;
+    flex-direction: column;
+    padding: $spacing-05;
+  }
+
+  .#{$block-class}__tag-item {
+    flex-shrink: 0;
+  }
+}

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

@@ -16,6 +16,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/utilities';
+@use '@carbon-labs/react-resizer/scss/resizer';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 
 // Standard imports.
@@ -30,7 +31,7 @@
 
 $block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
-$clabs-prefix: 'clabs'; // TODO: remove when resizer available in labs
+$clabs-prefix: 'clabs';
 
 @property --panel-transform {
   inherits: true;
@@ -638,54 +639,3 @@ $clabs-prefix: 'clabs'; // TODO: remove when resizer available in labs
 .#{$block-class}--has-decorator + .#{$block-class}__overlay {
   background-color: $ai-overlay;
 }
-
-// TODO: remove along with prefix after resizer available in labs
-.#{$clabs-prefix}__resizer {
-  position: relative;
-  flex: none;
-  background-color: $border-subtle-01;
-
-  &:hover {
-    @media (prefers-reduced-motion: no-preference) {
-      background-color: $border-interactive;
-      transition: background-color $duration-moderate-01;
-    }
-  }
-
-  &:focus {
-    background-color: $border-interactive;
-    outline: none;
-  }
-
-  &:active {
-    background-color: $border-interactive;
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: none;
-  }
-
-  &--horizontal {
-    block-size: $spacing-02;
-    cursor: ns-resize;
-  }
-
-  &--vertical {
-    cursor: ew-resize;
-    inline-size: $spacing-02;
-  }
-}
-
-.sr-only {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  margin: -1px;
-  block-size: 1px;
-  clip: rect(0, 0, 0, 0);
-  inline-size: 1px;
-  white-space: nowrap;
-}
-// END TODO: remove along with prefix after resizer available in labs

package/scss/components/_index-released-only.scss

@@ -40,3 +40,4 @@
 @use './UserProfileImage';
 @use './WebTerminal';
 @use './UserAvatar';
+@use './InterstitialScreen';