feat(button): trailing icon support (#622)

Author: gugu

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",

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.

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>
   );
 };

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"

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>
   );
 };

test/screenshot/golden.json

@@ -1,5 +1,5 @@
 {
-  "button": "8941ec5719bb5c82418d335f37dd6e4d523bf8a1121b50a4df4c5a784ca41fbe",
+  "button": "57cb8769600669ec4d44dd23fcf2f6ded528ce8eec612d832c2b9e0271a640c3",
   "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31",
   "checkbox": "9c61177f0f927e178e7c6687d74cdfa08abc15ea8fc3c381f570b7c7d1f46d2a",
   "chips": "e100a23df0b92c37920127c62d7d694ce3fe40c101c0ed05d535f5cafee62b27",

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'));