@carbon/ibm-products 2.26.0 → 2.28.0-alpha.4

package/scss/components/BigNumbers/_big-numbers.scss

@@ -0,0 +1,151 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/mixins';
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+// BigNumbers uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by BigNumbers
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--big-numbers;
+$skeleton-block-class: #{c4p-settings.$pkg-prefix}--big-numbers-skeleton;
+
+.#{$block-class}__label {
+  @include type-style('label-01');
+
+  display: block;
+  margin: 0;
+  color: $text-secondary;
+}
+
+.#{$block-class}__value {
+  @include type-style('heading-04');
+
+  margin-bottom: 0;
+}
+
+.#{$block-class}__total {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}__total,
+.#{$block-class}__percentage-mark {
+  margin-top: auto;
+  margin-bottom: $spacing-02;
+}
+
+.#{$block-class}__info {
+  vertical-align: top;
+}
+
+.#{$block-class}__trend {
+  margin-top: $spacing-03;
+  vertical-align: top;
+}
+
+.#{$block-class}__row {
+  display: flex;
+}
+
+.#{$block-class}__info {
+  padding-left: $spacing-03;
+}
+
+.#{$block-class}__percentage {
+  @include type-style('heading-04');
+}
+
+.#{$block-class}__percentage-mark {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}--lg .#{$block-class}__value,
+.#{$block-class}--lg .#{$block-class}__percentage {
+  @include type-style('heading-06');
+}
+
+.#{$block-class}--lg .#{$block-class}__total,
+.#{$block-class}--lg .#{$block-class}__percentage-mark {
+  @include type-style('heading-03');
+}
+
+.#{$block-class}--xl .#{$block-class}__label {
+  @include type-style('body-compact-01');
+}
+
+.#{$block-class}--xl .#{$block-class}__value,
+.#{$block-class}--xl .#{$block-class}__percentage {
+  @include type-style('heading-07');
+}
+
+.#{$block-class}--xl .#{$block-class}__total,
+.#{$block-class}--xl .#{$block-class}__percentage-mark {
+  @include type-style('heading-04');
+}
+
+.#{$block-class}--xl .#{$block-class}__trend {
+  margin-top: $spacing-04;
+}
+
+.#{$skeleton-block-class} {
+  width: 4rem;
+}
+
+.#{$skeleton-block-class}__label {
+  height: $spacing-04;
+  margin-top: 0;
+  margin-bottom: $spacing-03;
+}
+
+.#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-08 !important;
+  margin: 0;
+}
+
+.#{$skeleton-block-class}--lg {
+  width: 5rem;
+}
+
+.#{$skeleton-block-class}--xl {
+  width: 6rem;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+  .#{$skeleton-block-class}__label {
+  height: $spacing-04;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--lg
+  .#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-09 !important;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+  .#{$skeleton-block-class}__label {
+  height: $spacing-04;
+}
+
+.#{$skeleton-block-class}.#{$skeleton-block-class}--xl
+  .#{$skeleton-block-class}__value {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: $spacing-10 !important;
+}
+
+.#{$block-class} .#{$block-class}__tooltip-trigger:focus {
+  outline: 1px solid $focus;
+}

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

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from BigNumbers in this file.
+// BigNumbers uses the following Carbon components:
+@use '@carbon/react/scss/components/skeleton-styles';
+@use '@carbon/react/scss/components/tooltip';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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-imports';
+@use './big-numbers';

package/scss/components/BigNumbers/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 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 './big-numbers';

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

@@ -91,6 +91,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
   z-index: utilities.z('header');
 }

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2023
+// Copyright IBM Corp. 2020, 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.
@@ -159,18 +159,72 @@
 }
 
 .#{$block-class} th.#{$block-class}__with-slug {
-  @include ai-gradient('top', 100%);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 0 1px $ai-border-strong;
 }
 
+.#{$block-class} th.#{$block-class}__with-slug,
+.#{$block-class} td.#{$block-class}__slug--cell {
+  @include ai-table-gradient();
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row,
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table
   tbody
-  tr:has(> .#{$block-class}__table-row-ai-enabled) {
-  @include ai-gradient('left', 50%);
+  tr.#{$block-class}__slug--row
+  + .#{$block-class}__expanded-row {
+  @include ai-table-gradient();
 
   background-attachment: fixed;
 }
 
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 1px 0 $ai-border-strong;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row.#{c4p-settings.$carbon-prefix}--data-table--selected:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row.#{$block-class}__carbon-row-expanded:hover
+  + .#{$block-class}__expanded-row,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__slug--row {
+  @include ai-table-gradient('hover');
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__slug--row
+  td {
+  background-color: transparent;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row.#{c4p-settings.$carbon-prefix}--data-table--selected {
+  @include ai-table-gradient('selected');
+}
+
 .#{$block-class}
   th.#{$block-class}__with-slug
   .#{c4p-settings.$carbon-prefix}--slug {
@@ -804,6 +858,9 @@
 .#{$block-class} .#{$block-class}__table-row-ai-enabled {
   display: flex;
   align-items: center;
+  &.#{$block-class}__slug--expanded {
+    border: none;
+  }
 }
 
 .#{$block-class} .#{$block-class}__table-row-ai-spacer,

package/scss/components/FullPageError/_full-page-error.scss

@@ -47,9 +47,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 .#{$block-class}__error-svg-container {
   display: flex;
   height: 100%;
-  margin: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
+  padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
   @include breakpoint(md) {
-    margin: auto $spacing-03 $spacing-11 $spacing-03;
+    padding: auto $spacing-03 $spacing-11 $spacing-03;
   }
 }
 

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

@@ -306,6 +306,9 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   &.#{$block-class}--has-slug .#{$block-class}--scrolls {
     @include utilities.callout-gradient('default', 0, 'layer');
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$block-class}__inner-content.#{$block-class}--scrolls {
@@ -353,7 +356,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: fixed;
+    position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;
@@ -441,10 +444,14 @@ $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
   z-index: utilities.z('overlay');
   width: 100%;
   height: 100%;
   background-color: $overlay;
   inset: 0;
 }
+
+.#{$block-class}--has-slug + .#{$block-class}__overlay {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: $ai-overlay;
+}

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

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from StringFormatter in this file.
+// StringFormatter uses the following Carbon components:
+@use '@carbon/react/scss/components/tooltip';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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-imports';
+@use './string-formatter';

package/scss/components/StringFormatter/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 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 './string-formatter';

package/scss/components/StringFormatter/_string-formatter.scss

@@ -0,0 +1,97 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// StringFormatter uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by StringFormatter
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--string-formatter;
+$popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
+
+.#{$block-class} {
+  display: inline-block;
+  text-align: left;
+}
+
+.#{$block-class}--content {
+  display: inline-block;
+  text-align: left;
+}
+
+.#{$block-class}--truncate {
+  display: -webkit-box;
+  overflow: hidden;
+  max-width: 80ch;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.#{$block-class}__tooltip > button {
+  border-width: 0;
+  color: currentColor;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.#{$popover-block-class} {
+  max-width: $spacing-05;
+  margin: 0 auto;
+}
+
+.#{$block-class} .#{$popover-block-class}-content {
+  max-inline-size: 20rem;
+}
+
+.#{$block-class} .#{$popover-block-class}--left .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--left-bottom .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--left-top .#{$popover-block-class} {
+  margin: 0;
+}
+
+.#{$block-class} .#{$popover-block-class}--right .#{$popover-block-class},
+.#{$block-class}
+  .#{$popover-block-class}--right-bottom
+  .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--right-top .#{$popover-block-class} {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.#{$block-class} .#{$popover-block-class}--top .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--top-left
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--top-right
+  .#{$popover-block-class}-caret {
+  /* stylelint-disable-next-line declaration-no-important */
+  inset-block-start: -1px !important;
+}
+
+.#{$block-class}
+  .#{$popover-block-class}--bottom
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--bottom-left
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--bottom-right
+  .#{$popover-block-class}-caret {
+  /* stylelint-disable-next-line declaration-no-important */
+  inset-block-end: -1px !important;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -29,7 +29,6 @@ $motion-duration: $duration-moderate-02;
 
 @include block-wrap($block-class) {
   &.#{$block-class} {
-    // Need to disable stylelint until dart sass namespace support is added
     z-index: utilities.z('modal') + 1;
     align-items: flex-end;
     color: $text-primary;
@@ -42,7 +41,6 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.is-visible {
-    // Need to disable stylelint until dart sass namespace support is added
     z-index: utilities.z('modal');
     align-items: flex-end;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
@@ -55,21 +53,18 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--stacked-1-of-2 {
-    // Need to disable stylelint until dart sass namespace support is added
     z-index: utilities.z('modal') - 1;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.33);
   }
 
   &.#{$block-class}--stacked-1-of-3 {
-    // Need to disable stylelint until dart sass namespace support is added
     z-index: utilities.z('modal') - 2;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.11);
   }
 
   &.#{$block-class}--stacked-2-of-3 {
-    // Need to disable stylelint until dart sass namespace support is added
     z-index: utilities.z('modal') - 1;
     // stylelint-disable-next-line carbon/theme-token-use
     background-color: rgba($overlay-color, 0.25);
@@ -93,6 +88,24 @@ $motion-duration: $duration-moderate-02;
     transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container {
+    border: 1px solid transparent;
+    border-bottom: 0;
+
+    /* override carbon ai removing background gradient */
+    background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
+        padding-box,
+      linear-gradient(
+          to bottom,
+          var(--cds-ai-border-start, #78a9ff),
+          var(--cds-ai-border-end, #d0e2ff)
+        )
+        border-box,
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+    box-shadow: 0 4px 10px 2px $ai-drop-shadow;
+  }
+
   // extra specificity to ensure this transition overrides the carbon default
   &.#{$block-class}.#{$block-class} .#{$block-class}__container {
     transition: transform $motion-duration motion(entrance, expressive),
@@ -223,8 +236,14 @@ $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 {
+    padding-right: $spacing-11;
+  }
+
+  &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    padding-right: $spacing-10;
+    margin-right: $spacing-09;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
@@ -292,6 +311,12 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
+  &.#{$block-class}--has-slug .#{$block-class}__main {
+    @include utilities.callout-gradient('default', 0);
+
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+  }
+
   &.#{$block-class}--wide .#{$block-class}__content {
     // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
     .#{$carbon-prefix}--pagination,
@@ -320,7 +345,8 @@ $motion-duration: $duration-moderate-02;
     .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
     /* stylelint-disable-next-line prettier/prettier */
     .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light .#{$carbon-prefix}--date-picker__input {
+    .#{$carbon-prefix}--date-picker--light
+      .#{$carbon-prefix}--date-picker__input {
       background-color: $field-02;
     }
   }
@@ -340,4 +366,9 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide .#{$block-class}__buttons {
     background: $background;
   }
+
+  &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug {
+    inset-inline-end: 0;
+  }
 }

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

@@ -10,6 +10,8 @@
 @use '../../global/styles/mixins';
 @use '@carbon/colors' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
 
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -23,6 +25,20 @@
 
 $block-class: #{$pkg-prefix}--user-avatar;
 
+$sizes: (
+  xl: $spacing-10,
+  lg: $spacing-09,
+  md: $spacing-07,
+  sm: $spacing-06,
+);
+
+@mixin size($size) {
+  $_size: map-get($sizes, $size);
+
+  width: $_size;
+  height: $_size;
+}
+
 .#{$block-class} {
   position: relative;
   display: flex;
@@ -32,10 +48,15 @@ $block-class: #{$pkg-prefix}--user-avatar;
   justify-content: center;
   border: 0.5px solid transparent;
   border-radius: 100%;
+  color: $text-inverse;
   outline: none;
   outline-offset: 3px;
 }
 
+.#{$block-class} svg {
+  color: $icon-inverse;
+}
+
 .#{$block-class}__tooltip {
   &:focus-within .#{$block-class} {
     // stylelint-disable-next-line carbon/theme-token-use
@@ -55,3 +76,22 @@ $block-class: #{$pkg-prefix}--user-avatar;
 .#{$block-class}--dark-cyan {
   @include setBgColor($cyan-60);
 }
+.#{$block-class}--xl {
+  @include size('xl');
+  @include type.type-style('heading-04');
+}
+
+.#{$block-class}--lg {
+  @include size('lg');
+  @include type.type-style('heading-03');
+}
+
+.#{$block-class}--md {
+  @include size('md');
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class}--sm {
+  @include size('sm');
+  @include type.type-style('label-01');
+}

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

@@ -47,6 +47,7 @@
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;
 @use './SimpleHeader/index-with-carbon' as *;
+@use './BigNumbers/index-with-carbon' as *;
 @use './TruncatedList/index-with-carbon' as *;
 @use './InterstitialScreen/index-with-carbon' as *;
 @use './InterstitialScreenView/index-with-carbon' as *;
@@ -61,4 +62,5 @@
 @use './DelimitedList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;
+@use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -62,6 +62,7 @@
 @use './Guidebanner';
 @use './InlineTip';
 @use './NonLinearReading';
+@use './BigNumbers';
 @use './TruncatedList';
 @use './InterstitialScreen';
 @use './InterstitialScreenView';
@@ -69,4 +70,5 @@
 @use './DelimitedList';
 @use './FullPageError';
 @use './SearchBar';
+@use './StringFormatter';
 @use './UserAvatar';

package/es/_virtual/index2.js

@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-var propTypes = {exports: {}};
-
-export { propTypes as __module };