@carbon/ibm-products 2.26.0 → 2.27.0

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/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

@@ -353,7 +353,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;

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

@@ -93,6 +93,22 @@ $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;
+    /* 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 +239,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 +314,10 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
+  &.#{$block-class}--has-slug .#{$block-class}__main {
+    @include utilities.callout-gradient('default', 0);
+  }
+
   &.#{$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 +346,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 +367,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';