@carbon/ibm-products 1.56.0 → 1.58.0

package/scss/components/Checklist/_checklist.scss

@@ -0,0 +1,231 @@
+/* stylelint-disable declaration-no-important */
+
+//
+// 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.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// Checklist uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by Checklist
+
+// Checklist uses the following Carbon for IBM Products components:
+// TODO: @import(s) of IBM Products component styles used by Checklist
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+
+@mixin ellipsis-2-lines {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+@mixin checklist {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--checklist;
+
+  .#{$block-class} {
+    &__header {
+      display: flex;
+      padding: $spacing-05;
+      background-color: $ui-01;
+      gap: $spacing-03;
+    }
+
+    &__chart {
+      // outer donut
+      position: relative;
+      width: $spacing-08;
+      min-width: $spacing-08;
+      height: $spacing-08;
+      align-self: center;
+
+      &::after {
+        // inner donut
+        position: absolute;
+        top: $spacing-02;
+        left: $spacing-02;
+        width: $spacing-07;
+        height: $spacing-07;
+        border-radius: 50%;
+        background-color: $ui-01;
+        content: '';
+      }
+    }
+
+    // Align __title and __chart-label vertically centered in the header.
+    &__titles {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__title {
+      @include carbon--type-style('productive-heading-02');
+      @include ellipsis-2-lines();
+    }
+
+    &__chart-label {
+      @include carbon--type-style('label-01');
+      @include ellipsis-2-lines();
+
+      color: $text-02;
+    }
+
+    &__title + &__chart-label {
+      margin-top: $spacing-01;
+    }
+
+    // open/close toggle
+    &__toggle {
+      width: 30px;
+      min-width: 30px;
+      height: 30px;
+      min-height: 30px !important;
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      padding: 0 rem(6px) !important;
+      margin-top: calc(-1 * $spacing-03) !important;
+      margin-right: calc(-1 * $spacing-03) !important;
+      margin-left: auto !important;
+    }
+
+    &__chevron {
+      color: $text-01;
+      transform: rotate(0deg);
+      transition: all $duration--fast-02 motion(standard, productive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &__closed &__chevron {
+      transform: rotate(-180deg);
+    }
+
+    // Button to appear more like a link so it aligns better with the list text
+    &__button {
+      max-width: none !important;
+      min-height: auto !important;
+      // override bx--btn to allow two-line ellipsis
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      flex-shrink: unset !important;
+      padding: 0 !important;
+      border: none !important;
+      background-color: transparent !important;
+      color: $link-01 !important;
+
+      // The CSS for the Carbon button's label
+      // is incompatible with two-line ellipsis,
+      // but a div inside a Carbon button works.
+      div {
+        @include ellipsis-2-lines();
+      }
+
+      &:hover {
+        background: transparent;
+        color: $link-primary-hover;
+        text-decoration: underline;
+      }
+
+      &:active {
+        background: transparent;
+        color: $text-primary;
+        text-decoration: underline;
+      }
+
+      &--error {
+        color: $text-error !important;
+      }
+    }
+
+    // container for animated content
+    &__content-outer {
+      overflow: hidden;
+    }
+
+    &__content-inner {
+      height: 100%;
+      background-color: $ui-01;
+      transform: translate(0, 0);
+      transition: all $duration--fast-02 motion(standard, productive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &__closed &__content-inner {
+      height: 0;
+      transform: translate(0, -100%);
+    }
+
+    &__list-group {
+      padding: $spacing-05;
+      border-top: 1px solid $ui-03;
+    }
+
+    &__list-title {
+      @include carbon--type-style('body-short-01');
+      @include ellipsis-2-lines();
+
+      margin-bottom: $spacing-03;
+    }
+
+    &__list-item {
+      display: flex;
+      margin-bottom: $spacing-03;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &__icon {
+      /* stylelint-disable-next-line carbon/layout-token-use */
+      margin: rem(1px) $spacing-03 0 0;
+      color: $link-01;
+
+      &--error {
+        color: $support-error;
+      }
+
+      &--disabled {
+        color: $disabled-03;
+      }
+    }
+
+    &__label {
+      @include carbon--type-style('body-short-01');
+      @include ellipsis-2-lines();
+
+      &--checked,
+      &--disabled,
+      &--error {
+        color: $disabled-03;
+      }
+    }
+
+    &__footer {
+      @include ellipsis-2-lines();
+
+      padding: $spacing-03 $spacing-05;
+      border-top: 1px solid $ui-03;
+    }
+  }
+}
+
+@include exports('checklist') {
+  @include checklist;
+}

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.
+//
+
+@import './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.
+//
+
+@import '../../global/styles/project-settings';
+
+.checklist-stories__viewport .c4p--checklist {
+  min-width: calc(2 * $spacing-13); // 320px
+  max-width: calc(2 * $spacing-13);
+}

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

@@ -164,6 +164,23 @@
   width: 100%;
   padding-top: 0;
 
+  .#{$carbon-prefix}--data-table-header__description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$carbon-prefix}--data-table-header__title {
+    overflow: hidden;
+    max-width: 80ch;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include carbon--breakpoint(md) {
+      max-width: 55ch;
+    }
+  }
+
   .#{$carbon-prefix}--data-table-content {
     width: 100%;
     height: 100%;
@@ -612,3 +629,77 @@
 .#{$block-class} .#{$pkg-prefix}--datagrid__head-wrap {
   background-color: $ui-03;
 }
+
+.#{$block-class} .#{$block-class}__col-resizer-range {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: calc(#{$spacing-03} * -1);
+  width: 1rem;
+  height: 100%;
+  margin: 0;
+  -moz-appearance: initial;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range:focus {
+  outline: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: var(--#{$block-class}--header-height);
+  background-color: $focus;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator {
+  position: absolute;
+  z-index: 2;
+  right: calc(#{$spacing-03} * -1);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 100%;
+  margin: 0;
+  background-color: $focus;
+  transform: translate(-50%, 0);
+}
+
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::after {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: calc(var(--#{$block-class}--row-height) - 20px);
+  right: $spacing-02;
+  width: 1px;
+  height: calc(
+    var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
+  );
+  background-color: $active-ui;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-moz-range-thumb {
+  visibility: hidden;
+}

package/scss/components/NonLinearReading/_non-linear-reading.scss

@@ -8,18 +8,50 @@
 // Standard imports.
 @import '../../global/styles/project-settings';
 
-@mixin keyword-closed-defaults {
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  15% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin keyword-closed {
   height: rem(20px);
   padding-top: 0;
   // stylelint-disable-next-line carbon/layout-token-use
   padding-right: rem(3px);
   border-width: rem(1px);
   border-style: solid;
+  border-color: $button-tertiary;
   border-radius: $spacing-04;
+  background-color: transparent;
+  color: $button-tertiary;
   white-space: nowrap;
 
   &:hover {
-    cursor: pointer;
+    border-color: $button-tertiary;
+    background-color: $button-tertiary;
+    color: $text-inverse;
+  }
+
+  &:focus {
+    border-color: $text-inverse;
+    background-color: $button-tertiary;
+    box-shadow: 0 0 0 1px $text-inverse, 0 0 0 3px $button-tertiary;
+    color: $text-inverse;
+  }
+
+  // Disable browser's default focus outline.
+  // We will provide all the focus/outline styling.
+  &:focus-visible {
+    outline: none;
   }
 
   // The "up" chevron
@@ -29,25 +61,47 @@
     vertical-align: text-top;
   }
 }
-@mixin keyword-open-defaults {
-  @include keyword-closed-defaults();
+@mixin keyword-open {
+  @include keyword-closed();
+
+  border-color: $button-tertiary;
+  background-color: $button-tertiary;
+  color: $text-inverse;
+
+  &:hover {
+    border-color: $button-tertiary;
+    background-color: transparent;
+    color: $button-tertiary;
+  }
+
+  &:focus {
+    border-color: $text-inverse;
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px $button-tertiary, 0 0 0 1px $text-inverse,
+      0 0 0 3px $button-tertiary;
+    color: $button-tertiary;
+  }
 
   // The "up" chevron, flipped
   svg {
     transform: rotate(180deg);
   }
 }
+
 @mixin body-defaults {
   @include carbon--type-style('body-long-01');
 
   display: block;
   padding: $spacing-03 $spacing-04;
-  border-left-width: rem(1.25px);
-  border-left-style: solid;
+  border-left: rem(1.25px) solid $text-01;
   margin: $spacing-02 0;
   // Novice to pro does not always use Carbon defaults/tokens
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
   animation: fade 600ms;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 }
 
 // Other Carbon settings.
@@ -65,92 +119,50 @@
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--non-linear-reading;
 
-  @keyframes fade {
-    0% {
-      opacity: 0;
-    }
-
-    15% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
   .#{$block-class}__light {
     .#{$block-class}__keyword {
       &-closed {
-        @include keyword-closed-defaults();
-
-        border-color: $interactive-03;
-        background-color: transparent;
-        color: $interactive-03;
+        @include keyword-closed();
+      }
 
-        &:hover {
-          background-color: $interactive-03;
-          color: $inverse-01;
-        }
+      // The body has an id that must be visible to the button's "aria-controls" property.
+      // We *must* render the body with the id to avoid breaking accessibility.
+      // When closed we render but don't display the body, and we don't render the "content".
+      // When open, we display the body, and render the content.
+      &-closed + .#{$block-class}__body {
+        display: none;
       }
 
       &-open {
-        @include keyword-open-defaults();
-
-        border-color: $interactive-03;
-        background-color: $interactive-03;
-        color: $inverse-01;
-
-        &:hover {
-          background-color: transparent;
-          color: $interactive-03;
-        }
+        @include keyword-open();
       }
     }
 
     .#{$block-class}__body {
       @include body-defaults();
-
-      border-left-color: $text-01;
     }
   }
 
   .#{$block-class}__dark {
+    @include carbon--theme($carbon--theme--g100, true);
+
     .#{$block-class}__keyword {
       &-closed {
-        @include carbon--theme($carbon--theme--g100, true);
-        @include keyword-closed-defaults();
-
-        border-color: $icon-03;
-        background-color: transparent;
-        color: $text-01;
+        @include keyword-closed();
+      }
 
-        &:hover {
-          background-color: $icon-03;
-          color: $inverse-01;
-        }
+      &-closed + .#{$block-class}__body {
+        display: none;
       }
 
       &-open {
-        @include carbon--theme($carbon--theme--g100, true);
-        @include keyword-open-defaults();
-
-        border-color: $icon-03;
-        background-color: $icon-03;
-        color: $inverse-01;
-
-        &:hover {
-          background-color: transparent;
-          color: $text-01;
-        }
+        @include keyword-open();
       }
     }
 
     .#{$block-class}__body {
-      @include carbon--theme($carbon--theme--g100, true);
       @include body-defaults();
 
-      border-left-color: $text-01;
       color: $text-01;
 
       // override default link color to compensate for a gradient background.

package/scss/components/_index.scss

@@ -63,3 +63,4 @@
 @import './CoachmarkStack/index';
 @import './InlineTip/index';
 @import './SteppedAnimatedMedia/index';
+@import './Checklist/index';