From 36d6a11be54e8694238a2e12af1e2fcbe5081887 Mon Sep 17 00:00:00 2001
From: Carlos Lancha <carlos.lancha@liferay.com>
Date: Sat, 17 Feb 2018 06:43:23 +0100
Subject: [PATCH] SF | Fixes #543

---
 .../src/ClayManagementToolbar.js              |   8 +-
 .../src/ClayManagementToolbar.soy             | 138 +++++++++---------
 2 files changed, 72 insertions(+), 74 deletions(-)

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
index 1b65468578..a947c1b404 100644
--- a/packages/clay-management-toolbar/src/ClayManagementToolbar.js
+++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.js
@@ -170,10 +170,10 @@ ClayManagementToolbar.STATE = {
 	contentRenderer: Config.string(),
 
 	/**
-	 * Configuration of the plus button.
-	 * Set `true` to just show the button.
-	 * Set `string` to use the button URL.
-	 * Set `object` to use the dropdown menu with items.
+	 * Configuration of the creation menu.
+	 * Set `true` to render a plain button that will emit an event onclick.
+	 * Set `string` to use it as link href to render a link styled button.
+	 * Set `object` to render a dropdown menu with items.
 	 * @instance
 	 * @memberof ClayManagementToolbar
 	 * @type {?object|string|bool|undefined}
diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
index f510dea5bb..aa864559b1 100644
--- a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
+++ b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
@@ -357,26 +357,16 @@
 			{/let}
 
 			<div class="{$searchClasses}">
-				{let $searchForm kind="html"}
-					{delcall ClayManagementToolbar.SearchForm variant="$contentRenderer"}
-						{param disabled: $disabled /}
-						{param handleCloseMobileSearchClick_: $handleCloseMobileSearchClick_ /}
-						{param handleSearchSearchClick_: $handleSearchSearchClick_ /}
-						{param onlySearch: $onlySearch /}
-						{param searchActionURL: $searchActionURL /}
-						{param searchFormName: $searchFormName /}
-						{param searchInputName: $searchInputName /}
-						{param spritemap: $spritemap /}
-					{/delcall}
-				{/let}
-
-				{if $onlySearch}
-					{$searchForm}
-				{else}
-					<div class="container-fluid container-fluid-max-xl">
-						{$searchForm}
-					</div>
-				{/if}
+				{delcall ClayManagementToolbar.SearchForm variant="$contentRenderer"}
+					{param disabled: $disabled /}
+					{param handleCloseMobileSearchClick_: $handleCloseMobileSearchClick_ /}
+					{param handleSearchSearchClick_: $handleSearchSearchClick_ /}
+					{param onlySearch: $onlySearch /}
+					{param searchActionURL: $searchActionURL /}
+					{param searchFormName: $searchFormName /}
+					{param searchInputName: $searchInputName /}
+					{param spritemap: $spritemap /}
+				{/delcall}
 			</div>
 
 			<ul class="navbar-nav">
@@ -428,15 +418,13 @@
 {/template}
 
 /**
- * This renders the plus button.
+ * This renders the creation menu.
  */
 {template .creationMenu}
+	{@param creationMenu: ?}
 	{@param spritemap: string}
-	{@param? creationMenu: ?}
 	{@param? handleCreationButtonClicked_: any}
 
-	{let $commonClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /}
-
 	{if $creationMenu.items}
 		{call ClayDropdownBase.render}
 			{param button: $creationMenu.button /}
@@ -453,7 +441,7 @@
 			{param ref: 'creationMenuDropdown' /}
 			{param spritemap: $spritemap /}
 			{param style: 'primary' /}
-			{param triggerClasses: $commonClasses /}
+			{param triggerClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /}
 		{/call}
 	{elseif $creationMenu == true}
 		{call ClayButton.render}
@@ -466,7 +454,7 @@
 	{else}
 		{call ClayLink.render}
 			{param buttonStyle: 'primary' /}
-			{param elementClasses: $commonClasses /}
+			{param elementClasses: 'nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none' /}
 			{param href: $creationMenu /}
 			{param icon: 'plus' /}
 			{param spritemap: $spritemap /}
@@ -487,59 +475,69 @@
 	{@param? searchFormName: string}
 	{@param? searchInputName: string}
 
-	{let $searchFormAttributes kind="attributes"}
-		{if $searchActionURL}
-			action="{$searchActionURL}"
-		{/if}
-
-		{if $searchFormName}
-			name="{$searchFormName}"
-		{/if}
+	{let $searchFormContent kind="html"}
+		{let $searchFormAttributes kind="attributes"}
+			{if $searchActionURL}
+				action="{$searchActionURL}"
+			{/if}
 
-		role="search"
-	{/let}
+			{if $searchFormName}
+				name="{$searchFormName}"
+			{/if}
 
-	<form {$searchFormAttributes}>
-		<div class="input-group">
-			<div class="input-group-item">
-				{let $inputAttributes kind="attributes"}
-					aria-label="Search"
-					{if $disabled}
-						disabled
-					{/if}
+			role="search"
+		{/let}
 
-					class="form-control input-group-inset input-group-inset-after"
-					name="{$searchInputName}"
-					placeholder="Search for..."
-					ref="search"
-					type="text"
-				{/let}
+		<form {$searchFormAttributes}>
+			<div class="input-group">
+				<div class="input-group-item">
+					{let $inputAttributes kind="attributes"}
+						aria-label="Search"
+						{if $disabled}
+							disabled
+						{/if}
 
-				<input {$inputAttributes} />
+						class="form-control input-group-inset input-group-inset-after"
+						name="{$searchInputName}"
+						placeholder="Search for..."
+						ref="search"
+						type="text"
+					{/let}
+
+					<input {$inputAttributes} />
+
+					<span class="input-group-inset-item input-group-inset-item-after">
+						{if not $onlySearch}
+							{call ClayButton.render}
+								{param elementClasses: 'navbar-breakpoint-d-none' /}
+								{param events: ['click': $handleCloseMobileSearchClick_] /}
+								{param icon: 'times' /}
+								{param spritemap: $spritemap /}
+								{param style: 'unstyled' /}
+							{/call}
+						{/if}
 
-				<span class="input-group-inset-item input-group-inset-item-after">
-					{if not $onlySearch}
 						{call ClayButton.render}
-							{param elementClasses: 'navbar-breakpoint-d-none' /}
-							{param events: ['click': $handleCloseMobileSearchClick_] /}
-							{param icon: 'times' /}
+							{param disabled: $disabled /}
+							{param elementClasses: $onlySearch ? '' : 'navbar-breakpoint-d-block' /}
+							{param events: ['click': $handleSearchSearchClick_] /}
+							{param icon: 'search' /}
+							{param ref: 'searchButton' /}
 							{param spritemap: $spritemap /}
 							{param style: 'unstyled' /}
+							{param type: 'submit' /}
 						{/call}
-					{/if}
-
-					{call ClayButton.render}
-						{param disabled: $disabled /}
-						{param elementClasses: $onlySearch ? '' : 'navbar-breakpoint-d-block' /}
-						{param events: ['click': $handleSearchSearchClick_] /}
-						{param icon: 'search' /}
-						{param ref: 'searchButton' /}
-						{param spritemap: $spritemap /}
-						{param style: 'unstyled' /}
-						{param type: 'submit' /}
-					{/call}
-				</span>
+					</span>
+				</div>
 			</div>
+		</form>
+	{/let}
+
+	{if $onlySearch}
+		{$searchFormContent}
+	{else}
+		<div class="container-fluid container-fluid-max-xl">
+			{$searchFormContent}
 		</div>
-	</form>
+	{/if}
 {/deltemplate}