feat(ButtonIcon): add xl size

shuriken-ui · Jun 4, 2024 · 9092677 · 9092677
1 parent 30c1f92
commit 9092677
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 7 deletions.
diff --git a/src/plugins/components/button-icon/button-icon.config.ts b/src/plugins/components/button-icon/button-icon.config.ts
@@ -25,6 +25,10 @@ export const defaultConfig = {
       size: '12',
       padding: '3',
     },
+    xl: {
+      size: '14',
+      padding: '4',
+    },
   },
   color: {
     default: {

diff --git a/src/plugins/components/button-icon/button-icon.doc.mdx b/src/plugins/components/button-icon/button-icon.doc.mdx
@@ -26,6 +26,7 @@ Icon buttons can have different sizes.
   <Story of={ButtonIconStories.SizeSm} />
   <Story of={ButtonIconStories.SizeMd} />
   <Story of={ButtonIconStories.SizeLg} />
+  <Story of={ButtonIconStories.SizeXl} />
 </div>
 
 <br />

diff --git a/src/plugins/components/button-icon/button-icon.stories.ts b/src/plugins/components/button-icon/button-icon.stories.ts
@@ -11,6 +11,11 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => ButtonIcon(args),
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      defaultValue: 'md',
+    },
     loading: {
       name: 'loading',
       control: { type: 'boolean' },
@@ -152,6 +157,29 @@ export const SizeLg: Story = {
     `,
   },
 }
+export const SizeXl: Story = {
+  name: 'Size: xl',
+  args: {
+    size: 'xl',
+    rounded: 'sm',
+    children: html`
+      <svg
+        class="h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <g fill="currentColor">
+          <path d="m96 240l16-80l-64-24L160 16l-16 80l64 24Z" opacity=".2" />
+          <path
+            d="M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26ZM109.37 214l10.47-52.38a8 8 0 0 0-5-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5 9.06l52.8 19.8Z"
+          />
+        </g>
+      </svg>
+    `,
+  },
+}
 // #endregion
 
 // #region Rounded

diff --git a/src/plugins/components/button-icon/button-icon.types.ts b/src/plugins/components/button-icon/button-icon.types.ts
@@ -16,7 +16,7 @@ export interface ButtonIconProps extends Record<string, unknown> {
     | 'warning'
     | 'danger'
     | 'none'
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   loading?: boolean
   classes?: {
     wrapper?: string | string[]

diff --git a/src/plugins/components/button-icon/button-icon.variants.ts b/src/plugins/components/button-icon/button-icon.variants.ts
@@ -9,9 +9,10 @@ export const rounded = {
 } as const satisfies ButtonIconVariant<'rounded'>
 
 export const size = {
-  sm: 'nui-button-small',
-  md: 'nui-button-medium',
-  lg: 'nui-button-large',
+  sm: 'nui-button-sm',
+  md: 'nui-button-md',
+  lg: 'nui-button-lg',
+  xl: 'nui-button-xl',
 } as const satisfies ButtonIconVariant<'size'>
 
 export const color = {

diff --git a/src/plugins/components/button-icon/index.ts b/src/plugins/components/button-icon/index.ts
@@ -24,20 +24,25 @@ export default plugin(({ addComponents, theme }) => {
       [`@apply transition-${config.transition.property} duration-${config.transition.duration}`]:
         {},
       //Size:sm
-      '&.nui-button-small': {
+      '&.nui-button-sm': {
         [`@apply h-${config.size.sm.size} w-${config.size.sm.size} p-${config.size.sm.padding}`]:
           {},
       },
       //Size:md
-      '&.nui-button-medium': {
+      '&.nui-button-md': {
         [`@apply h-${config.size.md.size} w-${config.size.md.size} p-${config.size.md.padding}`]:
           {},
       },
       //Size:lg
-      '&.nui-button-large': {
+      '&.nui-button-lg': {
         [`@apply h-${config.size.lg.size} w-${config.size.lg.size} p-${config.size.lg.padding}`]:
           {},
       },
+      //Size:xl
+      '&.nui-button-xl': {
+        [`@apply h-${config.size.xl.size} w-${config.size.xl.size} p-${config.size.xl.padding}`]:
+          {},
+      },
       //Rounded:sm
       '&.nui-button-rounded-sm': {
         [`@apply ${config.rounded.sm}`]: {},