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

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -133,6 +133,17 @@ var useFilters = function useFilters(_ref) {
 
         filtersObjectArrayCopy.splice(_index2, 1);
       }
+    } else if (type === NUMBER) {
+      // If the value is empty remove it from the filtersObjectArray
+      if (value === '') {
+        // Find the column that uses number and displays an empty string
+        var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        }); // Remove it from the filters array
+
+
+        filtersObjectArrayCopy.splice(_index3, 1);
+      }
     }
 
     setFiltersObjectArray(filtersObjectArrayCopy); // // Automatically apply the filters if the updateMethod is instant

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -46,12 +46,12 @@ ExpressiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Optional media content like an image to be placed in the card
@@ -126,6 +126,6 @@ ExpressiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: PropTypes.string
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node])
 };
 ExpressiveCard.displayName = componentName;

package/es/components/PageHeader/PageHeader.js

@@ -446,8 +446,9 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React.createElement(Button, {
-    className: cx("".concat(blockClass, "__collapse-expand-toggle"), _defineProperty({}, "".concat(blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__collapse-expand-toggle"), _defineProperty({}, "".concat(blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+  }, /*#__PURE__*/React.createElement(Button, {
     hasIconOnly: true,
     iconDescription:
     /* istanbul ignore next */
@@ -463,7 +464,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
-  }) : null));
+  })) : null));
 
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {

package/es/components/ProductiveCard/ProductiveCard.js

@@ -75,12 +75,12 @@ ProductiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Provides the callback for a clickable card
@@ -130,7 +130,7 @@ ProductiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Determines title size

package/lib/components/Card/Card.js

@@ -112,7 +112,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Layer, {
+        level: 2
+      }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
         size: size,
         direction: pos,
         flipped: true,
@@ -123,7 +125,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
           key: id
         }, rest));
-      }));
+      })));
     }
 
     var icons = actionIcons.map(function (_ref3) {
@@ -266,8 +268,8 @@ Card.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   clickZone: _propTypes.default.oneOf(['one', 'two', 'three']),
-  description: _propTypes.default.string,
-  label: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   media: _propTypes.default.node,
   mediaPosition: _propTypes.default.oneOf(['top', 'left']),
   onClick: _propTypes.default.func,
@@ -292,7 +294,7 @@ Card.propTypes = {
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
   secondaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 Card.displayName = componentName;

package/lib/components/Card/CardHeader.js

@@ -78,7 +78,7 @@ var CardHeader = function CardHeader(_ref) {
 exports.CardHeader = CardHeader;
 CardHeader.propTypes = {
   actions: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.node]),
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
   noActionIcons: _propTypes.default.bool,
@@ -86,7 +86,7 @@ CardHeader.propTypes = {
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 CardHeader.displayName = componentName;

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -17,12 +17,11 @@ var _react2 = require("@carbon/react");
 
 var _EmptyStates = require("../../EmptyStates");
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
@@ -37,25 +36,21 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       illustrationTheme = datagridState.illustrationTheme,
       emptyStateAction = datagridState.emptyStateAction,
       emptyStateLink = datagridState.emptyStateLink;
-  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
-    className: "".concat(blockClass, "__empty-state-body")
-  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
-    colSpan: headers.length
-  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, {
-    illustrationTheme: illustrationTheme,
-    size: emptyStateSize,
-    title: emptyStateTitle,
-    subtitle: emptyStateDescription,
-    action: emptyStateAction,
-    link: emptyStateLink
-  }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
+  var emptyStateProps = {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
     subtitle: emptyStateDescription,
     action: emptyStateAction,
     link: emptyStateLink
-  }))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
+    className: "".concat(blockClass, "__empty-state-body")
+  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
+    colSpan: headers.length
+  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps))));
 };
 
 var _default = DatagridEmptyBody;

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

@@ -31,7 +31,9 @@ var _settings = require("../../../settings");
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
   }), datagridState.headers.filter(function (_ref) {
@@ -47,7 +49,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
+      role: false
+    }), {
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -30,7 +30,9 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
       rows = datagridState.rows,
       prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps(), {
+  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -80,7 +80,9 @@ var DatagridRow = function DatagridRow(datagridState) {
 
   return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
     className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
-  }, row.getRowProps(), {
+  }, row.getRowProps({
+    role: false
+  }), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
       if (!withNestedRows) {
@@ -114,7 +116,9 @@ var DatagridRow = function DatagridRow(datagridState) {
       }
     }
   }), row.cells.map(function (cell, index) {
-    var cellProps = cell.getCellProps();
+    var cellProps = cell.getCellProps({
+      role: false
+    });
     var children = cellProps.children,
         restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
 

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -29,7 +29,9 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
       rows = datagridState.rows,
       prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -101,7 +101,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
     onScroll: function onScroll(e) {
       return syncScroll(e);
     }

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -147,6 +147,17 @@ var useFilters = function useFilters(_ref) {
 
         filtersObjectArrayCopy.splice(_index2, 1);
       }
+    } else if (type === _constants.NUMBER) {
+      // If the value is empty remove it from the filtersObjectArray
+      if (value === '') {
+        // Find the column that uses number and displays an empty string
+        var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        }); // Remove it from the filters array
+
+
+        filtersObjectArrayCopy.splice(_index3, 1);
+      }
     }
 
     setFiltersObjectArray(filtersObjectArrayCopy); // // Automatically apply the filters if the updateMethod is instant

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -69,12 +69,12 @@ ExpressiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Optional media content like an image to be placed in the card
@@ -149,6 +149,6 @@ ExpressiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: _propTypes.default.string
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node])
 };
 ExpressiveCard.displayName = componentName;

package/lib/components/PageHeader/PageHeader.js

@@ -475,8 +475,9 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed))
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     hasIconOnly: true,
     iconDescription:
     /* istanbul ignore next */
@@ -492,7 +493,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
-  }) : null));
+  })) : null));
 
   function thePageActions(isBreadcrumbRow, inBreadcrumbRow) {
     if (pageActions) {

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -93,12 +93,12 @@ ProductiveCard.propTypes = {
   /**
    * Optional header description
    */
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Optional label for the top of the card
    */
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Provides the callback for a clickable card
@@ -148,7 +148,7 @@ ProductiveCard.propTypes = {
   /**
    * Title that's displayed at the top of the card
    */
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
 
   /**
    * Determines title size

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.27",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "021c153ea593848f7c1a2049c95af0b880603c9e"
+  "gitHead": "33ed98e63caf4d07ba69eb8cb709fd44b3303c78"
 }

package/scss/components/ActionBar/_action-bar.scss

@@ -28,10 +28,6 @@ $block-class-overflow-items: #{$_block-class}-overflow-items;
     justify-content: flex-end;
   }
 
-  .#{$block-class-overflow-items} {
-    display: inline-block;
-  }
-
   .#{$_block-class}__hidden-sizing-items {
     // This breadcrumb container is used to measure the width of all displayable breadcrumbs
     @include measuring-container;

package/scss/components/Card/_card.scss

@@ -15,18 +15,18 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class} {
-  background: $layer-01;
+  background-color: $layer-01;
   color: $text-primary;
 }
 
 .#{$block-class}__clickable {
   cursor: pointer;
   // stylelint-disable-next-line carbon/motion-easing-use
-  transition: background $duration-fast-02;
+  transition: background-color $duration-fast-02;
 }
 
 .#{$block-class}__clickable:hover {
-  background: $background-hover;
+  background-color: $layer-hover-01;
 }
 
 .#{$block-class}__media-left {
@@ -82,7 +82,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 }
 
 .#{$block-class}__body {
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   padding: $spacing-05;
   padding-top: 0;
@@ -96,15 +96,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 .#{$block-class}__actions {
   display: flex;
   flex-direction: row;
-  margin: $spacing-05;
-  margin-top: 0;
 }
 
 .#{$block-class}__icon {
+  padding: $spacing-03;
   color: inherit;
   cursor: pointer;
 }
 
+.#{$block-class}__icon:hover {
+  background-color: $layer-hover-01;
+}
+
+#{$block-class}__icon:active {
+  color: $link-primary-hover;
+}
+
 .#{$block-class}__link {
   color: inherit;
   text-decoration: inherit;

package/scss/components/ExportModal/_export-modal.scss

@@ -44,7 +44,3 @@ $block-class: #{c4p-settings.$pkg-prefix}--export-modal;
 .#{$block-class}__error-icon {
   fill: $button-danger-primary;
 }
-
-.#{c4p-settings.$carbon-prefix}--modal-content.#{$block-class}__body-container {
-  padding-bottom: $spacing-06;
-}

package/scss/components/ExpressiveCard/_expressive-card.scss

@@ -14,5 +14,5 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 }

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

@@ -616,7 +616,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: $background;
   }
 
-  .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$block-class}__collapse-expand-toggle {
+  .#{$block-class}__collapse-expand-toggle {
     position: absolute;
     z-index: $raised-z-index + 1;
     right: 0;
@@ -628,8 +628,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     transition: all $duration-slow-01 motion(standard, productive);
   }
 
-  .#{$block-class}__collapse-expand-toggle--collapsed
-    .#{$carbon-prefix}--btn__icon {
+  .#{$block-class}__collapse-expand-toggle--collapsed svg {
     // transform: rotate(90deg);
     transform: scaleY(-1);
   }

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

@@ -21,11 +21,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__title {
-    @include type.type-style('productive-heading-02');
+    @include type.type-style('heading-compact-02');
   }
 
   .#{$block-class}__title-lg .#{$block-class}__title {
-    @include type.type-style('productive-heading-03');
+    @include type.type-style('heading-03');
   }
 
   .#{$block-class}__body {
@@ -43,6 +43,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   }
 
   .#{$block-class}__actions {
+    min-height: $spacing-07;
     margin: 0;
   }
 
@@ -51,6 +52,34 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
     margin-right: $spacing-03;
   }
 
+  .#{$block-class}__actions-header-ghost-button {
+    min-height: $spacing-07;
+    padding: 0 $spacing-05;
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-right: calc($spacing-01 + $spacing-03);
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-left: calc($spacing-01 + $spacing-03);
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &::before {
+      position: absolute;
+      left: 0;
+      width: 0.05rem;
+      height: $spacing-06;
+      background-color: theme.$layer-hover-01;
+      content: '';
+      opacity: 1;
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        opacity: 0;
+      }
+    }
+  }
+
   .#{$block-class}__title-lg .#{$block-class}__actions-header,
   .#{$block-class}__header-has-label .#{$block-class}__actions-header {
     margin-top: 0;

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

@@ -154,6 +154,7 @@ $block-class-modal: #{$_block-class}-modal;
     padding: 0;
     margin: 0;
     background-color: inherit;
+    border-radius: 0;
     color: inherit;
     text-overflow: ellipsis;
     white-space: nowrap;

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -92,6 +92,11 @@ $theme-keys: map-keys($themes);
   border-radius: 50%;
 }
 
+.#{$carbon-prefix}--btn--ghost.#{$block-class}__tooltip:focus {
+  border: 0;
+  box-shadow: 0 0 0 $spacing-02 $focus;
+}
+
 .#{$carbon-prefix}--tooltip__trigger .#{$block-class} svg,
 .#{$block-class}__tooltip.#{$carbon-prefix}--btn--ghost:not([disabled]) svg {
   fill: $layer-01;