@carbon/ibm-products 2.43.2-canary.33 → 2.43.2-canary.330

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

@@ -5,8 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+// stylelint-disable carbon/layout-token-use
+
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/type/scss/font-family';
 @use '@carbon/layout' as *;
@@ -24,8 +26,8 @@
 
 .#{variables.$block-class}__customize-columns-tearsheet--actions
   input[role='searchbox'] {
-  height: $spacing-09;
-  padding-left: $spacing-09;
+  height: spacing.$spacing-09;
+  padding-left: spacing.$spacing-09;
   border-bottom: 1px solid $background-active;
 }
 
@@ -63,8 +65,8 @@
   z-index: 1;
   top: 0;
   display: flex;
-  height: $spacing-09;
-  padding-left: $spacing-08;
+  height: spacing.$spacing-09;
+  padding-left: spacing.$spacing-08;
   border-bottom: 1px solid $layer-active;
   background-color: $layer;
 

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

@@ -9,7 +9,7 @@
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/layout' as *;
 
@@ -25,7 +25,7 @@ $action-set-height: to-rem(64px);
 
 .#{variables.$block-class}-filter-flyout {
   position: absolute;
-  top: $spacing-09;
+  top: spacing.$spacing-09;
   right: 0;
   display: none;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
@@ -53,7 +53,8 @@ $action-set-height: to-rem(64px);
 }
 
 .#{variables.$block-class}-filter-flyout__inner-container {
-  padding: $spacing-05 $spacing-05 $spacing-09 $spacing-05;
+  padding: spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-09
+    spacing.$spacing-05;
 }
 
 .#{variables.$block-class}-filter-flyout__inner-container::before {
@@ -74,7 +75,7 @@ $action-set-height: to-rem(64px);
   display: block;
   @include type-style('heading-compact-01');
 
-  margin-bottom: $spacing-06;
+  margin-bottom: spacing.$spacing-06;
 }
 
 .#{variables.$block-class}-filter-flyout__filters {

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

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 *;

package/scss/components/DecoratorBase/_decorator-base.scss

@@ -17,7 +17,6 @@
 // DecoratorBase uses the following Carbon for IBM Products components:
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/react/scss/colors' as *;
-@use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';

package/scss/components/EditFullPage/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './edit-full-page';
+@use './edit-full-page';

package/scss/components/EditInPlace/_edit-in-place.scss

@@ -55,7 +55,7 @@ $carbon-input: #{$carbon-prefix}--text-input;
 }
 
 .#{$block-class}--invalid {
-  outline: 2px solid $support-error;
+  border: 2px solid $support-error;
 }
 
 .#{$block-class}--focused {
@@ -75,17 +75,6 @@ $carbon-input: #{$carbon-prefix}--text-input;
   line-height: inherit;
 }
 
-.#{$block-class}__ellipsis {
-  position: relative;
-  margin-left: calc(-1 * $spacing-05);
-  opacity: 0;
-}
-
-.#{$block-class}--overflows:not(.#{$block-class}--focused)
-  .#{$block-class}__ellipsis {
-  opacity: 1;
-}
-
 .#{$block-class}__text-input-label {
   display: none;
 }

package/scss/components/EditTearsheet/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './edit-tearsheet';
+@use './edit-tearsheet';

package/scss/components/EditTearsheetNarrow/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './edit-tearsheet-narrow';
+@use './edit-tearsheet-narrow';

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -8,16 +8,16 @@
 // Standard imports.
 
 // Other Carbon settings.
-// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+// TODO: @use 'carbon-components/scss/globals/grid/grid'; if needed
 @use '@carbon/colors/' as *;
 @use '@carbon/motion/' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
 // EditUpdateCards uses the following Carbon components:
-// TODO: @import(s) of Carbon component styles used by EditUpdateCards
+// TODO: @use(s) of Carbon component styles used by EditUpdateCards
 
 // EditUpdateCards uses the following Carbon for IBM Products components:
-// TODO: @import(s) of IBM Products component styles used by EditUpdateCards
+// TODO: @use(s) of IBM Products component styles used by EditUpdateCards
 
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.

package/scss/components/HTTPErrors/_http-errors.scss

@@ -13,6 +13,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $block-class: #{c4p-settings.$pkg-prefix}--http-errors;
+$block-class-404: #{c4p-settings.$pkg-prefix}--http-errors-404;
+$block-class-403: #{c4p-settings.$pkg-prefix}--http-errors-403;
+$block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
 
 .#{$block-class} .#{$block-class}__content {
   position: fixed;
@@ -66,3 +69,77 @@ $block-class: #{c4p-settings.$pkg-prefix}--http-errors;
     transform: scale(1.5);
   }
 }
+/* stylelint-disable carbon/theme-token-use */
+
+.#{$block-class-404}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-404}__prefix-cls-67 {
+  fill: #697077;
+}
+.#{$block-class-404}__prefix-cls-68 {
+  fill: #282828;
+}
+.#{$block-class-404}__prefix-cls-69 {
+  fill: #51565c;
+}
+.#{$block-class-404}__prefix-cls-70 {
+  fill: #002b50;
+}
+.#{$block-class-404}__prefix-cls-71 {
+  fill: #413d3d;
+}
+.#{$block-class-404}__prefix-cls-72 {
+  fill: #908b8b;
+}
+.#{$block-class-404}__prefix-cls-75 {
+  fill: #a4a4a5;
+}
+.#{$block-class-404}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-403}__prefix-cls-80 {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
+}
+.#{$block-class-403}__prefix-cls-75 {
+  fill: #595655;
+}
+.#{$block-class-403}__prefix-cls-76 {
+  opacity: 0.15;
+}
+.#{$block-class-403}__prefix-cls-77 {
+  fill: #373d42;
+}
+.#{$block-class-403}__prefix-cls-78 {
+  fill: #002b50;
+}
+.#{$block-class-403}__prefix-cls-81 {
+  fill: #2b2828;
+}
+.#{$block-class-other}__prefix-cls-1 {
+  fill: none;
+}
+.#{$block-class-other}__prefix-cls-69 {
+  fill: #697077;
+}
+.#{$block-class-other}__prefix-cls-70 {
+  fill: #282828;
+}
+.#{$block-class-other}__prefix-cls-71 {
+  fill: #51565c;
+}
+.#{$block-class-other}__prefix-cls-72 {
+  fill: #e0dbda;
+}
+.#{$block-class-other}__prefix-cls-73 {
+  fill: #003d73;
+}
+.#{$block-class-other}__prefix-cls-75 {
+  opacity: 0.15;
+}
+
+/* stylelint-enable */

package/scss/components/OptionsTile/_options-tile.scss

@@ -163,18 +163,18 @@ $block-class: #{c4p-settings.$pkg-prefix}--options-tile;
   overflow: hidden;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__summary,
+.#{$block-class}__summary.#{$block-class}__summary--open:not(
+    .#{$block-class}__summary--closing
+  ),
 .#{$block-class}__summary--hidden {
   height: 0;
   margin-top: 0;
   opacity: 0;
 }
 
-.#{$block-class}:not(.#{$block-class}--closing)
-  > details[open]
-  .#{$block-class}__chevron {
+.#{$block-class}__chevron.#{$block-class}__chevron--open:not(
+    .#{$block-class}__chevron--closing
+  ) {
   transform: rotate(180deg);
 }
 

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

@@ -433,13 +433,26 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
   }
 
+  .#{$block-class}__tooltip {
+    min-width: 0;
+    flex-basis: auto;
+
+    button {
+      border-block-end: none;
+      cursor: default;
+    }
+  }
+  .#{$block-class}__titleText {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .#{$block-class}__title {
     @include type.type-style('heading-04');
 
+    display: flex;
     min-height: $spacing-08;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .#{$block-class}__title--editable {

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

@@ -109,7 +109,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     left: 0;
     border-right: 1px solid $border-subtle-02;
   }
-  &.#{$block-class}.#{$block-class}--has-slug {
+  &.#{$block-class}.#{$block-class}--has-slug,
+  &.#{$block-class}.#{$block-class}--has-ai-label {
     border-color: transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
@@ -195,13 +196,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar,
-  &.#{$block-class}--has-slug {
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label {
     --#{$block-class}--title-padding-right: #{$spacing-10};
   }
 
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar {
-    &.#{$block-class}--has-slug {
+    &.#{$block-class}--has-slug,
+    &.#{$block-class}--has-ai-label {
       --#{$block-class}--title-padding-right: #{$spacing-11};
     }
   }
@@ -308,7 +311,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding-top: $spacing-03;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}--scrolls {
+  &.#{$block-class}--has-slug .#{$block-class}--scrolls,
+  &.#{$block-class}--has-ai-label .#{$block-class}--scrolls {
     @include utilities.ai-popover-gradient('default', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
@@ -362,8 +366,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     height: $spacing-08;
   }
 
-  .#{$block-class}__slug-and-close {
-    position: fixed;
+  .#{$block-class}__slug-and-close,
+  .#{$block-class}__ai-label-and-close {
+    position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;
@@ -413,6 +418,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--text-area,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--search-input,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--select-input,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--multi-select,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--dropdown,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--dropdown-list,
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--number input[type='number'],
@@ -463,7 +469,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   inset: 0;
 }
 
-.#{$block-class}--has-slug + .#{$block-class}__overlay {
+.#{$block-class}--has-slug + .#{$block-class}__overlay,
+.#{$block-class}--has-ai-label + .#{$block-class}__overlay {
   /* stylelint-disable-next-line carbon/theme-token-use */
   background-color: $ai-overlay;
 }

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -100,6 +100,8 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-overflow}__trigger {
+    /* stylelint-disable-next-line declaration-no-important */
+    border: none !important;
     font-family: inherit;
   }
 
@@ -188,28 +190,8 @@ $block-class-modal: #{$block-class}-modal;
     margin-bottom: 0;
   }
 
-  &.#{$block-class-modal} .#{$block-class-modal}__fade {
-    position: relative;
-    margin-right: $spacing-05;
-    margin-left: $spacing-05;
-  }
-
-  .#{$block-class-modal}__body {
-    padding-bottom: $spacing-06;
-  }
-
   .#{$block-class-modal}__header {
     padding-right: 0;
     margin-right: $spacing-05;
   }
-
-  &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
-    position: absolute;
-    top: calc(-1 * #{$spacing-11});
-    left: 0;
-    width: 100%;
-    height: $spacing-07;
-    background: linear-gradient(to bottom, transparent, $layer-01);
-    content: '';
-  }
 }

package/scss/components/TagSet/_tag-set.scss

@@ -90,30 +90,10 @@ $block-class-modal: #{$_block-class}-modal;
     margin-bottom: 0;
   }
 
-  &.#{$block-class-modal} .#{$block-class-modal}__fade {
-    position: relative;
-    margin-right: $spacing-05;
-    margin-left: $spacing-05;
-  }
-
-  .#{$block-class-modal}__body {
-    padding-bottom: $spacing-06;
-  }
-
   .#{$block-class-modal}__header {
     padding-right: 0;
     margin-right: $spacing-05;
   }
-
-  &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
-    position: absolute;
-    top: calc(-1 * #{$spacing-11});
-    left: 0;
-    width: 100%;
-    height: $spacing-07;
-    background: linear-gradient(to bottom, transparent, $layer-01);
-    content: '';
-  }
 }
 
 @include block-wrap('#{$block-class-overflow}__tagset-popover') {
@@ -124,6 +104,8 @@ $block-class-modal: #{$_block-class}-modal;
   }
 
   .#{$block-class-overflow}__popover-trigger {
+    /* stylelint-disable-next-line declaration-no-important */
+    border: none !important;
     font-family: inherit;
   }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -110,6 +110,8 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container,
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-ai-label
     .#{$block-class}__container {
     border: 1px solid transparent;
     border-bottom: 0;
@@ -276,11 +278,15 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--wide
     .#{$block-class}__header.#{$block-class}__header--with-close-icon,
-  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
+  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header,
+  &.#{$block-class}--has-ai-label
+    .#{$block-class}__header.#{$block-class}__header {
     padding-inline-end: $spacing-11;
   }
 
   &.#{$block-class}--wide.#{$block-class}--has-slug
+    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
+  &.#{$block-class}--wide.#{$block-class}--has-ai-label
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
     /* spacing 11 plus additional space for slug/close */
     /* stylelint-disable-next-line carbon/layout-token-use */
@@ -362,7 +368,8 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}__content {
+  &.#{$block-class}--has-slug .#{$block-class}__content,
+  &.#{$block-class}--has-ai-label .#{$block-class}__content {
     @include utilities.ai-popover-gradient('default', 0);
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
@@ -418,13 +425,18 @@ $motion-duration: $duration-moderate-02;
     background: $background;
   }
 
-  &.#{$block-class}--has-slug {
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label {
     /* stylelint-disable-next-line carbon/theme-token-use */
     --overlay-color: #{$ai-overlay};
   }
 
   &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug,
+  &.#{$block-class}--has-ai-label:not(.#{$block-class}--has-close)
     .#{$carbon-prefix}--slug {
     inset-inline-end: 0;
+    margin-block: 6px;
+    margin-inline-end: 1rem;
   }
 }

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

@@ -7,3 +7,4 @@
 
 // Import any Carbon component styles used from UserAvatar in this file.
 // UserAvatar uses the following Carbon components:
+@use '@carbon/react/scss/components/tooltip';

package/scss/components/UserAvatar/_user-avatar.scss

@@ -20,6 +20,7 @@
 
 // UserAvatar uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by UserAvatar
+@use '@carbon/react/scss/components/tooltip';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 
@@ -61,6 +62,7 @@ $sizes: (
   &:focus-within .#{$block-class} {
     // stylelint-disable-next-line carbon/theme-token-use
     outline: 2px solid $focus;
+    outline-offset: 1px;
   }
 }
 
@@ -74,6 +76,7 @@ $sizes: (
   background-color: $color;
 }
 
+//this mixin allows you to set background color based on the lighter themes such as g10 and white
 @mixin setLightBg($order, $color) {
   :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
@@ -84,6 +87,7 @@ $sizes: (
   }
 }
 
+//this mixin allows you to set background color based on the darker themes such as g90 and g100
 @mixin setDarkBg($order, $color) {
   .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g100 .#{$block-class}--#{$order},

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

@@ -23,6 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
+@use './FullPageError';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './MultiAddSelect';

package/scss/config-dev.scss

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @forward './global/styles/project-settings' with (
   $pkg-prefix: 'dev-prefix--c4p'
 );

package/scss/config.scss

@@ -1 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @forward './global/styles/project-settings';