fix: (input group) Add type of input group and example (#2190)

* fix (input group): Add type of input group and example * update description Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>
SAP · Mar 20, 2020 · 473aa07 · 473aa07
1 parent 00baee2
commit 473aa07
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 2 deletions.
diff --git a/...input-group/examples/input-group-search-example/input-group-search-example.component.html b/...input-group/examples/input-group-search-example/input-group-search-example.component.html
@@ -8,4 +8,20 @@
     (addOnButtonClicked)="searchTerm = ''">
 </fd-input-group>
 <br/>
-<span>searchTerm: {{searchTerm}}</span>
+<span>Search term: {{searchTerm}}</span>
+
+<br/>
+<br/>
+<br/>
+
+<label fd-form-label>Search input with search type</label>
+<fd-input-group
+    [disabled]="false"
+    [(ngModel)]="searchTermSecond"
+    [glyph]="'search'"
+    [placeholder]="'Search'"
+    [button]="true"
+    [type]="'search'">
+</fd-input-group>
+<br/>
+<span>Search term: {{searchTermSecond}}</span>
diff --git a/...s/input-group/examples/input-group-search-example/input-group-search-example.component.ts b/...s/input-group/examples/input-group-search-example/input-group-search-example.component.ts
@@ -7,5 +7,6 @@ import { Component } from '@angular/core';
 export class InputGroupSearchExampleComponent {
 
     searchTerm = 'Search Term';
+    searchTermSecond = 'Search Term';
 
 }
diff --git a/apps/docs/src/app/core/component-docs/input-group/input-group-docs.component.html b/apps/docs/src/app/core/component-docs/input-group/input-group-docs.component.html
@@ -69,6 +69,7 @@
 </fd-docs-section-title>
 <description>
     This input group automatically shows a clear search button when the user has entered a value in the input.
+    The input type can be changed using <code>[type]="'search'"</code> inside the <code>InputGroup</code>.
 </description>
 <component-example>
     <fd-input-group-search-example></fd-input-group-search-example>

diff --git a/libs/core/src/lib/input-group/input-group.component.html b/libs/core/src/lib/input-group/input-group.component.html
@@ -53,7 +53,7 @@
            [class]="inShellbar ? 'fd-shellbar__input-group__input' : ''"
            fd-input-group-input
            [compact]="compact"
-           type="text"
+           [type]="type"
            *ngIf="!inputElement && !inputTemplate"
            placeholder="{{placeholder}}">
 </ng-template>
diff --git a/libs/core/src/lib/input-group/input-group.component.ts b/libs/core/src/lib/input-group/input-group.component.ts
@@ -86,6 +86,10 @@ export class InputGroupComponent implements ControlValueAccessor {
     @Input()
     buttonType: ButtonType;
 
+    /** The type of the input, used in Input Group. By default value is set to 'text' */
+    @Input()
+    type: string = 'text';
+
     /** Button options.  Options include 'emphasized' and 'light'. Leave empty for default.' */
     @Input()
     buttonOptions: ButtonOptions | ButtonOptions[] = 'light';