feat(ld-input): multiline mode

emdgroup-liquid · Jun 18, 2021 · 0303f41 · 0303f41
1 parent b06de8f
commit 0303f41
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 15 deletions.
diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
@@ -29,19 +29,24 @@ ld-input {
   line-height: 1;
   min-height: var(--ld-sp-40);
 
-  > :where(:not(input)) {
+  > :where(:not(input):not(textarea)) {
     user-select: none;
   }
 
-  > :where(:not(input):first-child) {
+  > :where(:not(input):not(textarea):first-child) {
     margin-left: var(--ld-input-padding-x);
   }
 
-  > :where(:not(input):last-child) {
+  > :where(:not(input):not(textarea):last-child) {
     margin-right: var(--ld-input-padding-x);
   }
 
   > input {
+    max-height: var(--ld-input-max-height);
+  }
+
+  > input,
+  > textarea {
     padding: var(--ld-input-padding-top) var(--ld-input-padding-x)
       var(--ld-input-padding-bottom);
     font: var(--ld-typo-body-m);
@@ -50,7 +55,6 @@ ld-input {
     width: 100%;
     border: 0;
     border-radius: var(--ld-br-m);
-    max-height: var(--ld-input-max-height);
     outline: none;
     -webkit-appearance: none;
 
@@ -235,7 +239,8 @@ ld-input,
       background-color: var(--ld-input-transparent);
     }
 
-    input {
+    input,
+    textarea {
       color: currentColor;
       caret-color: transparent;
 
@@ -265,7 +270,8 @@ ld-input,
   > .ld-input--invalid:not([disabled]):not([aria-disabled]) {
     box-shadow: inset 0 0 0 0.1rem var(--ld-col-rr-default);
 
-    > input {
+    > input,
+    > textarea {
       color: var(--ld-col-rr-default);
 
       &::placeholder {
@@ -281,7 +287,8 @@ ld-input,
     &:focus-within {
       background-color: var(--ld-col-wht);
 
-      > input {
+      > input,
+      > textarea {
         color: var(--ld-col-rblck-default);
       }
     }

diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -2,6 +2,7 @@ import '../../components' // type definitions for type checks and intelliSense
 import { Component, Element, h, Host, Prop } from '@stencil/core'
 import { cloneAttributes } from '../../utils/cloneAttributes'
 import { JSXBase } from '@stencil/core/internal'
+import TextareaHTMLAttributes = JSXBase.TextareaHTMLAttributes
 import InputHTMLAttributes = JSXBase.InputHTMLAttributes
 
 /**
@@ -28,7 +29,7 @@ import InputHTMLAttributes = JSXBase.InputHTMLAttributes
 export class LdInput {
   @Element() el: HTMLInputElement
 
-  private input!: HTMLInputElement
+  private input!: HTMLInputElement | HTMLTextAreaElement
 
   /** Input tone. Use `'dark'` on white backgrounds. Default is a light tone. */
   @Prop() tone: 'dark'
@@ -45,6 +46,12 @@ export class LdInput {
   /** The input type. */
   @Prop() type: string
 
+  /**
+   * Uses textarea instead of input internally. Setting this attribute to true
+   * disables the attribute type and both slots.
+   */
+  @Prop() multiline: boolean
+
   private handleBlur(ev) {
     setTimeout(() => {
       this.el.dispatchEvent(ev)
@@ -76,6 +83,29 @@ export class LdInput {
     if (this.tone) cl += ` ld-input--${this.tone}`
     if (this.invalid) cl += ' ld-input--invalid'
 
+    if (this.multiline) {
+      return (
+        <Host class={cl} onClick={this.handleClick.bind(this)}>
+          <textarea
+            ref={(el) => (this.input = el as HTMLTextAreaElement)}
+            onInput={this.handleInput.bind(this)}
+            placeholder={this.placeholder}
+            onBlur={this.handleBlur.bind(this)}
+            onFocus={this.handleFocus.bind(this)}
+            {...cloneAttributes<TextareaHTMLAttributes<HTMLInputElement>>(
+              this.el
+            )}
+            value={this.value}
+          />
+          {this.type === 'file' && (
+            <span class="ld-input__placeholder">
+              {this.input?.value || this.placeholder}
+            </span>
+          )}
+        </Host>
+      )
+    }
+
     return (
       <Host class={cl} onClick={this.handleClick.bind(this)}>
         <slot name="start"></slot>

diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md
@@ -233,6 +233,20 @@ Triggerts associated keyboard in supporting browsers and devices with dynamic ke
 </div>
 {% endexample %}
 
+### Multiline (as textarea)
+
+The `multiline` attribute transforms the component to a textarea element instead of an input element internally. Setting this attribute to `true` disables the attribute `type` and both slots.
+
+{% example %}
+<ld-input placeholder="Tell us your story..." multiline rows="5" cols="33"></ld-input>
+
+<!-- CSS component -->
+
+<div class="ld-input">
+  <textarea placeholder="Tell us your story..." rows="5" cols="33"></textarea>
+</div>
+{% endexample %}
+
 ### With label
 
 {% example %}
@@ -714,13 +728,14 @@ The `ld-input` web component does not provide any properties or methods for vali
 
 ## Properties
 
-| Property      | Attribute     | Description                                                                 | Type      | Default     |
-| ------------- | ------------- | --------------------------------------------------------------------------- | --------- | ----------- |
-| `invalid`     | `invalid`     | Set this property to `true` in order to mark the field visually as invalid. | `boolean` | `undefined` |
-| `placeholder` | `placeholder` | The input placeholder.                                                      | `string`  | `undefined` |
-| `tone`        | `tone`        | Input tone. Use `'dark'` on white backgrounds. Default is a light tone.     | `"dark"`  | `undefined` |
-| `type`        | `type`        | The input type.                                                             | `string`  | `undefined` |
-| `value`       | `value`       | The input value.                                                            | `string`  | `undefined` |
+| Property      | Attribute     | Description                                                                                                            | Type      | Default     |
+| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `invalid`     | `invalid`     | Set this property to `true` in order to mark the field visually as invalid.                                            | `boolean` | `undefined` |
+| `multiline`   | `multiline`   | Uses textarea instead of input internally. Setting this attribute to true disables the attribute type and both slots. | `boolean` | `undefined` |
+| `placeholder` | `placeholder` | The input placeholder.                                                                                                 | `string`  | `undefined` |
+| `tone`        | `tone`        | Input tone. Use `'dark'` on white backgrounds. Default is a light tone.                                                | `"dark"`  | `undefined` |
+| `type`        | `type`        | The input type.                                                                                                        | `string`  | `undefined` |
+| `value`       | `value`       | The input value.                                                                                                       | `string`  | `undefined` |
 
 
 ## Slots
@@ -731,6 +746,19 @@ The `ld-input` web component does not provide any properties or methods for vali
 | `"start"` | The purpose of this slot is to add icons or buttons to the input, __justifying the item to the end of the component__. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right.   |
 
 
+## Dependencies
+
+### Used by
+
+- docs-search
+
+### Graph
+```mermaid
+graph TD;
+  docs-search --> ld-input
+  style ld-input fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*