feat(chip): add intent designs

adevinta · Aug 23, 2023 · 4006570 · 4006570
1 parent 7b9818c
commit 4006570
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 27 deletions.
diff --git a/packages/components/chip/src/Chip.stories.tsx b/packages/components/chip/src/Chip.stories.tsx
@@ -65,3 +65,33 @@ export const Intent: StoryFn = _args => (
     ))}
   </div>
 )
+
+export const Intent: StoryFn = _args => (
+  <div className="flex flex-col flex-wrap gap-md">
+    Default
+    {designs.map(design => (
+      <div key={design} className="flex flex-wrap gap-md">
+        {intents.map(intent => (
+          <Chip design={design} key={`${design}-${intent}`} intent={intent}>
+            {intent} chip
+          </Chip>
+        ))}
+      </div>
+    ))}
+    Actionable
+    {designs.map(design => (
+      <div key={design} className="flex flex-wrap gap-md">
+        {intents.map(intent => (
+          <Chip
+            design={design}
+            key={`${design}-${intent}`}
+            intent={intent}
+            onClick={() => console.log(`click ${design} ${intent}`)}
+          >
+            {intent} chip
+          </Chip>
+        ))}
+      </div>
+    ))}
+  </div>
+)
diff --git a/packages/components/chip/src/Chip.styles.tsx b/packages/components/chip/src/Chip.styles.tsx
@@ -1,12 +1,12 @@
-import { makeVariants } from '@spark-ui/internal-utils'
+import { makeVariants, tw } from '@spark-ui/internal-utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { dashedVariants, filledVariants, outlinedVariants, tintedVariants } from './variants'
 
 export const chipStyles = cva(
   [
-    'box-border inline-flex h-sz-32 flex-nowrap items-center justify-center gap-md truncate rounded-md text-body-1 font-regular',
-    'max-w-sz-240 ring-inset focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high',
+    'box-border inline-block h-sz-32 gap-md rounded-md text-body-1 font-regular',
+    'ring-inset focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high',
   ],
   {
     variants: {
@@ -22,9 +22,9 @@ export const chipStyles = cva(
        * - `dashed`: Chip will be transparent with an outline dashed.
        */
       design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'dashed']>({
-        filled: [''],
-        outlined: ['bg-transparent ring-1 ring-current'],
-        tinted: [''],
+        filled: [],
+        outlined: ['bg-transparent', 'ring-1', 'ring-current'],
+        tinted: [],
         dashed: [
           'bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high',
         ],
@@ -51,10 +51,6 @@ export const chipStyles = cva(
       disabled: {
         true: ['cursor-not-allowed', 'opacity-dim-3'],
       },
-      hasClearButton: {
-        true: ['pl-md'],
-        false: ['px-md'],
-      },
     },
     compoundVariants: [
       ...filledVariants,
@@ -69,6 +65,50 @@ export const chipStyles = cva(
   }
 )
 
+export const chipContentStyles = cva(
+  [
+    'inline-flex h-full items-center justify-center gap-sm overflow-hidden text-ellipsis whitespace-nowrap',
+  ],
+  {
+    variants: {
+      isBordered: {
+        false: ['max-w-sz-240'],
+        true: ['max-w-[238px]'],
+      },
+      hasClearButton: {
+        true: [],
+        false: [],
+      },
+    },
+    defaultVariants: {
+      isBordered: false,
+      hasClearButton: false,
+    },
+    compoundVariants: [
+      {
+        hasClearButton: false,
+        isBordered: false,
+        class: tw(['px-md']),
+      },
+      {
+        hasClearButton: false,
+        isBordered: true,
+        class: tw(['px-[7px]']),
+      },
+      {
+        hasClearButton: true,
+        isBordered: false,
+        class: tw(['pl-md']),
+      },
+      {
+        hasClearButton: true,
+        isBordered: true,
+        class: tw(['pl-[7px]']),
+      },
+    ],
+  }
+)
+
 // export const chipContentTextStyles = cva([
 //   'flex flex-nowrap items-center gap-sm overflow-hidden text-ellipsis',
 // ])

diff --git a/packages/components/chip/src/Chip.tsx b/packages/components/chip/src/Chip.tsx
@@ -78,26 +78,31 @@ export const Chip = forwardRef<HTMLButtonElement | HTMLDivElement, ChipProps>(
     const hasClearButton = findElement('Chip.ClearButton')(children)
 
     return (
-      <ChipContext.Provider value={{ disabled, design, intent }}>
-        <ChipElement
-          ref={forwardedRef}
-          className={chipStyles({
-            className,
-            design,
-            disabled,
-            intent,
+      <ChipElement
+        ref={forwardedRef}
+        className={chipStyles({
+          className,
+          design,
+          disabled,
+          intent,
+        })}
+        {...{
+          ...chipProps,
+          ...otherProps,
+        }}
+        data-spark-component="chip"
+      >
+        <span
+          className={chipContentStyles({
+            hasClearButton: !!hasClearButton,
+            isBordered: design === 'dashed',
           })}
-          {...{
-            ...chipProps,
-            ...otherProps,
-          }}
-          data-spark-component="chip"
         >
-          <span className={chipContentStyles({ hasClearButton: !!hasClearButton })}>
+          <ChipContext.Provider value={{ disabled, design, intent }}>
             {children}
-          </span>
-        </ChipElement>
-      </ChipContext.Provider>
+          </ChipContext.Provider>
+        </span>
+      </ChipElement>
     )
   }
 )