diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap index 551413cec5..befdb4cc28 100644 --- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap +++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap @@ -3207,6 +3207,8 @@ p.c4p--about-modal__copyright-text:first-child { } .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug { inset-inline-end: 0; + margin-block: 6px; + margin-inline-end: 1rem; } .c4p--create-tearsheet-narrow .cds--modal-header__heading, @@ -3982,6 +3984,10 @@ p.c4p--about-modal__copyright-text:first-child { padding: 0; } +.c4p--datagrid .cds--noLabel svg.cds--btn__icon { + margin-inline-start: 0; +} + .c4p--datagrid .cds--action-list .cds--btn__icon { margin-top: 0; } @@ -4213,6 +4219,7 @@ p.c4p--about-modal__copyright-text:first-child { } .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort { width: calc(100% + 2rem); + align-items: inherit; margin: 0 calc(-1 * 1rem); } @@ -8875,6 +8882,7 @@ button.c4p--add-select__global-filter-toggle--open { } .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__popover-trigger { font-family: inherit; + border: none !important; } .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link.cds--link:visited { display: inline-block; diff --git a/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss b/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss index bcd18fdfd2..b1f10a50a0 100644 --- a/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss +++ b/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss @@ -124,6 +124,8 @@ $block-class-modal: #{$_block-class}-modal; } .#{$block-class-overflow}__popover-trigger { + /* stylelint-disable-next-line declaration-no-important */ + border: none !important; font-family: inherit; } diff --git a/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx b/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx index 352d29ddea..efd7f043e3 100644 --- a/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx +++ b/packages/ibm-products/src/components/TagSet/TagSet.stories.jsx @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -import React, { useRef, useState } from 'react'; +import React, { useRef, useState, useEffect } from 'react'; import { TYPES as tagTypes } from '../TagSet/constants'; import { pkg } from '../../settings'; @@ -140,6 +140,15 @@ export default { containerWidth: { control: { type: 'range', min: 20, max: 800, step: 10 }, }, + size: { + control: { + type: 'select', + }, + options: ['sm', 'md', 'lg'], + type: 'string', + description: + 'This prop is only for storybook representation, and does not belong to `tagset` component, the size can be passed to each tag{} in tags[], the overflow tag takes the size of last tag{} in tags[]', + }, allTagsModalTargetCustomDomNode: { control: { type: 'boolean' }, description: 'Optional DOM node: Modal target defaults to document.body', @@ -159,9 +168,13 @@ export default { }; const Template = (argsIn) => { - const { containerWidth, allTagsModalTargetCustomDomNode, ...args } = { + const { containerWidth, allTagsModalTargetCustomDomNode, size, ...args } = { ...argsIn, }; + if (args.tags) { + args.tags = args.tags.map((tag) => ({ ...tag, size })); + } + const ref = useRef(); return (
@@ -204,13 +217,20 @@ HundredsOfTags.args = { }; const TemplateWithClose = (argsIn) => { - const { containerWidth, allTagsModalTargetCustomDomNode, tags, ...args } = { + const { + containerWidth, + allTagsModalTargetCustomDomNode, + size, + tags, + ...args + } = { ...argsIn, }; const [liveTags, setLiveTags] = useState( tags.map((tag) => ({ ...tag, filter: true, + size: size, onClose: () => handleTagClose(tag.label), })) ); @@ -220,6 +240,14 @@ const TemplateWithClose = (argsIn) => { }; const ref = useRef(); + useEffect(() => { + setLiveTags((prevTags) => + prevTags.map((tag) => ({ + ...tag, + size: size, + })) + ); + }, [size]); return (
( ); useEffect(() => { + let size = 'md'; // create visible and overflow tags let newDisplayedTags = tags && tags.length > 0 - ? tags.map(({ label, onClose, ...other }, index) => ( - handleTagOnClose(onClose, index)} - > - {label} - - )) + ? tags.map(({ label, onClose, ...other }, index) => { + if (index == tags.length - 1 && other.size) { + size = other.size; + } + return ( + handleTagOnClose(onClose, index)} + > + {label} + + ); + }) : []; // separate out tags for the overflow @@ -266,6 +272,7 @@ export let TagSet = React.forwardRef( overflowAlign={overflowAlign} overflowType={overflowType} showAllTagsLabel={showAllTagsLabel} + size={size} key="displayed-tag-overflow" ref={overflowTag} popoverOpen={popoverOpen} diff --git a/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx b/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx index 7f8039ecad..efa1fe18bc 100644 --- a/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx +++ b/packages/ibm-products/src/components/TagSet/TagSetOverflow.tsx @@ -16,7 +16,7 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; /**@ts-ignore */ -import { Link, Tag, Popover, PopoverContent } from '@carbon/react'; +import { Link, Popover, PopoverContent, OperationalTag } from '@carbon/react'; import { useClickOutside } from '../../global/js/hooks'; import { pkg } from '../../settings'; @@ -83,6 +83,10 @@ interface TagSetOverflowProps { * label for the overflow show all tags link */ showAllTagsLabel?: string; + /** + * Size of the overflow tag + */ + size?: string; } export const TagSetOverflow = React.forwardRef( @@ -100,6 +104,7 @@ export const TagSetOverflow = React.forwardRef( showAllTagsLabel, popoverOpen, setPopoverOpen, + size, // Collect any other property values passed in. ...rest }: PropsWithChildren, @@ -149,12 +154,12 @@ export const TagSetOverflow = React.forwardRef( open={popoverOpen} autoAlign={overflowAutoAlign} > - setPopoverOpen?.(!popoverOpen)} className={cx(`${blockClass}__popover-trigger`)} - > - {`+${overflowTags.length}`} - + size={size} + text={`+${overflowTags.length}`} + />
    @@ -265,4 +270,8 @@ TagSetOverflow.propTypes = { * label for the overflow show all tags link */ showAllTagsLabel: PropTypes.string, + /** + * Size of the overflow tag + */ + size: PropTypes.string, };