@carbon/ibm-products 2.8.0 → 2.8.1

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -26,7 +26,8 @@ var componentName = 'CreateInfluencer';
 var CreateInfluencer = function CreateInfluencer(_ref) {
   var className = _ref.className,
     currentStep = _ref.currentStep,
-    stepData = _ref.stepData;
+    stepData = _ref.stepData,
+    title = _ref.title;
   var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
     var dynamicSteps = [];
     array.forEach(function (item, index) {
@@ -54,7 +55,9 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
     var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
-    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
+    }, title && /*#__PURE__*/_react.default.createElement("h3", {
+      className: "".concat(blockClass, "__title")
+    }, title), currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_react2.ProgressIndicator, {
       currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
       : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
       ,
@@ -96,5 +99,9 @@ CreateInfluencer.propTypes = {
     secondaryLabel: _propTypes.default.string,
     shouldIncludeStep: _propTypes.default.bool,
     title: _propTypes.default.node
-  }))
+  })),
+  /**
+   * The main title of the full page, displayed in the influencer area.
+   */
+  title: _propTypes.default.string
 };

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -58,6 +58,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
           gridHeight = _ref.gridHeight;
         headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
         headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
+        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
       };
       setCustomValues({
         gridHeight: gridElement.offsetHeight,

package/lib/components/FilterSummary/FilterSummary.js

@@ -5,19 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@carbon/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
+var _excluded = ["key", "value"];
 /**
  * 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.
  */
-
+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) { (0, _defineProperty2.default)(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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
@@ -33,11 +37,12 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
-      value = _ref2.value;
-    return {
+      value = _ref2.value,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
-    };
+    });
   });
   return /*#__PURE__*/_react2.default.createElement("div", {
     ref: ref,

package/lib/components/SidePanel/SidePanel.js

@@ -295,12 +295,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     if (includeOverlay && open) {
       bodyElement.style.overflow = 'hidden';
     } else if (includeOverlay && !open) {
-      bodyElement.style.overflow = 'initial';
+      bodyElement.style.overflow = '';
     }
     if (includeOverlay && !preventCloseOnClickOutside) {
       document.addEventListener('click', handleOutsideClick);
     }
     return function () {
+      var bodyElement = document.body;
+      bodyElement.style.overflow = '';
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]);

package/lib/components/TagSet/TagSet.js

@@ -115,8 +115,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         }
       }, /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
         // ensure id is not duplicated
-        "data-original-id": id,
-        filter: false
+        "data-original-id": id
       }), label));
     }) : []);
     setSizingTags(newSizingTags);
@@ -127,7 +126,6 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       var label = _ref3.label,
         other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
       return /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
-        filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
@@ -316,12 +314,10 @@ TagSet.propTypes = {
    * with properties: **label**\* (required) to supply the tag content, and
    * other properties will be passed to the Carbon Tag component, such as
    * **type**, **disabled**, **ref**, **className** , and any other Tag props.
-   * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
-   * as HTML attributes.
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Tag.propTypes), {}, {
     label: _propTypes.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: _propTypes.default.oneOf(tagTypes)

package/lib/global/decorators/sidePanelDecorator.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sidePanelDecorator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@carbon/react");
+var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {
+  return function (Story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefix, "container")
+    }, renderHeader(), /*#__PURE__*/_react.default.createElement(_react2.Content, {
+      className: "".concat(prefix, "content")
+    }, /*#__PURE__*/_react.default.createElement(Story, null)));
+  };
+};
+exports.sidePanelDecorator = sidePanelDecorator;

package/lib/global/js/utils/StoryDocsPage.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _blocks = require("@storybook/blocks");
 var _changeCase = require("change-case");
 var _storyHelper = require("./story-helper");
+var _settings = require("../../../settings");
 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) { (0, _defineProperty2.default)(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. 2023, 2023
@@ -87,12 +88,14 @@ var StoryDocsPage = function StoryDocsPage(_ref2) {
   var storyInfo = (0, _storyHelper.storyDocsPageInfo)(csfFile);
   var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
   var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
-  var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
+  var storyHelperClass = isFullScreen ? "".concat(_settings.pkg.prefix, "--story-docs-page--fullscreen") : '';
   var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
   var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
     return !!block.story;
   }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-story-title": storyInfo.title
+  }, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
     var href = _ref3.href,
       label = _ref3.label;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index > 0 && ' | ', /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "ac236b7f8a9eec9f24898df158dac71e52f091b2"
+  "gitHead": "30006c901f29bcb7950244f425b527c264b32958"
 }

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

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
 
 $influencer-block-class: #{c4p-settings.$pkg-prefix}--create-influencer;
 $create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
@@ -39,6 +40,7 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
 .#{$influencer-block-class} {
   display: grid;
   height: 100%;
+  padding: $spacing-06 $spacing-07;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
 }
@@ -49,8 +51,10 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
   overflow-y: auto;
 }
 
-.#{$influencer-block-class}__progress-indicator.#{c4p-settings.$carbon-prefix}--progress {
-  padding: $spacing-06;
+.#{$influencer-block-class}__title {
+  @include type.type-style('heading-03');
+
+  margin-bottom: $spacing-06;
 }
 
 .#{$influencer-block-class}__view-all-toggle {

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

@@ -8,6 +8,7 @@
 @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing';
+@use '../../global/decorators/side-panel-decorator' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
 $story-prefix: create-side-panel-stories__;
@@ -27,3 +28,5 @@ $story-prefix: create-side-panel-stories__;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);

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

@@ -5,8 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$story-anchor: 'data-spreadsheet';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'DataSpreadsheet';
+
+$story-anchor: 'DataSpreadsheet';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }

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

@@ -128,8 +128,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   }
 }
 
-$story-anchor: 'datagrid';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'Datagrid';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/breakpoint';
 @use './variables' as *;
 
 .#{$block-class}__table-toolbar > section {
@@ -163,6 +164,23 @@
   width: 100%;
   padding-top: 0;
 
+  .#{c4p-settings.$carbon-prefix}--data-table-header__description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--data-table-header__title {
+    overflow: hidden;
+    max-width: 80ch;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include breakpoint.breakpoint(md) {
+      max-width: 55ch;
+    }
+  }
+
   .#{c4p-settings.$carbon-prefix}--data-table-content {
     width: 100%;
     height: 100%;
@@ -646,6 +664,7 @@
   width: 1rem;
   height: 100%;
   margin: 0;
+  -moz-appearance: initial;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
@@ -655,12 +674,14 @@
   outline: 0;
 }
 
-.#{$block-class} .#{$block-class}__col-resizer-range:focus::before {
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::before {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 2px;
-  height: 100%;
+  height: var(--#{$block-class}--header-height);
   background-color: $focus;
   content: '';
   transform: translate(-50%, -50%);
@@ -680,11 +701,13 @@
   transform: translate(-50%, 0);
 }
 
-.#{$block-class} .#{$block-class}__col-resizer-range:focus::after {
+.#{$block-class}
+  .#{$block-class}__col-resizer-range:focus
+  + .#{$block-class}__col-resize-indicator::after {
   position: absolute;
   /* stylelint-disable-next-line carbon/layout-token-use */
-  top: var(--#{$block-class}--row-height);
-  right: $spacing-03;
+  top: calc(var(--#{$block-class}--row-height) - 20px);
+  right: $spacing-02;
   width: 1px;
   height: calc(
     var(--#{$block-class}--grid-height) - var(--#{$block-class}--row-height)
@@ -702,3 +725,7 @@
   appearance: none;
   background: transparent;
 }
+
+.#{$block-class} .#{$block-class}__col-resizer-range::-moz-range-thumb {
+  visibility: hidden;
+}

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

@@ -5,11 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'ALIAS_STORY_STYLE_CONFIG' as *;
+@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '../../global/decorators/side-panel-decorator' as *;
 
-$block-class: #{$pkg-prefix}--edit-side-panel;
+$block-class: #{c4p-settings.$pkg-prefix}--edit-side-panel;
 $story-prefix: edit-side-panel-stories__;
 
 .#{$story-prefix}example-container {
@@ -19,11 +20,13 @@ $story-prefix: edit-side-panel-stories__;
   grid-template-columns: 1fr 1fr;
 }
 
-.#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
+.#{$story-prefix}example-form-group .#{c4p-settings.$carbon-prefix}--label {
   margin-bottom: 0;
 }
 
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::before,
-.#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);

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

@@ -5,6 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// @use 'ALIAS_STORY_STYLE_CONFIG';
+// @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 
 // TODO: add any additional styles used by EditTearsheetNarrow.stories.js

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

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/themes/scss/themes';
 @use '@carbon/styles/scss/type';
+@use '../../global/decorators/side-panel-decorator' as *;
 
 $story-prefix: side-panel-stories__;
 
@@ -43,3 +44,9 @@ $story-prefix: side-panel-stories__;
 .#{$story-prefix}header {
   @include theme(themes.$g100);
 }
+
+.#{$story-prefix}grid {
+  height: 100%;
+}
+
+@include side-panel-decorator($story-prefix);

package/scss/global/decorators/_side-panel-decorator.scss

@@ -0,0 +1,18 @@
+@mixin side-panel-decorator($prefix) {
+  .#{$prefix}container {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+  }
+
+  .#{$prefix}content {
+    flex-grow: 1;
+  }
+
+  .#{$prefix}toggle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/scss/global/js/utils/_story-as-full-page.scss

@@ -0,0 +1,6 @@
+.story-helper__full-page {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+}