From ba29c0950f1fcc7388e58523e94a32abd588d59d Mon Sep 17 00:00:00 2001 From: Nandan Devadula <47176249+devadula-nandan@users.noreply.github.com> Date: Fri, 20 Sep 2024 12:23:54 +0530 Subject: [PATCH] feat(tagset): support for size on overflow tag (#6065) * feat(tagset): support for size on overflow tag * fix: remove border to match our design * fix: remove border to match design * chore: add size control in story --- .../__snapshots__/styles.test.js.snap | 8 +++++ .../src/components/TagSet/_tag-set.scss | 2 ++ .../src/components/TagSet/TagSet.stories.jsx | 34 +++++++++++++++++-- .../src/components/TagSet/TagSet.tsx | 25 +++++++++----- .../src/components/TagSet/TagSetOverflow.tsx | 19 ++++++++--- 5 files changed, 71 insertions(+), 17 deletions(-) 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 (