fix(tag): add filter tag keyboard navigation (#2654)

* docs(tag): add filter tag and disabled knob

* fix(tag): add filter tag classes

packages/react/src/components/Tag/Tag-story.js

@@ -10,24 +10,51 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
 import Tag, { types as typesList } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
+import { action } from '@storybook/addon-actions/dist/preview';
 
-const types = typesList.reduce(
-  (acc, type) => ({
-    ...acc,
-    [`${type} (${type})`]: type,
+const props = {
+  regular: () => ({
+    type: select(
+      'Tag type (type)',
+      typesList.reduce(
+        (acc, type) => ({
+          ...acc,
+          [`${type} (${type})`]: type,
+        }),
+        {}
+      ),
+      'red'
+    ),
+    disabled: boolean('Disabled (disabled)', false),
   }),
-  {}
-);
+  filter() {
+    return { ...this.regular(), onClick: action('onClick') };
+  },
+};
 
 storiesOf('Tag', module)
   .addDecorator(withKnobs)
   .add(
     'Default',
     () => (
-      <Tag
-        className="some-class"
-        type={select('Tag type (type)', types, 'red')}
-        disabled={boolean('Disabled (disabled)', false)}>
+      <Tag className="some-class" {...props.regular()}>
+        {text('Content (children)', 'This is not a tag')}
+      </Tag>
+    ),
+    {
+      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.
+          `,
+      },
+    }
+  )
+  .add(
+    'Filter',
+    () => (
+      <Tag className="some-class" {...props.filter()} filter>
         {text('Content (children)', 'This is not a tag')}
       </Tag>
     ),

packages/react/src/components/Tag/Tag.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import Close16 from '@carbon/icons-react/lib/close/16';
 
 const { prefix } = settings;
 
@@ -25,10 +26,22 @@ const TYPES = {
   'warm-gray': 'Warm-Gray',
 };
 
-const Tag = ({ children, className, type, ...other }) => {
+const Tag = ({ children, className, type, filter, disabled, ...other }) => {
   const tagClass = `${prefix}--tag--${type}`;
-  const tagClasses = classNames(`${prefix}--tag`, tagClass, className);
-  return (
+  const tagClasses = classNames(`${prefix}--tag`, tagClass, className, {
+    [`${prefix}--tag--disabled`]: disabled,
+    [`${prefix}--tag--filter`]: filter,
+  });
+  return filter ? (
+    <span
+      className={tagClasses}
+      title="Clear filter"
+      tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+      {...other}>
+      {children !== null && children !== undefined ? children : TYPES[type]}
+      <Close16 aria-label="Clear filter" />
+    </span>
+  ) : (
     <span className={tagClasses} {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
     </span>
@@ -50,6 +63,16 @@ Tag.propTypes = {
    * Specify the type of the <Tag>
    */
   type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
+
+  /**
+   * Specify if the <Tag> is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Determine if <Tag> is a filter/chip
+   */
+  filter: PropTypes.bool,
 };
 
 export const types = Object.keys(TYPES);