@carbon/ibm-products 2.33.0 → 2.34.0

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

@@ -0,0 +1,62 @@
+//
+// 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@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 *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox-with-overflow;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+.#{$block-class} {
+  position: relative;
+}
+.#{$block-class}--open,
+.#{$block-class}:hover,
+.#{$block-class}:focus-within {
+  background-color: $field;
+}
+
+// Position the menu button via its wrapper, not the button itself.
+.#{$block-class} .#{$carbon}--overflow-menu__wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+// Size the menu button.
+.#{$block-class} .#{$block-class}__overflow-button {
+  width: $spacing-06;
+  background-color: $layer;
+  block-size: $spacing-06;
+  min-block-size: $spacing-06;
+}
+
+// OverflowMenu <li>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__option {
+  height: $spacing-06;
+}
+// OverflowMenu <button>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__btn {
+  max-width: none;
+  justify-content: flex-end;
+}
+// SIZE FIX: This element is being used to "erase" the drop shadow
+// created by the menu items overtop the menu button.
+.#{$block-class}__overflow-options.#{$carbon}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
+    .#{$carbon}--breadcrumb-menu-options
+  )::after {
+  inline-size: $spacing-06;
+}

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

@@ -11,16 +11,38 @@
 @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';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
 $label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+$carbon: #{c4p-settings.$carbon-prefix};
 
-// Set Carbon's Checkbox label to 100% the width of its container.
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+// UNDO Carbon's concept that a Checkbox is always a list item (":last-of-type").
+// This also allows the TruncatedList to calculate the correct height for expanding/collapsing the list.
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper,
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper:last-of-type {
+  margin-block-end: 0;
+}
+
+// Surround a checkbox's count with parentheses.
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::before {
+  content: '(';
+}
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::after {
+  content: ')';
+}
+
+.#{$block-class} .#{$carbon}--checkbox-label,
+.#{$block-class} .#{$carbon}--checkbox-label-text {
+  // Set Carbon's Checkbox label to 100% the width of the filter panel.
   width: 100%;
+  // Match height to the "checkbox with overflow" button.
+  height: $spacing-06;
 }
 
 .#{$block-class} .#{$label}__text {

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

@@ -0,0 +1,39 @@
+//
+// 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@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';
+
+// 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-group;
+
+.#{$block-class} {
+  padding-top: $spacing-04;
+  border-top: to-rem(1px) solid $border-subtle;
+  margin-top: $spacing-04;
+  margin-bottom: $spacing-04;
+}
+
+.#{$block-class}__title {
+  @include type.type-style('label-01');
+  @include type.font-weight('semibold');
+
+  margin-top: 0;
+  margin-bottom: $spacing-04;
+}

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

@@ -37,11 +37,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-label;
   margin-left: $spacing-04;
   color: $text-secondary;
 }
-
-// Surround the value with parentheses.
-.#{$block-class}__count::before {
-  content: '(';
-}
-.#{$block-class}__count::after {
-  content: ')';
-}

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

@@ -17,9 +17,11 @@
 
 // FilterPanel uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by FilterPanel
+@use '../TruncatedList';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--filter-panel;
+$carbon: #{c4p-settings.$carbon-prefix};
 
 .#{$block-class}__title {
   @include type.type-style('body-compact-01');

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

@@ -7,5 +7,9 @@
 
 @use './carbon-imports';
 @use './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
 @use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
 @use './filter-panel-label';

package/scss/components/FilterPanel/_index.scss

@@ -6,5 +6,9 @@
 //
 
 @use './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
 @use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
 @use './filter-panel-label';

package/scss/components/ScrollGradient/_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 ScrollGradient in this file.
+// ScrollGradient uses the following Carbon components:

package/scss/components/ScrollGradient/_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 './scroll-gradient';

package/scss/components/ScrollGradient/_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 './scroll-gradient';

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/UserAvatar/_user-avatar.scss

@@ -75,13 +75,46 @@ $sizes: (
   background-color: $color;
 }
 
-.#{$block-class}--light-cyan {
-  @include setBgColor($cyan-50);
+@mixin setLightBg($order, $color) {
+  .#{$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,6 @@
 @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 './FilterPanel/index-with-carbon' as *;

package/scss/components/_index.scss

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