Merge pull request #932 from matuzalemsteles/issue-928

Add new `searchPlaceholder` option to customize search placeholder | Fixes #928
liferay · May 25, 2018 · 416f530 · 416f530
2 parents ea9e9e9 + 97ece20
commit 416f530
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 5 deletions.
diff --git a/packages/clay-isomorphic/fixtures/expected/ClayManagementToolbar.searchInput b/packages/clay-isomorphic/fixtures/expected/ClayManagementToolbar.searchInput
@@ -1 +1 @@
-<div class="input-group"><div class="input-group-item"><input aria-label="Search"class="form-control input-group-inset input-group-inset-after" name="" placeholder="search-for" ref="search" type="text" /><span class="input-group-inset-item input-group-inset-item-after"><button class="btn navbar-breakpoint-d-none btn-unstyled"aria-label="times"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-times"focusable="false"><title>times</title><use xlink:href="spritemap.svg#times" /></svg></button><button class="btn btn-unstyled"aria-label="search"type="submit"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-search"focusable="false"><title>search</title><use xlink:href="spritemap.svg#search" /></svg></button></span></div></div>
+<div class="input-group"><div class="input-group-item"><input aria-label="Search"class="form-control input-group-inset input-group-inset-after" name=""placeholder="search-for"ref="search" type="text" /><span class="input-group-inset-item input-group-inset-item-after"><button class="btn navbar-breakpoint-d-none btn-unstyled"aria-label="times"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-times"focusable="false"><title>times</title><use xlink:href="spritemap.svg#times" /></svg></button><button class="btn btn-unstyled"aria-label="search"type="submit"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-search"focusable="false"><title>search</title><use xlink:href="spritemap.svg#search" /></svg></button></span></div></div>
diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -343,6 +343,7 @@ <h4>With search results bar with active state</h4>
 			filterItems: filterItems,
 			searchFormName: 'mySearchName',
 			searchInputName: 'mySearchInputName',
+			searchInputPlaceholder: 'Search thread...',
 			selectable: true,
 			showInfoButton: true,
 			sortingOrder: 'asc',

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
@@ -358,6 +358,15 @@ ClayManagementToolbar.STATE = {
 	 */
 	searchInputName: Config.string(),
 
+	/**
+	 * Text of the search placeholder.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayManagementToolbar
+	 * @type {?(string|undefined)}
+	 */
+	searchInputPlaceholder: Config.string(),
+
 	/**
 	 * Value of the search input.
 	 * @default undefined

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
@@ -80,6 +80,7 @@
 	{@param? searchFormMethod: string}
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
+	{@param? searchInputPlaceholder: string}
 	{@param? searchValue: string}
 	{@param? selectable: bool}
 	{@param? selectedItems: number}
@@ -151,6 +152,7 @@
 				{param searchFormMethod: $searchFormMethod /}
 				{param searchFormName: $searchFormName /}
 				{param searchInputName: $searchInputName /}
+				{param searchInputPlaceholder: $searchInputPlaceholder /}
 				{param searchValue: $searchValue /}
 				{param selectable: $selectable /}
 				{param showAdvancedSearch: $showAdvancedSearch /}
@@ -456,6 +458,7 @@
 	{@param? searchFormMethod: string}
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
+	{@param? searchInputPlaceholder: string}
 	{@param? searchValue: string}
 	{@param? selectable: bool}
 	{@param? showAdvancedSearch: bool}
@@ -606,6 +609,7 @@
 								{param disabled: $disabled and not $searchValue/}
 								{param onlySearch: $onlySearch /}
 								{param searchInputName: $searchInputName /}
+								{param searchInputPlaceholder: $searchInputPlaceholder /}
 								{param searchValue: $searchValue /}
 								{param showAdvancedSearch: $showAdvancedSearch /}
 								{param spritemap: $spritemap /}
@@ -750,6 +754,7 @@
 	{@param? disabled: bool}
 	{@param? onlySearch: bool}
 	{@param? searchInputName: string}
+	{@param? searchInputPlaceholder: string}
 	{@param? searchValue: string}
 	{@param? showAdvancedSearch: bool}
 
@@ -763,10 +768,14 @@
 
 				class="form-control input-group-inset input-group-inset-after"
 				name="{$searchInputName}"
-				placeholder="
-					{msg desc="Search text input placeholder"}
-						search-for
-					{/msg}"
+				{if $searchInputPlaceholder}
+					placeholder="{$searchInputPlaceholder}"
+				{else}
+					placeholder="
+						{msg desc="Search text input placeholder"}
+							search-for
+						{/msg}"
+				{/if}
 				ref="search"
 				type="text"
 

diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
@@ -73,6 +73,15 @@ describe('ClayManagementToolbar', function() {
 		expect(managementToolbar).toMatchSnapshot();
 	});
 
+	it('should render a management toolbar with search and customized placeholder', () => {
+		managementToolbar = new ClayManagementToolbar({
+			searchInputPlaceholder: 'Search thread...',
+			spritemap: spritemap,
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
 	it('should render a management toolbar with advanced search', () => {
 		managementToolbar = new ClayManagementToolbar({
 			showAdvancedSearch: true,

diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
@@ -1795,6 +1795,43 @@ exports[`ClayManagementToolbar should render a management toolbar with search ac
 </div>
 `;
 
+exports[`ClayManagementToolbar should render a management toolbar with search and customized placeholder 1`] = `
+<div>
+  <nav class="management-bar management-bar-light navbar navbar-expand-md">
+    <div class="container-fluid container-fluid-max-xl">
+      <ul class="navbar-nav"></ul>
+      <div class="navbar-form navbar-form-autofit">
+        <form method="GET" role="search">
+          <div class="input-group">
+            <div class="input-group-item">
+              <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search thread..." ref="search" type="text">
+              <span class="input-group-inset-item input-group-inset-item-after">
+                <button class="btn btn-unstyled" aria-label="search" type="submit">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
+                    <title>search</title>
+                    <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#search"></use>
+                  </svg>
+                </button>
+              </span>
+            </div>
+          </div>
+        </form>
+      </div>
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <button class="btn nav-btn nav-btn-monospaced btn-primary" aria-label="plus" type="button">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus" focusable="false">
+              <title>plus</title>
+              <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#plus"></use>
+            </svg>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>
+`;
+
 exports[`ClayManagementToolbar should render a management toolbar with search form name 1`] = `
 <div>
   <nav class="management-bar management-bar-light navbar navbar-expand-md">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="input-group"><div class="input-group-item"><input aria-label="Search"class="form-control input-group-inset input-group-inset-after" name="" placeholder="search-for" ref="search" type="text" /><span class="input-group-inset-item input-group-inset-item-after"><button class="btn navbar-breakpoint-d-none btn-unstyled"aria-label="times"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-times"focusable="false"><title>times</title><use xlink:href="spritemap.svg#times" /></svg></button><button class="btn btn-unstyled"aria-label="search"type="submit"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-search"focusable="false"><title>search</title><use xlink:href="spritemap.svg#search" /></svg></button></span></div></div>
		<div class="input-group"><div class="input-group-item"><input aria-label="Search"class="form-control input-group-inset input-group-inset-after" name=""placeholder="search-for"ref="search" type="text" /><span class="input-group-inset-item input-group-inset-item-after"><button class="btn navbar-breakpoint-d-none btn-unstyled"aria-label="times"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-times"focusable="false"><title>times</title><use xlink:href="spritemap.svg#times" /></svg></button><button class="btn btn-unstyled"aria-label="search"type="submit"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-search"focusable="false"><title>search</title><use xlink:href="spritemap.svg#search" /></svg></button></span></div></div>