From 06f085f4facfd39fc5743bdfaccfd01b7c95091d Mon Sep 17 00:00:00 2001 From: Driss Chelouati Date: Tue, 5 Dec 2023 15:31:32 +0100 Subject: [PATCH] feat(ButtonAction): rename shape prop to rounded, update stories --- .../button-action/button-action.component.ts | 4 +- .../button-action/button-action.doc.mdx | 2 +- .../button-action/button-action.stories.ts | 80 +++++++++---------- .../button-action/button-action.types.ts | 2 +- .../button-action/button-action.variants.ts | 12 +-- 5 files changed, 50 insertions(+), 50 deletions(-) diff --git a/src/plugins/components/button-action/button-action.component.ts b/src/plugins/components/button-action/button-action.component.ts index 69105bf..44d19de 100644 --- a/src/plugins/components/button-action/button-action.component.ts +++ b/src/plugins/components/button-action/button-action.component.ts @@ -10,7 +10,7 @@ import * as variants from './button-action.variants' export const ButtonAction = ({ label, loading, - shape, + rounded, children, color = 'default', classes, @@ -23,7 +23,7 @@ export const ButtonAction = ({ 'nui-button-action', variants.color[color], loading && 'nui-button-loading', - shape && variants.shape[shape], + rounded && variants.rounded[rounded], classes?.wrapper, ] .filter(Boolean) diff --git a/src/plugins/components/button-action/button-action.doc.mdx b/src/plugins/components/button-action/button-action.doc.mdx index 5e0e614..09f1767 100644 --- a/src/plugins/components/button-action/button-action.doc.mdx +++ b/src/plugins/components/button-action/button-action.doc.mdx @@ -18,7 +18,7 @@ Buttons are an essential part of any application. Shuriken UI action buttons can
-### Shape +### Rounded Action button shapes allow you to change the border radiuses. diff --git a/src/plugins/components/button-action/button-action.stories.ts b/src/plugins/components/button-action/button-action.stories.ts index 49dccff..56889fc 100644 --- a/src/plugins/components/button-action/button-action.stories.ts +++ b/src/plugins/components/button-action/button-action.stories.ts @@ -34,9 +34,9 @@ const meta = { ], defaultValue: 'default', }, - shape: { + rounded: { control: { type: 'select' }, - options: ['straight', 'rounded', 'smooth', 'curved', 'full'], + options: ['none', 'sm', 'md', 'lg', 'full'], defaultValue: 'straight', }, onClick: { action: 'onClick' }, @@ -56,42 +56,42 @@ export const Solid: Story = { label: 'Action', // set default values used for UI preview loading: false, - shape: 'rounded', + rounded: 'sm', }, } // #endregion -// #region Shapes +// #region Rounded export const Straight: Story = { - name: 'Shape: straight', + name: 'Rounded: none', args: { label: 'Button', - shape: 'straight', + rounded: 'none', }, } export const Rounded: Story = { - name: 'Shape: rounded', + name: 'Rounded: sm', args: { - shape: 'rounded', + rounded: 'sm', label: 'Button', }, } export const Smooth: Story = { - name: 'Shape: smooth', + name: 'Rounded: md', args: { - shape: 'smooth', + rounded: 'md', label: 'Button', }, } export const Curved: Story = { - name: 'Shape: curved', + name: 'Rounded: lg', args: { - shape: 'curved', + rounded: 'lg', label: 'Button', }, } export const Full: Story = { - name: 'Shape: full', + name: 'Rounded: full', args: { shape: 'full', label: 'Button', @@ -106,7 +106,7 @@ export const ColorDefault: Story = { color: 'default', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } @@ -116,7 +116,7 @@ export const ColorMuted: Story = { color: 'muted', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } @@ -126,7 +126,7 @@ export const ColorPrimary: Story = { color: 'primary', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } @@ -136,7 +136,7 @@ export const ColorInfo: Story = { color: 'info', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } @@ -146,7 +146,7 @@ export const ColorSuccess: Story = { color: 'success', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } @@ -156,7 +156,7 @@ export const ColorWarning: Story = { color: 'warning', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } @@ -166,48 +166,48 @@ export const ColorDanger: Story = { color: 'danger', label: 'Button', loading: false, - shape: 'rounded', + rounded: 'sm', }, } // #endregion // #region State: loading export const StraightLoading: Story = { - name: 'Shape: straight', + name: 'Rounded: none', args: { label: 'Button', - shape: 'straight', + rounded: 'none', loading: true, }, } export const RoundedLoading: Story = { - name: 'Shape: rounded', + name: 'Rounded: sm', args: { - shape: 'rounded', + rounded: 'sm', label: 'Button', loading: true, }, } export const SmoothLoading: Story = { - name: 'Shape: smooth', + name: 'Rounded: md', args: { - shape: 'smooth', + rounded: 'md', label: 'Button', loading: true, }, } export const CurvedLoading: Story = { - name: 'Shape: curved', + name: 'Rounded: lg', args: { - shape: 'curved', + rounded: 'lg', label: 'Button', loading: true, }, } export const FullLoading: Story = { - name: 'Shape: full', + name: 'Rounded: full', args: { - shape: 'full', + rounded: 'full', label: 'Button', loading: true, }, @@ -216,39 +216,39 @@ export const FullLoading: Story = { // #region State: disabled export const StraightDisabled: Story = { - name: 'Shape: straight', + name: 'Rounded: none', args: { label: 'Button', - shape: 'straight', + rounded: 'none', '?disabled': true, }, } export const RoundedDisabled: Story = { - name: 'Shape: rounded', + name: 'Rounded: sm', args: { - shape: 'rounded', + rounded: 'sm', label: 'Button', '?disabled': true, }, } export const SmoothDisabled: Story = { - name: 'Shape: smooth', + name: 'Rounded: md', args: { - shape: 'smooth', + rounded: 'md', label: 'Button', '?disabled': true, }, } export const CurvedDisabled: Story = { - name: 'Shape: curved', + name: 'Rounded: lg', args: { - shape: 'curved', + rounded: 'lg', label: 'Button', '?disabled': true, }, } export const FullDisabled: Story = { - name: 'Shape: full', + name: 'Rounded:', args: { shape: 'full', label: 'Button', @@ -261,7 +261,7 @@ export const FullDisabled: Story = { export const Slot: Story = { name: 'Slots: default slot', args: { - shape: 'rounded', + rounded: 'sm', children: html` Using the slot `, diff --git a/src/plugins/components/button-action/button-action.types.ts b/src/plugins/components/button-action/button-action.types.ts index 0041db8..fc95a64 100644 --- a/src/plugins/components/button-action/button-action.types.ts +++ b/src/plugins/components/button-action/button-action.types.ts @@ -2,7 +2,7 @@ import type { PropertyVariant } from '~/types/utils' export interface ButtonActionProps extends Record { label?: string - shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full' + rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full' loading?: boolean color?: | 'default' diff --git a/src/plugins/components/button-action/button-action.variants.ts b/src/plugins/components/button-action/button-action.variants.ts index a0b2a28..8af4091 100644 --- a/src/plugins/components/button-action/button-action.variants.ts +++ b/src/plugins/components/button-action/button-action.variants.ts @@ -1,12 +1,12 @@ import type { ButtonActionVariant } from './button-action.types' -export const shape = { - straight: '', - rounded: 'nui-button-rounded', - smooth: 'nui-button-smooth', - curved: 'nui-button-curved', +export const rounded = { + none: '', + sm: 'nui-button-rounded', + md: 'nui-button-smooth', + lg: 'nui-button-curved', full: 'nui-button-full', -} as const satisfies ButtonActionVariant<'shape'> +} as const satisfies ButtonActionVariant<'rounded'> export const color = { default: 'nui-button-default',