@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -21,8 +21,15 @@
 $block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
 $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
-.#{$block-class} .#{$block-class} {
+.#{$block-class} {
+  display: grid;
+  height: 100%;
   color: $text-primary;
+  grid-template-rows: minmax(auto, 100%);
+
+  &:has(.#{$block-class}__header) {
+    grid-template-rows: auto minmax(auto, 100%);
+  }
 }
 
 .#{$block-class}
@@ -33,14 +40,6 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
   margin-left: 0;
 }
 
-.#{$block-class}__header {
-  position: sticky;
-  z-index: 9;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
 .#{$block-class} .#{$step-block-class}__step--hidden-step {
   display: none;
 }
@@ -75,7 +74,8 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 
 .#{$block-class}__influencer-and-body-container {
   display: flex;
-  height: 100vh;
+  overflow: hidden;
+  max-height: 100%;
   padding: 0;
   margin: 0;
 }

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -71,7 +71,11 @@
   .#{$block-class}__carbon-nested-row:not(
     .#{$block-class}__carbon-row-expandable
   )
-  td.#{$block-class}__cell:nth-of-type(2) {
+  td.#{$block-class}__cell:nth-of-type(2),
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__cell:nth-of-type(2)
+  + td {
   position: relative;
 }
 

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -76,4 +76,6 @@
     opacity: 1;
     visibility: visible;
   }
+
+  background-color: $layer-selected-hover-01;
 }

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

@@ -7,3 +7,8 @@
 
 // Import any Carbon component styles used from FilterPanel in this file.
 // FilterPanel uses the following Carbon components:
+@use '@carbon/react/scss/components/accordion';
+@use '@carbon/react/scss/components/checkbox';
+@use '@carbon/react/scss/components/list';
+@use '@carbon/react/scss/components/overflow-menu';
+@use '@carbon/react/scss/components/search';

package/scss/components/FilterPanel/_filter-panel-accordion-item.scss

@@ -12,9 +12,7 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -34,7 +32,7 @@ html .#{$block-class} .#{$carbon}--accordion__wrapper {
   padding-block: 0;
 }
 html .#{$block-class} .#{$carbon}--accordion__heading {
-  min-block-size: 2rem;
+  min-block-size: $spacing-07;
   padding-inline-end: 0;
 }
 html .#{$block-class} .#{$carbon}--accordion__title {

package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss

@@ -12,8 +12,6 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 

package/scss/components/FilterPanel/_filter-panel-checkbox.scss

@@ -11,7 +11,6 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 
-@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type';
 

package/scss/components/FilterPanel/_filter-panel-search.scss

@@ -0,0 +1,38 @@
+//
+// 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/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-search;
+
+.#{$block-class} {
+  position: relative;
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}__results {
+  position: absolute;
+  z-index: utilities.z('dropdown');
+  top: 100%;
+  right: 0;
+  left: 0;
+  /* stylelint-disable-next-line function-no-unknown */
+  max-height: to-rem(320px);
+  padding: $spacing-03;
+  background-color: $layer;
+  overflow-y: auto;
+}

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

@@ -13,3 +13,4 @@
 @use './filter-panel-checkbox-with-overflow';
 @use './filter-panel-group';
 @use './filter-panel-label';
+@use './filter-panel-search';

package/scss/components/FilterPanel/_index.scss

@@ -12,3 +12,4 @@
 @use './filter-panel-checkbox-with-overflow';
 @use './filter-panel-group';
 @use './filter-panel-label';
+@use './filter-panel-search';

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

@@ -24,7 +24,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 .#{$block-class} {
   height: inherit;
 }
-.#{$block-class}__error-container {
+.#{$block-class}__container {
   height: 100%;
   margin: 0 $spacing-06;
 
@@ -32,19 +32,19 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
     margin: 0 $spacing-03;
   }
 }
-.#{$block-class}__error-grid {
+.#{$block-class}__grid {
   height: 100%;
   padding-top: $spacing-07;
   padding-bottom: $spacing-07;
 }
-.#{$block-class}__error-column {
+.#{$block-class}__column {
   padding: 0;
   @include breakpoint(lg) {
     padding: 0 $spacing-07 0 0;
   }
 }
 
-.#{$block-class}__error-svg-container {
+.#{$block-class}__svg-container {
   display: flex;
   height: 100%;
   padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
@@ -53,16 +53,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
   }
 }
 
-.#{$block-class}__error-label,
-.#{$block-class}__error-title {
+.#{$block-class}__label,
+.#{$block-class}__title {
   @include type-style('fluid-heading-05', true);
 }
 
-.#{$block-class}__error-label {
+.#{$block-class}__label {
   display: block;
   color: $text-error;
 }
-.#{$block-class}__error-title {
+.#{$block-class}__title {
   margin-bottom: $spacing-09;
 }
 
@@ -73,12 +73,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--full-page-error;
 }
 
 // safari rendering fix
-.#{$block-class}__error-svg-container svg.#{$block-class}__error-svg {
+.#{$block-class}__svg-container svg.#{$block-class}__svg {
   width: 100%;
 }
 
 // svg theme styles
-.#{$block-class}__error-svg-container svg.#{$block-class}__error-svg path {
+.#{$block-class}__svg-container svg.#{$block-class}__svg path {
   fill: $background;
   stroke: $border-inverse;
 }

package/scss/components/Guidebanner/_guidebanner.scss

@@ -248,7 +248,7 @@ $purple-3: #7433e3;
 }
 
 // Exception handling.
-// If "withLeftgutter", then:
+// 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 {

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

@@ -229,7 +229,7 @@ $purple: #7f3ae7;
 }
 
 // Exception handling.
-// If "withLeftgutter", then:
+// 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 {

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

@@ -16,6 +16,9 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__productive {
+  display: flex;
+  flex-direction: column;
+
   .#{$block-class}__title {
     @include type.type-style('heading-compact-02');
   }
@@ -101,4 +104,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   .#{$block-class}__header-container {
     align-items: flex-start;
   }
+
+  .#{$block-class}__content-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__header-body-container {
+    flex: 1;
+  }
 }

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

@@ -65,7 +65,6 @@ $sizes: (
 }
 
 @mixin photo-styling {
-  position: fixed;
   border-radius: 100%;
   object-fit: fill;
 }
@@ -76,15 +75,20 @@ $sizes: (
 }
 
 @mixin setLightBg($order, $color) {
+  :root .#{$block-class}--#{$order},
   .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--white .#{$block-class}--#{$order},
+  [storybook-carbon-theme='g10'] .#{$block-class}--#{$order},
+  [storybook-carbon-theme='white'] .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }
 
 @mixin setDarkBg($order, $color) {
   .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
-  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
+  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order},
+  [storybook-carbon-theme='g90'] .#{$block-class}--#{$order},
+  [storybook-carbon-theme='g100'] .#{$block-class}--#{$order} {
     @include setBgColor($color);
   }
 }

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

@@ -72,4 +72,6 @@
 @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

@@ -80,4 +80,6 @@
 @use './UserAvatar';
 @use './ScrollGradient';
 @use './StatusIndicator';
+@use './TagOverflow';
 @use './FilterPanel';
+@use './ConditionBuilder';