fix(button): re add xl size

shuriken-ui · Apr 9, 2024 · 3de5184 · 3de5184
1 parent aee787f
commit 3de5184
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 2 deletions.
diff --git a/src/plugins/components/button/button.config.ts b/src/plugins/components/button/button.config.ts
@@ -49,6 +49,19 @@ export const defaultConfig = {
         size: '5',
       },
     },
+    xl: {
+      button: {
+        text: 'base',
+        height: '14',
+        padding: {
+          x: '10',
+          y: '4',
+        },
+      },
+      icon: {
+        size: '5',
+      },
+    },
   },
   rounded: {
     none: 'none',

diff --git a/src/plugins/components/button/button.docs.mdx b/src/plugins/components/button/button.docs.mdx
@@ -54,6 +54,7 @@ Size allows you to change the size of the button.
   <Story of={ButtonStories.Sm} />
   <Story of={ButtonStories.Md} />
   <Story of={ButtonStories.Lg} />
+  <Story of={ButtonStories.Xl} />
 </div>
 
 <br />

diff --git a/src/plugins/components/button/button.stories.ts b/src/plugins/components/button/button.stories.ts
@@ -46,7 +46,7 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
       defaultValue: 'md',
     },
     rounded: {
@@ -191,6 +191,14 @@ export const Lg: Story = {
     rounded: 'sm',
   },
 }
+export const Xl: Story = {
+  name: 'Size: xl',
+  args: {
+    size: 'xl',
+    label: 'Button',
+    rounded: 'sm',
+  },
+}
 // #endregion
 
 // #region Variants:solid

diff --git a/src/plugins/components/button/button.types.ts b/src/plugins/components/button/button.types.ts
@@ -4,7 +4,7 @@ export interface ButtonProps extends Record<string, unknown> {
   label?: string
   loading?: boolean
   badge?: boolean
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   variant?: 'solid' | 'pastel' | 'outline'
   color?:

diff --git a/src/plugins/components/button/button.variants.ts b/src/plugins/components/button/button.variants.ts
@@ -4,6 +4,7 @@ export const size = {
   sm: 'nui-button-sm',
   md: 'nui-button-md',
   lg: 'nui-button-lg',
+  xl: 'nui-button-xl',
 } as const satisfies ButtonVariant<'size'>
 
 export const rounded = {

diff --git a/src/plugins/components/button/index.ts b/src/plugins/components/button/index.ts
@@ -121,6 +121,15 @@ export default plugin(({ addComponents, theme }) => {
             {},
         },
       },
+      '&.nui-button-xl': {
+        [`@apply h-${config.size.xl.button.height} px-${config.size.xl.button.padding.x} py-${config.size.xl.button.padding.y} text-${config.size.xl.button.text}`]:
+          {},
+
+        '.nui-button-icon': {
+          [`@apply w-${config.size.xl.icon.size} h-${config.size.xl.icon.size}`]:
+            {},
+        },
+      },
       // #endregion
 
       // #region Rounded