@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.27

package/lib/global/js/utils/test-helper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scssCompile = exports.scssCheck = exports.required = exports.mockHTMLElement = exports.invalid = exports.expectWarnAsync = exports.expectWarn = exports.expectMultipleWarn = exports.expectMultipleError = exports.expectError = exports.deprecatedUsage = exports.deprecated = void 0;
+exports.scssCompile = exports.scssCheck = exports.required = exports.mockHTMLElement = exports.invalid = exports.expectWarnAsync = exports.expectWarn = exports.expectMultipleWarn = exports.expectMultipleError = exports.expectLogging = exports.expectError = exports.deprecatedUsage = exports.deprecated = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -224,6 +224,45 @@ var expectMultipleWarn = function expectMultipleWarn(messages, test) {
   warn.mockRestore();
   return result;
 };
+
+exports.expectMultipleWarn = expectMultipleWarn;
+
+var checkLogging = function checkLogging(mock, message) {
+  if (message) {
+    var _expect4;
+
+    expect(mock).toBeCalled();
+
+    (_expect4 = expect(mock)).toHaveBeenCalledWith.apply(_expect4, (0, _toConsumableArray2.default)(makeMatcherArray(message)));
+  }
+};
+/**
+ * A helper function to enable a test to expect a single call to
+ * console.error, for example when intentionally omitting a required prop
+ * or supplying an invalid prop type or value for the purposes of the test.
+ * @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
+ * console.error or console.warn, which must be called exactly once. A single string or regex or an
+ * expect matcher can be used to match a single-argument call to console.error (most common),
+ * while an array of strings and/or regex and/or expect matchers can be used to match a
+ * multiple-argument call. Strings can be full or substring matches to the corresponding
+ * argument.
+ * @param {Function} test the test function to call, during which the call to
+ * console.error will be expected.
+ */
+
+
+var expectLogging = function expectLogging(_ref2, test) {
+  var errors = _ref2.errors,
+      warnings = _ref2.warnings;
+  var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+  var warn = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+  var result = test();
+  checkLogging(error, errors);
+  checkLogging(warn, warnings);
+  error.mockRestore();
+  warn.mockRestore();
+  return result;
+};
 /**
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
@@ -239,17 +278,12 @@ var expectMultipleWarn = function expectMultipleWarn(messages, test) {
  */
 
 
-exports.expectMultipleWarn = expectMultipleWarn;
+exports.expectLogging = expectLogging;
 
 var expectError = function expectError(message, test) {
-  var _expect4;
-
   var error = jest.spyOn(console, 'error').mockImplementation(jest.fn());
   var result = test();
-  expect(error).toBeCalledTimes(1);
-
-  (_expect4 = expect(error)).toHaveBeenCalledWith.apply(_expect4, (0, _toConsumableArray2.default)(makeMatcherArray(message)));
-
+  checkLogging(error, message);
   error.mockRestore();
   return result;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.25",
+  "version": "2.0.0-rc.27",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "62755ef4a0ab108a072412ee12398a8ae6703d3b"
+  "gitHead": "33ed98e63caf4d07ba69eb8cb709fd44b3303c78"
 }

package/scss/components/ActionBar/_action-bar.scss

@@ -28,10 +28,6 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
     justify-content: flex-end;
   }
 
-  .#{$block-class-overflow-items} {
-    display: inline-block;
-  }
-
   .#{$_block-class}__hidden-sizing-items {
     // This breadcrumb container is used to measure the width of all displayable breadcrumbs
     @include measuring-container;

package/scss/components/AddSelect/_add-select.scss

@@ -69,29 +69,21 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     background-color: $layer-selected-01;
   }
 
-  &-checkbox {
+  &-form-control {
     display: flex;
     align-items: center;
   }
 
-  &-checkbox-label-wrapper {
+  &-form-control-label-wrapper {
     display: flex;
     margin-left: $spacing-05;
   }
 
-  &-checkbox-label-text {
+  &-form-control-label-text {
     display: flex;
     flex-direction: column;
   }
 
-  &-checkbox-wrapper.#{$carbon-prefix}--form-item {
-    flex: 0;
-  }
-
-  &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
-    display: none;
-  }
-
   &-cell-avatar {
     margin-right: $spacing-03;
   }
@@ -209,7 +201,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   flex-grow: 1;
   overflow-x: auto;
 
-  .#{$block-class}__selections-checkbox-label-wrapper {
+  .#{$block-class}__selections-form-control-label-wrapper {
     margin-left: $spacing-03;
   }
 
@@ -434,10 +426,6 @@ button.#{$block-class}__global-filter-toggle {
   }
 }
 
-.#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
-  padding-left: $spacing-03;
-}
-
 .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
   max-width: 16rem;
   margin-top: $spacing-09;

package/scss/components/Card/_card.scss

@@ -15,18 +15,18 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class} {
-  background: $layer-01;
+  background-color: $layer-01;
   color: $text-primary;
 }
 
 .#{$block-class}__clickable {
   cursor: pointer;
   // stylelint-disable-next-line carbon/motion-easing-use
-  transition: background $duration-fast-02;
+  transition: background-color $duration-fast-02;
 }
 
 .#{$block-class}__clickable:hover {
-  background: $background-hover;
+  background-color: $layer-hover-01;
 }
 
 .#{$block-class}__media-left {
@@ -82,7 +82,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 }
 
 .#{$block-class}__body {
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   padding: $spacing-05;
   padding-top: 0;
@@ -96,15 +96,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 .#{$block-class}__actions {
   display: flex;
   flex-direction: row;
-  margin: $spacing-05;
-  margin-top: 0;
 }
 
 .#{$block-class}__icon {
+  padding: $spacing-03;
   color: inherit;
   cursor: pointer;
 }
 
+.#{$block-class}__icon:hover {
+  background-color: $layer-hover-01;
+}
+
+#{$block-class}__icon:active {
+  color: $link-primary-hover;
+}
+
 .#{$block-class}__link {
   color: inherit;
   text-decoration: inherit;

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

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/type/scss/font-family';
 @use '@carbon/layout' as *;
+@use '@carbon/layout/scss/convert';
 
 @use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
@@ -28,10 +29,18 @@
   border-bottom: 1px solid $background-active;
 }
 
-.#{variables.$block-class}__customize-columns-checkbox-wrapper {
+.#{c4p-settings.$carbon-prefix}--form-item.#{c4p-settings.$carbon-prefix}--checkbox-wrapper.#{variables.$block-class}__customize-columns-checkbox {
   display: flex;
+  flex: initial;
+  align-items: center;
   justify-content: center;
-  padding-left: $spacing-02;
+}
+
+.#{variables.$block-class}__customize-columns-column-list
+  .#{variables.$block-class}__customize-columns-checkbox-visible-label {
+  // Disabling linter only to match the spacing that Carbon uses for the Checkbox label
+  /* stylelint-disable-next-line */
+  padding-left: convert.rem(6px);
 }
 
 .#{variables.$block-class}__customize-columns-column-list
@@ -44,6 +53,10 @@
   overflow: auto;
 }
 
+.#{variables.$block-class}__customize-columns-select-all {
+  align-items: center;
+}
+
 .#{variables.$block-class}__customize-columns-select-all,
 .#{variables.$block-class}__customize-columns-select-all--selected {
   position: sticky;

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

@@ -11,17 +11,22 @@
 @use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
 
-.#{variables.$block-class}__row-size-dropdown {
-  padding: $spacing-05;
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-toggle-tip-content {
   background-color: $layer-02;
-
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
 
-.#{c4p-settings.$carbon-prefix}--btn--ghost.#{variables.$block-class}__row-size-button--open {
-  background-color: $layer-02;
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-radio-button
+  .#{c4p-settings.$carbon-prefix}--radio-button__label {
+  color: $text-primary;
+}
 
-  box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-toggle-tip
+  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  background-color: $layer-02;
 }
 
 .#{variables.$block-class}
@@ -31,3 +36,10 @@
   /* stylelint-disable-next-line carbon/layout-token-use */
   left: -4px;
 }
+
+.#{variables.$block-class}__row-size-toggle-tip-button.#{c4p-settings.$carbon-prefix}--toggletip-button {
+  display: flex;
+  width: $spacing-09;
+  height: $spacing-09;
+  justify-content: center;
+}

package/scss/components/ExportModal/_export-modal.scss

@@ -44,7 +44,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--export-modal;
 .#{$block-class}__error-icon {
   fill: $button-danger-primary;
 }
-
-.#{c4p-settings.$carbon-prefix}--modal-content.#{$block-class}__body-container {
-  padding-bottom: $spacing-06;
-}

package/scss/components/ExpressiveCard/_expressive-card.scss

@@ -14,5 +14,5 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 }

package/scss/components/InlineEditV1/_inline-edit-v1.scss

@@ -32,17 +32,6 @@
   }
 }
 
-@mixin input-button-defaults($block-class) {
-  display: inline-flex;
-  height: 100%;
-  min-height: initial;
-  max-height: var(--#{$block-class}--size);
-  align-items: center;
-  justify-content: center;
-
-  border: 2px solid transparent;
-}
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
 
@@ -58,7 +47,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
 
   &:hover {
     --#{$block-class}--background-color: #{$background-hover};
-    // background-color: $background-color;
   }
 
   position: relative;
@@ -112,6 +100,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     margin-right: var(--#{$block-class}--toolbar-width);
     // room for toolbar
     margin-left: $spacing-05;
+    color: $text-primary;
     font-family: inherit;
     // stylelint-disable-next-line carbon/type-token-use
     line-height: var(--#{$block-class}--size);
@@ -203,8 +192,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
   }
 
-  .#{$block-class}__toolbar--animation {
-    // width: ;
+  .#{$block-class}__toolbar {
+    display: flex;
+    align-items: center;
   }
 
   &.#{$block-class}--editing .#{$block-class}__toolbar::after {
@@ -227,38 +217,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
 
   &.#{$block-class}.#{$block-class} .#{$block-class}__save,
   &.#{$block-class}.#{$block-class} .#{$block-class}__cancel {
-    @include input-button-defaults($block-class);
-
-    // input does not have focus
-    &:hover {
-      outline: initial;
-    }
-
-    &:focus:active,
-    &:focus {
-      // border focus input does NOT have focus
-      border-color: $focus;
-      box-shadow: initial;
-      outline: initial;
-    }
-
-    &:focus:active:hover {
-      box-shadow: inset 0 0 0 1px $field-01;
-    }
-
-    &::before {
-      background-color: transparent;
-    }
-
-    &[disabled] {
-      border-color: transparent;
-    }
+    display: inline-flex;
   }
 
   &.#{$block-class}--editing
     .#{$block-class}__toolbar--animation
     .#{$block-class}__save {
-    overflow: visible;
     width: var(--#{$block-class}--edit-size);
     transition: all $duration-moderate-02 motion(standard, productive);
     transition-property: margin, padding;
@@ -267,56 +231,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
   &.#{$block-class}--editing
     .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
     .#{$block-class}__save {
-    overflow: hidden;
     width: 0;
     padding: 0;
     border-right: 0;
     border-left: 0;
   }
 
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation
-    .#{$block-class}__save {
-    margin-right: 0;
-    transition: all $duration-moderate-02 motion(standard, productive);
-    transition-property: margin, padding;
-
-    svg {
-      transition: width $duration-moderate-02 motion(standard, productive);
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-  }
-
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
-    .#{$block-class}__save {
-    padding-right: 0;
-    padding-left: 0;
-    border-right: 0;
-    border-left: 0;
-    margin-right: calc(-1 * var(--#{$block-class}--size));
-
-    svg {
-      overflow: hidden;
-      width: 0;
-    }
-  }
-
-  &.#{$block-class}.#{$block-class} .#{$block-class}__edit {
-    @include input-button-defaults($block-class);
-    // pointer-events: none;
-    &:hover,
-    &:active,
-    &:focus {
-      border-color: transparent;
-      background-color: transparent;
-      box-shadow: initial;
-      outline: initial;
-    }
-  }
-
   @media (hover: hover) {
     // if hover is the primary input mechanism hide edit button
     .#{$block-class}__edit {
@@ -333,10 +253,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     opacity: 1;
   }
 
-  .#{$block-class}__validation-icon {
-    @include input-button-defaults($block-class);
-  }
-
   &.#{$block-class}--invalid .#{$block-class}__validation-icon {
     color: $support-error;
   }

package/scss/components/InlineEditV2/_inline-edit-v2.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../global/styles/project-settings' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
 
 $block-class: #{$pkg-prefix}--inline-edit-v2;
 $carbon-input: #{$carbon-prefix}--text-input;
@@ -37,7 +38,7 @@ $carbon-input: #{$carbon-prefix}--text-input;
   visibility: hidden;
 }
 
-.#{$block-class}-focused {
+.#{$block-class}--focused {
   background: $field-01;
   outline: 2px solid $focus;
 }
@@ -51,8 +52,7 @@ $carbon-input: #{$carbon-prefix}--text-input;
 }
 
 .#{$block-class}__warning-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  margin-right: 0.4375rem;
+  margin: $spacing-03;
   color: $support-error;
 }
 
@@ -81,3 +81,42 @@ $carbon-input: #{$carbon-prefix}--text-input;
 .#{$block-class}__text-input.#{$carbon-input}:active {
   outline: none;
 }
+
+.#{$block-class}__toolbar {
+  --toolbar-width: #{$spacing-07};
+  --toolbar-width-focussed: #{$spacing-10};
+
+  // animation div
+  display: inline-flex;
+  overflow: hidden;
+  width: var(--toolbar-width);
+}
+
+.#{$block-class}--invalid .#{$block-class}__toolbar {
+  --toolbar-width: #{$spacing-07};
+  --toolbar-width-focussed: #{$spacing-12};
+}
+
+@keyframes slide-in {
+  0% {
+    overflow: hidden;
+    width: var(--toolbar-width);
+  }
+
+  99% {
+    overflow: hidden;
+    width: var(--toolbar-width-focussed);
+  }
+
+  100% {
+    overflow: visible;
+    width: var(--toolbar-width-focussed);
+  }
+}
+
+.#{$block-class}--focused .#{$block-class}__toolbar {
+  overflow: initial;
+  width: var(--toolbar-width-focussed);
+
+  animation: slide-in $duration-moderate-01 motion(entrance, productive);
+}

package/scss/components/PageHeader/_page-header.scss

@@ -616,7 +616,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: $background;
   }
 
-  .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$block-class}__collapse-expand-toggle {
+  .#{$block-class}__collapse-expand-toggle {
     position: absolute;
     z-index: $raised-z-index + 1;
     right: 0;
@@ -628,8 +628,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     transition: all $duration-slow-01 motion(standard, productive);
   }
 
-  .#{$block-class}__collapse-expand-toggle--collapsed
-    .#{$carbon-prefix}--btn__icon {
+  .#{$block-class}__collapse-expand-toggle--collapsed svg {
     // transform: rotate(90deg);
     transform: scaleY(-1);
   }

package/scss/components/ProductiveCard/_productive-card.scss

@@ -21,11 +21,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__title {
-    @include type.type-style('productive-heading-02');
+    @include type.type-style('heading-compact-02');
   }
 
   .#{$block-class}__title-lg .#{$block-class}__title {
-    @include type.type-style('productive-heading-03');
+    @include type.type-style('heading-03');
   }
 
   .#{$block-class}__body {
@@ -43,6 +43,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__actions {
+    min-height: $spacing-07;
     margin: 0;
   }
 
@@ -51,6 +52,34 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
     margin-right: $spacing-03;
   }
 
+  .#{$block-class}__actions-header-ghost-button {
+    min-height: $spacing-07;
+    padding: 0 $spacing-05;
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-right: calc($spacing-01 + $spacing-03);
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-left: calc($spacing-01 + $spacing-03);
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &::before {
+      position: absolute;
+      left: 0;
+      width: 0.05rem;
+      height: $spacing-06;
+      background-color: theme.$layer-hover-01;
+      content: '';
+      opacity: 1;
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        opacity: 0;
+      }
+    }
+  }
+
   .#{$block-class}__title-lg .#{$block-class}__actions-header,
   .#{$block-class}__header-has-label .#{$block-class}__actions-header {
     margin-top: 0;

package/scss/components/SidePanel/_side-panel.scss

@@ -332,6 +332,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding: 0;
     color: $text-primary;
   }
+
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
     position: absolute;
     z-index: 5;
@@ -340,8 +341,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $layer-01;
   }
+
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button
     .#{c4p-settings.$carbon-prefix}--btn__icon {
     margin: 0;

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

@@ -154,6 +154,7 @@ $block-class-modal: #{$_block-class}-modal;
     padding: 0;
     margin: 0;
     background-color: inherit;
+    border-radius: 0;
     color: inherit;
     text-overflow: ellipsis;
     white-space: nowrap;

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -92,6 +92,11 @@ $theme-keys: map-keys($themes);
   border-radius: 50%;
 }
 
+.#{$carbon-prefix}--btn--ghost.#{$block-class}__tooltip:focus {
+  border: 0;
+  box-shadow: 0 0 0 $spacing-02 $focus;
+}
+
 .#{$carbon-prefix}--tooltip__trigger .#{$block-class} svg,
 .#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
   fill: $layer-01;