Merge pull request #52 from hyvor/textInputSize

texInput size #49
hyvor · Dec 26, 2023 · 639ac22 · 639ac22
2 parents 2a81999 + 79b0a89
commit 639ac22
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/lib/components/TextInput/TextInput.svelte b/src/lib/components/TextInput/TextInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     export let state : 'default' | 'error' | 'success' | 'warning' = 'default';
-    export let size : 'small' | 'medium' | 'large' = 'medium';
+    export let size : 'small' | 'medium' | 'large' | 'x-small' = 'medium';
     export let block : boolean = false;
     export let value: any = undefined;
 
@@ -101,6 +101,13 @@
         }
     }
 
+    .input-wrap.size-x-small {
+        padding: 0 15px;
+        height: 26px;
+        font-size: 12px;
+        --local-shadow-size: 1px;
+    }
+
     .input-wrap.size-small {
         padding: 0 15px;
         height: 30px;

diff --git a/src/routes/[[slug]]/docs/TextInput.svelte b/src/routes/[[slug]]/docs/TextInput.svelte
@@ -33,13 +33,15 @@
 <h3 id="sizes">Sizes</h3>
 
 <CodeBlock code={`
+    <TextInput placeholder="X-Small" size="x-small" />
     <TextInput placeholder="Small" size="small" />
     <TextInput placeholder="Medium (default)" />
     <TextInput placeholder="Large" size="large" />
 `} />
 
 <CodeResult>
     <div class="sizes">
+        <TextInput placeholder="X-Small" size="x-small" />
         <TextInput placeholder="Small" size="small" />
         <TextInput placeholder="Medium (default)" />
         <TextInput placeholder="Large" size="large" />