From 1fd206b2384fbb0b9afd4dcd9000fc0b005753a0 Mon Sep 17 00:00:00 2001 From: Niclas Liimatainen Date: Fri, 30 Oct 2020 12:51:09 +0200 Subject: [PATCH 01/10] Finalize Tag implementation --- packages/core/src/components/tag/tag.css | 14 +++- .../core/src/components/tag/tag.stories.js | 14 +++- packages/react/rollup.config.js | 1 + .../react/src/components/tag/Tag.module.scss | 4 ++ .../react/src/components/tag/Tag.stories.tsx | 31 ++++++++- .../react/src/components/tag/Tag.test.tsx | 2 +- packages/react/src/components/tag/Tag.tsx | 68 +++++++++++++------ .../tag/__snapshots__/Tag.test.tsx.snap | 5 +- 8 files changed, 111 insertions(+), 28 deletions(-) diff --git a/packages/core/src/components/tag/tag.css b/packages/core/src/components/tag/tag.css index ea10002d37..1aa3bdcd8e 100644 --- a/packages/core/src/components/tag/tag.css +++ b/packages/core/src/components/tag/tag.css @@ -10,7 +10,6 @@ flex-direction: row-reverse; font-size: var(--fontsize-body-s); outline: none; - padding: 0 var(--spacing-2-xs) 0 0; } .hds-tag:focus, @@ -18,6 +17,19 @@ box-shadow: 0 0 0 3px var(--tag-focus-outline-color); } +.hds-tag[tabindex='0'] { + cursor: pointer; +} + +.hds-tag__label { + line-height: var(--lineheight-m); + padding: var(--spacing-3-xs) var(--spacing-2-xs); +} + +.hds-tag__label:not(:only-child) { + padding: 0 var(--spacing-2-xs) 0 0; +} + .hds-tag__delete-button { display: flex; outline: none; diff --git a/packages/core/src/components/tag/tag.stories.js b/packages/core/src/components/tag/tag.stories.js index 914e48e034..a11f0cb87b 100644 --- a/packages/core/src/components/tag/tag.stories.js +++ b/packages/core/src/components/tag/tag.stories.js @@ -8,7 +8,19 @@ export default { export const Default = () => `
- Label + Label +
+`; + +export const Clickable = () => ` +
+ Label +
+`; + +export const Deletable = () => ` +
+ Label diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 43c960851d..dd9b1fa616 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -91,6 +91,7 @@ export default [ 'components/Section/index': 'src/components/section/index.ts', 'components/Select/index': 'src/components/dropdown/select/index.ts', 'components/StatusLabel/index': 'src/components/statusLabel/index.ts', + 'components/Tag/index': 'src/components/tag/index.ts', 'components/TextInput/index': 'src/components/textInput/index.ts', 'components/Textarea/index': 'src/components/textarea/index.ts', 'components/Tooltip/index': 'src/components/tooltip/index.ts', diff --git a/packages/react/src/components/tag/Tag.module.scss b/packages/react/src/components/tag/Tag.module.scss index bcdfa1f1c6..1fbe4a17df 100644 --- a/packages/react/src/components/tag/Tag.module.scss +++ b/packages/react/src/components/tag/Tag.module.scss @@ -4,6 +4,10 @@ composes: hds-tag from 'hds-core/lib/components/tag/tag.css'; } +.label { + composes: hds-tag__label from 'hds-core/lib/components/tag/tag.css'; +} + .deleteButton { @extend %buttonReset; composes: hds-tag__delete-button from 'hds-core/lib/components/tag/tag.css'; diff --git a/packages/react/src/components/tag/Tag.stories.tsx b/packages/react/src/components/tag/Tag.stories.tsx index 120f836add..86cff25299 100644 --- a/packages/react/src/components/tag/Tag.stories.tsx +++ b/packages/react/src/components/tag/Tag.stories.tsx @@ -6,9 +6,34 @@ import { Tag } from './Tag'; export default { component: Tag, title: 'Components/Tag', + parameters: { + controls: { expanded: true }, + }, + args: { + label: 'Americum', + }, }; -export const Example = () => { - const label = 'Americum'; - return action(`Delete: ${label}`)} label={label} />; +export const Default = (args) => ; + +export const Clickable = (args) => ( + <> + action(`Click: ${args.label}`)()} /> + action(`Click: ${args.label}`)()} + /> + +); +Clickable.storyName = 'Clickable tag'; + +export const Deletable = (args) => { + return ( + action(`Delete: ${args.label}`)()} /> + ); }; +Deletable.storyName = 'Deletable tag'; diff --git a/packages/react/src/components/tag/Tag.test.tsx b/packages/react/src/components/tag/Tag.test.tsx index 76fff2d604..0dc2763e17 100644 --- a/packages/react/src/components/tag/Tag.test.tsx +++ b/packages/react/src/components/tag/Tag.test.tsx @@ -5,7 +5,7 @@ import { Tag } from './Tag'; describe(' spec', () => { it('renders the component', () => { - const { asFragment } = render(); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react/src/components/tag/Tag.tsx b/packages/react/src/components/tag/Tag.tsx index fc779070bd..8bfbeafa15 100644 --- a/packages/react/src/components/tag/Tag.tsx +++ b/packages/react/src/components/tag/Tag.tsx @@ -34,9 +34,17 @@ export type TagProps = { */ labelProps?: React.ComponentPropsWithoutRef<'span'>; /** - * Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. + * Callback function fired when the tag is clicked. If set, the tag will be clickable. + */ + onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void; + /** + * Callback function fired when the delete icon is clicked. If set, a delete button will be shown. */ onDelete?: (event: React.MouseEvent) => void; + /** + * Sets the role of the tag when it's clickable. Uses 'link' by default. + */ + role?: 'link' | 'button'; /** * Label that is only visible to screen readers. Can be used to to give screen reader users additional information about the tag. */ @@ -52,29 +60,47 @@ export const Tag = React.forwardRef( id = 'hds-tag', label, labelProps, + onClick, onDelete, + role = 'link', srOnlyLabel, ...rest }: TagProps, ref: React.Ref, - ) => ( -
- - {srOnlyLabel && {srOnlyLabel}} - {label} - - {typeof onDelete === 'function' && ( - - )} -
- ), + ) => { + const clickable = typeof onClick === 'function'; + const deletable = typeof onDelete === 'function'; + + // handle key down + const onKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') onClick(event); + }; + + return ( +
+ + {srOnlyLabel && {srOnlyLabel}} + {label} + + {deletable && ( + + )} +
+ ); + }, ); diff --git a/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap b/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap index b0c97a3de9..16a56cd98d 100644 --- a/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap +++ b/packages/react/src/components/tag/__snapshots__/Tag.test.tsx.snap @@ -7,11 +7,14 @@ exports[` spec renders the component 1`] = ` id="hds-tag" > + > + Foo +
From 142a72e8c5cff3929da1f7237563af2ca5aa5251 Mon Sep 17 00:00:00 2001 From: Niclas Liimatainen Date: Mon, 2 Nov 2020 12:14:27 +0200 Subject: [PATCH 02/10] Add custom theme support --- .../react/src/components/tag/Tag.stories.tsx | 9 +++++++++ packages/react/src/components/tag/Tag.tsx | 17 ++++++++++++++++- packages/react/src/hooks/useTheme.tsx | 5 +++-- packages/react/src/utils/getModulesClassName.ts | 6 ++++++ 4 files changed, 34 insertions(+), 3 deletions(-) create mode 100644 packages/react/src/utils/getModulesClassName.ts diff --git a/packages/react/src/components/tag/Tag.stories.tsx b/packages/react/src/components/tag/Tag.stories.tsx index 86cff25299..3104bb24a3 100644 --- a/packages/react/src/components/tag/Tag.stories.tsx +++ b/packages/react/src/components/tag/Tag.stories.tsx @@ -37,3 +37,12 @@ export const Deletable = (args) => { ); }; Deletable.storyName = 'Deletable tag'; + +export const CustomTheme = (args) => action(`Click: ${args.label}`)()} />; +CustomTheme.args = { + theme: { + '--tag-background': 'var(--color-engel)', + '--tag-color': 'var(--color-black-90)', + '--tag-focus-outline-color': 'var(--color-black-90)', + }, +}; diff --git a/packages/react/src/components/tag/Tag.tsx b/packages/react/src/components/tag/Tag.tsx index 8bfbeafa15..9db0112524 100644 --- a/packages/react/src/components/tag/Tag.tsx +++ b/packages/react/src/components/tag/Tag.tsx @@ -7,6 +7,14 @@ import 'hds-core'; import styles from './Tag.module.scss'; import { IconCross } from '../../icons'; import classNames from '../../utils/classNames'; +import { useTheme } from '../../hooks/useTheme'; +import getModulesClassName from '../../utils/getModulesClassName'; + +export interface TagCustomTheme { + '--tag-background'?: string; + '--tag-color'?: string; + '--tag-focus-outline-color'?: string; +} export type TagProps = { /** @@ -49,6 +57,10 @@ export type TagProps = { * Label that is only visible to screen readers. Can be used to to give screen reader users additional information about the tag. */ srOnlyLabel?: string; + /** + * Custom theme styles + */ + theme: TagCustomTheme; }; export const Tag = React.forwardRef( @@ -64,10 +76,13 @@ export const Tag = React.forwardRef( onDelete, role = 'link', srOnlyLabel, + theme, ...rest }: TagProps, ref: React.Ref, ) => { + // custom theme class that is applied to the root element + const customThemeClass = useTheme(getModulesClassName(styles.tag), theme); const clickable = typeof onClick === 'function'; const deletable = typeof onDelete === 'function'; @@ -79,7 +94,7 @@ export const Tag = React.forwardRef( return (
(selector: string, theme: T, customClass: string): if (typeof window === 'undefined') return; // checks if the given css rule contains the custom class selector - const hasCustomRule = (rule: CSSRule): boolean => rule.cssText.includes(`${selector}.${customClass}`); + const hasCustomRule = (rule: CSSStyleRule): boolean => rule.selectorText?.includes(`${selector}.${customClass}`); try { const { styleSheets } = document; // the index of the parent stylesheet const parentIndex = [...styleSheets].findIndex( - (styleSheet) => [...styleSheet.cssRules].findIndex((rule) => rule.cssText.includes(selector)) >= 0, + (styleSheet) => + [...styleSheet.cssRules].findIndex((rule: CSSStyleRule) => rule.selectorText?.includes(selector)) >= 0, ); // style sheet containing the css rules for the selector const parentStyleSheet = styleSheets[parentIndex]; diff --git a/packages/react/src/utils/getModulesClassName.ts b/packages/react/src/utils/getModulesClassName.ts new file mode 100644 index 0000000000..5db04645fe --- /dev/null +++ b/packages/react/src/utils/getModulesClassName.ts @@ -0,0 +1,6 @@ +/** + * Helper that returns the css/scss module class name without other classes names. + * E.g. using composes in a rule adds the composed class name to the selector. + * @param className + */ +export default (className: string): string => className.substring(0, className.indexOf(' ')); From b61c2e76a1b08729d6a4bfc2645a10061ea6e516 Mon Sep 17 00:00:00 2001 From: Roni Jaakkola Date: Fri, 18 Sep 2020 15:38:12 +0300 Subject: [PATCH 03/10] Added initial documentation page for Tag component --- site/docs/components/tag.mdx | 94 ++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 site/docs/components/tag.mdx diff --git a/site/docs/components/tag.mdx b/site/docs/components/tag.mdx new file mode 100644 index 0000000000..d8b5e3cced --- /dev/null +++ b/site/docs/components/tag.mdx @@ -0,0 +1,94 @@ +--- +name: Tag +menu: Components +route: /components/tag +--- + +import { Playground } from "docz"; +import { StatusLabel, Notification } from "hds-react"; + +import LargeParagraph from "../../src/components/LargeParagraph"; +import Link from "../../src/components/Link"; + +# Tag + +New +Pre-release + + + Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches. + + +## Principles + +- **Tags are meant for presenting object attributes and filters.** If you are preseting status information, use [Status label component](/components/status-label) instead. +- Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows. +- Use status colours consistently. You can find guidelines on when to use each status colour in the [colour guidelines](/design-tokens/colour#ui-colours "UI colours"). +- Tags are often related to some other element on the page (e.g. table row or search field as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation. +- Unlike status labels, tags can be configured to be clicable and deletable. You can use this feature to create links to category lists or removable filters. + +## Accessibility + +- **It is advisable to use colour combinations provided by the implementation.** These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to [colour guidelines](/design-tokens/colour "Colour") to ensure accessibility. +- If you are customising tag colours, make sure they are easily distinguishable from [HDS UI Colours](/design-tokens/colour#ui-colours). These colours are reserved to present UI state and status information in application using HDS. +- Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to WCAG 2.1 Use of Color guideline for more information. + +## Usage and variations + +### Basic tags + + + + + +##### Core: +``` +``` + +##### React: +```tsx + +``` + +### Removable tags + + + + + +##### Core: +``` +``` + +##### React: +```tsx + +``` + +### Tags as filters + + + + + +##### Core: +``` +``` + +##### React: +```tsx + +``` + + +## Demos & API + +### Core + +[Tags in hds-core](/storybook/core/?path=/story/components-status-label--default) + +### React + +[Tags in hds-react](/storybook/react/?path=/story/components-status-label--neutral) + +[Tags API](/storybook/react/?path=/docs/components-status-label--neutral) From 2a89bf81c64d5eefdccd1d2d4d8cfe1f1c87339c Mon Sep 17 00:00:00 2001 From: Roni Jaakkola Date: Fri, 25 Sep 2020 09:35:58 +0300 Subject: [PATCH 04/10] Small fixes to Tag documentation --- site/docs/components/tag.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/site/docs/components/tag.mdx b/site/docs/components/tag.mdx index d8b5e3cced..2b572cefcf 100644 --- a/site/docs/components/tag.mdx +++ b/site/docs/components/tag.mdx @@ -23,14 +23,13 @@ import Link from "../../src/components/Link"; - **Tags are meant for presenting object attributes and filters.** If you are preseting status information, use [Status label component](/components/status-label) instead. - Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows. -- Use status colours consistently. You can find guidelines on when to use each status colour in the [colour guidelines](/design-tokens/colour#ui-colours "UI colours"). - Tags are often related to some other element on the page (e.g. table row or search field as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation. -- Unlike status labels, tags can be configured to be clicable and deletable. You can use this feature to create links to category lists or removable filters. +- Unlike status labels, tags can be configured to be clickable and deletable. You can use this feature to create removable filters/selections and links to category lists or . ## Accessibility - **It is advisable to use colour combinations provided by the implementation.** These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to [colour guidelines](/design-tokens/colour "Colour") to ensure accessibility. -- If you are customising tag colours, make sure they are easily distinguishable from [HDS UI Colours](/design-tokens/colour#ui-colours). These colours are reserved to present UI state and status information in application using HDS. +- If you are customising tag colours, make sure they are easily distinguishable from [HDS UI Colours](/design-tokens/colour#ui-colours). These colours are reserved to present UI state and status information in applications using HDS. - Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to WCAG 2.1 Use of Color guideline for more information. ## Usage and variations From c8b2f76bb854a4ddec8d0f1f702b0dfc0b20935e Mon Sep 17 00:00:00 2001 From: Roni Jaakkola Date: Tue, 3 Nov 2020 13:53:08 +0200 Subject: [PATCH 05/10] Finalised Tag documentation - Added Playground examples - Added a few accessibility tips - Added code examples --- site/docs/components/tag.mdx | 102 ++++++++++++++++++++++++++++------- 1 file changed, 84 insertions(+), 18 deletions(-) diff --git a/site/docs/components/tag.mdx b/site/docs/components/tag.mdx index 2b572cefcf..41a3468a9b 100644 --- a/site/docs/components/tag.mdx +++ b/site/docs/components/tag.mdx @@ -5,7 +5,7 @@ route: /components/tag --- import { Playground } from "docz"; -import { StatusLabel, Notification } from "hds-react"; +import { Tag, StatusLabel } from "hds-react"; import LargeParagraph from "../../src/components/LargeParagraph"; import Link from "../../src/components/Link"; @@ -13,7 +13,8 @@ import Link from "../../src/components/Link"; # Tag New -Pre-release +Pre-release +Accessible Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches. @@ -21,13 +22,15 @@ import Link from "../../src/components/Link"; ## Principles -- **Tags are meant for presenting object attributes and filters.** If you are preseting status information, use [Status label component](/components/status-label) instead. +- **Tags are meant for presenting object attributes and filters.** If you are presenting status information, use [Status label component](/components/status-label) instead. - Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows. - Tags are often related to some other element on the page (e.g. table row or search field as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation. -- Unlike status labels, tags can be configured to be clickable and deletable. You can use this feature to create removable filters/selections and links to category lists or . +- Unlike status labels, **tags can be configured to be clickable and deletable**. You can use this feature to create removable filters/selections or links to category filtered pages. ## Accessibility +- If the Tag is clickable, you must assign it with `role="link"`. If Tag click triggers an action on the same page (e.g. filters a list), use `role="button"` instead. + - For interactable Tags you must set a descriptive `aria-label` for assistive technologies so the user understands what happens if the Tag is clicked. For example `aria-label="Move to category: "`. - **It is advisable to use colour combinations provided by the implementation.** These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to [colour guidelines](/design-tokens/colour "Colour") to ensure accessibility. - If you are customising tag colours, make sure they are easily distinguishable from [HDS UI Colours](/design-tokens/colour#ui-colours). These colours are reserved to present UI state and status information in applications using HDS. - Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to WCAG 2.1 Use of Color guideline for more information. @@ -36,47 +39,110 @@ import Link from "../../src/components/Link"; ### Basic tags - +By default, Tags are non-interactable elements. They only include a label and do not have any specific styling. + + + ##### Core: -``` +```html +
+ Label +
+ +
+ Label +
``` ##### React: ```tsx - + + ``` -### Removable tags +### Clickable tags - +Tags can be configured to be interactable by giving them an `onClick` function prop. This way Tags can act as links or actions. Since these Tags are fully interactable they can be also focused and receive default HDS focus indicator styling. + +Remember to add descriptive `aria-label` to clearly indicate the link target or action to assistive technologies. + + {}} aria-label="Move to category: News" /> + {}} aria-label="Move to category: Announcements" style={{ marginLeft: 'var(--spacing-s)' }} /> ##### Core: -``` +```html +
+ News +
+ +
+ Announcements +
``` ##### React: ```tsx - + {}} + aria-label="Move to category: News" +/> + + {}} + aria-label="Move to category: Announcements" +/> ``` -### Tags as filters +### Deletable tags - +Tags can be configured to be deletable by giving them an `onDelete` function prop. This enables a delete icon inside the Tag. Deleting can be useful in situations where Tags are used as filters (e.g. for search). + +Remember to add descriptive `aria-label` to the delete button to clearly indicate what the user is deleting when triggering the action. + + {}} deleteButtonAriaLabel="Delete filter: News" /> + {}} deleteButtonAriaLabel="Delete filter: Announcements" style={{ marginLeft: 'var(--spacing-s)' }} /> ##### Core: -``` +```html +
+ News + +
+ +
+ Announcements + +
``` ##### React: ```tsx - + {}} + deleteButtonAriaLabel="Delete filter: News" +/> + + {}} + deleteButtonAriaLabel="Delete filter: Announcements" +/> ``` @@ -84,10 +150,10 @@ import Link from "../../src/components/Link"; ### Core -[Tags in hds-core](/storybook/core/?path=/story/components-status-label--default) +[Tags in hds-core](/storybook/core/?path=/story/components-tag--default) ### React -[Tags in hds-react](/storybook/react/?path=/story/components-status-label--neutral) +[Tags in hds-react](/storybook/react/?path=/story/components-tag--default) -[Tags API](/storybook/react/?path=/docs/components-status-label--neutral) +[Tags API](/storybook/react/?path=/docs/components-tag--default) From 6b25a7d36439de00e5530993294d2f2a17d7ed9c Mon Sep 17 00:00:00 2001 From: Roni Jaakkola Date: Tue, 3 Nov 2020 14:00:54 +0200 Subject: [PATCH 06/10] Added Tag component to the Component overview page --- site/docs/components/component_overview.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/docs/components/component_overview.mdx b/site/docs/components/component_overview.mdx index 46ca3e3be4..2c297b6ee5 100644 --- a/site/docs/components/component_overview.mdx +++ b/site/docs/components/component_overview.mdx @@ -67,6 +67,7 @@ Dropdown | Stable | [](/storybook/core/?path=/story/components-radio-button--default) | [](/storybook/react/?path=/story/components-radiobutton--default) [Select](/components/dropdown) | Stable | | [](/storybook/react/?path=/story/components-dropdowns-select--default) [Status label](/components/status-label) | Stable | [](/storybook/core/?path=/story/components-status-label--default) | [](/storybook/react/?path=/story/components-status-label) +[Tag](/components/tag) | Pre-release | [](/storybook/core/?path=/story/components-tag--default) | [](/storybook/react/?path=/story/components-tag--default) [Text input](/components/text-field) | Stable | [](/storybook/core/?path=/story/components-textinput--default) | [](/storybook/react/?path=/story/components-textinput--default) [Text area](/components/text-field#text-area) | Stable | [](/storybook/core/?path=/story/components-text-input--default) | [](/storybook/react/?path=/story/components-textarea--default) [Tooltip](/components/tooltip) | Pre-release | | [](/storybook/react/?path=/story/components-tooltip--default) From 4e977d4d0500bd299ee629bc8b239cb5cdd7c75a Mon Sep 17 00:00:00 2001 From: Aleksi Kaistinen Date: Tue, 3 Nov 2020 14:03:35 +0200 Subject: [PATCH 07/10] Use children as a label for Tag --- .../react/src/components/tag/Tag.stories.tsx | 26 ++++++++++++++----- .../react/src/components/tag/Tag.test.tsx | 2 +- packages/react/src/components/tag/Tag.tsx | 14 +++++----- .../internal/selectedItems/SelectedItems.tsx | 5 ++-- 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/react/src/components/tag/Tag.stories.tsx b/packages/react/src/components/tag/Tag.stories.tsx index 3104bb24a3..1ee3c4e824 100644 --- a/packages/react/src/components/tag/Tag.stories.tsx +++ b/packages/react/src/components/tag/Tag.stories.tsx @@ -10,7 +10,7 @@ export default { controls: { expanded: true }, }, args: { - label: 'Americum', + children: 'Americum', }, }; @@ -18,27 +18,41 @@ export const Default = (args) => ; export const Clickable = (args) => ( <> - action(`Click: ${args.label}`)()} /> + action(`Click: ${args.children}`)()}> + {args.children} + action(`Click: ${args.label}`)()} - /> + onClick={() => action(`Click: ${args.children}`)()} + > + {args.children} + ); Clickable.storyName = 'Clickable tag'; export const Deletable = (args) => { return ( - action(`Delete: ${args.label}`)()} /> + action(`Delete: ${args.children}`)()} + > + {args.children} + ); }; Deletable.storyName = 'Deletable tag'; -export const CustomTheme = (args) => action(`Click: ${args.label}`)()} />; +export const CustomTheme = (args) => ( + action(`Click: ${args.children}`)()}> + {args.children} + +); CustomTheme.args = { theme: { '--tag-background': 'var(--color-engel)', diff --git a/packages/react/src/components/tag/Tag.test.tsx b/packages/react/src/components/tag/Tag.test.tsx index 0dc2763e17..a5f3d40c6e 100644 --- a/packages/react/src/components/tag/Tag.test.tsx +++ b/packages/react/src/components/tag/Tag.test.tsx @@ -5,7 +5,7 @@ import { Tag } from './Tag'; describe(' spec', () => { it('renders the component', () => { - const { asFragment } = render(); + const { asFragment } = render(Foo); expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/react/src/components/tag/Tag.tsx b/packages/react/src/components/tag/Tag.tsx index 9db0112524..61e8639037 100644 --- a/packages/react/src/components/tag/Tag.tsx +++ b/packages/react/src/components/tag/Tag.tsx @@ -17,6 +17,10 @@ export interface TagCustomTheme { } export type TagProps = { + /** + * The label for the tag + */ + children: React.ReactNode; /** * Additional class names to apply to the tag */ @@ -33,10 +37,6 @@ export type TagProps = { * Used to generate the first part of the id on the elements. */ id?: string; - /** - * The label for the tag - */ - label: React.ReactNode; /** * Props that will be passed to the label `` element. */ @@ -60,17 +60,17 @@ export type TagProps = { /** * Custom theme styles */ - theme: TagCustomTheme; + theme?: TagCustomTheme; }; export const Tag = React.forwardRef( ( { + children, className, deleteButtonAriaLabel, deleteButtonProps, id = 'hds-tag', - label, labelProps, onClick, onDelete, @@ -101,7 +101,7 @@ export const Tag = React.forwardRef( > {srOnlyLabel && {srOnlyLabel}} - {label} + {children} {deletable && (