Merge pull request #1159 from carloslancha/pr-1152

Fixes #1150 - Disable actionItems inside ManagementToolbar Quick Actions
liferay · Sep 3, 2018 · 93bc376 · 93bc376
2 parents 6d95075 + 32e9d06
commit 93bc376
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 1 deletion.
diff --git a/packages/clay-management-toolbar/demos/a11y.html b/packages/clay-management-toolbar/demos/a11y.html
@@ -131,10 +131,17 @@ <h4>With filter labels</h4>
 				quickAction: true,
 			},
 			{
+				disabled: true,
 				href: '#2',
 				icon: 'download',
 				label: 'Download',
 				quickAction: true,
+			},
+			{
+				disabled: true,
+				icon: 'change',
+				label: 'Change',
+				quickAction: true,
 				separator: true,
 			},
 			{

diff --git a/packages/clay-management-toolbar/demos/index.html b/packages/clay-management-toolbar/demos/index.html
@@ -131,10 +131,17 @@ <h4>With filter labels</h4>
 				quickAction: true,
 			},
 			{
+				disabled: true,
 				href: '#2',
 				icon: 'download',
 				label: 'Download',
 				quickAction: true,
+			},
+			{
+				disabled: true,
+				icon: 'change',
+				label: 'Change',
+				quickAction: true,
 				separator: true,
 			},
 			{

diff --git a/packages/clay-management-toolbar/src/ClayManagementToolbar.soy b/packages/clay-management-toolbar/src/ClayManagementToolbar.soy
@@ -275,7 +275,7 @@
 						{foreach $item in $actionItems}
 							{if $item.quickAction and $item.icon and $spritemap}
 								<li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="{index($item)}" data-onclick="{$_handleQuickActionClicked}">
-									{if isNonnull($item.href)}
+									{if isNonnull($item.href) and (not isNonnull($item.disabled) or $item.disabled == false)}
 										{call ClayLink.render}
 											{param elementClasses: 'nav-link nav-link-monospaced' /}
 											{param href: $item.href /}
@@ -286,6 +286,7 @@
 										{/call}
 									{else}
 										{call ClayButton.render}
+											{param disabled: $item.disabled /}
 											{param elementClasses: 'nav-link nav-link-monospaced' /}
 											{param icon: $item.icon /}
 											{param ref: 'quickAction' + index($item) /}

diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
@@ -592,6 +592,32 @@ describe('ClayManagementToolbar', function() {
 		expect(managementToolbar).toMatchSnapshot();
 	});
 
+	it('should render a management toolbar with disabled actions as quick actions in active state', () => {
+		managementToolbar = new ClayManagementToolbar({
+			actionItems: [
+				{
+					disabled: true,
+					icon: 'edit',
+					label: 'Edit',
+					quickAction: true,
+				},
+				{
+					disabled: true,
+					href: '#deleteurl',
+					icon: 'trash',
+					label: 'Delete',
+					quickAction: true,
+				},
+			],
+			selectable: true,
+			selectedItems: 1,
+			spritemap: spritemap,
+			totalItems: 10,
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
 	it('should render a management toolbar with info button', () => {
 		managementToolbar = new ClayManagementToolbar({
 			spritemap: spritemap,

diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
@@ -1089,6 +1089,70 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
 </div>
 `;
 
+exports[`ClayManagementToolbar should render a management toolbar with disabled actions as quick actions in active state 1`] = `
+<div>
+  <nav class="management-bar management-bar-primary navbar navbar-expand-md navbar-nowrap">
+    <div class="container-fluid container-fluid-max-xl">
+      <ul class="navbar-nav navbar-nav-expand">
+        <li class="nav-item">
+          <div class="custom-control custom-checkbox">
+            <label>
+              <input checked="" class="custom-control-input" ref="input" type="checkbox">
+              <span class="custom-control-label">
+                <span class="custom-control-label-text sr-only">select-items</span>
+              </span>
+            </label>
+          </div>
+        </li>
+        <li class="nav-item">
+          <span class="navbar-text">1-of-10
+            <span class="navbar-breakpoint-down-d-none">items-selected</span>
+          </span>
+        </li>
+      </ul>
+      <ul class="navbar-nav">
+        <li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="0">
+          <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="edit" disabled="disabled" title="Edit" type="button">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-edit" focusable="false">
+              <title>edit</title>
+              <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#edit"></use>
+            </svg>
+          </button>
+        </li>
+        <li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="1">
+          <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="trash" disabled="disabled" title="Delete" type="button">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
+              <title>trash</title>
+              <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#trash"></use>
+            </svg>
+          </button>
+        </li>
+        <li class="nav-item">
+          <div class="dropdown dropdown-action">
+            <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" title="actions" type="button">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
+                <title>ellipsis-v</title>
+                <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#ellipsis-v"></use>
+              </svg>
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</div>
+<div class="dropdown-menu" ref="menu">
+  <ul class="list-unstyled">
+    <li>
+      <button class="btn dropdown-item disabled btn-sm btn-link" aria-label="Edit" disabled="disabled" type="button">Edit</button>
+    </li>
+    <li>
+      <a class=" dropdown-item disabled" href="javascript:;">Delete</a>
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items and no done button 1`] = `
 <div>
   <nav class="management-bar management-bar-light navbar navbar-expand-md">