@carbon/ibm-products 1.5.0 → 1.6.0

package/lib/components/SidePanel/SidePanel.js

@@ -113,8 +113,12 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var sidePanelInnerRef = (0, _react.useRef)();
   var sidePanelCloseRef = (0, _react.useRef)();
   var previousState = (0, _hooks.usePreviousValue)({
-    size: size
-  }); // scroll panel to top going between steps
+    size: size,
+    open: open
+  });
+  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+    matches: true
+  }; // scroll panel to top going between steps
 
   (0, _react.useEffect)(function () {
     var panelRef = ref || sidePanelRef;
@@ -193,7 +197,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
 
   (0, _react.useEffect)(function () {
-    if (open && animateTitle && animationComplete && title && title.length) {
+    if (open && animateTitle && animationComplete && title && title.length && !reducedMotion.matches) {
       var _document$querySelect2, _document$querySelect3, _document$querySelect4;
 
       var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
@@ -285,7 +289,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--subtitle-container-height"), "".concat(_sidePanelSubtitleElementHeight, "px"));
       _sidePanelOuter === null || _sidePanelOuter === void 0 ? void 0 : _sidePanelOuter.style.setProperty("--".concat(blockClass, "--action-bar-container-height"), "".concat(sidePanelActionBarElementHeight, "px"));
     }
-  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size]); // click outside functionality if `includeOverlay` prop is set
+  }, [open, animateTitle, animationComplete, shouldRender, panelHeight, title, size, reducedMotion.matches]); // click outside functionality if `includeOverlay` prop is set
 
   (0, _react.useEffect)(function () {
     var handleOutsideClick = function handleOutsideClick(event) {
@@ -311,7 +315,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleOutsideClick);
     };
-  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref]); // initialize the side panel to open
+  }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]); // initialize the side panel to open
 
   (0, _react.useEffect)(function () {
     if (open) {
@@ -321,14 +325,21 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var onAnimationEnd = function onAnimationEnd() {
     if (!open) {
-      onUnmount && onUnmount();
+      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
       setRender(false);
     }
 
     setAnimationComplete(true);
-  }; // initializes the side panel to open
+  }; // Set the internal state `animationComplete` to true if
+  // prefers reduced motion is true
 
 
+  (0, _react.useEffect)(function () {
+    if (reducedMotion.matches) {
+      setAnimationComplete(true);
+    }
+  }, [reducedMotion.matches]); // initializes the side panel to open
+
   var _onAnimationStart = function onAnimationStart(event) {
     event.persist();
     var isPanelTarget = event.target.id === "".concat(blockClass, "-outer");
@@ -349,7 +360,13 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         pageContentElement.style.marginLeft = 0;
       }
     }
-  }, [open, placement, selectorPageContent, slideIn]); // used to set margins of content for slide in panel version
+  }, [open, placement, selectorPageContent, slideIn]);
+  (0, _react.useEffect)(function () {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+      setRender(false);
+      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+    }
+  }, [open, onUnmount, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]); // used to set margins of content for slide in panel version
 
   (0, _react.useEffect)(function () {
     if (shouldRender && slideIn) {
@@ -357,15 +374,15 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginRight = 0;
-        pageContentElement.style.transition = "margin-right ".concat(_motion.moderate02);
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-right ".concat(_motion.moderate02) : null;
         pageContentElement.style.marginRight = _constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginLeft = 0;
-        pageContentElement.style.transition = "margin-left ".concat(_motion.moderate02);
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(_motion.moderate02) : null;
         pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, shouldRender, size]); // adds focus trap functionality
+  }, [slideIn, selectorPageContent, placement, shouldRender, size, reducedMotion.matches]); // adds focus trap functionality
 
   /* istanbul ignore next */
 
@@ -392,7 +409,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var _cx, _cx2;
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _cx))
+      className: (0, _classnames.default)("".concat(blockClass, "__title-container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container-without-title"), !title), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
     }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
@@ -449,7 +466,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), animateTitle && title && title.length && /*#__PURE__*/_react.default.createElement("h2", {
+    }, title), animateTitle && title && title.length && !reducedMotion.matches && /*#__PURE__*/_react.default.createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -466,7 +483,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     id: "".concat(blockClass, "-outer"),
     className: mainPanelClassNames,
     style: {
-      animation: "".concat(open ? placement === 'right' ? "sidePanelEntranceRight ".concat(_motion.moderate02) : "sidePanelEntranceLeft ".concat(_motion.moderate02) : placement === 'right' ? "sidePanelExitRight ".concat(_motion.moderate02) : "sidePanelExitLeft ".concat(_motion.moderate02))
+      animation: !reducedMotion.matches ? "".concat(open ? placement === 'right' ? "side-panel-entrance-right ".concat(_motion.moderate02) : "side-panel-entrance-left ".concat(_motion.moderate02) : placement === 'right' ? "side-panel-exit-right ".concat(_motion.moderate02) : "side-panel-exit-left ".concat(_motion.moderate02)) : null
     },
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: function onAnimationStart(event) {
@@ -499,7 +516,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: sidePanelOverlayRef,
     className: "".concat(blockClass, "__overlay"),
     style: {
-      animation: "".concat(open ? "sidePanelOverlayEntrance ".concat(_motion.moderate02) : "sidePanelOverlayExit ".concat(_motion.moderate02))
+      animation: !reducedMotion.matches ? "".concat(open ? "side-panel-overlay-entrance ".concat(_motion.moderate02) : "side-panel-overlay-exit ".concat(_motion.moderate02)) : null
     }
   }));
 }); // Return a placeholder if not released and not enabled by feature flag

package/lib/components/WebTerminal/WebTerminal.js

@@ -80,7 +80,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: ref,
     className: (0, _classnames.default)([blockClass, (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "--closed"), !open), (0, _defineProperty2.default)(_ref2, className, className), _ref2)]),
     style: {
-      animation: "".concat(open ? 'webTerminalEntrance 250ms' : 'webTerminalExit 250ms')
+      animation: "".concat(open ? 'web-terminal-entrance 250ms' : 'web-terminal-exit 250ms')
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/_react.default.createElement("header", {

package/lib/settings.js

@@ -9,8 +9,6 @@ exports.pkg = exports.carbon = void 0;
 
 var _Canary = require("./components/_Canary");
 
-var _featureFlags = _interopRequireDefault(require("./generated/feature-flags/feature-flags"));
-
 var _packageSettings = _interopRequireDefault(require("./global/js/package-settings"));
 
 var _carbonComponents = require("carbon-components");
@@ -28,10 +26,6 @@ var carbon = {
     _carbonComponents.settings.prefix = val;
   },
 
-  get flags() {
-    return _featureFlags.default;
-  },
-
   get themes() {
     return _themes.themes;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,13 +46,13 @@
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
-    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency) or chalk (until we can load it as ESM)",
+    "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.5",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.6",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,15 +60,15 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "jest": "^27.4.7",
-    "jest-config-ibm-cloud-cognitive": "^0.23.6",
+    "jest-config-ibm-cloud-cognitive": "^0.23.7",
     "npm-check-updates": "^12.2.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.0",
+    "sass": "^1.49.7",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
+    "@babel/runtime": "^7.17.0",
     "@carbon/telemetry": "^0.0.0-alpha.6",
     "react-resize-detector": "^7.0.0"
   },
@@ -78,13 +78,13 @@
     "@carbon/import-once": "^10.5.0",
     "@carbon/layout": "^10.35.0",
     "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.49.0",
+    "@carbon/themes": "^10.50.0",
     "@carbon/type": "^10.40.0",
-    "carbon-components": "^10.51.0",
-    "carbon-components-react": "^7.51.0",
+    "carbon-components": "^10.52.0",
+    "carbon-components-react": "^7.52.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "c87d8a538026632249a4f6e907b008efb1d50250"
+  "gitHead": "3e87aeeb51d41503263511831b8db5f08437d754"
 }

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

@@ -37,6 +37,16 @@
 
   .#{$block-class}__selections {
     border-top: 1px solid $ui-03;
+
+    &-wrapper {
+      display: block;
+    }
+
+    &-cell-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
   }
 
   // multi select specific
@@ -77,6 +87,20 @@
     p {
     padding-right: 0;
   }
+
+  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--radio-button-wrapper
+    .#{$carbon-prefix}--radio-button__label {
+    justify-content: left;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
+    cursor: pointer;
+  }
 }
 
 @include exports('add-select') {

package/scss/components/BreadcrumbWithOverflow/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './breadcrumb-with-overflow.scss';
+@import './breadcrumb-with-overflow';

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -120,6 +120,7 @@
     .#{$block-class}__main {
       position: relative;
       display: inline-flex;
+      width: 100%;
       min-height: var(--size);
       vertical-align: top;
     }

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -13,7 +13,7 @@
   $block-class: #{$pkg-prefix}--create-influencer;
   $create-tearsheet-block-class: #{$pkg-prefix}--tearsheet-create;
   $influencerAnimationStart: calc(-1 * #{$spacing-05});
-  @keyframes influencerMenuEntrance {
+  @keyframes influencer-menu-entrance {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -24,7 +24,7 @@
       transform: translateX(0);
     }
   }
-  @keyframes influencerMenuExit {
+  @keyframes influencer-menu-exit {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -60,7 +60,7 @@
   .#{$block-class}__side-nav-opening,
   .#{$block-class}__progress-indicator-opening {
     // stylelint-disable-next-line carbon/motion-token-use
-    animation: influencerMenuEntrance $duration--moderate-02 1;
+    animation: influencer-menu-entrance $duration--moderate-02 1;
     animation-fill-mode: forwards;
     @include carbon--motion(entrance, productive);
   }
@@ -68,7 +68,7 @@
   .#{$block-class}__side-nav-closing,
   .#{$block-class}__progress-indicator-closing {
     // stylelint-disable-next-line carbon/motion-token-use
-    animation: influencerMenuExit $duration--moderate-02 1;
+    animation: influencer-menu-exit $duration--moderate-02 1;
     animation-fill-mode: forwards;
     @include carbon--motion(exit, productive);
   }

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -23,7 +23,7 @@
 @import '../CreateInfluencer/index';
 
 @mixin create-tearsheet {
-  @keyframes stepContentEntrance {
+  @keyframes step-content-entrance {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -50,7 +50,7 @@
   }
 
   .#{$block-class} .#{$step-block-class}__step--visible-step {
-    animation: $duration--slow-01 stepContentEntrance;
+    animation: $duration--slow-01 step-content-entrance;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;
     opacity: 0;

package/scss/components/InlineEdit/_inline-edit.scss

@@ -18,24 +18,225 @@
 // InlineEdit uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by InlineEdit
 
+// cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
+@mixin input-outline($color: $focus) {
+  outline: $spacing-01 solid $color;
+  outline-offset: calc(-1 * $spacing-01);
+
+  @media screen and (prefers-contrast) {
+    outline-style: dotted;
+  }
+}
+
+@function tooltip-top-bottom-safe-clip() {
+  @return polygon(
+    0 0,
+    -100vw 0,
+    -100vw -100vh,
+    100vw -100vh,
+    100vw 0,
+    100% 0,
+    100% 100%,
+    100vw 100%,
+    100vw 100vh,
+    -100vw 100vh,
+    -100vw 100%,
+    0 100%
+  );
+}
+
+@mixin input-button-defaults($block-class) {
+  width: var(--#{$block-class}--size);
+  height: 100%;
+  min-height: initial;
+  max-height: var(--#{$block-class}--size);
+
+  // stylelint-disable-next-line carbon/layout-token-use
+  padding: calc(
+    0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size))
+  );
+  border: 2px solid transparent;
+}
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin inline-edit {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--inline-edit;
 
-  .#{$block-class} {
+  @include block-wrap($block-class) {
+    --#{$block-class}--size: #{$spacing-08};
+    --#{$block-class}--icon-size: #{$spacing-05};
+    --#{$block-class}--background-color: #{$ui-01};
+
+    &.#{$block-class}--light {
+      --#{$block-class}--background-color: transparent;
+    }
+
+    &:hover {
+      --#{$block-class}--background-color: #{$hover-field};
+      // background-color: $background-color;
+    }
+
+    position: relative;
     display: inline-flex;
-    align-content: center;
-  }
+    // min-width: 250px; // similar to min input box with room for edit-controls
+    max-width: 100%;
+    height: var(--#{$block-class}--size);
+    background-color: var(--#{$block-class}--background-color);
+    cursor: text; // appear to be part of the text box
+    transition: background-color $duration--fast-01 motion(entrance, productive),
+      box-shadow $duration--fast-01 motion(entrance, productive),
+      border-color $duration--fast-01 motion(entrance, productive);
 
-  .#{$block-class} .#{$block-class}__value {
-    display: flex;
-    align-items: center;
-  }
+    white-space: nowrap;
+
+    &.#{$block-class}--sm {
+      --#{$block-class}--size: #{$spacing-07};
+      --#{$block-class}--icon-size: #{$spacing-05};
+    }
+
+    &.#{$block-class}--lg {
+      --#{$block-class}--size: #{$spacing-09};
+      --#{$block-class}--icon-size: #{$spacing-05};
+    }
+
+    &.#{$block-class}--editing {
+      @include input-outline($focus);
+
+      background-color: $ui-01;
+    }
+
+    .#{$block-class}--invalid {
+      @include input-outline($support-01);
+    }
+
+    .#{$block-class}__input {
+      display: flex;
+      overflow: hidden;
+      max-width: calc(100% - 2 * var(--#{$block-class}--size) - $spacing-05);
+      height: 100%;
+      flex: 1 1 100%;
+      align-items: center;
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-right: calc(2 * var(--#{$block-class}--size)); // room for controls
+      margin-left: $spacing-05;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$block-class}__placeholder {
+      position: absolute;
+      left: $spacing-03;
+    }
+
+    .#{$block-class}__controls {
+      // not simply flexed in as this causes flexbox to mis-measure the size of the input
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(2 * var(--#{$block-class}--size));
+      height: 100%;
+      cursor: text;
+    }
+
+    .#{$block-class}__controls--animation {
+      // makes room for the top clip text but hides the side overflow
+      clip-path: tooltip-top-bottom-safe-clip();
+      // NOTE: The above allows the tooltip to show through when overflowX: hidden would not when at right edge.
+      // It is used with margin animation of contained buttons
+    }
+
+    &.#{$block-class}--editing .#{$block-class}__controls::after {
+      // cover top and bottom when focus within block
+      // doing the same on the buttons is problematic when animating
+      // and causes visual artifacts when the button is hovered without focus
+      // as the buttons leave a 45% join between sides with transparent borders and top/bottom with $focus
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: 2px solid $focus;
+      border-left: 0;
+      content: '';
+      pointer-events: none;
+    }
+
+    &.#{$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;
+      }
+    }
+
+    .#{$block-class}__controls .#{$block-class}__edit {
+      margin-left: var(--#{$block-class}--size);
+    }
+
+    .#{$block-class}__controls--animation .#{$block-class}__cancel {
+      margin-left: var(--#{$block-class}--size);
+      transition: margin-left $duration--moderate-02
+        motion(standard, productive);
+    }
+
+    .#{$block-class}__controls--saveable .#{$block-class}__cancel {
+      margin-left: 0;
+    }
+
+    &.#{$block-class}.#{$block-class} .#{$block-class}__edit {
+      @include input-button-defaults($block-class);
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      // pointer-events: none;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: transparent;
+        background-color: transparent;
+        box-shadow: initial;
+        outline: initial;
+      }
+    }
+
+    .#{$block-class}__edit--hover-visible {
+      opacity: 0;
+      transition: opacity $duration--fast-01 motion(entrance, productive);
+    }
 
-  .#{$block-class} .#{$block-class}__button {
-    margin-left: $spacing-03;
+    &:hover .#{$block-class}__edit--hover-visible {
+      opacity: 1;
+    }
   }
 }
 

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

@@ -13,3 +13,16 @@
 // that the SCSS styles for this component are sufficiently specific
 // to override Carbon whichever order the styles get loaded in.
 //@import 'carbon-components/css/carbon-components.min';
+
+.inline-edit-stories__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: #{$pkg-prefix}--inline-edit;
+.component-full-width {
+  .#{$block-class} {
+    width: 100%;
+  }
+}

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -20,7 +20,7 @@
 
 @mixin notifications-panel {
   $block-class: #{$pkg-prefix}--notifications-panel;
-  @keyframes fadeIn {
+  @keyframes fade-in {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -32,7 +32,7 @@
     }
   }
 
-  @keyframes fadeOut {
+  @keyframes fade-out {
     0% {
       opacity: 1;
       transform: translateY(0);

package/scss/components/PageHeader/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './page-header.scss';
+@import './page-header';

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

@@ -80,7 +80,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   $duration: 1000ms;
 
   $animation: background-appear;
-  @if ($with-shadow) {
+  @if $with-shadow {
     $animation: background-and-shadow-appear;
   }
 

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

@@ -36,10 +36,6 @@
       align-items: center;
       justify-content: space-between;
       border-top: 1px solid $ui-03;
-
-      .#{$carbon-prefix}--btn svg {
-        margin-left: $spacing-03;
-      }
     }
 
     .#{$block-class}__footer-no-button {