Merge pull request #383 from appwrite/feat-truncate-checkboxes

Author: ItzNotABug

v2/pink-sb/src/lib/selector/Base.svelte

@@ -4,23 +4,26 @@
     export let id: string | null | undefined;
     export let label: string | undefined;
     export let description: string | undefined;
+    export let truncate: boolean = false;
 </script>
 
 <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
     <slot />
     {#if label}
-        <Layout.Stack inline gap="xxs">
-            <label for={id}>
-                <Typography.Text variant="m-500">{label}</Typography.Text>
-            </label>
-            {#if description}
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary"
-                    >{description}</Typography.Text
-                >
-            {:else if $$slots.description}
-                <slot name="description"></slot>
-            {/if}
-        </Layout.Stack>
+        <div style={truncate ? 'min-width: 0' : undefined}>
+            <Layout.Stack inline gap="xxs">
+                <label for={id}>
+                    <Typography.Text variant="m-500" {truncate}>{label}</Typography.Text>
+                </label>
+                {#if description}
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary" {truncate}
+                        >{description}</Typography.Text
+                    >
+                {:else if $$slots.description}
+                    <slot name="description"></slot>
+                {/if}
+            </Layout.Stack>
+        </div>
     {/if}
 </Layout.Stack>
 

v2/pink-sb/src/lib/selector/Checkbox.svelte

@@ -11,6 +11,7 @@
     export let description: string | undefined = undefined;
     export let checked: boolean | 'indeterminate' = false;
     export let required: boolean = false;
+    export let truncate: boolean = false;
 
     /* disable checkbox but keep colors */
     export let showDisabledState: boolean = true;
@@ -32,7 +33,7 @@
     }
 </script>
 
-<Base {label} {id} {description}>
+<Base {label} {id} {description} {truncate}>
     <button
         bind:this={element}
         {disabled}

v2/pink-sb/src/lib/selector/Radio.svelte

@@ -18,9 +18,10 @@
     export let label: $$Props['label'] = undefined;
     export let description: string | undefined = undefined;
     export let radioInput: $$Props['radioInput'] = undefined;
+    export let truncate: boolean = false;
 </script>
 
-<Base {label} {id} {description}>
+<Base {label} {id} {description} {truncate}>
     <input
         type="radio"
         bind:this={radioInput}

v2/pink-sb/src/lib/selector/Switch.svelte

@@ -10,6 +10,7 @@
     export let label: string | undefined = undefined;
     export let description: string | undefined = undefined;
     export let required: boolean = false;
+    export let truncate: boolean = false;
 
     const dispatch = createEventDispatcher();
 
@@ -30,7 +31,7 @@
     $: localChecked.set(checked);
 </script>
 
-<Base {label} {id} {description}>
+<Base {label} {id} {description} {truncate}>
     <button {...$root} use:root {disabled}>
         <span class="thumb" />
         <input {...$input} use:input on:invalid on:change {id} {required} />

v2/pink-sb/src/stories/Checkbox.stories.svelte

@@ -51,3 +51,12 @@
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Disabled but checked" args={{ disabled: true, checked: true }} />
 <Story name="Focus" {play} />
+<Story
+    name="Truncated"
+    args={{
+        label: 'This is a very long label that should be truncated with an ellipsis when the truncate prop is enabled',
+        description:
+            'This is a very long description that should also be truncated with an ellipsis when the truncate prop is enabled',
+        truncate: true
+    }}
+/>

v2/pink-sb/src/stories/Radio.stories.svelte

@@ -49,3 +49,14 @@
         <Selector.Radio id="id3" label="Option 3" group="group" name="group" value="3" />
     </Layout.Stack>
 </Story>
+<Story
+    name="Truncated"
+    args={{
+        value: '1',
+        group: 'truncate-group',
+        label: 'This is a very long label that should be truncated with an ellipsis when the truncate prop is enabled',
+        description:
+            'This is a very long description that should also be truncated with an ellipsis when the truncate prop is enabled',
+        truncate: true
+    }}
+/>

v2/pink-sb/src/stories/Switch.stories.svelte

@@ -42,3 +42,12 @@
 <Story name="Checked" args={{ checked: true }} />
 <Story name="Disabled" args={{ disabled: true }} />
 <Story name="Focus" {play} />
+<Story
+    name="Truncated"
+    args={{
+        label: 'This is a very long label that should be truncated with an ellipsis when the truncate prop is enabled',
+        description:
+            'This is a very long description that should also be truncated with an ellipsis when the truncate prop is enabled',
+        truncate: true
+    }}
+/>