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

package/scss/components/AboutModal/_about-modal.scss

@@ -21,61 +21,59 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 }
 
 .#{$block-class} .#{$block-class}__logo {
-  margin: $spacing-05;
+  margin: $spacing-05 $spacing-05 $spacing-07 $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__header {
-  padding: 0 20% $spacing-03 $spacing-05;
+  padding: 0 20% 0 $spacing-05;
   margin-bottom: 0;
   grid-row: auto;
 }
 
 .#{$block-class} .#{$block-class}__title {
-  @include type.type-style('productive-heading-04');
+  @include type.type-style('heading-04');
 
   color: $text-primary;
 }
 
 .#{$block-class} .#{$block-class}__body {
-  @include type.type-style('body-short-02');
+  @include type.type-style('body-compact-02');
 
   min-height: $spacing-10;
   padding: 0 20% 0 $spacing-05;
+  margin-bottom: $spacing-06;
   grid-row: auto;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.#{$block-class}.#{$block-class}--with-tabs .#{$block-class}__body {
-  min-height: calc(#{$spacing-10} + #{$spacing-08});
-  // stylelint-disable-next-line carbon/layout-token-use
-  margin-bottom: calc(#{$spacing-09} + #{$spacing-08});
-}
-
-.#{$block-class}.#{$block-class}--with-tabs
-  .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
-  // stylelint-disable-next-line carbon/layout-token-use
-  bottom: calc(#{$spacing-09} + #{$spacing-08});
-}
-
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--modal-content--overflow-indicator {
+  bottom: #{$spacing-06};
   background-image: linear-gradient(to bottom, #00000000, $layer-01);
 }
 
 .#{$block-class} .#{$block-class}__links-container {
-  margin-top: $spacing-05;
+  @include type.type-style('body-compact-01');
+
+  margin-top: $spacing-06;
+}
+
+.#{$block-class} .#{$block-class}__version {
+  color: $text-secondary;
 }
 
 .#{$block-class} .#{$block-class}__links-container a + a {
   padding-left: $spacing-03;
-  border-left: 1px solid $text-primary;
+  border-left: 1px solid $border-strong-01;
   margin-left: $spacing-03;
 }
 
-.#{$block-class} .#{$block-class}__legal-text,
+.#{$block-class} .#{$block-class}__content,
 .#{$block-class} .#{$block-class}__copyright-text {
-  margin-top: $spacing-07;
+  @include type.type-style('label-01');
+
+  margin-top: $spacing-06;
   margin-bottom: 0;
   color: $text-secondary;
 }
@@ -84,46 +82,29 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
   margin-top: $spacing-05;
 }
 
+p.c4p--about-modal__content:first-child,
+p.c4p--about-modal__copyright-text:first-child {
+  margin-top: $spacing-07;
+}
+
 .#{$block-class} .#{$block-class}__footer {
   position: relative;
-  height: $spacing-03 + $spacing-10;
+  height: calc(
+    #{$spacing-05} + #{$spacing-02} + #{$spacing-06} + #{$spacing-07}
+  );
   flex-direction: column;
   justify-content: center;
-  background-color: $background-inverse;
-  color: $text-inverse;
-}
-
-.#{$block-class} .#{$block-class}__tab-container {
-  position: absolute;
-  bottom: 0;
+  background-color: $layer-02;
 }
 
-.#{$block-class} .#{$block-class}__version-label,
-.#{$block-class} .#{$block-class}__version-number {
-  @include type.type-style('body-short-01');
-
-  padding-left: $spacing-05;
-  margin-top: 0;
-  margin-bottom: 0;
-  color: $text-inverse;
-}
+.#{$block-class} .#{$block-class}__footer-label {
+  @include type.type-style('label-01');
 
-.#{$block-class} .#{$block-class}__version-label {
-  @include font-weight('semibold');
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--tabs
-  .#{c4p-settings.$carbon-prefix}--tabs__nav-link,
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
-  @include type.type-style('body-short-01');
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content {
-  height: $spacing-03 + $spacing-10;
+  padding: $spacing-05 0 0 $spacing-05;
+  margin-bottom: $spacing-02;
+  color: $text-secondary;
 }
 
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--tab-content:not([hidden]) {
-  display: flex;
-  align-items: center;
+.#{$block-class} .#{$block-class}__footer-content {
+  padding: 0 0 $spacing-05 $spacing-05;
 }

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

@@ -8,9 +8,15 @@
 @use '../../global/styles/project-settings' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
-.about-modal-stories--tech-logo {
-  width: 2.25rem;
-  height: 2.25rem;
-  margin-right: $spacing-05;
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
+
+.#{$block-class}__stories--tech-logo {
+  width: $spacing-06;
+  height: $spacing-06;
+  margin-right: $spacing-03;
   object-fit: contain;
 }

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

@@ -265,6 +265,10 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
+.#{$block-class}-sort_overflow {
+  z-index: 9999;
+}
+
 .#{$block-class}__tags {
   display: flex;
   align-items: center;
@@ -278,7 +282,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__global-filter {
   position: absolute;
-  z-index: 6000;
+  z-index: 999999;
   right: 0;
   width: 100%;
   max-width: 40rem;
@@ -461,7 +465,7 @@ button.#{$block-class}__global-filter-toggle {
   margin-top: $spacing-03;
 }
 
-.#{$block-class} .#{$carbon-prefix}--tooltip,
-.#{$block-class} .#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class} + div .#{$carbon-prefix}--tooltip,
+.#{$block-class} + div .#{$carbon-prefix}--overflow-menu-options {
   z-index: 9000;
 }

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/DataSpreadsheet/_data-spreadsheet.scss

@@ -274,7 +274,7 @@ $header-cell-background: $layer-accent-01;
   .#{$block-class}__th--selected-header,
   .#{$block-class}__td-th--selected-header.#{$block-class}__td {
     background-color: $background-inverse;
-    color: $text-on-color;
+    color: $text-inverse;
 
     /* stylelint-disable-next-line max-nesting-depth */
     &:focus,

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

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

@@ -25,7 +25,6 @@
 @use './ExpressiveCard/index-with-carbon' as *;
 @use './HTTPErrors/index-with-carbon' as *;
 @use './ImportModal/index-with-carbon' as *;
-@use './ModifiedTabs/index-with-carbon' as *;
 @use './MultiAddSelect/index-with-carbon' as *;
 @use './NotificationsPanel/index-with-carbon' as *;
 @use './PageHeader/index-with-carbon' as *;
@@ -42,8 +41,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

@@ -26,7 +26,6 @@
 @use './FilterSummary/index';
 @use './HTTPErrors';
 @use './ImportModal';
-@use './ModifiedTabs';
 @use './MultiAddSelect';
 @use './NotificationsPanel';
 @use './PageHeader';
@@ -43,8 +42,7 @@
 @use './UserProfileImage';
 @use './EditSidePanel';
 @use './OptionsTile';
-@use './InlineEditV1';
-@use './InlineEditV2';
+@use './EditInPlace';
 @use './DataSpreadsheet';
 @use './Datagrid';
 @use './EditTearsheet';

package/scss/config.scss

@@ -0,0 +1 @@
+@forward './global/styles/project-settings';

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