feat: add solid style for CTag

Casual-UI · Aug 15, 2023 · a96aaba · a96aaba
1 parent 5c28787
commit a96aaba
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/.changeset/rude-pillows-kiss.md b/.changeset/rude-pillows-kiss.md
@@ -0,0 +1,5 @@
+---
+'@casual-ui/svelte': minor
+---
+
+feat: add solid style for tag
diff --git a/packages/docs/src/routes/features/components/basic/tag/+page.md b/packages/docs/src/routes/features/components/basic/tag/+page.md
@@ -12,6 +12,15 @@ componentName: CTag
 <CTag label="A secondary tag" theme="negative" />
 ```
 
+## Solid style
+
+```svelte live
+<CTag label="A primary solid tag" solid />
+<CTag label="A secondary solid tag" theme="secondary" solid />
+<CTag label="A secondary solid tag" theme="warning" solid />
+<CTag label="A secondary solid tag" theme="negative" solid />
+```
+
 ## Sizes
 
 ```svelte live
@@ -20,6 +29,21 @@ componentName: CTag
 <CTag label="A md (default) tag" />
 <CTag label="A lg tag" size="lg" />
 <CTag label="A xl tag" size="xl" />
+<CTag label="A xs tag" size="xs" solid />
+<CTag label="A sm tag" size="sm" solid />
+<CTag label="A md (default) tag" solid />
+<CTag label="A lg tag" size="lg" solid />
+<CTag label="A xl tag" size="xl" solid />
+```
+
+## Rounded
+
+```svelte live
+<CTag label="A xs rounded tag" theme="secondary" rounded solid size="xs" />
+<CTag label="A xs rounded tag" theme="warning" rounded size="sm" />
+<CTag label="A rounded tag" rounded />
+<CTag label="A lg rounded tag" theme="negative" size="lg" rounded solid />
+<CTag label="A xl rounded tag" theme="secondary" size="xl" rounded />
 ```
 
 ## Closeable
@@ -28,14 +52,17 @@ componentName: CTag
 <script lang="ts">
   import { openNotification } from '@casual-ui/svelte'
 
-  function onClose() {
+  function onClose(theme) {
     openNotification({
       title: 'Hi, there',
-      theme: 'secondary',
+      theme,
       message: 'You\'ve clicked the close icon',
     })
   }
 </script>
 
-<CTag label="A closeable tag" theme="secondary" closeable on:close={onClose} />
+<CTag label="A closeable tag" solid closeable on:close={() => onClose('primary')} />
+<CTag label="A closeable tag" theme="secondary" closeable on:close={() => onClose('secondary')} />
+<CTag label="A closeable tag" solid closeable theme="warning" on:close={() => onClose('warning')} />
+<CTag label="A closeable tag" theme="negative" closeable on:close={() => onClose('negative')} />
 ```
diff --git a/packages/ui/src/components/CTag.svelte b/packages/ui/src/components/CTag.svelte
@@ -28,6 +28,12 @@
    */
   export let rounded = false
 
+  /**
+   * Determine whether the tag has a solid style or not
+   * @type {boolean}
+   */
+  export let solid = false
+
   /**
    * If set to `true`. The tag will have a close icon which can be clicked an emit `close` event
    * @type {boolean}
@@ -56,6 +62,7 @@
     `c-px-${$contextSize}`,
     rounded && `c-rounded-${$contextSize}`,
   )}"
+  class:c-tag--solid="{solid}"
 >
   <div class="c-tag--prefix">
     <!-- Customize prefix content -->