feat(ButtonAction): rename shape prop to rounded, update stories

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)

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
 
 <br />
 
-### Shape
+### Rounded
 
 Action button shapes allow you to change the border radiuses.
 

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`
       <span>Using the slot</span>
     `,

src/plugins/components/button-action/button-action.types.ts

@@ -2,7 +2,7 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface ButtonActionProps extends Record<string, unknown> {
   label?: string
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   loading?: boolean
   color?:
     | 'default'

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',