refactor(Tag): migrate Tag component (#1302)

* refactor(Tag): migrate tag component

* docs(Tag): create new stories

* style(Tag): use correct variables

* fix(Tag): only do preventDefault in case of enter

* docs(Tag): change max-width

* style(Tag)!: improve styling and use of maxWidth

BREAKING CHANGE: 'size' is no longer a prop

Author: janseke10

src/components/Tag/Tag.scss

@@ -1,38 +1,70 @@
 .Tag {
-    display: flex;
+    display: inline-flex;
     align-items: center;
 
-    padding: var(--space-50) var(--space-75);
-    border-radius: var(--border-radius);
+    padding: var(--space-25) var(--space-50);
+    gap: var(--space-50);
+    border-radius: var(--space-50);
+    border: 1px solid var(--color-border-subtle);
+    cursor: default;
+    background-color: var(--bg-color, white); // Fallback to --color-background if bgColor isn't provided
+    
+    &[disabled] {
+        color: var(--color-text-disabled);
+    }
 
     &--isSelected {
-        box-shadow: 0 0 0 2px var(--color-brand-50);
+        box-shadow: 0 0 0 var(--space-25) var(--color-brand-50);
     }
 
-    &--clickable {
+    &--clickable:not([disabled]) {
         cursor: pointer;
+
+        &:hover:not([disabled]){
+            background-color: var(--color-background-neutral-subtlest-hover);
+        }
+
+        &:focus:not([disabled]) {
+            outline: none;
+            box-shadow: 0 0 0 var(--space-25) var(--color-info-20);
+        }
     }
 
     &__text{
+        composes: OneUI-label-text from global;
         margin: 0;
 
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        &[disabled] {
+            color: var(--color-text-disabled);
+        }
     }
 
     &__deleteButton {
         display: flex;
+        justify-content: center;
         align-items: center;
 
-        min-width: 15px;
-        min-height: 15px;
+        min-width: var(--space-200);
+        height: var(--space-200);
 
-        border: 0;
+        border: none;
+        border-radius: var(--space-25);
         cursor: pointer;
         background-color: var(--transparent);
 
         padding: 0;
-        margin-left: var(--space-50);
+
+        &:focus:not([disabled]) {
+            outline: none;
+            box-shadow: 0 0 0 var(--space-25) var(--color-info-20);
+        }
+        &[disabled] {
+            fill: var(--color-text-disabled);
+            cursor: default;
+        }
+    
     }
 }

src/components/Tag/Tag.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { MdClose } from 'react-icons/md';
+import Close from '@material-design-icons/svg/round/close.svg';
 import { bem } from '../../utils';
-import { Text } from '../Text';
-import { ENTER_KEY, Size } from '../../constants';
+import { ENTER_KEY } from '../../constants';
 import styles from './Tag.scss';
 
 export interface Props extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,8 +11,6 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
     bgColor?: string;
     /** Max-width of a component */
     maxWidth?: string;
-    /** Size of the text */
-    size?: Size;
     /** Callback, that is fired when a user clicks on a delete icon */
     onDelete?: (e: React.KeyboardEvent | React.MouseEvent) => void;
     /** Callback, that is fired when a user clicks on an element */
@@ -24,6 +21,8 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement> {
     contentStyle?: React.CSSProperties;
     /** Close label name for ARIA labelling, it is used when needs to clear data from component */
     closeLabel?: string;
+    /** Should tag be disabled or not */
+    disabled?: boolean;
 }
 
 const { block, elem } = bem('Tag', styles);
@@ -32,15 +31,15 @@ export const Tag = React.forwardRef<HTMLDivElement, Props>(
     (
         {
             children,
-            bgColor = 'var(--color-background)',
-            maxWidth = 'fit-content',
-            size = 'large',
+            bgColor,
+            maxWidth = '224px',
             onDelete = undefined,
             onClick = undefined,
             isSelected = false,
             contentClassName,
             contentStyle,
             closeLabel,
+            disabled,
             ...rest
         },
         ref
@@ -65,15 +64,15 @@ export const Tag = React.forwardRef<HTMLDivElement, Props>(
 
         const handleDeleteButtonKeyPress = (e: React.KeyboardEvent) => {
             e.stopPropagation();
-            e.preventDefault();
 
             if (e.key === ENTER_KEY) {
+                e.preventDefault();
                 onDelete?.(e);
             }
         };
 
         return (
-            <div
+            <span
                 {...rest}
                 ref={ref}
                 {...block({ isSelected, clickable: !!onClick, ...rest })}
@@ -84,29 +83,35 @@ export const Tag = React.forwardRef<HTMLDivElement, Props>(
                     onKeyPress: handleTagKeyPress,
                 })}
                 style={{
-                    backgroundColor: bgColor,
+                    '--bg-color': bgColor,
                     maxWidth,
                 }}
+                disabled={disabled}
             >
-                <Text
-                    size={size}
+                <span
                     {...(areChildrenString && { title: children })}
                     {...elem('text', { elemClassName: contentClassName })}
+                    disabled={disabled}
                     style={contentStyle}
                 >
                     {children}
-                </Text>
+                </span>
                 {onDelete && (
                     <button
                         onClick={handleDeleteClick}
                         onKeyDown={handleDeleteButtonKeyPress}
                         type="button"
+                        disabled={disabled}
                         {...elem('deleteButton')}
                     >
-                        <MdClose size="15px" aria-label={closeLabel} />
+                        <Close
+                            aria-label={closeLabel}
+                            style={{ width: '100%', height: '100%' }}
+                            viewBox="0 0 24 24"
+                        />
                     </button>
                 )}
-            </div>
+            </span>
         );
     }
 );

src/components/Tag/__tests__/Tag.spec.tsx

@@ -13,7 +13,6 @@ describe('<Tag> component', () => {
     const text = 'Tag text';
     const bgColor = '#ccc';
     const maxWidth = '30px';
-    const textSize = 'large';
     const closeLabel = 'close label';
 
     it('should render correctly with minimum amount of props', () => {
@@ -29,7 +28,6 @@ describe('<Tag> component', () => {
                 isSelected
                 bgColor={bgColor}
                 maxWidth={maxWidth}
-                size={textSize}
                 onClick={onTagClick}
                 onDelete={onDeleteClick}
                 contentClassName="my-class"
@@ -43,10 +41,7 @@ describe('<Tag> component', () => {
 
         expect(view.container).toMatchSnapshot();
         expect(button).toBeInTheDocument();
-        expect(button).toHaveAttribute(
-            'style',
-            'background-color: rgb(204, 204, 204); max-width: 30px;'
-        );
+        expect(button).toHaveAttribute('style', '--bg-color: #ccc; max-width: 30px;');
     });
 
     it('should invoke callback when onClick event is called', async () => {

src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -2,57 +2,45 @@
 
 exports[`<Tag> component should render correctly with full list of props 1`] = `
 <div>
-  <div
+  <span
     class="Tag Tag--isSelected Tag--clickable"
     role="button"
-    style="background-color: rgb(204, 204, 204); max-width: 30px;"
+    style="--bg-color: #ccc; max-width: 30px;"
     tabindex="0"
   >
-    <p
+    <span
       class="Tag__text my-class"
       style="color: red;"
       title="Tag text"
     >
       Tag text
-    </p>
+    </span>
     <button
       class="Tag__deleteButton"
       type="button"
     >
       <svg
-        fill="currentColor"
-        height="15px"
-        stroke="currentColor"
-        stroke-width="0"
+        data-testid="default-icon"
+        style="width: 100%; height: 100%;"
         viewBox="0 0 24 24"
-        width="15px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0 0h24v24H0z"
-          fill="none"
-        />
-        <path
-          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-        />
-      </svg>
+      />
     </button>
-  </div>
+  </span>
 </div>
 `;
 
 exports[`<Tag> component should render correctly with minimum amount of props 1`] = `
 <div>
-  <div
+  <span
     class="Tag"
-    style="max-width: fit-content;"
+    style="max-width: 224px;"
   >
-    <p
+    <span
       class="Tag__text"
       title="Tag text"
     >
       Tag text
-    </p>
-  </div>
+    </span>
+  </span>
 </div>
 `;

src/components/Teaser/__tests__/__snapshots__/Teaser.spec.tsx.snap

@@ -325,28 +325,28 @@ exports[`Teaser should render with all props defined 1`] = `
       <div
         class="Teaser__bottom"
       >
-        <div
+        <span
           class="Tag"
-          style="background-color: yellow; max-width: fit-content;"
+          style="--bg-color: yellow; max-width: 224px;"
         >
-          <p
+          <span
             class="Tag__text"
             title="First Tag"
           >
             First Tag
-          </p>
-        </div>
-        <div
+          </span>
+        </span>
+        <span
           class="Tag"
-          style="background-color: lightblue; max-width: fit-content;"
+          style="--bg-color: lightblue; max-width: 224px;"
         >
-          <p
+          <span
             class="Tag__text"
             title="Second Tag"
           >
             Second Tag
-          </p>
-        </div>
+          </span>
+        </span>
       </div>
     </div>
   </div>