@carbon/ibm-products 2.0.0-rc.26 → 2.0.0-rc.28

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

@@ -31,6 +31,7 @@ var defaults = {
     CreateTearsheet: true,
     CreateTearsheetStep: true,
     CreateTearsheetDivider: true,
+    EditInPlace: true,
     EmptyState: true,
     ErrorEmptyState: true,
     ExportModal: true,
@@ -39,8 +40,6 @@ var defaults = {
     HTTPError404: true,
     HTTPErrorOther: true,
     ImportModal: true,
-    InlineEdit: true,
-    InlineEditV1: true,
     MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
@@ -75,8 +74,7 @@ var defaults = {
     EditTearsheet: false,
     EditTearsheetNarrow: false,
     EditFullPage: false,
-    EditUpdateCards: false,
-    InlineEditV2: false
+    EditUpdateCards: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.28",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -11,7 +11,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/carbon-design-system/ibm-cloud-cognitive.git",
-    "directory": "packages/cloud-cognitive"
+    "directory": "packages/ibm-products"
   },
   "bugs": "https://github.com/carbon-design-system/ibm-cloud-cognitive/issues",
   "sideEffects": [
@@ -80,7 +80,6 @@
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
-    "react-resize-detector": "^7.1.2",
     "react-table": "^7.8.0",
     "react-window": "^1.8.7"
   },
@@ -94,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "021c153ea593848f7c1a2049c95af0b880603c9e"
+  "gitHead": "d459d01283f68efa6a4bfbdc79a97bf508f83f6b"
 }

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/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 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.
@@ -47,6 +47,15 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     display: none;
   }
 
+  .#{$_block-class}__back__button.#{c4p-settings.$carbon-prefix}--btn {
+    min-height: revert;
+    padding: 0;
+  }
+
+  .#{$_block-class}__back__button.#{c4p-settings.$carbon-prefix}--btn--ghost:hover {
+    background-color: inherit;
+  }
+
   @include breakpoint-down(md) {
     .#{c4p-settings.$carbon-prefix}--breadcrumb-item {
       display: none;

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/_useSelectAllToggle.scss

@@ -1,14 +1,14 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2021, 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 *;
 @use '@carbon/styles/scss/theme' as *;
 @use './variables';
+@use '../../../global/styles/project-settings' as c4p-settings;
 
 .#{variables.$block-class}__grid-container {
   th.#{variables.$block-class}__select-all-toggle-on,
@@ -31,3 +31,7 @@ th.#{variables.$block-class}__select-all-toggle-on {
 th.#{variables.$block-class}__select-all-toggle-on.button {
   margin-left: $spacing-01;
 }
+
+.#{variables.$block-class}__select-all-toggle-overflow.#{c4p-settings.$carbon-prefix}--overflow-menu-options--sm.#{c4p-settings.$carbon-prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+  width: $spacing-13;
+}

package/scss/components/{InlineEditV2/_inline-edit-v2.scss → EditInPlace/_edit-in-place.scss}

@@ -12,17 +12,32 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/motion' as *;
 
-$block-class: #{$pkg-prefix}--inline-edit-v2;
+$block-class: #{$pkg-prefix}--edit-in-place;
 $carbon-input: #{$carbon-prefix}--text-input;
 
 .#{$block-class} {
+  --#{$block-class}--size: #{$spacing-07};
+
   display: flex;
   align-items: center;
   background: transparent;
   cursor: pointer;
 }
 
-.#{$block-class}-readonly {
+.#{$block-class}--sm {
+  --#{$block-class}--size: #{$spacing-07};
+}
+
+.#{$block-class}--md {
+  --#{$block-class}--size: #{$spacing-08};
+}
+
+.#{$block-class}--lg {
+  /* April 2023 max text input size */
+  --#{$block-class}--size: #{$spacing-09};
+}
+
+.#{$block-class}--readonly {
   cursor: not-allowed;
 }
 
@@ -30,7 +45,8 @@ $carbon-input: #{$carbon-prefix}--text-input;
   background: $field-01;
 }
 
-.#{$block-class}:hover .#{$block-class}__btn-edit {
+.#{$block-class}:hover .#{$block-class}__btn-edit,
+.#{$block-class}__btn-edit.#{$block-class}__btn-edit--always-visible {
   visibility: visible;
 }
 
@@ -38,6 +54,10 @@ $carbon-input: #{$carbon-prefix}--text-input;
   visibility: hidden;
 }
 
+.#{$block-class}--invalid {
+  outline: 2px solid $support-error;
+}
+
 .#{$block-class}--focused {
   background: $field-01;
   outline: 2px solid $focus;
@@ -47,12 +67,32 @@ $carbon-input: #{$carbon-prefix}--text-input;
   flex: 1;
 }
 
+.#{$block-class}--inherit-type .#{$block-class}__text-input {
+  /* match font of container */
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+.#{$block-class}__ellipsis {
+  position: relative;
+  margin-left: calc(-1 * $spacing-05);
+  opacity: 0;
+}
+
+.#{$block-class}--overflows:not(.#{$block-class}--focused)
+  .#{$block-class}__ellipsis {
+  opacity: 1;
+}
+
 .#{$block-class}__text-input-label {
   display: none;
 }
 
 .#{$block-class}__warning-icon {
-  margin: $spacing-03;
+  width: $spacing-05;
+  margin: auto $spacing-03;
   color: $support-error;
 }
 
@@ -71,11 +111,11 @@ $carbon-input: #{$carbon-prefix}--text-input;
   outline: none;
 }
 
-.#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
-.#{$block-class}-readonly
-  .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
-  cursor: not-allowed;
-}
+// .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
+// .#{$block-class}-readonly
+//   .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
+//   cursor: not-allowed;
+// }
 
 .#{$block-class}__text-input.#{$carbon-input}:focus,
 .#{$block-class}__text-input.#{$carbon-input}:active {
@@ -83,18 +123,20 @@ $carbon-input: #{$carbon-prefix}--text-input;
 }
 
 .#{$block-class}__toolbar {
-  --toolbar-width: #{$spacing-07};
-  --toolbar-width-focussed: #{$spacing-10};
+  --toolbar-width: var(--#{$block-class}--size);
+  --toolbar-width-focussed: calc(2 * var(--#{$block-class}--size));
 
   // 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};
+  // width of invalid icon is always $spacing-07 ($spacing-05 + 2 * $spacing-03 margin)
+  --toolbar-width: calc(var(--#{$block-class}--size) + #{$spacing-07});
+  --toolbar-width-focussed: calc(
+    2 * var(--#{$block-class}--size) + #{$spacing-07}
+  );
 }
 
 @keyframes slide-in {

package/scss/components/{InlineEditV1 → EditInPlace}/_index-with-carbon.scss

@@ -6,4 +6,4 @@
 //
 
 @use './carbon-imports';
-@use './inline-edit-v1';
+@use './edit-in-place';

package/scss/components/{InlineEditV2 → EditInPlace}/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@use './inline-edit-v2';
+@use './edit-in-place';

package/scss/components/{InlineEditV1 → EditInPlace}/_storybook-styles.scss

@@ -4,24 +4,12 @@
 // 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/type/scss/scale';
 @use '../../global/styles/display-box';
-@use '../../global/styles/project-settings' as c4p-settings;
 
-.inline-edit-stories__viewport {
+$block-class: 'edit-in-place-example';
+
+.#{$block-class}__viewport {
   // width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
   // stylelint-disable-next-line carbon/layout-token-use
   margin: 100px;
 }
-
-$block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
-
-.component-full-width {
-  .#{$block-class} {
-    width: 100%;
-  }
-  .#{$block-class} .#{$block-class}__input {
-    @include scale.font-size(2);
-  }
-}

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/PageHeader/_page-header.scss

@@ -357,7 +357,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   }
 
   .#{$block-class}__title-row {
-    margin-top: 0;
+    margin-top: $spacing-01; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
     margin-bottom: 0;
     transform: translateY(
       $spacing-01
@@ -436,12 +436,6 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     white-space: nowrap;
   }
 
-  .#{$block-class}__title .#{$pkg-prefix}--inline-edit__value {
-    // The heading text sits 2px pixels lower in the inline edit which is aligned center
-    // stylelint-disable-next-line carbon/layout-token-use
-    transform: translateY(-2px);
-  }
-
   .#{$block-class}__title--editable {
     display: flex;
     overflow: visible;
@@ -616,7 +610,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 +622,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/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;

package/scss/components/_index-released-only-with-carbon.scss

@@ -17,11 +17,11 @@
 @use './CreateSidePanel/index-with-carbon' as *;
 @use './CreateTearsheetNarrow/index-with-carbon' as *;
 @use './CreateTearsheet/index-with-carbon' as *;
+@use './EditInPlace/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;
 @use './ExpressiveCard/index-with-carbon' as *;
 @use './HTTPErrors/index-with-carbon' as *;
-@use './InlineEditV1/index-with-carbon' as *;
 @use './ImportModal/index-with-carbon' as *;
 @use './MultiAddSelect/index-with-carbon' as *;
 @use './NotificationsPanel/index-with-carbon' as *;

package/scss/components/_index-released-only.scss

@@ -17,11 +17,11 @@
 @use './CreateSidePanel';
 @use './CreateTearsheetNarrow';
 @use './CreateTearsheet';
+@use './EditInPlace';
 @use './EmptyStates';
 @use './ExportModal';
 @use './ExpressiveCard';
 @use './HTTPErrors';
-@use './InlineEditV1';
 @use './ImportModal';
 @use './MultiAddSelect';
 @use './NotificationsPanel';

package/scss/components/_index-with-carbon.scss

@@ -42,8 +42,7 @@
 @use './UserProfileImage/index-with-carbon' as *;
 @use './EditSidePanel/index-with-carbon' as *;
 @use './OptionsTile/index-with-carbon' as *;
-@use './InlineEditV1/index-with-carbon' as *;
-@use './InlineEditV2/index-with-carbon' as *;
+@use './EditInPlace/index-with-carbon' as *;
 @use './DataSpreadsheet/index-with-carbon' as *;
 @use './Datagrid/index-with-carbon' as *;
 @use './EditUpdateCards/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -43,8 +43,7 @@
 @use './UserProfileImage';
 @use './EditSidePanel';
 @use './OptionsTile';
-@use './InlineEditV1';
-@use './InlineEditV2';
+@use './EditInPlace';
 @use './DataSpreadsheet';
 @use './Datagrid';
 @use './EditTearsheet';

package/es/components/InlineEdit/InlineEdit.js

@@ -1,47 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["v1"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/**
- * Copyright IBM Corp. 2022, 2022
- *
- * 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 React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { pkg } from '../../settings';
-import { InlineEditV1 } from '../InlineEditV1';
-import { InlineEditV2 } from '../InlineEditV2';
-/**
- * this is a wrapper component that will allow us to support v1 and v2 versions of InlineEdit
- * in the V11 branch, v2 is the set by default.
- * if the user passes in the v1 feature flag the v1 version of the component will be rendered
- * since this is a temporary solution the named export should just remain InlineEdit unlike how
- * Card works as a base layer for Productive and Expressive cards.
- */
-
-var componentName = 'InlineEdit';
-export var InlineEdit = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var v1 = _ref.v1,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-
-  if (v1 === true) {
-    return /*#__PURE__*/React.createElement(InlineEditV1, props);
-  }
-
-  return /*#__PURE__*/React.createElement(InlineEditV2, props);
-});
-InlineEdit = pkg.checkComponentEnabled(InlineEdit, componentName);
-InlineEdit.displayName = componentName;
-InlineEdit.propTypes = {
-  v1: PropTypes.bool
-};