fix: badge and cell wrap

appwrite · Sep 5, 2024 · 3df61bd · 3df61bd
1 parent 2fdacf3
commit 3df61bd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/v2/pink-sb/package.json b/v2/pink-sb/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@appwrite.io/pink-svelte",
-    "version": "1.0.0-next.33",
+    "version": "1.0.0-next.34",
     "scripts": {
         "dev": "storybook dev -p 6006",
         "dev:package": "svelte-kit sync && svelte-package --watch",

diff --git a/v2/pink-sb/src/lib/Badge.svelte b/v2/pink-sb/src/lib/Badge.svelte
@@ -4,7 +4,7 @@
     type $$Props = HTMLAttributes<HTMLSpanElement> & {
         content: string;
     } & Partial<{
-            size: 'small' | 'medium';
+            size: 'x-small' | 'small' | 'medium';
             variant: 'primary' | 'secondary' | 'accent';
             type: 'success' | 'warning' | 'error' | undefined;
         }>;
@@ -68,8 +68,14 @@
         font-family: var(--p-badge-font-family);
         font-size: var(--p-badge-font-size);
         font-style: normal;
-        font-weight: 500;
-        line-height: 140%;
+        font-weight: 400;
+        line-height: 130%;
+
+        &.x-small {
+            --p-badge-font-size: var(--font-size-xs);
+            --p-badge-padding-block: var(--space-1);
+            --p-badge-padding-inline: var(--space-2);
+        }
 
         &.small {
             --p-badge-padding-block: var(--space-0);

diff --git a/v2/pink-sb/src/lib/table/Cell.svelte b/v2/pink-sb/src/lib/table/Cell.svelte
@@ -17,6 +17,8 @@
         padding-block: var(--space-4);
         border-bottom: var(--border-width-s) solid var(--color-border-neutral);
         width: var(--p-cell-width);
+        min-width: 100%;
+        white-space: nowrap;
 
         > span {
             display: flex;