fix(badge): fix badge size on empty content

adevinta · Jan 29, 2024 · 3f12094 · 3f12094
1 parent 26aecf2
commit 3f12094
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 39 deletions.
diff --git a/packages/components/badge/src/Badge.stories.tsx b/packages/components/badge/src/Badge.stories.tsx
@@ -1,16 +1,16 @@
 import { StoryLabel } from '@docs/helpers/StoryLabel'
 import { Button } from '@spark-ui/button'
 import { Meta, StoryFn } from '@storybook/react'
-import { type ComponentProps } from 'react'
 
-import { Badge } from '.'
-
-type BadgeProps = ComponentProps<typeof Badge>
+import { Badge, type BadgeProps } from '.'
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
   component: Badge,
 }
+
+export default meta
+
 const sizes: BadgeProps['size'][] = ['sm', 'md']
 const intents: BadgeProps['intent'][] = [
   'main',
@@ -25,16 +25,20 @@ const intents: BadgeProps['intent'][] = [
   'surface',
 ]
 
-const fakeAvatar = <div className="h-sz-40 w-sz-40 rounded-lg bg-outline" />
+const fakeAvatar = <div className="size-sz-40 rounded-sm bg-outline" />
 
 export const Default: StoryFn = _args => <Badge count={1}>{fakeAvatar}</Badge>
 
 export const Intents: StoryFn = _args => (
-  <div className="flex flex-wrap justify-evenly gap-md">
+  <div className="grid grid-cols-2 gap-xl sm:grid-cols-5">
     {intents.map(intent => (
-      <div>
-        <StoryLabel className="mb-xl">{intent}</StoryLabel>
-        <Badge key={intent} intent={intent} count={1}>
+      <div key={intent} className="flex flex-col items-center">
+        <StoryLabel className="mb-xl">{`
+            ${intent}
+            ${intent === 'danger' ? ' (default)' : ''}
+          `}</StoryLabel>
+
+        <Badge intent={intent} count={1}>
           {fakeAvatar}
         </Badge>
       </div>
@@ -52,7 +56,7 @@ export const NoCount: StoryFn = _args => <Badge>{fakeAvatar}</Badge>
 
 export const CountThreshold: StoryFn = _args => (
   <div className="flex gap-xl">
-    <div>
+    <div className="text-center">
       <StoryLabel className="mb-xl">Default threshold</StoryLabel>
       <Badge
         count={1000}
@@ -61,7 +65,7 @@ export const CountThreshold: StoryFn = _args => (
         {fakeAvatar}
       </Badge>
     </div>
-    <div>
+    <div className="text-center">
       <StoryLabel className="mb-xl">Custom threshold</StoryLabel>
       <Badge
         count={1000}
@@ -75,26 +79,32 @@ export const CountThreshold: StoryFn = _args => (
 )
 
 export const Sizes: StoryFn = _args => (
-  <div className="flex flex-col gap-xl">
+  <div className="flex flex-row gap-xl">
     {sizes.map(size => (
-      <div className="flex gap-xl">
-        <div>
-          <StoryLabel className="mb-xl">{size}</StoryLabel>
+      <>
+        <div className="text-center">
+          <StoryLabel className="mb-xl">{`
+            ${size}
+            ${size === 'md' ? ' (default)' : ''}
+          `}</StoryLabel>
 
-          <Badge key={size} size={size}>
+          <Badge key={size} size={size} count={25}>
             {fakeAvatar}
           </Badge>
         </div>
-        <div>
-          <StoryLabel className="mb-xl">{size} (count)</StoryLabel>
 
-          <Badge key={size} size={size} count={25}>
+        <div className="text-center">
+          <StoryLabel className="mb-xl">{`
+            ${size}
+            ${size === 'md' ? ' (default)' : ''}
+            empty
+          `}</StoryLabel>
+
+          <Badge key={size} size={size}>
             {fakeAvatar}
           </Badge>
         </div>
-      </div>
+      </>
     ))}
   </div>
 )
-
-export default meta
diff --git a/packages/components/badge/src/BadgeItem.styles.tsx b/packages/components/badge/src/BadgeItem.styles.tsx
@@ -1,14 +1,13 @@
 import { makeVariants } from '@spark-ui/internal-utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { DEFAULT_INTENT, DEFAULT_SIZE, DEFAULT_TYPE } from './config'
-
 export const styles = cva(
   ['inline-flex h-fit', 'empty:p-none', 'text-center font-bold', 'rounded-full box-content'],
   {
     variants: {
       /**
        * Visual color appearance of the component.
+       * @default 'danger'
        */
       intent: makeVariants<
         'intent',
@@ -38,23 +37,25 @@ export const styles = cva(
       }),
       /**
        * Size of the component.
+       * @default 'md'
        */
       size: makeVariants<'size', ['sm', 'md']>({
-        sm: ['text-small', 'px-[var(--sz-6)] py-[var(--sz-2)]', 'empty:h-sz-12 empty:w-sz-12'],
-        md: ['text-caption', 'px-md py-sm', 'empty:h-sz-16 empty:w-sz-16'],
+        sm: ['text-small', 'px-[var(--sz-6)] py-[var(--sz-2)]', 'empty:size-sz-8'],
+        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],
       }),
       /**
        * Type of the component.
+       * @default 'relative'
        */
       type: {
-        relative: ['absolute right-none translate-x-2/4 -translate-y-2/4 border-md'],
+        relative: ['absolute right-none border-md', 'translate-x-1/2 -translate-y-1/2'],
         standalone: [],
       },
     },
     defaultVariants: {
-      intent: DEFAULT_INTENT,
-      size: DEFAULT_SIZE,
-      type: DEFAULT_TYPE,
+      intent: 'danger',
+      size: 'md',
+      type: 'relative',
     },
   }
 )

diff --git a/packages/components/badge/src/BadgeItem.tsx b/packages/components/badge/src/BadgeItem.tsx
@@ -1,7 +1,6 @@
 import { forwardRef, HTMLAttributes, PropsWithRef } from 'react'
 
 import { styles, type StylesProps } from './BadgeItem.styles'
-import { DEFAULT_INTENT, DEFAULT_OVERFLOW_COUNT, DEFAULT_SIZE, DEFAULT_TYPE } from './config'
 
 export interface BadgeItemProps
   extends PropsWithRef<Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>>,
@@ -12,6 +11,7 @@ export interface BadgeItemProps
   count?: number
   /**
    * Maximum numeric value to be dispayed as a count value.
+   * @default 99
    */
   overflowCount?: number
   /**
@@ -23,18 +23,19 @@ export interface BadgeItemProps
     | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)
   /**
    * Describes the way the component is displayed: relative to another element or just standalone.
+   * @default 'relative'
    */
   type?: 'relative' | 'standalone'
 }
 
 export const BadgeItem = forwardRef<HTMLSpanElement, BadgeItemProps>(
   (
     {
-      intent = DEFAULT_INTENT,
-      size = DEFAULT_SIZE,
-      type = DEFAULT_TYPE,
+      intent = 'danger',
+      size = 'md',
+      type = 'relative',
       count,
-      overflowCount = DEFAULT_OVERFLOW_COUNT,
+      overflowCount = 99,
       'aria-label': label,
       className,
       ...others

diff --git a/packages/components/badge/src/config.ts b/packages/components/badge/src/config.ts