diff --git a/.changeset/chilled-files-rest.md b/.changeset/chilled-files-rest.md new file mode 100644 index 00000000000..20342848e77 --- /dev/null +++ b/.changeset/chilled-files-rest.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': minor +--- + +feat(TMC-28838/tags): add beta styled tag to the Tag component diff --git a/packages/components/src/TabBar/Tabs.stories.js b/packages/components/src/TabBar/Tabs.stories.js index a12ddc7b699..98a4cc2eb45 100644 --- a/packages/components/src/TabBar/Tabs.stories.js +++ b/packages/components/src/TabBar/Tabs.stories.js @@ -87,6 +87,15 @@ const tabProps = { 'data-feature': 'action.9', disabled: true, }, + { + key: '10', + label: 'Tab10', + badge: { + label: 'BETA', + bsStyle: 'beta', + }, + 'data-feature': 'action.10', + }, ], onSelect: action('onSelect'), selectedKey: '2', diff --git a/packages/components/src/Tag/Tag.component.js b/packages/components/src/Tag/Tag.component.js index 33f62fb20a5..65b38709456 100644 --- a/packages/components/src/Tag/Tag.component.js +++ b/packages/components/src/Tag/Tag.component.js @@ -1,10 +1,12 @@ import PropTypes from 'prop-types'; + import { Tag as CoralTag, + TagBeta as CoralTagBeta, + TagDestructive as CoralTagDestructive, TagInformation as CoralTagInformation, TagSuccess as CoralTagSuccess, TagWarning as CoralTagWarning, - TagDestructive as CoralTagDestructive, } from '@talend/design-system'; /** @@ -25,6 +27,9 @@ const Tag = ({ bsStyle, ...rest }) => { case 'danger': StyledTag = CoralTagDestructive; break; + case 'beta': + StyledTag = CoralTagBeta; + break; default: break; }