From 4566ed85ca1c677fe601154aa2a17eb151951f1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 26 Dec 2017 16:25:04 -0300
Subject: [PATCH 1/4] Add spacing between the label and the icon in ClayButton

---
 packages/clay-button/src/ClayButton.soy | 38 +++++++++++++++++++------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/clay-button/src/ClayButton.soy b/packages/clay-button/src/ClayButton.soy
index 98993284e..a16d0b916 100644
--- a/packages/clay-button/src/ClayButton.soy
+++ b/packages/clay-button/src/ClayButton.soy
@@ -57,20 +57,42 @@
 	{@param? label: html|string}
 	{@param? spritemap: string}
 
+	{let $classes kind="text"}
+		inline-item
+		{if $iconAlignment == 'left' and $label}
+			{sp}inline-item-before
+		{elseif $iconAlignment == 'right' and $label}
+			{sp}inline-item-after
+		{/if}
+	{/let}
+
+	{let $iconContent kind="html"}
+		{if $icon and $spritemap}
+			{call .icon}
+				{param icon: $icon /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{/if}
+	{/let}
+
+	{let $iconWrapper kind="html"}
+		{if $label}
+			<span class="{$classes}">
+				{$iconContent}
+			</span>
+		{else}
+			{$iconContent}
+		{/if}
+	{/let}
+
 	{if $icon and $iconAlignment == 'left' and $spritemap}
-		{call .icon}
-			{param icon: $icon /}
-			{param spritemap: $spritemap /}
-		{/call}
+		{$iconWrapper}
 	{/if}
 
 	{$label ?: ''}
 
 	{if $icon and $iconAlignment == 'right' and $spritemap}
-		{call .icon}
-			{param icon: $icon /}
-			{param spritemap: $spritemap /}
-		{/call}
+		{$iconWrapper}
 	{/if}
 {/template}
 

From 8fbe94a22bbfd1a1376665da9cfd321f348ed629 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 26 Dec 2017 16:25:18 -0300
Subject: [PATCH 2/4] Update ClayButton snapshot

---
 .../__snapshots__/ClayButton.js.snap          | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap b/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap
index a47f1b18c..f06c6922f 100644
--- a/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap
+++ b/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap
@@ -15,10 +15,12 @@ exports[`ClayButton should render a button with icon 1`] = `
 
 exports[`ClayButton should render a button with icon and label 1`] = `
 <button class="btn btn-primary" type="button">
-  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
-    <title>plus</title>
-    <use xlink:href="icons.svg#plus"></use>
-  </svg>Label</button>
+  <span class="inline-item inline-item-before">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+      <title>plus</title>
+      <use xlink:href="icons.svg#plus"></use>
+    </svg>
+  </span>Label</button>
 `;
 
 exports[`ClayButton should render a button with icon and monospaced true 1`] = `
@@ -38,18 +40,22 @@ exports[`ClayButton should render a button with label and ariaLabel 1`] = `<butt
 
 exports[`ClayButton should render a button with label and icon 1`] = `
 <button class="btn btn-primary" type="button">
-  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
-    <title>plus</title>
-    <use xlink:href="icons.svg#plus"></use>
-  </svg>Label</button>
+  <span class="inline-item inline-item-before">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+      <title>plus</title>
+      <use xlink:href="icons.svg#plus"></use>
+    </svg>
+  </span>Label</button>
 `;
 
 exports[`ClayButton should render a button with label and icon on right side 1`] = `
 <button class="btn btn-primary" type="button">Label
-  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
-    <title>plus</title>
-    <use xlink:href="icons.svg#plus"></use>
-  </svg>
+  <span class="inline-item inline-item-after">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+      <title>plus</title>
+      <use xlink:href="icons.svg#plus"></use>
+    </svg>
+  </span>
 </button>
 `;
 

From f81d24449f7cac511d98d0882c8f7067af61d8f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 26 Dec 2017 16:25:29 -0300
Subject: [PATCH 3/4] Update ClayTable snapshot

---
 .../src/__tests__/__snapshots__/ClayTable.js.snap      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap
index 3ed6a6df6..faa7674a3 100644
--- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap
+++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap
@@ -129,10 +129,12 @@ exports[`ClayTable should render a ClayTable with a basic schema with sortable f
       <tr>
         <th class="table-cell-expand">
           <button class="btn btn-unstyled" type="button">Title
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
-              <title>order-arrow-up</title>
-              <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#order-arrow-up"></use>
-            </svg>
+            <span class="inline-item inline-item-after">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                <title>order-arrow-up</title>
+                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#order-arrow-up"></use>
+              </svg>
+            </span>
           </button>
         </th>
         <th>

From 56f186760fd0dee22eb808f1a1461c0b2c9e0c96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Tue, 26 Dec 2017 16:30:37 -0300
Subject: [PATCH 4/4] SF

---
 packages/clay-button/src/ClayButton.soy | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/clay-button/src/ClayButton.soy b/packages/clay-button/src/ClayButton.soy
index a16d0b916..18e200813 100644
--- a/packages/clay-button/src/ClayButton.soy
+++ b/packages/clay-button/src/ClayButton.soy
@@ -59,9 +59,9 @@
 
 	{let $classes kind="text"}
 		inline-item
-		{if $iconAlignment == 'left' and $label}
+		{if $iconAlignment == 'left'}
 			{sp}inline-item-before
-		{elseif $iconAlignment == 'right' and $label}
+		{elseif $iconAlignment == 'right'}
 			{sp}inline-item-after
 		{/if}
 	{/let}