feat(BaseButtonAction): add colors, add contrast colors, update class…

…es naming
shuriken-ui · Feb 21, 2024 · 215ef45 · 215ef45
1 parent f1ad68c
commit 215ef45
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 4 deletions.
diff --git a/.playground/pages/tests/base/button-action.vue b/.playground/pages/tests/base/button-action.vue
@@ -149,6 +149,57 @@ definePageMeta({
         </div>
       </NuiPreview>
 
+      <NuiPreview
+        title="Color: light"
+        description="Button action component light color"
+      >
+        <div class="flex flex-wrap items-end gap-2">
+          <BaseButtonAction rounded="none" color="light">
+            Action
+          </BaseButtonAction>
+          <BaseButtonAction rounded="sm" color="light">Action</BaseButtonAction>
+          <BaseButtonAction rounded="md" color="light">Action</BaseButtonAction>
+          <BaseButtonAction rounded="lg" color="light">Action</BaseButtonAction>
+          <BaseButtonAction rounded="full" color="light">
+            Action
+          </BaseButtonAction>
+        </div>
+      </NuiPreview>
+
+      <NuiPreview
+        title="Color: dark"
+        description="Button action component dark color"
+      >
+        <div class="flex flex-wrap items-end gap-2">
+          <BaseButtonAction rounded="none" color="dark">
+            Action
+          </BaseButtonAction>
+          <BaseButtonAction rounded="sm" color="dark">Action</BaseButtonAction>
+          <BaseButtonAction rounded="md" color="dark">Action</BaseButtonAction>
+          <BaseButtonAction rounded="lg" color="dark">Action</BaseButtonAction>
+          <BaseButtonAction rounded="full" color="dark">
+            Action
+          </BaseButtonAction>
+        </div>
+      </NuiPreview>
+
+      <NuiPreview
+        title="Color: black"
+        description="Button action component black color"
+      >
+        <div class="flex flex-wrap items-end gap-2">
+          <BaseButtonAction rounded="none" color="black">
+            Action
+          </BaseButtonAction>
+          <BaseButtonAction rounded="sm" color="black">Action</BaseButtonAction>
+          <BaseButtonAction rounded="md" color="black">Action</BaseButtonAction>
+          <BaseButtonAction rounded="lg" color="black">Action</BaseButtonAction>
+          <BaseButtonAction rounded="full" color="black">
+            Action
+          </BaseButtonAction>
+        </div>
+      </NuiPreview>
+
       <NuiPreview
         title="State: loading"
         description="Button action component in loading state"

diff --git a/components/base/BaseButtonAction.vue b/components/base/BaseButtonAction.vue
@@ -33,7 +33,12 @@ const props = withDefaults(
      */
     color?:
       | 'default'
+      | 'default-contrast'
       | 'muted'
+      | 'muted-contrast'
+      | 'light'
+      | 'dark'
+      | 'black'
       | 'primary'
       | 'info'
       | 'success'
@@ -75,15 +80,20 @@ const color = useNuiDefaultProperty(props, 'BaseButtonAction', 'color')
 
 const radiuses = {
   none: '',
-  sm: 'nui-button-rounded',
-  md: 'nui-button-smooth',
-  lg: 'nui-button-curved',
-  full: 'nui-button-full',
+  sm: 'nui-button-rounded-sm',
+  md: 'nui-button-rounded-md',
+  lg: 'nui-button-rounded-lg',
+  full: 'nui-button-rounded-full',
 } as Record<string, string>
 
 const colors = {
   default: 'nui-button-default',
+  'default-contrast': 'nui-button-default-contrast',
   muted: 'nui-button-muted',
+  'muted-contrast': 'nui-button-muted-contrast',
+  light: 'nui-button-light',
+  dark: 'nui-button-dark',
+  black: 'nui-button-black',
   primary: 'nui-button-primary',
   info: 'nui-button-info',
   success: 'nui-button-success',