@carbon/ibm-products 2.18.0 → 2.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,7 +34,8 @@
     "carbon for ibm products"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "build": "run-s clean build-all",
@@ -63,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.3.3",
     "jest": "^29.6.2",
-    "jest-config-ibm-cloud-cognitive": "^1.1.1",
+    "jest-config-ibm-cloud-cognitive": "^1.1.2",
     "jest-environment-jsdom": "^29.6.2",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.11.1",
@@ -74,7 +75,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.18.0",
+    "@carbon/ibm-products-styles": "^2.19.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -89,11 +90,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.44.0",
+    "@carbon/react": "^1.45.0",
     "@carbon/themes": "^11.28.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "a683f659e575d3ee051af4702703888070501824"
+  "gitHead": "f6ae5df043ae6ddd25d75daefccaa7c0d8ed426b"
 }

package/scss/components/Card/_card.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/utilities';
 
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
@@ -25,6 +26,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   transition: background-color $duration-fast-02;
 }
 
+.#{$block-class}__clickable:focus {
+  @include utilities.focus-outline('outline');
+}
+
 .#{$block-class}__clickable:hover {
   background-color: $layer-hover-01;
 }
@@ -52,6 +57,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__header {
   padding: $spacing-05;
+  padding-right: 0; // makes for consistent slug position across productive and expressive
 }
 
 .#{$block-class}__header-label-only {
@@ -121,3 +127,86 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   padding-top: $spacing-05;
   padding-left: $spacing-05;
 }
+
+.#{$block-class}__header-container--has-actions {
+  padding-right: $spacing-03;
+}
+
+// +++ adjustments for slug
+.#{$block-class} {
+  position: relative;
+}
+
+.#{$block-class}__media + .#{$block-class}__content-container {
+  /* display relative to container when media displayed */
+  position: relative;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug {
+  @include utilities.callout-gradient();
+
+  position: absolute;
+  top: $spacing-05;
+  right: $spacing-05;
+}
+
+.#{$block-class}__header-container--has-slug {
+  width: 100%;
+  padding-right: $spacing-07;
+}
+
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions {
+  padding-right: $spacing-08;
+}
+
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label {
+  padding-right: $spacing-09;
+}
+
+.#{$block-class}__clickable {
+  position: relative;
+}
+
+.#{$block-class}__clickable .#{c4p-settings.$carbon-prefix}--slug,
+.#{$block-class}__clickable .#{c4p-settings.$carbon-prefix}--slug-icon {
+  pointer-events: none;
+}
+
+.#{$block-class}--has-slug {
+  @include utilities.callout-gradient();
+
+  border: 1px solid $border-tile;
+}
+
+.#{$block-class}__clickable.#{$block-class}--has-slug::before {
+  @include utilities.callout-gradient('hover');
+
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  content: '';
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity $duration-fast-02 motion(standard, productive);
+}
+
+.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before {
+  opacity: 1;
+}
+
+.#{$block-class}__clickable .#{$block-class}__content-container {
+  position: relative;
+  z-index: 1;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug-icon rect {
+  stroke: $icon-primary;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug-icon path {
+  fill: $icon-primary;
+}
+
+// --- adjustments for slug

package/scss/components/Checklist/_carbon-imports.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+// AboutModal uses the following Carbon components:
+// Button, IconButton
+
+@use '@carbon/react/scss/components/button';

package/scss/components/Checklist/_checklist.scss

@@ -7,7 +7,6 @@
 
 // Standard imports.
 @use '@carbon/layout/scss/convert' as *;
-
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;

package/scss/components/Checklist/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './checklist';

package/scss/components/Guidebanner/_guidebanner.scss

@@ -246,3 +246,28 @@ $purple-3: #7433e3;
     fill: $purple-1;
   }
 }
+
+// Exception handling.
+// If "withLeftgutter", then:
+// - insert 1 rem of more "space" on the left.
+// - move icon 1 rem more to the right.
+.#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {
+  left: $spacing-07;
+}
+.#{$block-class}__with-left-gutter .#{$block-class}__title {
+  padding-left: calc($horizontal-margin + $spacing-05);
+}
+.#{$block-class}__with-left-gutter .#{$block-class}__navigation {
+  padding-left: $spacing-05;
+}
+// Override Carousel settings
+// - insert 1 rem of more "space" on the left.
+.#{$block-class}__with-left-gutter
+  .#{c4p-settings.$pkg-prefix}--carousel__elements-container {
+  padding-left: $spacing-05;
+}
+// - expand "fade" to cover more of the left side of the carousel.
+.#{$block-class}__with-left-gutter
+  .#{c4p-settings.$pkg-prefix}--carousel__elements-container--scrolled {
+  width: $spacing-10;
+}

package/scss/components/InlineTip/_inline-tip.scss

@@ -227,3 +227,15 @@ $purple: #7f3ae7;
     flex-shrink: 0;
   }
 }
+
+// Exception handling.
+// If "withLeftgutter", then:
+// - insert 1 rem of more "space" on the left.
+// - move icon 1 rem more to the right.
+.#{$block-class}__wide.#{$block-class}__with-left-gutter {
+  padding-left: $spacing-10;
+}
+.#{$block-class}__wide.#{$block-class}__with-left-gutter
+  .#{$block-class}__icon-idea {
+  left: $spacing-07;
+}

package/scss/components/ProductiveCard/_productive-card.scss

@@ -16,10 +16,6 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__productive {
-  .#{$block-class}__header {
-    padding-right: 0;
-  }
-
   .#{$block-class}__title {
     @include type.type-style('heading-compact-02');
   }
@@ -49,7 +45,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
   .#{$block-class}__actions-header {
     margin-top: calc(-1 * #{$spacing-02});
-    margin-right: $spacing-03;
   }
 
   .#{$block-class}__actions-header-ghost-button {

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

@@ -115,6 +115,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
     background-color: $layer-01;
 
+    &:has(.#{$block-class}__navigation-back-button) {
+      padding-top: $spacing-07;
+    }
+
+    &:has(
+        .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      ) {
+      padding-top: $spacing-08;
+    }
+
     /* stylelint-disable-next-line max-nesting-depth */
     &::before {
       @include setDividerStyles();
@@ -129,8 +139,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       margin-bottom: 0;
     }
     &.#{$block-class}__on-detail-step .#{$block-class}__collapsed-title-text {
-      top: $spacing-09;
+      top: $spacing-07;
+    }
+
+    &.#{$block-class}__on-detail-step
+      .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
+      ~ .#{$block-class}__collapsed-title-text {
+      top: $spacing-08;
     }
+
     &.#{$block-class}__title-container-without-title {
       padding: 0;
     }
@@ -326,29 +343,30 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
-    position: relative;
+    position: fixed;
     z-index: 5;
-    top: calc(-1 * #{$spacing-03});
-    left: calc(-1 * #{$spacing-03});
+    top: 0;
+    left: 0;
   }
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
-    min-width: 2rem;
-    padding: 0;
-    color: $text-primary;
-  }
-
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
     display: flex;
+    width: $spacing-07;
+    height: $spacing-07;
     align-items: center;
     justify-content: center;
-    margin: $spacing-03;
-    margin-bottom: 0;
-  }
+    padding: 0;
+    color: $text-primary;
 
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button
     .#{c4p-settings.$carbon-prefix}--btn__icon {
-    margin: 0;
+      margin: 0;
+    }
+  }
+
+  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__navigation-back-button,
+  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__close-button {
+    width: $spacing-08;
+    height: $spacing-08;
   }
 
   .#{$block-class}__slug-and-close {