textarea-<size> (saadeghi#1542)

* textarea-<size> * docs: ✏️ textarea-<size>
inorganik · Jan 25, 2023 · 8c89739 · 8c89739
1 parent 498002b
commit 8c89739
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 10 deletions.
diff --git a/src/components/unstyled/input.css b/src/components/unstyled/input.css
@@ -9,6 +9,7 @@
   }
   > *,
   > .input,
+  > .textarea,
   > .select {
     @apply rounded-none;
   }

diff --git a/src/components/unstyled/textarea.css b/src/components/unstyled/textarea.css
@@ -1,6 +1,4 @@
 .textarea {
-  @apply flex-shrink transition duration-200 ease-in-out;
-  & {
-    @apply px-4 py-2  text-sm leading-loose min-h-12;
-  }
+  @apply flex-shrink transition duration-200 ease-in-out min-h-12;
+  @apply py-2 px-4 text-sm leading-loose;
 }
diff --git a/src/docs/src/routes/components/textarea.svelte.md b/src/docs/src/routes/components/textarea.svelte.md
@@ -25,6 +25,10 @@ data="{[
   { type:'modifier', class: 'textarea-success', desc: 'Adds `success` color to textarea' },
   { type:'modifier', class: 'textarea-warning', desc: 'Adds `warning` color to textarea' },
   { type:'modifier', class: 'textarea-error', desc: 'Adds `error` color to textarea' },
+  { type:'responsive', class: 'textarea-lg', desc: 'Large size for textarea' },
+  { type:'responsive', class: 'textarea-md', desc: 'Medium (default) size for textarea' },
+  { type:'responsive', class: 'textarea-sm', desc: 'Small size for textarea' },
+  { type:'responsive', class: 'textarea-xs', desc: 'Extra small size for textarea' },
 ]}"
 />
 
@@ -63,37 +67,37 @@ data="{[
   <label class="label">
     <span class="label-text">Your bio</span>
     <span class="label-text-alt">Alt label</span>
-  </label> 
+  </label>
   <textarea class="textarea h-24 textarea-bordered" placeholder="Bio"></textarea>
   <label class="label">
     <span class="label-text-alt">Your bio</span>
     <span class="label-text-alt">Alt label</span>
-  </label> 
+  </label>
 </div>
 <pre slot="html" use:replace={{ to: $prefix }}>{
 `<div class="$$form-control">
   <label class="$$label">
     <span class="$$label-text">Your bio</span>
     <span class="$$label-text-alt">Alt label</span>
-  </label> 
+  </label>
   <textarea class="$$textarea $$textarea-bordered h-24" placeholder="Bio"></textarea>
   <label class="$$label">
     <span class="$$label-text-alt">Your bio</span>
     <span class="$$label-text-alt">Alt label</span>
-  </label> 
+  </label>
 </div>`
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<div className="$$form-control">
   <label className="$$label">
     <span className="$$label-text">Your bio</span>
     <span className="$$label-text-alt">Alt label</span>
-  </label> 
+  </label>
   <textarea className="$$textarea $$textarea-bordered h-24" placeholder="Bio"></textarea>
   <label className="$$label">
     <span className="$$label-text-alt">Your bio</span>
     <span className="$$label-text-alt">Alt label</span>
-  </label> 
+  </label>
 </div>`
 }</pre>
 </Component>
@@ -168,6 +172,38 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Sizes">
+<div class="flex flex-col gap-4 w-full items-center">
+  <textarea placeholder="Bio" class="textarea textarea-bordered textarea-xs w-full max-w-xs" ></textarea>
+  <textarea placeholder="Bio" class="textarea textarea-bordered textarea-sm w-full max-w-xs" ></textarea>
+  <textarea placeholder="Bio" class="textarea textarea-bordered textarea-md w-full max-w-xs" ></textarea>
+  <textarea placeholder="Bio" class="textarea textarea-bordered textarea-lg w-full max-w-xs" ></textarea>
+</div>
+
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`
+<!-- xs -->
+<textarea placeholder="Bio" class="$$textarea $$textarea-bordered $$textarea-xs w-full max-w-xs" ></textarea>
+<!-- sm -->
+<textarea placeholder="Bio" class="$$textarea $$textarea-bordered $$textarea-sm w-full max-w-xs" ></textarea>
+<!-- md -->
+<textarea placeholder="Bio" class="$$textarea $$textarea-bordered $$textarea-md w-full max-w-xs" ></textarea>
+<!-- lg -->
+<textarea placeholder="Bio" class="$$textarea $$textarea-bordered $$textarea-lg w-full max-w-xs" ></textarea>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`
+<!-- xs -->
+<textarea placeholder="Bio" className="$$textarea $$textarea-bordered $$textarea-xs w-full max-w-xs" ></textarea>
+<!-- sm -->
+<textarea placeholder="Bio" className="$$textarea $$textarea-bordered $$textarea-sm w-full max-w-xs" ></textarea>
+<!-- md -->
+<textarea placeholder="Bio" className="$$textarea $$textarea-bordered $$textarea-md w-full max-w-xs" ></textarea>
+<!-- lg -->
+<textarea placeholder="Bio" className="$$textarea $$textarea-bordered $$textarea-lg w-full max-w-xs" ></textarea>`
+}</pre>
+</Component>
+
 <Component title="Disabled">
 <textarea class="textarea" placeholder="Bio" disabled></textarea>
 <pre slot="html" use:replace={{ to: $prefix }}>{

diff --git a/src/utilities/unstyled/textarea.css b/src/utilities/unstyled/textarea.css
@@ -0,0 +1,14 @@
+.textarea {
+  &-xs {
+    @apply py-1 px-2 text-xs leading-relaxed;
+  }
+  &-sm {
+    @apply py-1 px-3 text-sm leading-8;
+  }
+  &-md {
+    @apply py-3 px-4 text-sm leading-loose;
+  }
+  &-lg {
+    @apply py-4 px-6 text-lg leading-loose;
+  }
+}