fix(core-components-tag): fix tag background (#151)

* fix(core-components-tag): fix tag background * feat(core-components-tag): add forward ref
core-ds · Jun 11, 2020 · 03b465b · 03b465b
1 parent 33e11eb
commit 03b465b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git a/packages/tag/src/Component.tsx b/packages/tag/src/Component.tsx
@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes, forwardRef } from 'react';
 import cn from 'classnames';
 
 import styles from './index.module.css';
@@ -43,34 +43,39 @@ export type TagProps = Omit<NativeProps, 'onClick'> & {
     ) => void;
 };
 
-export const Tag = ({
-    rightAddons,
-    leftAddons,
-    children,
-    size = 's',
-    checked,
-    className,
-    dataTestId,
-    name,
-    onClick,
-    ...restProps
-}: TagProps) => {
-    const tagProps = {
-        className: cn(styles.component, styles[size], { [styles.checked]: checked }, className),
-        'data-test-id': dataTestId,
-    };
+export const Tag = forwardRef<HTMLButtonElement, TagProps>(
+    (
+        {
+            rightAddons,
+            leftAddons,
+            children,
+            size = 's',
+            checked,
+            className,
+            dataTestId,
+            name,
+            onClick,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const tagProps = {
+            className: cn(styles.component, styles[size], { [styles.checked]: checked }, className),
+            'data-test-id': dataTestId,
+        };
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        if (onClick) {
-            onClick(event, { name, checked: !checked });
-        }
-    };
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            if (onClick) {
+                onClick(event, { name, checked: !checked });
+            }
+        };
 
-    return (
-        <button type='button' onClick={handleClick} {...tagProps} {...restProps}>
-            {leftAddons ? <span className={cn(styles.addons)}>{leftAddons}</span> : null}
-            <span>{children}</span>
-            {rightAddons ? <span className={cn(styles.addons)}>{rightAddons}</span> : null}
-        </button>
-    );
-};
+        return (
+            <button ref={ref} type='button' onClick={handleClick} {...tagProps} {...restProps}>
+                {leftAddons ? <span className={cn(styles.addons)}>{leftAddons}</span> : null}
+                <span>{children}</span>
+                {rightAddons ? <span className={cn(styles.addons)}>{rightAddons}</span> : null}
+            </button>
+        );
+    },
+);
diff --git a/packages/tag/src/index.module.css b/packages/tag/src/index.module.css
@@ -10,6 +10,7 @@
     --tag-border-color-disabled: var(--color-dark-indigo-30-flat);
 
     /* background-color */
+    --tag-background-color: transparent;
     --tag-background-color-active: var(--color-dark-indigo-07);
     --tag-background-color-checked: var(--color-dark-indigo);
     --tag-background-color-checked-disabled: var(--color-dark-indigo-30-flat);
@@ -30,6 +31,7 @@
     text-decoration: none;
     border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
     border-radius: var(--tag-border-radius);
+    background-color: var(--tag-background-color);
     transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
     box-sizing: border-box;
     box-shadow: none;