Merge 56f1867 into a3db874

deprecate · Dec 26, 2017 · 22f09cd · 22f09cd
2 parents a3db874 + 56f1867
commit 22f09cd
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 24 deletions.
diff --git 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'}
+			{sp}inline-item-before
+		{elseif $iconAlignment == 'right'}
+			{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}
 

diff --git 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>
 `;
 

diff --git 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>