feat: add _list_ attribute to text-field (#532)

telekom · Aug 23, 2021 · 4f50b6a · 4f50b6a
1 parent 952218d
commit 4f50b6a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md
@@ -37,13 +37,11 @@
 ### Depends on
 
 - [scale-icon-action-success](../icons/action-success)
-- [scale-icon-action-indeterminate](../icons/action-indeterminate)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-checkbox --> scale-icon-action-success
-  scale-checkbox --> scale-icon-action-indeterminate
   scale-data-grid --> scale-checkbox
   style scale-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
@@ -82,7 +82,6 @@ graph TD;
   scale-menu-flyout-item --> scale-icon-action-success
   scale-menu-flyout-item --> scale-icon-navigation-right
   scale-checkbox --> scale-icon-action-success
-  scale-checkbox --> scale-icon-action-indeterminate
   scale-dropdown --> scale-icon-navigation-collapse-down
   scale-tag --> scale-icon-action-close
   style scale-data-grid fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
@@ -14,6 +14,7 @@
 | `helperText`  | `helper-text` | (optional) Input helper text            | `string`                                                                              | `''`        |
 | `inputId`     | `input-id`    | (optional) Input checkbox id            | `string`                                                                              | `undefined` |
 | `label`       | `label`       | (optional) Input label                  | `string`                                                                              | `''`        |
+| `list`        | `list`        | (optional) input list                   | `string`                                                                              | `undefined` |
 | `maxLength`   | `max-length`  | (optional) Input max length             | `number`                                                                              | `undefined` |
 | `minLength`   | `min-length`  | (optional) Input min length             | `number`                                                                              | `undefined` |
 | `name`        | `name`        | (optional) Input name                   | `string`                                                                              | `''`        |

diff --git a/packages/components/src/components/text-field/text-field.spec.ts b/packages/components/src/components/text-field/text-field.spec.ts
@@ -45,7 +45,8 @@ describe('TextField', () => {
                  input-id ="input-text-field1"
                  transparent ="true"
                  styles ="styles"
-               </scale-text-field>`,
+                 list="datalist"
+              ></scale-text-field>`,
     });
 
     expect(specPage.rootInstance.type).toBe('email');
@@ -64,6 +65,7 @@ describe('TextField', () => {
     expect(specPage.rootInstance.styles).toBe('styles');
     expect(specPage.rootInstance.inputId).toBe('input-text-field1');
     expect(specPage.rootInstance.hasFocus).toBe(false);
+    expect(specPage.rootInstance.list).toBe('datalist');
   });
 
   it('should handle focus with right hasFocus state', async () => {

diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -72,6 +72,8 @@ export class TextField {
   @Prop() inputId?: string;
   /** (optional) input background transparent */
   @Prop() transparent?: boolean;
+  /** (optional) input list */
+  @Prop() list?: string;
 
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
@@ -100,6 +102,7 @@ export class TextField {
   // because we get unwanted `scaleChange` events
   // because how we keep this.value up-to-date for type="select"
   // `this.value = selectedValue`
+
   emitChange() {
     this.scaleChange.emit({
       value: this.value == null ? this.value : this.value.toString(),
@@ -160,6 +163,7 @@ export class TextField {
             minLength={this.minLength}
             maxLength={this.maxLength}
             id={this.inputId}
+            list={this.list}
             onInput={this.handleInput}
             onChange={this.handleChange}
             onFocus={this.handleFocus}