docs: improve displaying the variant/size in the appearance demo (#4304)

* docs: improve displaying the variant/size in the appearance demo * udpate * default all the things
marigold-ui · Nov 20, 2024 · 8914fb0 · 8914fb0
1 parent 2ccd57a
commit 8914fb0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/docs/ui/AppearanceDemo.tsx b/docs/ui/AppearanceDemo.tsx
@@ -61,8 +61,16 @@ export const AppearanceDemo = ({
   const appearance = getAppearance(component, theme);
 
   const [selected, setSelected] = useState({
-    variant: 'default',
-    size: 'default',
+    variant: appearance.variant.length
+      ? appearance.variant.includes('default')
+        ? 'default'
+        : appearance.variant[0]
+      : 'none',
+    size: appearance.size.length
+      ? appearance.size.includes('default')
+        ? 'default'
+        : appearance.size[0]
+      : 'none',
   });
 
   const Wrapper = ({ children }: { children: ReactNode }) =>
@@ -106,7 +114,9 @@ export const AppearanceDemo = ({
             }
             disabled={appearance.variant.length === 0 ? true : false}
           >
-            <Select.Option id="default">default</Select.Option>
+            {appearance.variant.length === 0 ? (
+              <Select.Option id="none">default</Select.Option>
+            ) : null}
             {appearance.variant.map(v => (
               <Select.Option key={v} id={v}>
                 {v}
@@ -124,7 +134,9 @@ export const AppearanceDemo = ({
             }
             disabled={appearance.size.length === 0 ? true : false}
           >
-            <Select.Option id="default">default</Select.Option>
+            {appearance.size.length === 0 ? (
+              <Select.Option id="none">default</Select.Option>
+            ) : null}
             {appearance.size.map(v => (
               <Select.Option key={v} id={v}>
                 {v}

diff --git a/themes/theme-b2b/src/components/Button.styles.ts b/themes/theme-b2b/src/components/Button.styles.ts
@@ -9,6 +9,7 @@ export const Button: ThemeComponent<'Button'> = cva(
   {
     variants: {
       variant: {
+        default: '',
         primary: [
           'text-text-inverted bg-bg-accent',
           'hover:bg-bg-accent-hover',
@@ -36,8 +37,13 @@ export const Button: ThemeComponent<'Button'> = cva(
         ],
       },
       size: {
+        default: '',
         small: 'px-4 leading-8',
       },
     },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
   }
 );
diff --git a/themes/theme-core/src/components/Button.styles.ts b/themes/theme-core/src/components/Button.styles.ts
@@ -10,6 +10,7 @@ export const Button: ThemeComponent<'Button'> = cva(
   {
     variants: {
       variant: {
+        default: '',
         primary: [
           'border-border-brand bg-bg-brand text-text-inverted',
           'hover:bg-bg-brand-hover hover:border-border-brand-hover',
@@ -32,8 +33,13 @@ export const Button: ThemeComponent<'Button'> = cva(
         ],
       },
       size: {
+        default: '',
         small: 'py-1',
       },
     },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
   }
 );