#600 Breaking Dropdown Action Toggle and Quick Action Item require .component-action

packages/clay-card/src/ClayCardBase.soy

@@ -167,6 +167,7 @@
 					{call ClayActionsDropdown.render}
 						{param items: $actionItems /}
 						{param spritemap: $spritemap /}
+						{param triggerClasses: 'component-action' /}
 					{/call}
 				</div>
 			{/if}

packages/clay-card/src/ClayHorizontalCard.soy

@@ -114,6 +114,7 @@
 					{call ClayActionsDropdown.render}
 						{param items: $actionItems /}
 						{param spritemap: $spritemap /}
+						{param triggerClasses: 'component-action' /}
 					{/call}
 				</div>
 			{/if}

packages/clay-card/src/ClayUserCard.soy

@@ -97,6 +97,7 @@
 					{call ClayActionsDropdown.render}
 						{param items: $actionItems /}
 						{param spritemap: $spritemap /}
+						{param triggerClasses: 'component-action' /}
 					{/call}
 				</div>
 			{/if}

packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap

@@ -17,7 +17,7 @@ exports[`ClayFileCard should render a ClayFileCard with actionItems 1`] = `
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap

@@ -41,7 +41,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap

@@ -10,7 +10,7 @@ exports[`ClayImageCard should render a ClayImageCard with actionItems 1`] = `
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap

@@ -16,7 +16,7 @@ exports[`ClayUserCard should render a ClayUserCard with actionItems 1`] = `
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

packages/clay-dropdown/src/ClayActionsDropdown.js

@@ -130,6 +130,15 @@ ClayActionsDropdown.STATE = {
 	 * @default undefined
 	 */
 	spritemap: Config.string().required(),
+
+	/**
+	 * CSS classes to be applied to the trigger element.
+	 * @instance
+	 * @memberof ClayActionsDropdown
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	triggerClasses: Config.string(),
 };
 
 defineWebComponent('clay-actions-dropdown', ClayActionsDropdown);

packages/clay-dropdown/src/ClayActionsDropdown.soy

@@ -16,37 +16,39 @@
 	{@param? helpText: string}
 	{@param? id: string}
 	{@param? itemsIconAlignment: string}
+	{@param? triggerClasses: string}
 
-  {let $dropdownElementClasses kind="text"}
-    dropdown-action
-    {if $elementClasses}
-      {sp}{$elementClasses}
-    {/if}
-  {/let}
+	{let $dropdownElementClasses kind="text"}
+		dropdown-action
+		{if $elementClasses}
+			{sp}{$elementClasses}
+		{/if}
+	{/let}
 
-  {let $trigger kind="html"}
-    {call ClayIcon.render}
-      {param spritemap: $spritemap /}
-      {param symbol: 'ellipsis-v' /}
-    {/call}
-  {/let}
+	{let $trigger kind="html"}
+		{call ClayIcon.render}
+			{param spritemap: $spritemap /}
+			{param symbol: 'ellipsis-v' /}
+		{/call}
+	{/let}
 
 	{call ClayDropdownBase.render}
-    {param button: $button /}
-    {param caption: $caption /}
-    {param disabled: $disabled /}
-    {param elementClasses: $dropdownElementClasses /}
-    {param events: [
-      'buttonClicked': $_handleButtonClick,
-      'itemClicked': $_handleItemClick
-    ]/}
-    {param expanded: $expanded /}
-    {param helpText: $helpText /}
-    {param id: $id /}
-    {param items: $items /}
-    {param itemsIconAlignment: $itemsIconAlignment /}
-    {param label: $trigger /}
-    {param ref: 'dropdown' /}
-    {param spritemap: $spritemap /}
-  {/call}
+		{param button: $button /}
+		{param caption: $caption /}
+		{param disabled: $disabled /}
+		{param elementClasses: $dropdownElementClasses /}
+		{param events: [
+			'buttonClicked': $_handleButtonClick,
+			'itemClicked': $_handleItemClick
+		]/}
+		{param expanded: $expanded /}
+		{param helpText: $helpText /}
+		{param id: $id /}
+		{param items: $items /}
+		{param itemsIconAlignment: $itemsIconAlignment /}
+		{param label: $trigger /}
+		{param ref: 'dropdown' /}
+		{param spritemap: $spritemap /}
+		{param triggerClasses: $triggerClasses /}
+	{/call}
 {/template}

packages/clay-dropdown/src/ClayDropdown.soy

@@ -21,46 +21,46 @@
 	{@param? triggerClasses: string}
 	{@param? triggerSize: string}
 
-  {let $trigger kind="html"}
-    {if $icon}
-      {call ClayIcon.render}
-        {param elementClasses: $label ? 'inline-item inline-item-before' : '' /}
-        {param spritemap: $spritemap /}
-        {param symbol: $icon /}
-      {/call}
-    {/if}
+	{let $trigger kind="html"}
+		{if $icon}
+			{call ClayIcon.render}
+				{param elementClasses: $label ? 'inline-item inline-item-before' : '' /}
+				{param spritemap: $spritemap /}
+				{param symbol: $icon /}
+			{/call}
+		{/if}
 
-    {if $label}
-      {$label}
-    {/if}
+		{if $label}
+			{$label}
+		{/if}
 
-    {if not $icon}
-      {call ClayIcon.render}
-        {param elementClasses: 'inline-item inline-item-after' /}
-        {param spritemap: $spritemap /}
-        {param symbol: 'caret-bottom' /}
-      {/call}
-    {/if}
-  {/let}
+		{if not $icon}
+			{call ClayIcon.render}
+				{param elementClasses: 'inline-item inline-item-after' /}
+				{param spritemap: $spritemap /}
+				{param symbol: 'caret-bottom' /}
+			{/call}
+		{/if}
+	{/let}
 
 	{call ClayDropdownBase.render}
-    {param button: $button /}
-    {param disabled: $disabled /}
-    {param elementClasses: $elementClasses /}
-    {param events: [
-      'buttonClicked': $_handleButtonClick,
-      'itemClicked': $_handleItemClick
-    ]/}
-    {param expanded: $expanded /}
-    {param id: $id /}
-    {param items: $items /}
-    {param itemsIconAlignment: $itemsIconAlignment /}
-    {param label: $trigger /}
-    {param ref: 'dropdown' /}
-    {param searchable: $searchable /}
-    {param spritemap: $spritemap /}
-    {param style: $style /}
-    {param triggerClasses: $triggerClasses /}
-    {param triggerSize: $triggerSize /}
-  {/call}
+		{param button: $button /}
+		{param disabled: $disabled /}
+		{param elementClasses: $elementClasses /}
+		{param events: [
+			'buttonClicked': $_handleButtonClick,
+			'itemClicked': $_handleItemClick
+		]/}
+		{param expanded: $expanded /}
+		{param id: $id /}
+		{param items: $items /}
+		{param itemsIconAlignment: $itemsIconAlignment /}
+		{param label: $trigger /}
+		{param ref: 'dropdown' /}
+		{param searchable: $searchable /}
+		{param spritemap: $spritemap /}
+		{param style: $style /}
+		{param triggerClasses: $triggerClasses /}
+		{param triggerSize: $triggerSize /}
+	{/call}
 {/template}

packages/clay-dropdown/src/__tests__/ClayActionsDropdown.js

@@ -105,6 +105,18 @@ describe('ClayActionsDropdown', function() {
 		expect(clayActionsDropdown).toMatchSnapshot();
 	});
 
+	it('should render an actions dropdown with triggerClasses', () => {
+		clayActionsDropdown = new ClayActionsDropdown({
+			id: 'myId',
+			items: items,
+			label: 'Trigger',
+			spritemap: 'icons.svg',
+			triggerClasses: 'component-action',
+		});
+
+		expect(clayActionsDropdown).toMatchSnapshot();
+	});
+
 	it('should render a disabled dropdown', () => {
 		clayActionsDropdown = new ClayActionsDropdown({
 			disabled: true,

packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap

@@ -129,6 +129,49 @@ exports[`ClayActionsDropdown should render an actions dropdown with id 1`] = `
 </div>
 `;
 
+exports[`ClayActionsDropdown should render an actions dropdown with triggerClasses 1`] = `
+<div class="dropdown dropdown-action" id="myId">
+  <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
+      <title>ellipsis-v</title>
+      <use xlink:href="icons.svg#ellipsis-v"></use>
+    </svg>
+  </button>
+</div>
+<div class="dropdown-menu" ref="menu">
+  <ul class="list-unstyled">
+    <li>
+      <a class=" dropdown-item" href="#1">Edit</a>
+    </li>
+    <li>
+      <a class=" dropdown-item" href="#1">Preview</a>
+    </li>
+    <li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
+    <li>
+      <a class=" dropdown-item" href="#1">Expire</a>
+    </li>
+    <li>
+      <a class=" dropdown-item" href="#1">View History</a>
+    </li>
+    <li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
+    <li>
+      <a class=" dropdown-item" href="#1">Permissions</a>
+    </li>
+    <li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
+    <li>
+      <a class=" dropdown-item" href="#1">Copy</a>
+    </li>
+    <li>
+      <a class=" dropdown-item" href="#1">Move</a>
+    </li>
+    <li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
+    <li>
+      <a class=" dropdown-item" href="#1">Move to the Recycle Bin</a>
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`ClayActionsDropdown should render an expanded action dropdown 1`] = `
 <div class="dropdown dropdown-action show">
   <button aria-expanded="true" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">

packages/clay-isomorphic/build.gradle

@@ -2,15 +2,15 @@ import java.io.File;
 
 task testSoy << {
 	def soyFiles = fileTree(
-		dir: "..", 
-		include: "clay-*/**/*.soy", 
+		dir: "..",
+		include: "clay-*/**/*.soy",
 		excludes: ["**/__tests__/**/*", "clay-isomorphic/**/*"]
 	).files;
-	
+
 	def suite = new SoyTestSuite(soyFiles);
-	
+
 	def results = suite.run();
-	
+
 	def failed = 0;
 
 	results.forEach {result ->
@@ -19,38 +19,54 @@ task testSoy << {
 		}
 		else {
 			failed++;
-			
+
 			if (result.error) {
-				println "💥 " + result.namespace + 
+				println "💥 " + result.namespace +
 					" [" + result.error.message + "]";
 			}
 			else {
-				println "👎 " + result.namespace + 
+				println "👎 " + result.namespace +
 					" [Unexpected output: ${result.output}]";
 			}
 		}
 	};
-	
+
 	if (failed > 0) {
 		throw new GradleException(
 			"${failed} soy tests failed 😢 (see previous output for more info)");
 	}
 }
 
+task regenerateFixturesExpected << {
+	def soyFiles = fileTree(
+		dir: "..",
+		include: "clay-*/**/*.soy",
+		excludes: ["**/__tests__/**/*", "clay-isomorphic/**/*"]
+	).files;
+
+	def suite = new SoyTestSuite(soyFiles);
+
+	def results = suite.run();
+
+	results.forEach {result ->
+		result.test.regenerateFixturesExpected();
+	};
+}
+
 task createMissingFixtures << {
 	def soyFiles = fileTree(
-		dir: "..", 
-		include: "clay-*/**/*.soy", 
+		dir: "..",
+		include: "clay-*/**/*.soy",
 		excludes: ["**/__tests__/**/*", "clay-isomorphic/**/*"]
 	).files;
-	
+
 	def suite = new SoyTestSuite(soyFiles);
-	
+
 	def results = suite.run();
 
 	results.forEach {result ->
 		if (result.error) {
 			result.test.createFixtureFilesIfMissing();
 		}
 	};
-}
+}