fix: Textarea component

wetix · Oct 26, 2021 · 6742705 · 6742705
1 parent 5cda6b6
commit 6742705
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 40 deletions.
diff --git a/components/textarea/src/Textarea.svelte b/components/textarea/src/Textarea.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
+  let className = "";
+  export { className as class };
   export let ref: null | HTMLTextAreaElement = null;
-  export let name = "";
-  export let form = "";
-  export let readonly = false;
-  export let disabled = false;
-  export let placeholder = "";
   export let cols = 80;
   export let rows = 4;
   export let maxlength = 100;
   export let value = "";
+  export let bordered = true;
   export let autoResize = true;
 
-  const onChange = (e: Event) => {
+  const handleChange = (e: Event) => {
     value = (e.target as HTMLTextAreaElement).value;
     if (autoResize && ref) {
       ref.style.height = "auto";
@@ -20,51 +18,69 @@
   };
 </script>
 
-<textarea
-  class="responsive-ui-textarea"
-  bind:this={ref}
-  {name}
-  {form}
-  {rows}
-  {cols}
-  {disabled}
-  {placeholder}
-  {value}
-  {readonly}
-  {maxlength}
-  on:blur
-  on:change
-  on:input={onChange}
-  on:input
-/>
-{#if maxlength > 0}
-  <slot name="text-length">
-    <div class="responsive-ui-textarea__text-length">
-      {value.length}/{maxlength} characters
-    </div>
-  </slot>
-{/if}
+<div class="resp-textarea-box">
+  <textarea
+    {...$$restProps}
+    class="resp-textarea {className}"
+    class:resp-textarea--bordered={bordered}
+    bind:this={ref}
+    {rows}
+    {cols}
+    {value}
+    on:blur
+    on:change
+    on:input={handleChange}
+    on:input
+  />
+  {#if maxlength > 0}
+    <slot>
+      <div class="resp-textarea__text-len">
+        {value.length}/{maxlength} characters
+      </div>
+    </slot>
+  {/if}
+</div>
 
 <style lang="scss">
-  .responsive-ui-textarea {
-    width: 100%;
-    font-size: var(--font-size, 14px);
-    font-family: var(--font-family, inherit);
+  .resp-textarea-box {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  .resp-textarea {
+    font-size: inherit;
+    font-family: inherit;
     color: #1a1b1c;
-    background: #f1f1f1;
+    background: #fff;
     border: none;
     outline: 0;
     resize: none;
-    border-radius: var(--border-radius, 5px);
-    padding: 10px;
+    padding: 8px;
     margin: 0;
+    border-radius: 3px;
     transition: all 0.5s;
 
+    &--bordered {
+      border: 1px solid #f1f1f1;
+    }
+
+    &:focus,
     &:hover {
-      border: none;
+      border-color: #fc4451;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba(252, 68, 81, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      background: #dcdcdc;
+      cursor: not-allowed;
     }
 
-    &__text-length {
+    &__text-len {
+      margin-top: 8px;
       display: block;
       text-align: right;
       font-size: var(--font-size-xs, 11px);

diff --git a/components/textarea/types/index.d.ts b/components/textarea/types/index.d.ts
@@ -1,15 +1,20 @@
 import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface TextareaProps {
+  id?: string;
+  title?: string;
   ref?: null | HTMLTextAreaElement;
   name?: string;
   value?: any;
   form?: string;
   cols?: number;
   rows?: number;
+  class?: string;
+  bordered?: boolean;
   maxlength?: number;
   disabled?: boolean;
   readonly?: boolean;
+  style?: string;
   placeholder?: string;
   autoResize?: boolean;
 }
@@ -20,9 +25,12 @@ export interface TextareaEvents {
   blur?: WindowEventMap["blur"];
 }
 
+export interface TextareaSlots {}
+
 declare class Textarea extends SvelteComponentTyped<
   TextareaProps,
-  TextareaEvents
+  TextareaEvents,
+  TextareaSlots
 > {}
 
 export default Textarea;
diff --git a/stories/Textarea.stories.svelte b/stories/Textarea.stories.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import Textarea from "../components/textarea/src/Textarea.svelte";
+</script>
+
+<Meta
+  title="Components/Textarea"
+  component={Textarea}
+  argTypes={{
+    placeholder: { control: "text" },
+    disabled: { control: "boolean" },
+    bordered: { control: "boolean" },
+    readonly: { control: "boolean" },
+  }}
+/>
+
+<Template let:args>
+  <Textarea {...args} on:click={args.onClick} />
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    placeholder: "Input your text...",
+  }}
+/>