Issue 860 Tag Hooks

src/Tag/index.jsx

@@ -13,100 +13,98 @@ import PropTypes            from 'prop-types';
 import { IconButton, Text } from '..';
 
 import { generateId }       from '../utils';
-import ThemeContext         from '../Theming/ThemeContext';
-import { createCssMap }     from '../Theming';
+import { useTheme }         from '../Theming';
 
+const componentName = 'Tag';
 
-export default class Tag extends React.Component
+const Tag = props =>
 {
-    static contextType = ThemeContext;
+    const {
+        children,
+        id = generateId( 'Tag' ),
+        isDisabled,
+        isReadOnly,
+        label,
+        onClick,
+    } = props;
 
-    static propTypes =
-    {
-        /**
-         *  Tag label (JSX node; overrides label prop)
-         */
-        children   : PropTypes.node,
-        /**
-         *  CSS class name
-         */
-        className  : PropTypes.string,
-        /**
-         *  CSS class map
-         */
-        cssMap     : PropTypes.objectOf( PropTypes.string ),
-        /**
-         *  Component id
-         */
-        id         : PropTypes.string,
-        /**
-         *  Display as disabled
-         */
-        isDisabled : PropTypes.bool,
-        /**
-         *  Display as read-only
-         */
-        isReadOnly : PropTypes.bool,
-        /**
-         *  Tag label (string)
-         */
-        label      : PropTypes.string,
-        /**
-         *   onClick callback function for delete icon
-         */
-        onClick    : PropTypes.func,
-    };
+    const cssMap = useTheme( componentName, props );
+
+    let labelText = children || label;
 
-    static defaultProps =
+    if ( typeof labelText === 'string' )
     {
-        children   : undefined,
-        className  : undefined,
-        cssMap     : undefined,
-        id         : undefined,
-        isDisabled : false,
-        isReadOnly : false,
-        label      : undefined,
-        onClick    : undefined,
-    };
+        labelText = (
+            <Text className = { cssMap.label } overflowIsHidden>
+                { labelText }
+            </Text>
+        );
+    }
 
-    static displayName = 'Tag';
+    return (
+        <div className = { cssMap.main }>
+            { labelText }
+            <IconButton
+                className  = { cssMap.delete }
+                iconSize   = "S"
+                iconType   = "x"
+                isDisabled = { isDisabled }
+                isReadOnly = { isReadOnly }
+                onClick    = { () =>
+                    onClick && onClick( { id } )
+                } />
+        </div>
+    );
+};
 
-    render()
-    {
-        const {
-            children,
-            cssMap = createCssMap( this.context.Tag, this.props ),
-            id = generateId( 'Tag' ),
-            isDisabled,
-            isReadOnly,
-            label,
-            onClick,
-        } = this.props;
+Tag.propTypes =
+{
+    /**
+     *  Tag label (JSX node; overrides label prop)
+     */
+    children   : PropTypes.node,
+    /**
+     *  CSS class name
+     */
+    className  : PropTypes.string,
+    /**
+     *  CSS class map
+     */
+    cssMap     : PropTypes.objectOf( PropTypes.string ),
+    /**
+     *  Component id
+     */
+    id         : PropTypes.string,
+    /**
+     *  Display as disabled
+     */
+    isDisabled : PropTypes.bool,
+    /**
+     *  Display as read-only
+     */
+    isReadOnly : PropTypes.bool,
+    /**
+     *  Tag label (string)
+     */
+    label      : PropTypes.string,
+    /**
+     *   onClick callback function for delete icon
+     */
+    onClick    : PropTypes.func,
+};
 
-        let labelText = children || label;
+Tag.defaultProps =
+{
+    children   : undefined,
+    className  : undefined,
+    cssMap     : undefined,
+    id         : undefined,
+    isDisabled : false,
+    isReadOnly : false,
+    label      : undefined,
+    onClick    : undefined,
+};
 
-        if ( typeof labelText === 'string' )
-        {
-            labelText = (
-                <Text className = { cssMap.label } overflowIsHidden>
-                    { labelText }
-                </Text>
-            );
-        }
+Tag.displayName = componentName;
 
-        return (
-            <div className = { cssMap.main }>
-                { labelText }
-                <IconButton
-                    className  = { cssMap.delete }
-                    iconSize   = "S"
-                    iconType   = "x"
-                    isDisabled = { isDisabled }
-                    isReadOnly = { isReadOnly }
-                    onClick    = { () =>
-                        onClick && onClick( { id } )
-                    } />
-            </div>
-        );
-    }
-}
+export default Tag;

src/Tag/tests.jsx

@@ -24,9 +24,9 @@ describe( 'Tag', () =>
         wrapper = shallow( <Tag /> );
     } );
 
-    test( 'should have “main” as default className', () =>
+    test( 'should have “default” as default className', () =>
     {
-        expect( wrapper.prop( 'className' ) ).toEqual( 'main' );
+        expect( wrapper.prop( 'className' ) ).toEqual( 'default' );
     } );
 
     test( 'should have an IconButton as a child', () =>