@carbon/ibm-products 2.33.0 → 2.35.0

package/scss/components/ScrollGradient/_scroll-gradient.scss

@@ -0,0 +1,102 @@
+//
+// 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/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+  width: inherit;
+  height: inherit;
+  align-items: stretch;
+  justify-content: stretch;
+}
+.#{$block-class}__content {
+  overflow: auto;
+  width: 100%;
+  height: inherit;
+}
+
+.#{$block-class}__content-children {
+  width: 100%;
+  height: 100%;
+}
+// All gradients
+.#{$block-class}__start-vertical,
+.#{$block-class}__start-horizontal,
+.#{$block-class}__end-vertical,
+.#{$block-class}__end-horizontal {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  pointer-events: none;
+}
+
+// Vertical start
+.#{$block-class}--y-scrollable .#{$block-class}__start-vertical {
+  top: 0;
+  left: 0;
+  height: $spacing-09;
+}
+// Vertical end
+.#{$block-class}--y-scrollable .#{$block-class}__end-vertical {
+  bottom: 0;
+  left: 0;
+  height: $spacing-09;
+}
+
+// Horizontal start
+.#{$block-class}--x-scrollable .#{$block-class}__start-horizontal {
+  top: 0;
+  left: 0;
+  width: $spacing-09;
+}
+
+// Horizontal end
+.#{$block-class}--x-scrollable .#{$block-class}__end-horizontal {
+  top: 0;
+  right: 0;
+  width: $spacing-09;
+}
+
+// Vertical start states
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical,
+.#{$block-class}--y-end.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical {
+  display: block;
+}
+
+// Vertical end states
+.#{$block-class}--y-initial.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical,
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical {
+  display: block;
+}
+
+// Horizontal start states
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal,
+.#{$block-class}--x-end.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal {
+  display: block;
+}
+
+// Horizontal end states
+.#{$block-class}--x-initial.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal,
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal {
+  display: block;
+}

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

@@ -122,10 +122,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     z-index: 4;
     /* stylelint-disable-next-line carbon/layout-token-use */
     top: calc(-1px * var(--#{$block-class}--scroll-animation-distance));
+    min-height: $spacing-08;
     padding: $spacing-05;
     padding-bottom: 0;
     background-color: $layer-01;
 
+    &.#{$block-class}__header--has-title {
+      min-height: auto;
+    }
+
     &:has(.#{$block-class}__subtitle-text),
     &.#{$block-class}__header--has-subtitle {
       --#{$block-class}--title-padding-bottom: #{$spacing-03};
@@ -170,11 +175,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       margin-bottom: 0;
     }
 
-    &.#{$block-class}__header--on-detail-step
-      .#{$block-class}__collapsed-title-text {
-      top: $spacing-05;
-    }
-
     &.#{$block-class}__header--on-detail-step
       .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
       ~ .#{$block-class}__collapsed-title-text {
@@ -297,6 +297,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding-top: 0;
   }
 
+  .#{$block-class}__inner-content--no-animated-title {
+    padding-top: $spacing-05;
+  }
+
   .#{$block-class}__header:has(.#{$block-class}__action-toolbar)
     + .#{$block-class}__inner-content,
   .#{$block-class}__header--has-action-toolbar
@@ -311,10 +315,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       0 4px 10px 2px $ai-drop-shadow;
   }
 
-  .#{$block-class}__inner-content.#{$block-class}--scrolls {
-    padding-top: $spacing-05;
-  }
-
   .#{$block-class}__action-toolbar {
     position: sticky;
     z-index: 4;

package/scss/components/TagOverflow/_carbon-imports.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.
+//
+
+// Import any Carbon component styles used from TagOverflow in this file.
+// TagOverflow uses the following Carbon components:

package/scss/components/TagOverflow/_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 './tag-overflow';

package/scss/components/TagOverflow/_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 './tag-overflow';

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

@@ -0,0 +1,55 @@
+//
+// 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/spacing' as *;
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// TagOverflow uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by TagOverflow
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
+
+.#{$block-class} {
+  display: flex;
+  width: 100%;
+  min-width: $spacing-12;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.#{$block-class}--multiline {
+  flex-wrap: wrap;
+}
+
+.#{$block-class}__item {
+  margin: $spacing-01;
+}
+
+.#{$block-class}__item--tag {
+  border: none;
+}
+
+.#{$block-class}__item--tag span {
+  display: inline-block;
+  overflow: hidden;
+  max-width: $spacing-12;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__indicator {
+  display: inline-block;
+  max-width: $spacing-09;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -317,6 +317,16 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
+  @include breakpoint-down(md) {
+    .#{$block-class}__container {
+      max-height: 100%;
+    }
+
+    .#{$block-class}__influencer {
+      flex-basis: auto;
+    }
+  }
+
   .#{$block-class}__influencer--wide {
     flex-basis: 321px; // influencer width 320px plus 1px border
   }

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

@@ -75,13 +75,47 @@ $sizes: (
   background-color: $color;
 }
 
-.#{$block-class}--light-cyan {
-  @include setBgColor($cyan-50);
+@mixin setLightBg($order, $color) {
+  :root .#{$block-class}--#{$order},
+  .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
+  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
 }
 
-.#{$block-class}--dark-cyan {
-  @include setBgColor($cyan-60);
+@mixin setDarkBg($order, $color) {
+  .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
+  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
 }
+
+@include setLightBg(order-1-cyan, $cyan-60);
+@include setLightBg(order-2-gray, $gray-60);
+@include setLightBg(order-3-green, $green-60);
+@include setLightBg(order-4-magenta, $magenta-60);
+@include setLightBg(order-5-purple, $purple-60);
+@include setLightBg(order-6-teal, $teal-60);
+@include setLightBg(order-7-cyan, $cyan-80);
+@include setLightBg(order-8-gray, $gray-80);
+@include setLightBg(order-9-green, $green-80);
+@include setLightBg(order-10-magenta, $magenta-80);
+@include setLightBg(order-11-purple, $purple-80);
+@include setLightBg(order-12-teal, $teal-80);
+
+@include setDarkBg(order-1-cyan, $cyan-50);
+@include setDarkBg(order-2-gray, $gray-50);
+@include setDarkBg(order-3-green, $green-50);
+@include setDarkBg(order-4-magenta, $magenta-50);
+@include setDarkBg(order-5-purple, $purple-50);
+@include setDarkBg(order-6-teal, $teal-50);
+@include setDarkBg(order-7-cyan, $cyan-30);
+@include setDarkBg(order-8-gray, $gray-30);
+@include setDarkBg(order-9-green, $green-30);
+@include setDarkBg(order-10-magenta, $magenta-30);
+@include setDarkBg(order-11-purple, $purple-30);
+@include setDarkBg(order-12-teal, $teal-30);
+
 .#{$block-class}--xl {
   @include size('xl');
   @include type.type-style('heading-04');

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

@@ -70,5 +70,8 @@
 @use './Nav/index-with-carbon' as *;
 @use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;
+@use './ScrollGradient/index-with-carbon' as *;
 @use './StatusIndicator/index-with-carbon' as *;
+@use './TagOverflow/index-with-carbon' as *;
 @use './FilterPanel/index-with-carbon' as *;
+@use './ConditionBuilder/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -78,5 +78,8 @@
 @use './Nav';
 @use './StringFormatter';
 @use './UserAvatar';
+@use './ScrollGradient';
 @use './StatusIndicator';
+@use './TagOverflow';
 @use './FilterPanel';
+@use './ConditionBuilder';