feat(button): Add dense variant to button (#228)

Author: lucasecdb

packages/button/README.md

@@ -46,6 +46,7 @@ className | String | Classes to be applied to the root element.
 raised | Boolean | Enables raised variant.
 unelevated | Boolean | Enables unelevated variant.
 outlined | Boolean | Enables outlined variant.
+dense | Boolean | Enables dense variant.
 icon | Element | Icon to render within root element.
 children | String | Text to be displayed within root element.
 disabled | Boolean | Disables button if true.

packages/button/index.js

@@ -32,6 +32,7 @@ export class Button extends Component {
       raised,
       unelevated,
       outlined,
+      dense,
       icon,
       children,
       initRipple,
@@ -43,6 +44,7 @@ export class Button extends Component {
       'mdc-button--raised': raised,
       'mdc-button--unelevated': unelevated,
       'mdc-button--outlined': outlined,
+      'mdc-button--dense': dense,
     });
 
     const SemanticButton = this.props.href ? 'a' : 'button';
@@ -76,6 +78,7 @@ Button.propTypes = {
   raised: PropTypes.bool,
   unelevated: PropTypes.bool,
   outlined: PropTypes.bool,
+  dense: PropTypes.bool,
   disabled: PropTypes.bool,
   unbounded: PropTypes.bool,
   initRipple: PropTypes.func,
@@ -89,6 +92,7 @@ Button.defaultProps = {
   raised: false,
   unelevated: false,
   outlined: false,
+  dense: false,
   disabled: false,
   unbounded: false,
   initRipple: () => {},

test/screenshot/button/index.js

@@ -39,6 +39,10 @@ const ButtonScreenshotTest = () => {
         <Button disabled raised>Disabled Raised</Button>
       </div>
 
+      <div className='button-container'>
+        <Button dense>Dense</Button>
+      </div>
+
       <div className='button-container'>
         <Button href='https://google.com' raised>Anchor Tag</Button>
       </div>

test/screenshot/golden.json

@@ -1,5 +1,5 @@
 {
-  "button": "b01eeaad126491150baf47a736f5d5fbcfc284e62a47d91e9e50dcf1163925c1",
+  "button": "a0cf6b2a5d09400657303bb2a7b220dbe33642a8f44fd7571cdfcf5517fb3586",
   "card": "b2fd82763c383be438ff6578083bf9009711c7470333d07eb916ab690fc42d31",
   "line-ripple": "56b136db2dc7e09260849447e6bde9b55a837af332a05d9f52506ab1c95e2e57",
   "fab": "db36f52195c420062d91dd5ebe5432ad87247b3c1146fd547b0a195079bbce2f",

test/unit/button/index.test.js

@@ -38,6 +38,11 @@ test('renders an outlined button', () => {
   assert.isTrue(wrapper.hasClass('mdc-button--outlined'));
 });
 
+test('renders a dense button', () => {
+  const wrapper = shallow(<Button dense />);
+  assert.isTrue(wrapper.hasClass('mdc-button--dense'));
+});
+
 test('renders a button tag', () => {
   const wrapper = shallow(<Button />);
   assert.equal(wrapper.type(), 'button');