From 58b99e45f4bd400709097ebb0854f43744bd3d02 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 22 Jan 2019 20:56:17 +0300
Subject: [PATCH] feat(button): trailing icon support (#622)

---
 package.json                     |  2 +-
 packages/button/README.md        |  1 +
 packages/button/index.tsx        | 16 ++++++++++++----
 packages/button/package.json     |  2 +-
 test/screenshot/button/index.tsx | 12 ++++++++++++
 test/screenshot/golden.json      |  2 +-
 test/unit/button/index.test.tsx  | 14 +++++++++++++-
 7 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index e8b0ca2b8..144b26026 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@google-cloud/storage": "^1.6.0",
-    "@material/button": "^0.41.0",
+    "@material/button": "^0.43.0",
     "@material/card": "^0.41.0",
     "@material/checkbox": "^0.41.0",
     "@material/chips": "^0.41.0",
diff --git a/packages/button/README.md b/packages/button/README.md
index 67850f737..2cd11a36c 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -48,6 +48,7 @@ unelevated | Boolean | Enables unelevated variant.
 outlined | Boolean | Enables outlined variant.
 dense | Boolean | Enables dense variant.
 icon | Element | Icon to render within root element.
+trailingIcon | Element | Icon to render on the right side of the element
 children | String | Text to be displayed within root element.
 disabled | Boolean | Disables button if true.
 href | String | Sets a hyperlink & uses anchor tag instead of a button.
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
index 1846ff8a8..572f70a04 100644
--- a/packages/button/index.tsx
+++ b/packages/button/index.tsx
@@ -37,6 +37,7 @@ export interface ButtonProps<T extends ButtonTypes> extends Ripple.InjectedProps
   className?: string;
   icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
   href?: string;
+  trailingIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
 }
 
 export const Button = <T extends ButtonTypes>(
@@ -51,6 +52,7 @@ export const Button = <T extends ButtonTypes>(
     href,
     children,
     initRipple,
+    trailingIcon,
     // eslint disabled since we do not want to include
     // this in ...otherProps.
     // if unbounded is passed to the <button> element, it will throw
@@ -74,16 +76,22 @@ export const Button = <T extends ButtonTypes>(
   if (href) {
     return (
       <a {...props as React.HTMLProps<HTMLAnchorElement>} href={href}>
-        {renderIcon(icon)}
-        {children}
+        {!trailingIcon ? renderIcon(icon) : null}
+        <span className='mdc-button__label'>
+          {children}
+        </span>
+        {trailingIcon ? renderIcon(trailingIcon) : null}
       </a>
     );
   }
 
   return (
     <button {...props as React.HTMLProps<HTMLButtonElement>}>
-      {renderIcon(icon)}
-      {children}
+      {!trailingIcon ? renderIcon(icon) : null}
+      <span className='mdc-button__label'>
+        {children}
+      </span>
+      {trailingIcon ? renderIcon(trailingIcon) : null}
     </button>
   );
 };
diff --git a/packages/button/package.json b/packages/button/package.json
index e6883d68a..e11e101e7 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/button": "^0.41.0",
+    "@material/button": "^0.43.0",
     "@material/react-ripple": "^0.8.0",
     "classnames": "^2.2.5",
     "react": "^16.4.2"
diff --git a/test/screenshot/button/index.tsx b/test/screenshot/button/index.tsx
index 64fc9377b..3a6ceac2c 100644
--- a/test/screenshot/button/index.tsx
+++ b/test/screenshot/button/index.tsx
@@ -67,6 +67,18 @@ const ButtonScreenshotTest = () => {
           Svg Icon
         </Button>
       </div>
+
+      <div className='button-container'>
+        <Button raised trailingIcon={<MaterialIcon icon='menu' />}>
+          Raised
+        </Button>
+      </div>
+
+      <div className='button-container'>
+        <Button raised trailingIcon={svgIcon}>
+          Svg Icon
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index d7f4e6a60..8a7471ebf 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -1,5 +1,5 @@
 {
-  "button": "8941ec5719bb5c82418d335f37dd6e4d523bf8a1121b50a4df4c5a784ca41fbe",
+  "button": "57cb8769600669ec4d44dd23fcf2f6ded528ce8eec612d832c2b9e0271a640c3",
   "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31",
   "checkbox": "9c61177f0f927e178e7c6687d74cdfa08abc15ea8fc3c381f570b7c7d1f46d2a",
   "chips": "e100a23df0b92c37920127c62d7d694ce3fe40c101c0ed05d535f5cafee62b27",
diff --git a/test/unit/button/index.test.tsx b/test/unit/button/index.test.tsx
index 6f2d5a42c..3d3ecc754 100644
--- a/test/unit/button/index.test.tsx
+++ b/test/unit/button/index.test.tsx
@@ -13,7 +13,7 @@ test('classNames adds classes', () => {
   assert.isTrue(wrapper.hasClass('mdc-button'));
 });
 
-test('does not render icon if props.icon is null', () => {
+test('does not render icon if props.icon is null and props.trailingIcon is null', () => {
   const wrapper = shallow(<Button />);
   assert.equal(wrapper.find('.mdc-button__icon').length, 0);
 });
@@ -24,6 +24,18 @@ test('renders an icon', () => {
   assert.isTrue(wrapper.find('.test-icon').hasClass('mdc-button__icon'));
 });
 
+test('renders a trailing icon', () => {
+  const icon = <i className='test-icon' />;
+  const wrapper = shallow(<Button trailingIcon={icon} />);
+  assert.isTrue(wrapper.find('.test-icon').hasClass('mdc-button__icon'));
+});
+
+test('renders a link with trailing icon', () => {
+  const icon = <i className='test-icon' />;
+  const wrapper = shallow(<Button href='/' trailingIcon={icon} />);
+  assert.isTrue(wrapper.find('.test-icon').hasClass('mdc-button__icon'));
+});
+
 test('renders a raised button', () => {
   const wrapper = shallow(<Button raised />);
   assert.isTrue(wrapper.hasClass('mdc-button--raised'));