@carbon/ibm-products 1.0.0-rc.2 → 1.2.0

package/lib/components/PageHeader/PageHeader.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PageHeader = void 0;
+exports.deprecatedProps = exports.PageHeader = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -51,7 +51,7 @@ var _PageHeaderUtils = require("./PageHeaderUtils");
 
 var _PageHeaderTitle = require("./PageHeaderTitle");
 
-var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title"];
+var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,7 +64,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var componentName = 'PageHeader';
 
 var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref5, _cx2, _ref6, _cx4, _cx7;
+  var _withoutBackground, _ref5, _cx2, _ref6, _cx4, _cx7;
 
   var actionBarItems = _ref.actionBarItems,
       actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
@@ -72,7 +72,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
       allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
       allTagsModalTitle = _ref.allTagsModalTitle,
-      hasBackgroundAlways = _ref.hasBackgroundAlways,
+      deprecated_hasBackgroundAlways = _ref.hasBackgroundAlways,
       breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
       breadcrumbs = _ref.breadcrumbs,
       children = _ref.children,
@@ -93,7 +93,11 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       subtitle = _ref.subtitle,
       tags = _ref.tags,
       title = _ref.title,
+      withoutBackground = _ref.withoutBackground,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // handle deprecated props - START
+  // if withoutBackground is null check deprecated_hasBackgroundAlways and default false
+  (_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // handle deprecated props - END
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -116,7 +120,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }; // state based on props only
 
 
-  var hasActionBar = actionBarItems && actionBarItems.length;
+  var hasActionBar = actionBarItems && actionBarItems.length > 0;
   var hasBreadcrumbRow = breadcrumbs || actionBarItems; // NOTE: The buffer is used to add space between the bottom of the header and the last content
   // Not pre-collapsed and (subtitle or children)
 
@@ -313,8 +317,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullWidthGrid, narrowGrid]);
   (0, _react.useEffect)(function () {
-    // Determines if the hasBackgroundAlways should be one based on the header height or scroll
-    var result = hasBackgroundAlways ? 1 : 0;
+    // Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
+    var result = withoutBackground ? 0 : 1;
 
     if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
       var startAddingAt = parseFloat(_layout.layout05, 10) * parseInt(_layout.baseFontSize);
@@ -332,13 +336,13 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     setPageHeaderStyles(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--background-opacity"), result));
     });
-  }, [actionBarItems, hasBackgroundAlways, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
+  }, [actionBarItems, withoutBackground, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
   (0, _react.useEffect)(function () {
-    // only has toggle if requested and has hasBackgroundAlways
+    // only has toggle if requested and withoutBackground is unset/falsy
     // NOTE: prop-types isRequired.if for the expand and collapse
     // icon descriptions depends on the this.
-    setHasCollapseButton(hasCollapseHeaderToggle && hasBackgroundAlways);
-  }, [hasBackgroundAlways, hasCollapseHeaderToggle]);
+    setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
+  }, [withoutBackground, hasCollapseHeaderToggle]);
   (0, _react.useEffect)(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
     setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
@@ -477,6 +481,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       var handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : function () {};
       return /*#__PURE__*/_react.default.createElement(_Tag, {
         className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions-content"))
       }, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/_react.default.createElement(_ButtonSetWithOverflow.ButtonSetWithOverflow, {
         classname: "".concat(_PageHeaderUtils.blockClass, "__button-set-with-overflow"),
         menuOptionsClass: (0, _classnames.default)(pageActionsMenuOptionsClass, "".concat(_PageHeaderUtils.blockClass, "__button-set-menu-options")),
@@ -484,7 +490,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
         rightAlign: true
-      }));
+      })));
     }
   }
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -507,7 +513,14 @@ var TYPES = {
   'high-contrast': 'High-Contrast'
 };
 var tagTypes = Object.keys(TYPES);
-PageHeader.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated** see property `withoutBackground`
+   */
+  hasBackgroundAlways: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'Property replaced by `withoutBackground`')
+};
+exports.deprecatedProps = deprecatedProps;
+PageHeader.propTypes = _objectSpread({
   /**
    * Specifies the action bar items which are the final items in the row top of the PageHeader.
    * Each item is specified as an object with the properties of a Carbon Button in icon only form.
@@ -531,9 +544,8 @@ PageHeader.propTypes = {
    * NOTE: This prop is required if actionBarItems are supplied
    */
   actionBarOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref8) {
-    var actionBarItems = _ref8.actionBarItems,
-        actionBarOverflowLabel = _ref8.actionBarOverflowLabel;
-    return actionBarItems && actionBarItems.length > 0 && !actionBarOverflowLabel;
+    var actionBarItems = _ref8.actionBarItems;
+    return actionBarItems && actionBarItems.length > 0;
   }),
 
   /**
@@ -568,9 +580,8 @@ PageHeader.propTypes = {
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
   breadcrumbOverflowAriaLabel: _propTypes.default.string.isRequired.if(function (_ref9) {
-    var breadcrumbs = _ref9.breadcrumbs,
-        breadcrumbItems = _ref9.breadcrumbItems;
-    return breadcrumbs && breadcrumbs.length > 0 || breadcrumbItems && breadcrumbItems.length > 0;
+    var breadcrumbs = _ref9.breadcrumbs;
+    return breadcrumbs && breadcrumbs.length > 0;
   }),
 
   /**
@@ -636,13 +647,13 @@ PageHeader.propTypes = {
   collapseHeader: _propTypes.default.bool,
 
   /**
-   * If `hasCollapseHeaderToggle` and `hasBackgroundAlways` are set then assistive text is required
-   * for both the expend and collapse states of the button component used.
+   * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
+   * required for both the expend and collapse states of the button component used.
    */
   collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref11) {
-    var hasBackgroundAlways = _ref11.hasBackgroundAlways,
+    var withoutBackground = _ref11.withoutBackground,
         hasCollapseHeaderToggle = _ref11.hasCollapseHeaderToggle;
-    return hasBackgroundAlways && hasCollapseHeaderToggle;
+    return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
   /**
@@ -658,13 +669,13 @@ PageHeader.propTypes = {
   disableBreadcrumbScroll: _propTypes.default.bool,
 
   /**
-   * If `hasCollapseHeaderToggle` and `hasBackgroundAlways` are set then assistive text is required
-   * for both the expend and collapse states of the button component used.
+   * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
+   * required for both the expend and collapse states of the button component used.
    */
   expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
-    var hasBackgroundAlways = _ref12.hasBackgroundAlways,
+    var withoutBackground = _ref12.withoutBackground,
         hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
-    return hasBackgroundAlways && hasCollapseHeaderToggle;
+    return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
   /**
@@ -673,12 +684,6 @@ PageHeader.propTypes = {
    */
   fullWidthGrid: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['xl'])]),
 
-  /**
-   * Specifies if the PageHeader should have a background always on and defaults to the preferred `true`.
-   * When false some parts of the header gain a background if they stick to the top of the PageHeader on scroll.
-   */
-  hasBackgroundAlways: _propTypes.default.bool,
-
   /**
    * Adds a button as the last element of the bottom row which collapses and expands the header.
    *
@@ -802,11 +807,16 @@ PageHeader.propTypes = {
     content: _propTypes.default.node.isRequired,
     breadcrumbContent: _propTypes.default.node,
     asText: _propTypes.default.string.isRequired
-  })])
-};
+  })]),
+
+  /**
+   * Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
+   * Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
+   */
+  withoutBackground: _propTypes.default.bool
+}, deprecatedProps);
 PageHeader.defaultProps = {
   fullWidthGrid: false,
-  hasBackgroundAlways: true,
   narrowGrid: false
 };
 PageHeader.displayName = componentName;

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -53,7 +53,8 @@ ProductiveCard.propTypes = {
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     onKeyDown: _propTypes.default.func,
     onClick: _propTypes.default.func,
-    iconDescription: _propTypes.default.string
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
   })),
 
   /**
@@ -119,7 +120,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the primary button
    */
-  primaryButtonText: _propTypes.default.string,
+  primaryButtonText: _propTypes.default.node,
 
   /**
    * Title that's displayed at the top of the card

package/lib/components/Toolbar/ToolbarButton.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolbarButton = void 0;
+exports.blockClass = exports.ToolbarButton = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,7 +33,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var blockClass = "".concat(_Toolbar.blockClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
+
+exports.blockClass = blockClass;
 var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useContext;
 
@@ -45,12 +48,12 @@ var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     tooltipPosition: ((_useContext = (0, _react.useContext)(_Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
     ref: ref,
-    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(_Toolbar.blockClass, "__button--caret"), caret)),
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
     size: "md",
     hasIconOnly: true
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, caret && /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_Toolbar.blockClass, "__button__caret")
+    className: "".concat(blockClass, "__caret")
   })));
 });
 exports.ToolbarButton = ToolbarButton;

package/lib/components/_Canary/Canary.js

@@ -34,7 +34,7 @@ var Canary = function Canary(_ref
   var className = _ref.className,
       componentName = _ref.componentName,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var instructions = "\nimport { pkg } from '@carbon/ibm-cloud-cognitive';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
+  var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className)
   }), /*#__PURE__*/_react.default.createElement("h2", null, "This component ", /*#__PURE__*/_react.default.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/_react.default.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.CodeSnippet, {

package/lib/components/index.js

@@ -99,12 +99,6 @@ Object.defineProperty(exports, "ErrorEmptyState", {
     return _EmptyStates.ErrorEmptyState;
   }
 });
-Object.defineProperty(exports, "ExampleComponent", {
-  enumerable: true,
-  get: function get() {
-    return _ExampleComponent.ExampleComponent;
-  }
-});
 Object.defineProperty(exports, "ExportModal", {
   enumerable: true,
   get: function get() {
@@ -300,8 +294,6 @@ var _CreateTearsheetNarrow = require("./CreateTearsheetNarrow");
 
 var _EmptyStates = require("./EmptyStates");
 
-var _ExampleComponent = require("./ExampleComponent");
-
 var _ExportModal = require("./ExportModal");
 
 var _ExpressiveCard = require("./ExpressiveCard");

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

@@ -56,7 +56,6 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
-    ExampleComponent: false,
     LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,

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

@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareStory = exports.getStoryTitle = exports.getStoryId = void 0;
+exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.CodesandboxLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _csf = require("@storybook/csf");
 
@@ -69,5 +73,28 @@ var prepareStory = function prepareStory(template, options) {
   result.parameters.ccsSettings.sequence = sequence++;
   return result;
 };
+/**
+ * A helper component that returns a codesandbox link to an example codesandbox for the component.
+ * The link URL is based on the example directory name and the standard codesandbox URL for package examples.
+ */
+
+
+exports.prepareStory = prepareStory;
+
+var CodesandboxLink = function CodesandboxLink(_ref) {
+  var exampleDirectory = _ref.exampleDirectory;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/carbon-for-ibm-products/".concat(exampleDirectory)
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Edit on CodeSandbox",
+    src: "https://codesandbox.io/static/img/play-codesandbox.svg"
+  }));
+};
 
-exports.prepareStory = prepareStory;
+exports.CodesandboxLink = CodesandboxLink;
+CodesandboxLink.propTypes = {
+  /**
+   * directory withing examples codesandbox will be found
+   */
+  exampleDirectory: _propTypes.default.string
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.0.0-rc.2",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,7 +52,7 @@
   "devDependencies": {
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
-    "babel-preset-ibm-cloud-cognitive": "^0.13.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.0",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,11 +60,11 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
     "jest": "^27.3.1",
-    "jest-config-ibm-cloud-cognitive": "^0.21.0",
+    "jest-config-ibm-cloud-cognitive": "^0.23.0",
     "npm-check-updates": "^12.0.2",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.43.4",
+    "sass": "^1.43.5",
     "yargs": "^17.2.1"
   },
   "dependencies": {
@@ -86,5 +86,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "c3983ff27a76cc490c04e2901b254f9996800cb2"
+  "gitHead": "2d73283440932eacac0047223791c6590599d0db"
 }

package/scss/components/ButtonSetWithOverflow/_button-set-with-overflow.scss

@@ -22,6 +22,7 @@ $block-class: #{$pkg-prefix}--button-set-with-overflow;
   @include block-wrap($block-class) {
     &.#{$block-class} {
       display: flex;
+      width: 100%;
     }
 
     .#{$block-class}__space {

package/scss/components/Card/_card.scss

@@ -102,6 +102,7 @@
   }
 
   .#{$block-class}__icon {
+    color: inherit;
     cursor: pointer;
   }
 

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

@@ -45,12 +45,29 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: var(--to-color);
   }
 }
+@keyframes background-and-shadow-appear {
+  from {
+    background-color: var(--from-color);
+    box-shadow: 0 1px 0 var(--from-color);
+  }
+  to {
+    background-color: var(--to-color);
+    box-shadow: 0 1px 0 var(--to-color-shadow);
+  }
+}
 
-@mixin appearingBackground($from-color: $ui-background, $to-color: $ui-01) {
+@mixin appearingBackground(
+  $with-shadow: false,
+  $from-color: $ui-background,
+  $to-color: $ui-01,
+  $to-color-shadow: $ui-03
+) {
   // stylelint-disable-next-line carbon/theme-token-use
   --from-color: #{$from-color};
   // stylelint-disable-next-line carbon/theme-token-use
   --to-color: #{$to-color};
+  // stylelint-disable-next-line carbon/theme-token-use
+  --to-color-shadow: #{$to-color-shadow};
 
   position: absolute;
   top: 0;
@@ -61,8 +78,13 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   // This transitions the background-color between from-color and to-color
   $duration: 1000ms;
-  // stylelint-disable-next-line carbon/motion-token-use
-  animation: background-appear $duration
+
+  $animation: background-appear;
+  @if ($with-shadow) {
+    $animation: background-and-shadow-appear;
+  }
+
+  animation: $animation $duration
     calc((-1 * $duration * var(--#{$block-class}--background-opacity))) linear
     paused forwards;
 
@@ -98,10 +120,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     &::before {
-      @include appearingBackground();
+      @include appearingBackground(true);
 
       z-index: -1;
-      box-shadow: 0 1px 0 $ui-03;
     }
 
     .#{$block-class}--width--xl {
@@ -465,6 +486,15 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       @include appearingBackground();
     }
 
+    .#{$block-class}__page-actions-content {
+      position: relative; // ensure appears over ::before
+      display: flex;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      justify-content: flex-end;
+    }
+
     .#{$block-class}__title-row .#{$block-class}__page-actions--in-breadcrumb {
       opacity: 0;
       visibility: hidden;
@@ -489,7 +519,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     .#{$block-class}__subtitle {
-      @include carbon--type-style('body-long-02');
+      @include carbon--type-style('body-long-01');
     }
 
     .#{$block-class}__available-row {

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

@@ -9,6 +9,7 @@
 
 @import 'carbon-components/scss/components/ui-shell/ui-shell';
 @import 'carbon-components/scss/components/data-table/data-table';
+@import 'carbon-components/scss/components/button/button';
 
 $story-class: 'page-header-stories';
 

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

@@ -36,6 +36,10 @@
       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 {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -225,6 +225,12 @@
       flex: 0 0 257px; // influencer width 256px plus 1px border
       border-right: 1px solid $ui-03;
       overflow-y: auto;
+
+      // the normal 80% content width inside modals should not apply to influencer content
+      // apply the class again for higher specificity
+      &.#{$block-class}__influencer p {
+        padding-right: 0;
+      }
     }
 
     .#{$block-class}__influencer--wide {

package/scss/components/_index.scss

@@ -21,7 +21,6 @@
 @import './CreateTearsheet/index';
 @import './CreateTearsheetNarrow/index';
 @import './EmptyStates/index';
-@import './ExampleComponent/index';
 @import './ExportModal/index';
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';