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

package/lib/components/SidePanel/SidePanel.js

@@ -25,7 +25,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _motion = require("@carbon/motion");
 
@@ -77,7 +77,7 @@ var defaults = {
  */
 
 var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _window, _ref4, _cx4;
+  var _window, _ref5, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -198,9 +198,10 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [labelText, title]);
   /* istanbul ignore next */
 
-  var handleResize = function handleResize(width, height) {
+  var handleResize = function handleResize(_ref2) {
     var _sidePanelOuter$style3;
 
+    var height = _ref2.height;
     setPanelHeight(height);
     var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
     var actionsContainer = getActionsContainerElement();
@@ -397,9 +398,9 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   /* istanbul ignore next */
 
-  var handleBlur = function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-        currentActiveNode = _ref2.relatedTarget;
+  var handleBlur = function handleBlur(_ref3) {
+    var oldActiveNode = _ref3.target,
+        currentActiveNode = _ref3.relatedTarget;
 
     // focus trap should only be set if the side panel is a `slideOver` type
     if (open && sidePanelInnerRef && !slideIn) {
@@ -414,7 +415,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var primaryActionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref4 = {}, (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref4, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref4)]);
+  var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
 
   var renderHeader = function renderHeader() {
     var _cx, _cx2;
@@ -453,17 +454,17 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: (0, _classnames.default)("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(blockClass, "__action-toolbar"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
-    }, actionToolbarButtons.map(function (_ref5) {
-      var label = _ref5.label,
-          kind = _ref5.kind,
-          icon = _ref5.icon,
-          tooltipPosition = _ref5.tooltipPosition,
-          tooltipAlignment = _ref5.tooltipAlignment,
-          leading = _ref5.leading,
-          disabled = _ref5.disabled,
-          className = _ref5.className,
-          onClick = _ref5.onClick,
-          rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+    }, actionToolbarButtons.map(function (_ref6) {
+      var label = _ref6.label,
+          kind = _ref6.kind,
+          icon = _ref6.icon,
+          tooltipPosition = _ref6.tooltipPosition,
+          tooltipAlignment = _ref6.tooltipAlignment,
+          leading = _ref6.leading,
+          disabled = _ref6.disabled,
+          className = _ref6.className,
+          onClick = _ref6.onClick,
+          rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
       return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -493,10 +494,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var contentRef = ref || sidePanelRef;
-  (0, _reactResizeDetector.useResizeDetector)({
-    handleHeight: true,
-    onResize: handleResize,
-    targetRef: contentRef
+  (0, _useResizeObserver.useResizeObserver)(contentRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, null, open && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
@@ -667,8 +666,8 @@ SidePanel.propTypes = {
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
-  selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn;
+  selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref8) {
+    var slideIn = _ref8.slideIn;
     return slideIn;
   }),
 
@@ -696,8 +695,8 @@ SidePanel.propTypes = {
   /**
    * Sets the title text
    */
-  title: _propTypes.default.string.isRequired.if(function (_ref8) {
-    var labelText = _ref8.labelText;
+  title: _propTypes.default.string.isRequired.if(function (_ref9) {
+    var labelText = _ref9.labelText;
     return labelText;
   })
 };

package/lib/components/TagSet/TagSet.js

@@ -31,7 +31,7 @@ var _TagSetModal = require("./TagSetModal");
 
 var _react2 = require("@carbon/react");
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _devtools = require("../../global/js/utils/devtools");
 
@@ -245,13 +245,11 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
 
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleSizerTagsResize,
-    targetRef: sizingContainerRef
+  (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, {
+    callback: handleSizerTagsResize
   });
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: tagSetRef
+  (0, _useResizeObserver.useResizeObserver)(tagSetRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver2 = require("../../global/js/hooks/useResizeObserver");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -118,13 +118,11 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }
   }, [portalTargetIn]);
   var localRef = (0, _react.useRef)();
+  var resizer = (0, _react.useRef)(null);
   var modalRef = ref || localRef;
 
-  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref;
+  var _useResizeObserver = (0, _useResizeObserver2.useResizeObserver)(resizer),
+      width = _useResizeObserver.width;
 
   var wide = size === 'wide'; // Keep track of the stack depth and our position in it (1-based, 0=closed)
 

package/lib/components/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "EditFullPage", {
     return _EditFullPage.EditFullPage;
   }
 });
+Object.defineProperty(exports, "EditInPlace", {
+  enumerable: true,
+  get: function get() {
+    return _EditInPlace.EditInPlace;
+  }
+});
 Object.defineProperty(exports, "EditSidePanel", {
   enumerable: true,
   get: function get() {
@@ -171,12 +177,6 @@ Object.defineProperty(exports, "ImportModal", {
     return _ImportModal.ImportModal;
   }
 });
-Object.defineProperty(exports, "InlineEdit", {
-  enumerable: true,
-  get: function get() {
-    return _InlineEdit.InlineEdit;
-  }
-});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {
@@ -516,7 +516,7 @@ var _EditSidePanel = require("./EditSidePanel");
 
 var _OptionsTile = require("./OptionsTile");
 
-var _InlineEdit = require("./InlineEdit");
+var _EditInPlace = require("./EditInPlace");
 
 var _DataSpreadsheet = require("./DataSpreadsheet");
 

package/lib/global/js/hooks/useResizeObserver.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+/**
+ * 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 useResizeObserver = function useResizeObserver(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    callback: null,
+    throttleInterval: 0
+  };
+  var callback = options.callback,
+      throttleInterval = options.throttleInterval;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
+  var throttleTimeout = (0, _react.useRef)(null);
+  var entriesToHandle = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) {
+      return;
+    }
+
+    var doCallbacks = function doCallbacks() {
+      if (!(ref !== null && ref !== void 0 && ref.current) || !Array.isArray(entriesToHandle === null || entriesToHandle === void 0 ? void 0 : entriesToHandle.current)) {
+        return;
+      }
+
+      var entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      throttleTimeout.current = null;
+      callback && callback(entry.contentRect);
+    };
+
+    var observer = new ResizeObserver(function (entries) {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+
+      if (throttleInterval) {
+        // if a throttleInterval check for running timeout
+        if (throttleTimeout.current === null) {
+          // no live timeout set entries to handle and move on
+          // set up throttle
+          throttleTimeout.current = setTimeout(function () {
+            // do callbacks
+            doCallbacks(); // reset throttle
+
+            throttleTimeout.current = null;
+          }, throttleInterval);
+        }
+      } else {
+        // no throttle do callbacks every time
+        doCallbacks();
+      }
+    }); // observe all refs passed
+
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+      observer = null;
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, options]);
+  return {
+    width: width,
+    height: height
+  };
+};
+
+exports.useResizeObserver = useResizeObserver;

package/lib/global/js/hooks/useWindowScroll.js

@@ -14,6 +14,12 @@ var _react = require("react");
 
 var _scrollableAncestor = require("../utils/scrollableAncestor");
 
+/**
+ * Copyright IBM Corp. 2022, 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 windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
 
 var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {

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.27",
+  "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": "33ed98e63caf4d07ba69eb8cb709fd44b3303c78"
+  "gitHead": "d459d01283f68efa6a4bfbdc79a97bf508f83f6b"
 }

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

@@ -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 *;