Merge 0213985 into 731cd07

deprecate · Dec 27, 2017 · 1e88133 · 1e88133
2 parents 731cd07 + 0213985
commit 1e88133
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 30 deletions.
diff --git a/packages/clay-button/src/ClayButton.soy b/packages/clay-button/src/ClayButton.soy
@@ -57,20 +57,25 @@
 	{@param? label: html|string}
 	{@param? spritemap: string}
 
-	{if $icon and $iconAlignment == 'left' and $spritemap}
-		{call .icon}
-			{param icon: $icon /}
-			{param spritemap: $spritemap /}
-		{/call}
+	{let $iconContent kind="html"}
+		{if $icon and $spritemap}
+			{call .icon}
+				{param icon: $icon /}
+				{param iconAlignment: $iconAlignment /}
+				{param label: $label /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{/if}
+	{/let}
+
+	{if $iconContent != '' and $iconAlignment == 'left'}
+		{$iconContent}
 	{/if}
 
 	{$label ?: ''}
 
-	{if $icon and $iconAlignment == 'right' and $spritemap}
-		{call .icon}
-			{param icon: $icon /}
-			{param spritemap: $spritemap /}
-		{/call}
+	{if $iconContent != '' and $iconAlignment == 'right'}
+		{$iconContent}
 	{/if}
 {/template}
 
@@ -80,11 +85,33 @@
 {template .icon}
 	{@param icon: string}
 	{@param spritemap: string}
+	{@param? iconAlignment: string}
+	{@param? label: html|string}
+
+	{let $iconContent kind="html"}
+		{call ClayIcon.render}
+			{param spritemap: $spritemap /}
+			{param symbol: $icon /}
+		{/call}
+	{/let}
+
+	{if $label}
+		{let $iconWrapperClasses kind="text"}
+			inline-item
+			{if $iconAlignment == 'left'}
+				{sp}inline-item-before
+			{elseif $iconAlignment == 'right'}
+				{sp}inline-item-after
+			{/if}
+		{/let}
+
+		<span class="{$iconWrapperClasses}">
+			{$iconContent}
+		</span>
+	{else}
+		{$iconContent}
+	{/if}
 
-	{call ClayIcon.render}
-		{param spritemap: $spritemap /}
-		{param symbol: $icon /}
-	{/call}
 {/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>