refactor: refactor badge component

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

@@ -1,6 +1,8 @@
 export const badgeClasses = {
   root: `lsd-badge`,
 
+  label: `lsd-badge__label`,
+
   outlined: `lsd-badge--outlined`,
   filled: `lsd-badge--filled`,
   disabled: 'lsd-badge--disabled',

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

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

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

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

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

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