@carbon/ibm-products 1.61.0 → 1.62.0

package/lib/global/js/hooks/usePrefix.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrefix = void 0;
+var _packageSettings = _interopRequireDefault(require("../package-settings"));
+/**
+ * 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.
+ */
+
+var usePrefix = function usePrefix() {
+  return _packageSettings.default.prefix;
+};
+exports.usePrefix = usePrefix;

package/lib/global/js/package-settings.js

@@ -25,6 +25,7 @@ var defaults = {
     CreateTearsheet: true,
     CreateTearsheetStep: true,
     CreateTearsheetDivider: true,
+    Datagrid: true,
     EditInPlace: true,
     EmptyState: true,
     ErrorEmptyState: true,
@@ -65,7 +66,6 @@ var defaults = {
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
-    Datagrid: false,
     EditTearsheet: false,
     EditTearsheetNarrow: false,
     EditFullPage: false,
@@ -73,7 +73,12 @@ var defaults = {
     ButtonMenu: false,
     // Novice to pro components not yet reviewed and released:
     InlineTip: false,
+    InlineTipButton: false,
+    InlineTipLink: false,
     Guidebanner: false,
+    GuidebannerElement: false,
+    GuidebannerElementButton: false,
+    GuidebannerElementLink: false,
     NonLinearReading: false,
     Checklist: false,
     Coachmark: false,
@@ -93,7 +98,6 @@ var defaults = {
     'Datagrid.useExpandedRow': false,
     'Datagrid.useNestedRows': false,
     'Datagrid.useInlineEdit': false,
-    'Datagrid.useActionsColumn': false,
     'Datagrid.useFiltering': false,
     'Datagrid.useCustomizeColumns': false,
     'ExampleComponent.secondaryIcon': false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.61.0",
+  "version": "1.62.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -97,5 +97,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "3c7061f7f7907eeeddbbd25f723bb87e867a0073"
+  "gitHead": "89c6e18fc0a426f7a6835947561210242824fb07"
 }

package/scss/components/Checklist/_checklist.scss

@@ -11,18 +11,6 @@
 @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;
@@ -39,6 +27,7 @@
     &__header {
       display: flex;
       padding: $spacing-05;
+      border-top: 1px solid $ui-03;
       background-color: $ui-01;
       gap: $spacing-03;
     }
@@ -114,7 +103,9 @@
       transform: rotate(-180deg);
     }
 
-    // Button to appear more like a link so it aligns better with the list text
+    // 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.
     &__button {
       max-width: none !important;
       min-height: auto !important;
@@ -126,8 +117,7 @@
       background-color: transparent !important;
       color: $link-01 !important;
 
-      // The CSS for the Carbon button's label
-      // is incompatible with two-line ellipsis,
+      // 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();
@@ -144,10 +134,6 @@
         color: $text-primary;
         text-decoration: underline;
       }
-
-      &--error {
-        color: $text-error !important;
-      }
     }
 
     // container for animated content
@@ -195,14 +181,18 @@
     &__icon {
       /* stylelint-disable-next-line carbon/layout-token-use */
       margin: rem(1px) $spacing-03 0 0;
-      color: $link-01;
+
+      &--checked,
+      &--indeterminate {
+        color: $link-01;
+      }
 
       &--error {
         color: $support-error;
       }
 
       &--disabled {
-        color: $disabled-03;
+        color: $disabled-02;
       }
     }
 
@@ -210,10 +200,8 @@
       @include carbon--type-style('body-short-01');
       @include ellipsis-2-lines();
 
-      &--checked,
-      &--disabled,
-      &--error {
-        color: $disabled-03;
+      &--disabled {
+        color: $disabled-02;
       }
     }
 

package/scss/components/Coachmark/styles/_coachmark-dragbar.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable declaration-no-important */
-
 // Standard imports.
 @import '../../../global/styles/project-settings';
 @import '../../../global/styles/mixins';
@@ -16,53 +14,11 @@
 @mixin coachmark-dragbar {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--coachmark-dragbar;
+  $handle-class: #{$pkg-prefix}--coachmark-dragbar__handle;
 
   .#{$block-class} {
     display: flex;
 
-    &__handle {
-      flex-grow: 1;
-      padding: $spacing-03 0 0 $spacing-03;
-      border: 0;
-      background-color: transparent;
-      text-align: left;
-
-      &:hover {
-        cursor: move;
-      }
-    }
-
-    &--close-btn {
-      width: $spacing-07;
-      height: $spacing-07;
-      margin-left: auto !important;
-
-      svg > path {
-        margin: 0;
-        fill: $inverse-01 !important;
-      }
-
-      &:hover {
-        background-color: $inverse-hover-ui !important;
-      }
-    }
-
-    &__light {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $active-secondary;
-        }
-      }
-    }
-
-    &__dark {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $button-tertiary-active;
-        }
-      }
-    }
-
     svg {
       color: $inverse-01;
     }

package/scss/components/Coachmark/styles/_coachmark-header.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable declaration-no-important */
-
 // Standard imports.
 @import '../../../global/styles/project-settings';
 @import '../../../global/styles/mixins';
@@ -19,37 +17,6 @@
 
   .#{$block-class} {
     display: flex;
-
-    &--close-btn {
-      width: $spacing-07;
-      height: $spacing-07;
-      margin-left: auto !important;
-
-      svg > path {
-        margin: 0;
-        fill: $inverse-01 !important;
-      }
-
-      &:hover {
-        background-color: $inverse-hover-ui !important;
-      }
-    }
-
-    &__light {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $active-secondary;
-        }
-      }
-    }
-
-    &__dark {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $button-tertiary-active;
-        }
-      }
-    }
   }
 }
 

package/scss/components/Coachmark/styles/_coachmark-overlay.scss

@@ -19,6 +19,8 @@
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--coachmark-overlay;
   $carousel-class: #{$pkg-prefix}--carousel;
+  $close-btn-class: #{$block-class}--close-btn;
+  $draghandle-btn-class: #{$block-class}__handle;
 
   .#{$block-class} {
     position: absolute;
@@ -33,6 +35,8 @@
     $caret-center: $caret-height; // use "center" for left-right calculations, and "height" for top-bottom calculations
     $distance-offset: $spacing-06; // see also ./utils/constants.js > distanceOffset
 
+    visibility: hidden;
+
     &--fixed {
       position: fixed;
       right: $spacing-05;
@@ -45,8 +49,15 @@
       }
     }
 
+    &--is-dragmode {
+      border-radius: 0;
+      box-shadow: 0 0 0 $spacing-02 $inverse-02;
+      outline: $spacing-01 solid $inverse-01;
+    }
+
     &--is-visible {
       transform: translateY(0);
+      visibility: visible;
     }
 
     // CARET STYLING
@@ -202,8 +213,6 @@
 
     // BODY
     &__body {
-      padding: $spacing-01 $spacing-05 $spacing-05;
-
       .#{$carbon-prefix}--btn--ghost {
         color: $inverse-link;
 
@@ -234,13 +243,60 @@
       }
     }
 
+    // HEADER BUTTONS
+    &__handle {
+      position: relative;
+      flex-grow: 1;
+      padding: $spacing-02 0 0 $spacing-03;
+      border: 0;
+      background-color: transparent;
+      text-align: left;
+
+      &::before {
+        position: absolute;
+        top: $spacing-01;
+        left: $spacing-01;
+        width: calc($spacing-06 + $spacing-01);
+        height: calc($spacing-06 + $spacing-01);
+        content: '';
+      }
+
+      &:hover {
+        cursor: move;
+      }
+
+      &:focus {
+        border: none;
+        outline: none;
+
+        &::before {
+          border: 1px solid $inverse-01;
+          outline: 1px solid $blue-60;
+        }
+      }
+    }
+
+    &--close-btn {
+      width: $spacing-07;
+      height: $spacing-07;
+      margin-left: auto !important;
+
+      svg > path {
+        margin: 0;
+        fill: $inverse-01 !important;
+      }
+
+      &:hover {
+        background-color: $inverse-hover-ui !important;
+      }
+    }
+
     // FOOTER
     &__footer {
       display: flex;
       align-items: center;
       justify-content: flex-end;
     }
-    /* ------------------ */
 
     // THEME
     &__light {
@@ -262,6 +318,10 @@
         }
 
         .#{$carbon-prefix}--btn--ghost {
+          border-color: transparent !important;
+          border-radius: 0;
+          outline: 1px solid transparent;
+
           &:hover {
             background-color: $inverse-hover-ui;
           }
@@ -269,6 +329,33 @@
           &:active {
             background-color: $active-secondary;
           }
+
+          &:focus {
+            box-shadow: inset 0 0 0 1px $inverse-02,
+              inset 0 0 0 $spacing-01 $white-0;
+          }
+        }
+      }
+      .#{$draghandle-btn-class} {
+        &:focus {
+          &::before {
+            border: 1px solid $white-0;
+            outline: 1px solid transparent;
+          }
+        }
+      }
+      .#{$close-btn-class} {
+        border-color: transparent !important;
+        border-radius: 0;
+        outline: 1px solid transparent;
+
+        &:active {
+          background-color: $active-secondary;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $inverse-02,
+            inset 0 0 0 $spacing-01 $white-0;
         }
       }
     }
@@ -301,6 +388,8 @@
         }
 
         .#{$carbon-prefix}--btn--ghost {
+          border-color: transparent;
+
           &:hover {
             background-color: $inverse-hover-ui;
           }
@@ -310,11 +399,30 @@
           }
 
           &:focus {
-            box-shadow: inset 0 0 0 $spacing-01 $interactive-01,
-              inset 0 0 0 rem(3px) $interactive-03;
+            box-shadow: inset 0 0 0 1px $blue-60,
+              inset 0 0 0 $spacing-01 $white-0;
+          }
+        }
+      }
+      .#{$draghandle-btn-class} {
+        &:focus {
+          &::before {
+            border: 1px solid $white-0;
+            outline: 1px solid $blue-60;
           }
         }
       }
+      .#{$close-btn-class} {
+        border-color: transparent;
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+        }
+
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+      }
     }
     .#{$carousel-class}__item {
       flex: 0 0 100% !important;

package/scss/components/Coachmark/styles/_coachmark-tagline.scss

@@ -35,6 +35,7 @@
     // stylelint-disable-next-line carbon/motion-duration-use
     transition: opacity 240ms carbon--motion(exit, productive) 300ms;
     transition-delay: 240ms;
+
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -86,6 +87,11 @@
       text-align: left;
       @include carbon--type-style('body-short-01');
 
+      &:focus {
+        box-shadow: inset 0 0 0 3px $purple-70, inset 0 0 0 $spacing-02 $white-0;
+        outline: 1px solid transparent;
+      }
+
       &:hover {
         cursor: pointer !important;
       }
@@ -98,8 +104,20 @@
     &--close-btn {
       width: $spacing-07;
       height: $spacing-07;
+      border-color: transparent !important;
+      border-radius: 0;
       margin-left: auto !important;
       color: $white-0;
+      outline: 1px solid transparent;
+
+      &:active {
+        background-color: $active-secondary;
+      }
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px $inverse-02,
+          inset 0 0 0 $spacing-01 $white-0 !important;
+      }
 
       svg > path {
         margin: 0;

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -32,6 +32,9 @@
 
     &-default {
       .#{$block-class}__target {
+        &::before {
+          display: none;
+        }
         // the blue dot
         &::after {
           position: absolute;
@@ -43,24 +46,24 @@
           background-color: $blue-50;
           content: '';
         }
-      }
-    }
 
-    &-ring {
-      .#{$block-class}__center {
-        -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
-        mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='80px' height='80px' viewBox='008080'><pathfill='white' stroke='none' d='M0,0m37-2a404001010Zm128a1212011-10Z'/></svg>");
-
-        circle {
-          /* stylelint-disable-next-line carbon/motion-easing-use */
-          animation: ring-ripple $beaconAnimationTime infinite;
-          @media (prefers-reduced-motion) {
-            animation: none;
+        &:focus {
+          outline: transparent;
+
+          &::before {
+            position: absolute;
+            top: 7px;
+            left: 7px;
+            display: block;
+            width: 18px;
+            height: 18px;
+            border-radius: 100%;
+            content: '';
+            outline: $spacing-01 $focus solid;
           }
         }
       }
     }
-
     .#{$block-class}__target {
       // the hit area
       position: absolute;

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -17,6 +17,8 @@
   $carousel-item-class: #{$pkg-prefix}--carousel__item;
 
   .#{$block-class} {
+    padding: $spacing-01 $spacing-05 0;
+
     &__content {
       padding-bottom: $spacing-05;
     }

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -25,6 +25,7 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+      padding: 0 $spacing-05 $spacing-05;
     }
 
     &--controls-progress {

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -28,6 +28,7 @@
     bottom: -100%;
     //opacity: 0;
     transform: translateY(100%);
+    visibility: hidden;
 
     &--is-mounted {
       bottom: 0;
@@ -41,6 +42,7 @@
     &--is-visible {
       opacity: 1;
       transform: translateY(0);
+      visibility: visible;
     }
 
     // Stack the level-one item behind the level-two item.
@@ -51,6 +53,7 @@
       transform: perspective(carbon--mini-units(18))
         translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
       transform-origin: top center;
+      visibility: visible;
 
       &__light {
         background-color: $gray-90;

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

@@ -147,3 +147,18 @@ $block-class: #{$pkg-prefix}--datagrid;
     width: 100vw;
   }
 }
+
+.#{$carbon-prefix}--tooltip__trigger:hover
+  .#{$pkg-prefix}--status-icon--light.#{$pkg-prefix}--status-icon--light-minor-warning {
+  fill: $support-03;
+}
+
+.#{$carbon-prefix}--tooltip__trigger:hover
+  .#{$pkg-prefix}--status-icon--light.#{$pkg-prefix}--status-icon--light-normal {
+  fill: $support-02;
+}
+
+.#{$carbon-prefix}--tooltip__trigger:hover
+  .#{$pkg-prefix}--status-icon--light.#{$pkg-prefix}--status-icon--light-critical {
+  fill: $support-01;
+}

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

@@ -80,7 +80,6 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--compact,
       &.#{$carbon-prefix}--data-table--xs {
         .#{$block-class}__cell {
           padding-top: $spacing-01;
@@ -88,7 +87,6 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--short,
       &.#{$carbon-prefix}--data-table--sm,
       &.#{$carbon-prefix}--data-table--md {
         .#{$block-class}__cell {
@@ -99,7 +97,6 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
@@ -111,7 +108,6 @@
   }
 
   &.#{$block-class}__vertical-align-top {
-    &.#{$carbon-prefix}--data-table--tall,
     &.#{$carbon-prefix}--data-table--lg,
     &.#{$carbon-prefix}--data-table--xl {
       .#{$block-class}__cell {
@@ -129,7 +125,6 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
@@ -325,6 +320,11 @@
   background-color: $hover-selected-ui;
 }
 
+.#{$block-class}__grid-container
+  table.#{$block-class}__table-simple.#{$carbon-prefix}--data-table.#{$block-class}__table-is-resizing {
+  overflow-y: hidden;
+}
+
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {
@@ -346,6 +346,32 @@
   }
 }
 
+.#{$block-class}__header-actions-column:hover {
+  background-color: $layer-accent;
+}
+
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu {
+  opacity: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__carbon-row:hover
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu,
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu:focus,
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu[aria-expanded='true'] {
+  opacity: 1;
+}
+
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-09;