fix(button): update size config keys

shuriken-ui · Apr 8, 2024 · 18e3d6c · 18e3d6c
1 parent cd62333
commit 18e3d6c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 46 deletions.
diff --git a/src/plugins/components/button/button.config.ts b/src/plugins/components/button/button.config.ts
@@ -10,7 +10,7 @@ export const defaultConfig = {
     duration: '300',
   },
   size: {
-    small: {
+    sm: {
       button: {
         text: 'sm',
         height: '8',
@@ -23,7 +23,7 @@ export const defaultConfig = {
         size: '3',
       },
     },
-    medium: {
+    md: {
       button: {
         text: 'sm',
         height: '10',
@@ -36,7 +36,7 @@ export const defaultConfig = {
         size: '4',
       },
     },
-    large: {
+    lg: {
       button: {
         text: 'base',
         height: '12',
@@ -49,25 +49,12 @@ export const defaultConfig = {
         size: '5',
       },
     },
-    xlarge: {
-      button: {
-        text: 'base',
-        height: '14',
-        padding: {
-          x: '10',
-          y: '4',
-        },
-      },
-      icon: {
-        size: '5',
-      },
-    },
   },
   rounded: {
     none: 'none',
-    small: 'md',
-    medium: 'lg',
-    large: 'xl',
+    sm: 'md',
+    md: 'lg',
+    lg: 'xl',
     full: 'full',
   },
   variant: {

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', 'xl'],
+      options: ['sm', 'md', 'lg'],
       defaultValue: 'md',
     },
     rounded: {

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' | 'xl'
+  size?: 'sm' | 'md' | 'lg'
   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
@@ -1,10 +1,9 @@
 import type { ButtonVariant } from './button.types'
 
 export const size = {
-  sm: 'nui-button-small',
-  md: 'nui-button-medium',
-  lg: 'nui-button-large',
-  xl: 'nui-button-xlarge',
+  sm: 'nui-button-sm',
+  md: 'nui-button-md',
+  lg: 'nui-button-lg',
 } as const satisfies ButtonVariant<'size'>
 
 export const rounded = {

diff --git a/src/plugins/components/button/index.ts b/src/plugins/components/button/index.ts
@@ -94,53 +94,44 @@ export default plugin(({ addComponents, theme }) => {
       // #endregion
 
       // #region Sizes
-      '&.nui-button-small': {
-        [`@apply h-${config.size.small.button.height} px-${config.size.small.button.padding.x} py-${config.size.small.button.padding.y} text-${config.size.small.button.text}`]:
+      '&.nui-button-sm': {
+        [`@apply h-${config.size.sm.button.height} px-${config.size.sm.button.padding.x} py-${config.size.sm.button.padding.y} text-${config.size.sm.button.text}`]:
           {},
 
         '.nui-button-icon': {
-          [`@apply w-${config.size.small.icon.size} h-${config.size.small.icon.size}`]:
+          [`@apply w-${config.size.sm.icon.size} h-${config.size.sm.icon.size}`]:
             {},
         },
       },
-      '&.nui-button-medium': {
-        [`@apply h-${config.size.medium.button.height} px-${config.size.medium.button.padding.x} py-${config.size.medium.button.padding.y} text-${config.size.medium.button.text}`]:
+      '&.nui-button-md': {
+        [`@apply h-${config.size.md.button.height} px-${config.size.md.button.padding.x} py-${config.size.md.button.padding.y} text-${config.size.md.button.text}`]:
           {},
 
         '.nui-button-icon': {
-          [`@apply w-${config.size.medium.icon.size} h-${config.size.medium.icon.size}`]:
+          [`@apply w-${config.size.md.icon.size} h-${config.size.md.icon.size}`]:
             {},
         },
       },
-      '&.nui-button-large': {
-        [`@apply h-${config.size.large.button.height} px-${config.size.large.button.padding.x} py-${config.size.large.button.padding.y} text-${config.size.large.button.text}`]:
+      '&.nui-button-lg': {
+        [`@apply h-${config.size.lg.button.height} px-${config.size.lg.button.padding.x} py-${config.size.lg.button.padding.y} text-${config.size.lg.button.text}`]:
           {},
 
         '.nui-button-icon': {
-          [`@apply w-${config.size.large.icon.size} h-${config.size.large.icon.size}`]:
-            {},
-        },
-      },
-      '&.nui-button-xlarge': {
-        [`@apply h-${config.size.xlarge.button.height} px-${config.size.xlarge.button.padding.x} py-${config.size.xlarge.button.padding.y} text-${config.size.xlarge.button.text}`]:
-          {},
-
-        '.nui-button-icon': {
-          [`@apply w-${config.size.xlarge.icon.size} h-${config.size.xlarge.icon.size}`]:
+          [`@apply w-${config.size.lg.icon.size} h-${config.size.lg.icon.size}`]:
             {},
         },
       },
       // #endregion
 
       // #region Rounded
       '&.nui-button-rounded-sm': {
-        [`@apply rounded-${config.rounded.small}`]: {},
+        [`@apply rounded-${config.rounded.sm}`]: {},
       },
       '&.nui-button-rounded-md': {
-        [`@apply rounded-${config.rounded.medium}`]: {},
+        [`@apply rounded-${config.rounded.md}`]: {},
       },
       '&.nui-button-rounded-lg': {
-        [`@apply rounded-${config.rounded.large}`]: {},
+        [`@apply rounded-${config.rounded.lg}`]: {},
       },
       '&.nui-button-rounded-full': {
         [`@apply rounded-${config.rounded.full}`]: {},