@carbon/ibm-products 2.13.0 → 2.14.0

package/lib/components/FilterSummary/FilterSummary.js

@@ -33,7 +33,9 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$renderLabel = _ref.renderLabel,
-    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
+    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType;
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
@@ -52,7 +54,8 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
     showAllTagsLabel: "View all tags",
-    tags: tagFilters
+    tags: tagFilters,
+    overflowType: overflowType
   }), /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     size: "sm",
@@ -66,6 +69,7 @@ FilterSummary.propTypes = {
   clearFilters: _propTypes.default.func.isRequired,
   clearFiltersText: _propTypes.default.string,
   filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   renderLabel: _propTypes.default.func
 };
 var _default = exports.default = FilterSummary;

package/lib/components/TagSet/TagSet.js

@@ -20,7 +20,7 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"]; //
 // Copyright IBM Corp. 2020, 2022
@@ -39,7 +39,8 @@ var allTagsModalSearchThreshold = 10;
 // Default values for props
 var defaults = {
   align: 'start',
-  overflowAlign: 'bottom'
+  overflowAlign: 'bottom',
+  overflowType: 'default'
 };
 var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
@@ -51,6 +52,8 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
+    _ref$overflowType = _ref.overflowType,
+    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
     allTagsModalTitle = _ref.allTagsModalTitle,
     allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
@@ -131,12 +134,13 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
       onShowAllClick: handleShowAllClick,
       overflowTags: newOverflowTags,
       overflowAlign: overflowAlign,
+      overflowType: overflowType,
       showAllTagsLabel: showAllTagsLabel,
       key: "displayed-tag-overflow",
       ref: overflowTag
     }));
     setDisplayedTags(newDisplayedTags);
-  }, [displayCount, overflowAlign, overflowClassName, showAllTagsLabel, tags]);
+  }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags]);
   var checkFullyVisibleTags = (0, _react.useCallback)(function () {
     if (multiline) {
       return setDisplayCount(maxVisible);
@@ -285,6 +289,10 @@ TagSet.propTypes = {
    * overflowClassName for the tooltip popup
    */
   overflowClassName: _propTypes.default.string,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link.
    *

package/lib/components/TagSet/TagSetOverflow.js

@@ -16,7 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _hooks = require("../../global/js/hooks");
 var _settings = require("../../settings");
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "showAllTagsLabel"]; //
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel"]; //
 // Copyright IBM Corp. 2021, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
@@ -40,6 +40,7 @@ var TagSetOverflow = exports.TagSetOverflow = /*#__PURE__*/_react.default.forwar
     _ref$overflowAlign = _ref.overflowAlign,
     overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
     overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
@@ -89,12 +90,18 @@ var TagSetOverflow = exports.TagSetOverflow = /*#__PURE__*/_react.default.forwar
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
+    var _cx2;
+    var tagProps = {};
+    if (overflowType === 'tag') {
+      tagProps.type = 'high-contrast';
+    }
+    if (overflowType === 'default') {
+      tagProps.filter = false;
+    }
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: "".concat(blockClass, "__tag-item"),
+      className: (0, _classnames.default)("".concat(blockClass, "__tag-item"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
       key: index
-    }, /*#__PURE__*/_react.default.cloneElement(tag, {
-      filter: false
-    }));
+    }, /*#__PURE__*/_react.default.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/_react.default.createElement(_react2.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -124,6 +131,10 @@ TagSetOverflow.propTypes = {
    * tags shown in overflow
    */
   overflowTags: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: _propTypes.default.oneOf(['default', 'tag']),
   /**
    * label for the overflow show all tags link
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,5 +96,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "0f226a6af5fd9c21aa5d39f26266f561895385b9"
+  "gitHead": "8d8e1b6bbc737baf63f059b1ed6929958560ba64"
 }

package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss

@@ -44,7 +44,43 @@
   justify-content: center;
 }
 
+// Top align cell content for xl row size
 .#{variables.$block-class}
-  .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+
+  &.#{variables.$block-class}__actions-column-cell {
+    padding-left: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  th,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  th {
+  .#{c4p-settings.$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  .#{variables.$block-class}__checkbox-cell
+  th.cds--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: $spacing-04;
+}
+
+.#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
   background-color: $layer-02;
 }

package/scss/components/TagSet/_tag-set.scss

@@ -140,11 +140,19 @@ $block-class-modal: #{$_block-class}-modal;
   }
 
   .#{$block-class-overflow}__tag-list {
+    display: flex;
+    flex-direction: column;
     margin-bottom: $spacing-03;
   }
 
-  .#{$block-class-overflow}__tag-item,
-  .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+    .#{$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+    .#{$carbon-prefix}--tag {
     @include type.type-style('body-compact-01');
 
     display: block;