feat(InputFile): add xl size

shuriken-ui · Jun 5, 2024 · 6398560 · 6398560
1 parent 2c0de2e
commit 6398560
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 7 deletions.
diff --git a/src/plugins/components/input-file-regular/index.ts b/src/plugins/components/input-file-regular/index.ts
@@ -258,6 +258,36 @@ export default plugin(({ addComponents, theme }) => {
           '@apply top-[1.2rem]': {},
         },
       },
+      //Without icon && Size:xl
+      '&.nui-input-xl:not(.nui-has-icon)': {
+        [`@apply text-${config.icon.disabled.xl.font.size} leading-5`]: {},
+        '.nui-input-file-inner': {
+          '@apply h-14 gap-2': {},
+        },
+        '.nui-input-file-addon': {
+          '@apply h-14 px-5': {},
+        },
+        '.nui-input-file-placeload': {
+          '@apply top-[1.4rem]': {},
+        },
+      },
+      //With icon && Size:xl
+      '&.nui-input-xl.nui-has-icon': {
+        [`@apply text-${config.icon.enabled.xl.font.size} leading-5`]: {},
+        '.nui-input-file-inner': {
+          '@apply h-14 pe-4': {},
+        },
+        '.nui-input-file-addon': {
+          '@apply h-14 px-5': {},
+        },
+        '.nui-input-file-icon': {
+          [`@apply w-${config.icon.enabled.xl.icon.size} h-${config.icon.enabled.xl.icon.size}`]:
+            {},
+        },
+        '.nui-input-file-placeload': {
+          '@apply top-[1.4rem]': {},
+        },
+      },
       //Input:hover
       '&:hover': {
         '.nui-input-file-addon': {

diff --git a/src/plugins/components/input-file-regular/input-file-regular.config.ts b/src/plugins/components/input-file-regular/input-file-regular.config.ts
@@ -167,6 +167,11 @@ export const defaultConfig = {
           size: 'sm',
         },
       },
+      xl: {
+        font: {
+          size: 'sm',
+        },
+      },
     },
     enabled: {
       sm: {
@@ -193,6 +198,14 @@ export const defaultConfig = {
           size: '5',
         },
       },
+      xl: {
+        font: {
+          size: 'sm',
+        },
+        icon: {
+          size: '6',
+        },
+      },
     },
   },
 }

diff --git a/src/plugins/components/input-file-regular/input-file-regular.doc.mdx b/src/plugins/components/input-file-regular/input-file-regular.doc.mdx
@@ -70,10 +70,11 @@ File input shapes allow you to change the border radiuses. Below is an example o
 
 File input size allows you to change the input size.
 
-<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={InputFileRegularStories.SizeSm} />
   <Story of={InputFileRegularStories.SizeMd} />
   <Story of={InputFileRegularStories.SizeLg} />
+  <Story of={InputFileRegularStories.SizeXl} />
 </div>
 
 <br />
@@ -85,20 +86,22 @@ File input size allows you to change the input size.
 
 File inputs can be configured to have a colored border when being focused.
 
-<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={InputFileRegularStories.ColorFocusSm} />
   <Story of={InputFileRegularStories.ColorFocusMd} />
   <Story of={InputFileRegularStories.ColorFocusLg} />
+  <Story of={InputFileRegularStories.ColorFocusXl} />
 </div>
 
 ### State: disabled
 
 File inputs can be shown in a disabled state.
 
-<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={InputFileRegularStories.DisabledSm} />
   <Story of={InputFileRegularStories.DisabledMd} />
   <Story of={InputFileRegularStories.DisabledLg} />
+  <Story of={InputFileRegularStories.DisabledXl} />
 </div>
 
 <br />
@@ -107,20 +110,22 @@ File inputs can be shown in a disabled state.
 
 File inputs can be shown in a loading state.
 
-<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={InputFileRegularStories.LoadingSm} />
   <Story of={InputFileRegularStories.LoadingMd} />
   <Story of={InputFileRegularStories.LoadingLg} />
+  <Story of={InputFileRegularStories.LoadingXl} />
 </div>
 
 ### State: error
 
 File inputs can be shown in an error state. This indicates that the input value contains an error.
 
-<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="flex items-end flex-wrap gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={InputFileRegularStories.ErrorSm} />
   <Story of={InputFileRegularStories.ErrorMd} />
   <Story of={InputFileRegularStories.ErrorLg} />
+  <Story of={InputFileRegularStories.ErrorXl} />
 </div>
 
 <br />

diff --git a/src/plugins/components/input-file-regular/input-file-regular.stories.ts b/src/plugins/components/input-file-regular/input-file-regular.stories.ts
@@ -22,7 +22,7 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
       defaultValue: 'md',
     },
     rounded: {
@@ -193,6 +193,20 @@ export const SizeLg: Story = {
     },
   },
 }
+
+export const SizeXl: Story = {
+  name: 'Size: xl',
+  args: {
+    id: 'input-file',
+    label: 'Upload files',
+    size: 'xl',
+    rounded: 'sm',
+    placeholder: 'Select files',
+    classes: {
+      wrapper: 'min-w-[260px] max-w-[260px]',
+    },
+  },
+}
 // #endregion
 
 // #region State: color focus
@@ -240,6 +254,21 @@ export const ColorFocusLg: Story = {
     },
   },
 }
+
+export const ColorFocusXl: Story = {
+  name: 'Color focus: xl',
+  args: {
+    id: 'input-file',
+    label: 'Upload files',
+    size: 'xl',
+    rounded: 'sm',
+    colorFocus: true,
+    placeholder: 'Select file',
+    classes: {
+      wrapper: 'min-w-[260px] max-w-[260px]',
+    },
+  },
+}
 // #endregion
 
 // #region State: disabled
@@ -287,6 +316,21 @@ export const DisabledLg: Story = {
     },
   },
 }
+
+export const DisabledXl: Story = {
+  name: 'Disabled: xl',
+  args: {
+    id: 'input-file',
+    label: 'Upload files',
+    size: 'xl',
+    rounded: 'sm',
+    '?disabled': true,
+    placeholder: 'Select file',
+    classes: {
+      wrapper: 'min-w-[260px] max-w-[260px]',
+    },
+  },
+}
 // #endregion
 
 // #region State: loading
@@ -334,6 +378,21 @@ export const LoadingLg: Story = {
     },
   },
 }
+
+export const LoadingXl: Story = {
+  name: 'Loading: xl',
+  args: {
+    id: 'input-file',
+    label: 'Upload files',
+    size: 'xl',
+    rounded: 'sm',
+    loading: true,
+    placeholder: 'Select file',
+    classes: {
+      wrapper: 'min-w-[260px] max-w-[260px]',
+    },
+  },
+}
 // #endregion
 
 // #region State: error
@@ -381,4 +440,19 @@ export const ErrorLg: Story = {
     },
   },
 }
+
+export const ErrorXl: Story = {
+  name: 'Error: xl',
+  args: {
+    id: 'input-file',
+    label: 'Upload files',
+    size: 'xl',
+    rounded: 'sm',
+    error: 'Please select valid files',
+    placeholder: 'Select file',
+    classes: {
+      wrapper: 'min-w-[260px] max-w-[260px]',
+    },
+  },
+}
 // #endregion
diff --git a/src/plugins/components/input-file-regular/input-file-regular.types.ts b/src/plugins/components/input-file-regular/input-file-regular.types.ts
@@ -7,7 +7,7 @@ export interface InputFileRegularProps extends Record<string, unknown> {
   placeholder?: string
   colorFocus?: boolean
   loading?: boolean
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   contrast?: 'default' | 'default-contrast'
   error?: string | boolean
   textValue?: (fileList?: FileList | null) => string

diff --git a/src/plugins/components/input-file-regular/input-file-regular.variants.ts b/src/plugins/components/input-file-regular/input-file-regular.variants.ts
@@ -12,6 +12,7 @@ export const size = {
   sm: 'nui-input-sm',
   md: 'nui-input-md',
   lg: 'nui-input-lg',
+  xl: 'nui-input-xl',
 } as const satisfies InputFileRegularVariant<'size'>
 
 export const contrast = {