@carbon/ibm-products 2.12.0 → 2.13.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/_useInlineEdit.scss

@@ -116,18 +116,15 @@ $row-heights: (
     justify-content: flex-start;
   }
   // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(
-      .#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
-    ) {
-    .#{variables.$block-class}__inline-edit-button-icon {
-      display: none;
-    }
+  .#{variables.$block-class}__inline-edit-button-icon {
+    display: none;
+  }
 
-    /* stylelint-disable-next-line */
-    &:hover {
-      .#{variables.$block-class}__inline-edit-button-icon {
-        display: block;
-      }
+  /* stylelint-disable-next-line */
+  &:hover,
+  &.#{variables.$block-class}__inline-edit-button--active {
+    .#{variables.$block-class}__inline-edit-button-icon {
+      display: block;
     }
   }
 }

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

@@ -43,3 +43,8 @@
   height: $spacing-09;
   justify-content: center;
 }
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+  background-color: $layer-02;
+}

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';

package/es/components/Datagrid/utils/getColTitle.js

@@ -1,25 +0,0 @@
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 || (_col$Header = col.Header) === null || _col$Header === void 0 || (_col$Header = _col$Header.props) === null || _col$Header === void 0 ? void 0 : _col$Header.title;
-};
-export default getColTitle;

package/lib/components/Datagrid/utils/getColTitle.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 || (_col$Header = col.Header) === null || _col$Header === void 0 || (_col$Header = _col$Header.props) === null || _col$Header === void 0 ? void 0 : _col$Header.title;
-};
-var _default = getColTitle;
-exports.default = _default;