@carbon/ibm-products 2.12.1 → 2.14.0

package/scss/components/Checklist/_checklist.scss

@@ -0,0 +1,217 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// 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 '@carbon/layout/scss/convert' as *;
+
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+@mixin ellipsis-2-lines {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--checklist;
+
+// .#{$block-class} {
+.#{$block-class}__header {
+  display: flex;
+  padding: $spacing-05;
+  background-color: $layer-01;
+  gap: $spacing-03;
+}
+
+.#{$block-class}__chart {
+  // outer donut
+  position: relative;
+  width: $spacing-08;
+  min-width: $spacing-08;
+  height: $spacing-08;
+  align-self: center;
+}
+
+.#{$block-class}__chart::after {
+  // inner donut
+  position: absolute;
+  top: $spacing-02;
+  left: $spacing-02;
+  width: $spacing-07;
+  height: $spacing-07;
+  border-radius: 50%;
+  background-color: $layer-01;
+  content: '';
+}
+
+// Align __title and __chart-label vertically centered in the header.
+.#{$block-class}__titles {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.#{$block-class}__title {
+  @include type-style('productive-heading-02');
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__chart-label {
+  @include type-style('label-01');
+  @include ellipsis-2-lines();
+
+  color: $text-secondary;
+}
+
+.#{$block-class}__title + .#{$block-class}__chart-label {
+  margin-top: $spacing-01;
+}
+
+// TOGGLE
+// The <iconbutton> itself (class="...__toggle") is embedded inside two more tags,
+// which do not accept any classnames passed via the <iconbutton>.
+// So, we have to refer to it via it's "tooltip" wrapper element. :/
+.#{$block-class}__header .#{c4p-settings.$carbon-prefix}--tooltip {
+  height: 2rem;
+  margin-top: calc(-1 * $spacing-03);
+  margin-right: calc(-1 * $spacing-03);
+  margin-left: auto;
+}
+
+.#{$block-class}__chevron {
+  color: $text-primary;
+  transform: rotate(0deg);
+  transition: all $duration-fast-02 motion(standard, productive);
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{$block-class}__closed .#{$block-class}__chevron {
+  transform: rotate(-180deg);
+}
+
+// Button to appear more like a link so it aligns better with the list text.
+// Override Primary button styling to appear more like a link.
+// "Unset" some settings to allow an inner div to enable multiple lines and an ellipsis if req'd.
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary {
+  max-width: none;
+  min-height: auto;
+  // override bx--btn to allow two-line ellipsis
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  flex-shrink: unset;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: $link-primary;
+}
+// The CSS for the Carbon button's label
+// is incompatible with two-line ellipsis,
+// but a div inside a Carbon button works.
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary div {
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary:hover {
+  background: transparent;
+  color: $link-primary-hover;
+  text-decoration: underline;
+}
+
+.#{$block-class}__button.#{c4p-settings.$carbon-prefix}--btn--primary:active {
+  background: transparent;
+  color: $text-primary;
+  text-decoration: underline;
+}
+
+.#{$block-class}__button--error {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: $text-error !important;
+}
+
+// container for animated content
+.#{$block-class}__content-outer {
+  overflow: hidden;
+}
+
+.#{$block-class}__content-inner {
+  height: 100%;
+  background-color: $layer-01;
+  transform: translate(0, 0);
+  transition: all $duration-fast-02 motion(standard, productive);
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{$block-class}__closed .#{$block-class}__content-inner {
+  height: 0;
+  transform: translate(0, -100%);
+}
+
+.#{$block-class}__list-group {
+  padding: $spacing-05;
+  border-top: 1px solid $border-subtle-01;
+}
+
+.#{$block-class}__list-title {
+  @include type-style('body-short-01');
+  @include ellipsis-2-lines();
+
+  margin-bottom: $spacing-03;
+}
+
+.#{$block-class}__list-item {
+  display: flex;
+  margin-bottom: $spacing-03;
+}
+
+.#{$block-class}__list-item:last-child {
+  margin-bottom: 0;
+}
+
+.#{$block-class}__icon {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  margin: to-rem(1px) $spacing-03 0 0;
+  color: $link-primary;
+}
+
+.#{$block-class}__icon--error {
+  color: $support-error;
+}
+
+.#{$block-class}__icon--disabled {
+  color: $icon-disabled;
+}
+
+.#{$block-class}__label {
+  @include type-style('body-short-01');
+  @include ellipsis-2-lines();
+}
+
+.#{$block-class}__label--checked,
+.#{$block-class}__label--disabled,
+.#{$block-class}__label--error {
+  color: $text-disabled;
+}
+
+.#{$block-class}__footer {
+  @include ellipsis-2-lines();
+
+  padding: $spacing-03 $spacing-05;
+  border-top: 1px solid $border-subtle;
+}

package/scss/components/Checklist/_index.scss

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

package/scss/components/Checklist/_storybook-styles.scss

@@ -0,0 +1,13 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// 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/styles/scss/spacing' as *;
+
+.checklist-stories__viewport {
+  min-width: calc(2 * $spacing-13); // 320px
+  max-width: calc(2 * $spacing-13);
+}

package/scss/components/CreateFullPage/_storybook-styles.scss

@@ -58,7 +58,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
 .#{$story-class}__error--text {
   @include type.type-style('label-01');
 
-  padding-bottom: $spacing-05;
+  margin-bottom: $spacing-05;
 }
 
 .#{$block-class}

package/scss/components/Datagrid/_datagrid.scss

@@ -24,6 +24,7 @@
 // Datagrid uses the following Carbon for IBM Products components:
 // TODO: @use(s) of IBM Products component styles used by Datagrid
 @use '../ButtonMenu';
+@use '../FilterSummary';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--datagrid;

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

@@ -360,8 +360,7 @@
 .#{$block-class}__simple-body {
   position: relative;
   display: table;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   //makes thin scrollbar in chrome and firefox
   scrollbar-width: thin;
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -43,3 +43,44 @@
   height: $spacing-09;
   justify-content: center;
 }
+
+// Top align cell content for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+
+  &.#{variables.$block-class}__actions-column-cell {
+    padding-left: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  th,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  th {
+  .#{c4p-settings.$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  .#{variables.$block-class}__checkbox-cell
+  th.cds--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: $spacing-04;
+}
+
+.#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+  background-color: $layer-02;
+}

package/scss/components/TagSet/_tag-set.scss

@@ -140,11 +140,19 @@ $block-class-modal: #{$_block-class}-modal;
   }
 
   .#{$block-class-overflow}__tag-list {
+    display: flex;
+    flex-direction: column;
     margin-bottom: $spacing-03;
   }
 
-  .#{$block-class-overflow}__tag-item,
-  .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+    .#{$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+    .#{$carbon-prefix}--tag {
     @include type.type-style('body-compact-01');
 
     display: block;

package/scss/components/_index.scss

@@ -23,7 +23,7 @@
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
-@use './FilterSummary/index';
+@use './FilterSummary';
 @use './HTTPErrors';
 @use './ImportModal';
 @use './MultiAddSelect';
@@ -50,3 +50,4 @@
 @use './EditTearsheetNarrow';
 @use './EditFullPage';
 @use './EditUpdateCards';
+@use './Checklist';