From ee91a29ef8ff54824a4bdc240ffc6786e0a8e280 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 27 Feb 2020 15:26:18 -0600 Subject: [PATCH 1/4] feat(Tag): support click handler for filter tag close icon --- packages/react/src/components/Tag/Tag-story.js | 6 +++++- packages/react/src/components/Tag/Tag.js | 12 +++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js index 1b9ddcf8971a..7a3e2c261fb2 100644 --- a/packages/react/src/components/Tag/Tag-story.js +++ b/packages/react/src/components/Tag/Tag-story.js @@ -29,7 +29,11 @@ const props = { title: 'Clear Filter', }), filter() { - return { ...this.regular(), onClick: action('onClick') }; + return { + ...this.regular(), + onClick: action('onClick'), + onClose: action('onClose'), + }; }, }; diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js index 2b484c81b6b8..02d26ccbe09c 100644 --- a/packages/react/src/components/Tag/Tag.js +++ b/packages/react/src/components/Tag/Tag.js @@ -33,6 +33,7 @@ const Tag = ({ filter, title, disabled, + onClose, ...other }) => { const tagClass = `${prefix}--tag--${type}`; @@ -40,6 +41,10 @@ const Tag = ({ [`${prefix}--tag--disabled`]: disabled, [`${prefix}--tag--filter`]: filter, }); + const handleClose = event => { + event.stopPropagation(); + onClose(event); + }; return filter ? ( ) : ( @@ -92,6 +97,11 @@ Tag.propTypes = { * Text to show on clear filters */ title: PropTypes.string, + + /** + * Click handler for filter tag close button. + */ + onClose: PropTypes.func, }; export const types = Object.keys(TYPES); From 3dd0a7946200ab7831283f8fe04413eb22ef49b3 Mon Sep 17 00:00:00 2001 From: emyarod Date: Tue, 3 Mar 2020 12:14:34 -0600 Subject: [PATCH 2/4] refactor(tag): move interactivity styles to close button --- packages/components/src/components/tag/_tag.scss | 16 ++++++++++------ packages/components/src/components/tag/tag.hbs | 8 +++++--- packages/react/src/components/Tag/Tag.js | 8 +++++--- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 218e6928f20d..0c44bdd2aa61 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -98,8 +98,6 @@ // tags used for filtering .#{$prefix}--tag--filter { @include tag-theme($inverse-02, $inverse-01); - - cursor: pointer; padding-right: rem(2px); &:focus, @@ -108,28 +106,34 @@ } } - .#{$prefix}--tag--filter > svg { + .#{$prefix}--tag__close-icon { flex-shrink: 0; width: rem(20px); height: rem(20px); margin: 0 0 0 rem(4px); padding: rem(2px); border: 0; - fill: $inverse-01; background-color: transparent; border-radius: 50%; + cursor: pointer; &:hover { background-color: $inverse-hover-ui; } } - .#{$prefix}--tag--filter:focus > svg { + .#{$prefix}--tag__close-icon svg { + fill: $inverse-01; + } + + .#{$prefix}--tag__close-icon:focus { + outline: none; box-shadow: inset 0 0 0 2px $inverse-focus-ui; border-radius: 50%; } - .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg:hover { + .#{$prefix}--tag--filter.#{$prefix}--tag--disabled + .#{$prefix}--tag__close-icon:hover { background-color: transparent; } diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs index 7b413dc22b00..75336ce92c62 100644 --- a/packages/components/src/components/tag/tag.hbs +++ b/packages/components/src/components/tag/tag.hbs @@ -15,9 +15,11 @@
{{#if filter}} - + +
{{/if}} diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js index 02d26ccbe09c..8fa584c08cab 100644 --- a/packages/react/src/components/Tag/Tag.js +++ b/packages/react/src/components/Tag/Tag.js @@ -46,7 +46,7 @@ const Tag = ({ onClose(event); }; return filter ? ( - + + ) : ( {children !== null && children !== undefined ? children : TYPES[type]} From 2d7558eb6170cce51b5dca6a7a9b33d0688c2297 Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 6 Mar 2020 08:48:55 -0600 Subject: [PATCH 3/4] fix(Tag): add aria-labelledby --- packages/react/src/components/Tag/Tag.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js index 8fa584c08cab..60c54f0daf5f 100644 --- a/packages/react/src/components/Tag/Tag.js +++ b/packages/react/src/components/Tag/Tag.js @@ -10,9 +10,10 @@ import React from 'react'; import classNames from 'classnames'; import { settings } from 'carbon-components'; import { Close16 } from '@carbon/icons-react'; +import setupGetInstanceId from '../../tools/setupGetInstanceId'; const { prefix } = settings; - +const getInstanceId = setupGetInstanceId(); const TYPES = { red: 'Red', magenta: 'Magenta', @@ -29,6 +30,7 @@ const TYPES = { const Tag = ({ children, className, + id, type, filter, title, @@ -36,6 +38,7 @@ const Tag = ({ onClose, ...other }) => { + const tagId = id || `tag-${getInstanceId()}`; const tagClass = `${prefix}--tag--${type}`; const tagClasses = classNames(`${prefix}--tag`, tagClass, className, { [`${prefix}--tag--disabled`]: disabled, @@ -53,12 +56,16 @@ const Tag = ({ ? `${title} ${children}` : `Clear filter ${children}` } + id={tagId} disabled={disabled} {...other}> {children !== null && children !== undefined ? children : TYPES[type]} - From a3eb65df91d0077c2f24217293ea0516cbac037a Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 6 Mar 2020 08:49:02 -0600 Subject: [PATCH 4/4] chore: update snapshot --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 37a8d2b200cf..8aae0ccd7aee 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4724,6 +4724,9 @@ Map { "filter": Object { "type": "bool", }, + "onClose": Object { + "type": "func", + }, "title": Object { "type": "string", },