refactor: refactor tag component

packages/lsd-react/src/components/Tag/Tag.classes.ts

@@ -1,6 +1,8 @@
 export const tagClasses = {
   root: `lsd-tag`,
 
+  label: `lsd-tag__label`,
+
   outlined: `lsd-tag--outlined`,
   filled: `lsd-tag--filled`,
   disabled: 'lsd-tag--disabled',

packages/lsd-react/src/components/Tag/Tag.stories.tsx

@@ -35,12 +35,13 @@ export default {
 } as Meta
 
 export const Root: Story<TagProps> = (args) => (
-  <Tag {...args} icon={<FolderIcon color="primary" />} />
+  <Tag {...args} icon={<FolderIcon color="primary" />}>
+    Tag
+  </Tag>
 )
 
 Root.args = {
   variant: 'outlined',
-  label: 'Tag',
   iconDirection: 'left',
   disabled: false,
   size: 'large',

packages/lsd-react/src/components/Tag/Tag.styles.ts

@@ -33,7 +33,10 @@ export const TagStyles = css`
 
   .${tagClasses.filled} {
     background-color: rgb(var(--lsd-icon-primary));
-    color: rgb(var(--lsd-text-secondary));
+    .${tagClasses.label} {
+      color: rgb(var(--lsd-text-secondary));
+    }
+
     svg {
       --lsd-icon-primary: var(--lsd-icon-secondary);
     }

packages/lsd-react/src/components/Tag/Tag.tsx

@@ -5,7 +5,6 @@ import { tagClasses } from './Tag.classes'
 
 export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: 'outlined' | 'filled'
-  label: string
   icon?: React.ReactNode
   iconDirection?: 'left' | 'right'
   disabled?: boolean
@@ -15,7 +14,6 @@ export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
 export const Tag: React.FC<TagProps> & {
   classes: typeof tagClasses
 } = ({
-  label,
   variant = 'outlined',
   disabled = 'false',
   icon,
@@ -24,22 +22,9 @@ export const Tag: React.FC<TagProps> & {
   size = 'large',
   ...props
 }) => {
-  const renderItems = () => (
-    <>
-      {iconDirection === 'left' && icon}
-      <Typography
-        variant={size === 'small' ? 'label2' : 'label1'}
-        className={tagClasses[variant]}
-      >
-        {label}
-      </Typography>
-      {iconDirection === 'right' && icon}
-    </>
-  )
-
   return (
     <div
-      aria-label={label}
+      aria-label={children as string}
       {...props}
       className={clsx(
         props.className,
@@ -49,7 +34,15 @@ export const Tag: React.FC<TagProps> & {
         tagClasses[size],
       )}
     >
-      {renderItems()}
+      {iconDirection === 'left' && icon}
+      <Typography
+        variant={size === 'small' ? 'label2' : 'label1'}
+        className={tagClasses.label}
+        component="span"
+      >
+        {children}
+      </Typography>
+      {iconDirection === 'right' && icon}
     </div>
   )
 }