Skip to content

Commit

Permalink
feat(ButtonClose): add xl size
Browse files Browse the repository at this point in the history
  • Loading branch information
driss-chelouati committed Jun 4, 2024
1 parent 94466a9 commit 30c1f92
Show file tree
Hide file tree
Showing 6 changed files with 26 additions and 2 deletions.
4 changes: 4 additions & 0 deletions src/plugins/components/button-close/button-close.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export const defaultConfig = {
outer: '12',
inner: '5',
},
xl: {
outer: '14',
inner: '6',
},
},
rounded: {
none: 'rounded-none',
Expand Down
1 change: 1 addition & 0 deletions src/plugins/components/button-close/button-close.doc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Close buttons can have different sizes. Below is an example of the available siz
<Story of={ButtonCloseStories.SizeSm} />
<Story of={ButtonCloseStories.SizeMd} />
<Story of={ButtonCloseStories.SizeLg} />
<Story of={ButtonCloseStories.SizeXl} />
</div>

<br />
Expand Down
11 changes: 10 additions & 1 deletion src/plugins/components/button-close/button-close.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const meta = {
argTypes: {
size: {
control: { type: 'select' },
options: ['xs', 'sm', 'md', 'lg'],
options: ['xs', 'sm', 'md', 'lg', 'xl'],
defaultValue: 'md',
},
color: {
Expand Down Expand Up @@ -92,6 +92,15 @@ export const SizeLg: Story = {
rounded: 'md',
},
}

export const SizeXl: Story = {
name: 'Size: xl',
args: {
color: 'muted',
size: 'xl',
rounded: 'md',
},
}
// #endregion

// #region Color: default
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/components/button-close/button-close.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { PropertyVariant } from '~/types/utils'

export interface ButtonCloseProps extends Record<string, unknown> {
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
size?: 'xs' | 'sm' | 'md' | 'lg'
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
color?:
| 'default'
| 'default-contrast'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const size = {
sm: 'nui-button-sm',
md: 'nui-button-md',
lg: 'nui-button-lg',
xl: 'nui-button-xl',
} as const satisfies ButtonCloseVariant<'size'>

export const color = {
Expand Down
9 changes: 9 additions & 0 deletions src/plugins/components/button-close/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,15 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},
//Size:xl
'&.nui-button-xl': {
[`@apply h-${config.size.xl.outer} w-${config.size.xl.outer}`]: {},
//Icon
'.nui-button-icon': {
[`@apply h-${config.size.xl.inner} w-${config.size.xl.inner} fill-current`]:
{},
},
},
//Rounded:sm
'&.nui-button-rounded-sm': {
[`@apply ${config.rounded.sm}`]: {},
Expand Down

0 comments on commit 30c1f92

Please sign in to comment.