diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index d43132a5e5ec..b05cc254ba21 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -5989,6 +5989,7 @@ $spacing-02: $carbon--spacing-02; - **Used by**: - [carbon--theme [mixin]](#carbon--theme-mixin) - [modal [mixin]](#modal-mixin) + - [tags [mixin]](#tags-mixin) ### ✅spacing-03 [variable] @@ -27532,6 +27533,22 @@ Tag styles } } + .#{$prefix}--tag__custom-icon { + flex-shrink: 0; + width: rem(16px); + height: rem(16px); + margin-right: $spacing-02; + padding: 0; + color: currentColor; + background-color: transparent; + border: 0; + outline: none; + + svg { + fill: currentColor; + } + } + .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon { cursor: not-allowed; } @@ -27586,6 +27603,7 @@ Tag styles - [inverse-hover-ui [variable]](#inverse-hover-ui-variable) - [disabled-01 [variable]](#disabled-01-variable) - [disabled-02 [variable]](#disabled-02-variable) + - [spacing-02 [variable]](#spacing-02-variable) - [focus [variable]](#focus-variable) - [inverse-focus-ui [variable]](#inverse-focus-ui-variable) - [ui-03 [variable]](#ui-03-variable) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 3729795a8f3a..08e2ceff7eef 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -172,6 +172,22 @@ } } + .#{$prefix}--tag__custom-icon { + flex-shrink: 0; + width: rem(16px); + height: rem(16px); + margin-right: $spacing-02; + padding: 0; + color: currentColor; + background-color: transparent; + border: 0; + outline: none; + + svg { + fill: currentColor; + } + } + .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon { cursor: not-allowed; } diff --git a/packages/components/src/components/tag/_tokens.scss b/packages/components/src/components/tag/_tokens.scss index c24e9fd62819..2400ae74033f 100644 --- a/packages/components/src/components/tag/_tokens.scss +++ b/packages/components/src/components/tag/_tokens.scss @@ -38,15 +38,15 @@ $tag-colors: ( ), ), 'tag-color-red': ( - fallback: $carbon__red-70, + fallback: $carbon__red-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__red-70, + value: $carbon__red-80, ), ( theme: $carbon--theme--g10, - value: $carbon__red-70, + value: $carbon__red-80, ), ( theme: $carbon--theme--g90, @@ -58,7 +58,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__red-70, + value: $carbon__red-80, ), ), ), @@ -115,15 +115,15 @@ $tag-colors: ( ), ), 'tag-color-magenta': ( - fallback: $carbon__magenta-70, + fallback: $carbon__magenta-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__magenta-70, + value: $carbon__magenta-80, ), ( theme: $carbon--theme--g10, - value: $carbon__magenta-70, + value: $carbon__magenta-80, ), ( theme: $carbon--theme--g90, @@ -135,7 +135,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__magenta-70, + value: $carbon__magenta-80, ), ), ), @@ -192,15 +192,15 @@ $tag-colors: ( ), ), 'tag-color-purple': ( - fallback: $carbon__purple-70, + fallback: $carbon__purple-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__purple-70, + value: $carbon__purple-80, ), ( theme: $carbon--theme--g10, - value: $carbon__purple-70, + value: $carbon__purple-80, ), ( theme: $carbon--theme--g90, @@ -212,7 +212,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__purple-70, + value: $carbon__purple-80, ), ), ), @@ -269,15 +269,15 @@ $tag-colors: ( ), ), 'tag-color-blue': ( - fallback: $carbon__blue-70, + fallback: $carbon__blue-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__blue-70, + value: $carbon__blue-80, ), ( theme: $carbon--theme--g10, - value: $carbon__blue-70, + value: $carbon__blue-80, ), ( theme: $carbon--theme--g90, @@ -289,7 +289,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__blue-70, + value: $carbon__blue-80, ), ), ), @@ -346,15 +346,15 @@ $tag-colors: ( ), ), 'tag-color-cyan': ( - fallback: $carbon__cyan-70, + fallback: $carbon__cyan-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__cyan-70, + value: $carbon__cyan-80, ), ( theme: $carbon--theme--g10, - value: $carbon__cyan-70, + value: $carbon__cyan-80, ), ( theme: $carbon--theme--g90, @@ -366,7 +366,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__cyan-70, + value: $carbon__cyan-80, ), ), ), @@ -423,15 +423,15 @@ $tag-colors: ( ), ), 'tag-color-teal': ( - fallback: $carbon__teal-70, + fallback: $carbon__teal-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__teal-70, + value: $carbon__teal-80, ), ( theme: $carbon--theme--g10, - value: $carbon__teal-70, + value: $carbon__teal-80, ), ( theme: $carbon--theme--g90, @@ -443,7 +443,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__teal-70, + value: $carbon__teal-80, ), ), ), @@ -500,15 +500,15 @@ $tag-colors: ( ), ), 'tag-color-green': ( - fallback: $carbon__green-70, + fallback: $carbon__green-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__green-70, + value: $carbon__green-80, ), ( theme: $carbon--theme--g10, - value: $carbon__green-70, + value: $carbon__green-80, ), ( theme: $carbon--theme--g90, @@ -520,7 +520,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__green-70, + value: $carbon__green-80, ), ), ), @@ -577,15 +577,15 @@ $tag-colors: ( ), ), 'tag-color-gray': ( - fallback: $carbon__gray-70, + fallback: $carbon__gray-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__gray-70, + value: $carbon__gray-80, ), ( theme: $carbon--theme--g10, - value: $carbon__gray-70, + value: $carbon__gray-80, ), ( theme: $carbon--theme--g90, @@ -597,7 +597,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__gray-70, + value: $carbon__gray-80, ), ), ), @@ -654,15 +654,15 @@ $tag-colors: ( ), ), 'tag-color-cool-gray': ( - fallback: $carbon__cool-gray-70, + fallback: $carbon__cool-gray-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__cool-gray-70, + value: $carbon__cool-gray-80, ), ( theme: $carbon--theme--g10, - value: $carbon__cool-gray-70, + value: $carbon__cool-gray-80, ), ( theme: $carbon--theme--g90, @@ -674,7 +674,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__cool-gray-70, + value: $carbon__cool-gray-80, ), ), ), @@ -731,15 +731,15 @@ $tag-colors: ( ), ), 'tag-color-warm-gray': ( - fallback: $carbon__warm-gray-70, + fallback: $carbon__warm-gray-80, values: ( ( theme: $carbon--theme--white, - value: $carbon__warm-gray-70, + value: $carbon__warm-gray-80, ), ( theme: $carbon--theme--g10, - value: $carbon__warm-gray-70, + value: $carbon__warm-gray-80, ), ( theme: $carbon--theme--g90, @@ -751,7 +751,7 @@ $tag-colors: ( ), ( theme: $carbon--theme--v9, - value: $carbon__warm-gray-70, + value: $carbon__warm-gray-80, ), ), ), diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index bd2dbf2bce1c..872455c87fe6 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5168,6 +5168,19 @@ Map { "onClose": Object { "type": "func", }, + "renderIcon": Object { + "args": Array [ + Array [ + Object { + "type": "func", + }, + Object { + "type": "object", + }, + ], + ], + "type": "oneOfType", + }, "title": Object { "type": "string", }, diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js index a75d8add29fa..3bcbbb7e15e8 100644 --- a/packages/react/src/components/Tag/Tag-story.js +++ b/packages/react/src/components/Tag/Tag-story.js @@ -7,11 +7,24 @@ import React from 'react'; import { withKnobs, select, text, boolean } from '@storybook/addon-knobs'; +import { Carbon16, Compass16, Tag16 } from '@carbon/icons-react'; import Tag, { types as typesList } from '../Tag'; import TagSkeleton from '../Tag/Tag.Skeleton'; import { action } from '@storybook/addon-actions/dist/preview'; import mdx from './Tag.mdx'; +const icons = { + 'Carbon (Carbon16 from `@carbon/icons-react`)': 'Carbon16', + 'Compass (Compass16 from `@carbon/icons-react`)': 'Compass16', + 'Tag (Tag16 from `@carbon/icons-react`)': 'Tag16', +}; + +const iconMap = { + Carbon16, + Compass16, + Tag16, +}; + const props = { regular: () => ({ type: select( @@ -36,6 +49,12 @@ const props = { onClose: action('onClose'), }; }, + icon() { + return { + ...this.regular(), + renderIcon: iconMap[select('Icon (icon)', icons, 'Tag16')], + }; + }, }; export default { @@ -85,6 +104,22 @@ Filter.parameters = { }, }; +export const CustomIcon = () => ( + + {text('Content (children)', 'This is a tag')} + +); + +CustomIcon.parameters = { + info: { + text: ` + Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them. + The example below shows how the Tag component can be used. Each type has a default message describing the type, + but a custom message can also be applied. + `, + }, +}; + export const Skeleton = () => (
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js index 85a38d707ff8..8c218dbccd6e 100644 --- a/packages/react/src/components/Tag/Tag-test.js +++ b/packages/react/src/components/Tag/Tag-test.js @@ -8,6 +8,7 @@ import React from 'react'; import Tag from '../Tag'; import TagSkeleton from '../Tag/Tag.Skeleton'; +import { Add16 } from '@carbon/icons-react'; import { shallow } from 'enzyme'; import { settings } from 'carbon-components'; import { render, cleanup } from '@carbon/test-utils/react'; @@ -64,6 +65,15 @@ describe('Tag', () => { expect(tag.text()).toEqual('New Version!'); }); + it('should allow for a custom icon', () => { + const tag = shallow( + + This is a tag + + ); + expect(tag.childAt(0).hasClass('bx--tag__custom-icon')); + }); + it('should support extra class names', () => { const tag = shallow(); expect(tag.hasClass('extra-class')).toEqual(true); diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js index 9d09c25bf5c4..8f6c6af069d7 100644 --- a/packages/react/src/components/Tag/Tag.js +++ b/packages/react/src/components/Tag/Tag.js @@ -34,6 +34,7 @@ const Tag = ({ id, type, filter, + renderIcon: CustomIconElement, title, disabled, onClose, @@ -51,6 +52,7 @@ const Tag = ({ onClose(event); } }; + return filter ? (
) : ( - - {children !== null && children !== undefined ? children : TYPES[type]} - +
+ {CustomIconElement ? ( +
+ +
+ ) : ( + '' + )} + + {children !== null && children !== undefined ? children : TYPES[type]} + +
); }; @@ -117,6 +125,12 @@ Tag.propTypes = { */ onClose: PropTypes.func, + /** + * Optional prop to render a custom icon. + * Can be a React component class + */ + renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + /** * Text to show on clear filters */