diff --git a/docs/output.json b/docs/output.json index 29e438476e..37b8fb7416 100644 --- 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" } } -} \ No newline at end of file +} diff --git a/e2e/search.e2e-spec.ts b/e2e/search.e2e-spec.ts index d438e4a339..e186560b85 100644 --- 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 index b430d0f4fd..5cf40de448 100644 --- 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'; ngx-admin - + + + diff --git a/src/framework/theme/components/search/search.component.ts b/src/framework/theme/components/search/search.component.ts index 3693ab3a47..e3351fedfb 100644 --- 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)"/> - Hit enter to search + {{ hint }} @@ -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); });