feat(search): add input to be able to customize info label (#147)

Closes #21
akveo · Jan 20, 2018 · 12a55dc · 12a55dc
1 parent 4c10d2a
commit 12a55dc
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/docs/output.json b/docs/output.json
@@ -2430,6 +2430,15 @@
       "platform": null,
       "examples": [],
       "props": [
+        {
+          "kind": "input",
+          "platform": null,
+          "isStatic": false,
+          "type": "string",
+          "required": null,
+          "name": "hint",
+          "shortDescription": "Hint showing under the input field to improve user experience"
+        },
         {
           "kind": "input",
           "platform": null,
@@ -13679,4 +13688,4 @@
       "parent": "default"
     }
   }
-}
+}
diff --git a/e2e/search.e2e-spec.ts b/e2e/search.e2e-spec.ts
@@ -72,4 +72,16 @@ describe('nb-search', () => {
     expect(hasClass(browser.driver.switchTo().activeElement(), 'search-input')).toBeFalsy();
     expect(element(by.css('.search-input')).getAttribute('value')).toEqual('');
   });
+
+  it('hint for search customised successfully', () => {
+    element(by.css('#customized-search')).click();
+    expect(element(by.css('span'))).toBeTruthy();
+    expect(element.all(by.css('span')).get(0).getText()).toContain('Custom hint');
+  });
+
+  it('default hint for the search displayed', () => {
+    element(by.css('#default-search')).click();
+    expect(element(by.css('span'))).toBeTruthy();
+    expect(element.all(by.css('span')).get(1).getText()).toContain('Hit enter to search');
+  });
 });
diff --git a/src/app/search-test/search-test.component.ts b/src/app/search-test/search-test.component.ts
@@ -14,7 +14,9 @@ import { NbSearchService } from '@nebular/theme';
     <nb-layout>
       <nb-layout-header fixed>
         <a class="navbar-brand" href="#">ngx-admin</a>
-        <nb-search type="rotate-layout" tag="header-search"></nb-search>
+        <nb-search id="customized-search" type="rotate-layout" tag="header-search-customized" hint="Custom hint">
+        </nb-search>
+        <nb-search id="default-search" type="rotate-layout" tag="header-search-default"></nb-search>
       </nb-layout-header>
       <nb-layout-column>
         <nb-card>

diff --git a/src/framework/theme/components/search/search.component.ts b/src/framework/theme/components/search/search.component.ts
@@ -51,7 +51,7 @@ import { NbThemeService } from '../../services/theme.service';
               tabindex="-1"
               (blur)="tabOut.next($event)"/>
           </div>
-          <span class="info">Hit enter to search</span>
+          <span class="info">{{ hint }}</span>
         </form>
       </div>
     </div>
@@ -69,6 +69,7 @@ export class NbSearchFieldComponent {
 
   @Input() searchType: string;
   @Input() placeholder: string;
+  @Input() hint: string;
 
   @Output() searchClose = new EventEmitter();
   @Output() search = new EventEmitter();
@@ -171,6 +172,13 @@ export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   @Input() placeholder: string = 'Search...';
 
+  /**
+   * Hint showing under the input field to improve user experience
+   *
+   * @type {string}
+   */
+  @Input() hint: string = 'Hit enter to search';
+
   @HostBinding('class.show') showSearch: boolean = false;
 
   @ViewChild('attachedSearchContainer', { read: ViewContainerRef }) attachedSearchContainer: ViewContainerRef;
@@ -204,6 +212,7 @@ export class NbSearchComponent implements OnInit, AfterViewInit, OnDestroy {
     this.searchFieldComponentRef = componentRef;
     componentRef.instance.searchType = this.searchType;
     componentRef.instance.placeholder = this.placeholder;
+    componentRef.instance.hint = this.hint;
     componentRef.instance.searchClose.subscribe(() => {
       this.searchService.deactivateSearch(this.searchType, this.tag);
     });