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 extends Ripple.InjectedProps className?: string; icon?: React.ReactElement>; href?: string; + trailingIcon?: React.ReactElement>; } export const Button = ( @@ -51,6 +52,7 @@ export const Button = ( href, children, initRipple, + trailingIcon, // eslint disabled since we do not want to include // this in ...otherProps. // if unbounded is passed to the ); }; 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 + +
+ +
+ +
+ +
); }; 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(