[Button] Fix padding for Text Button variant to adhere to spec (#13827)

* Fix padding for Text Button variant to adhere to spec

* let's merge

docs/src/pages/customization/themes/OverridesCss.js

@@ -7,7 +7,7 @@ const theme = createMuiTheme({
     // Name of the component ⚛️ / style sheet
     MuiButton: {
       // Name of the rule
-      root: {
+      text: {
         // Some CSS
         background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
         borderRadius: 3,

docs/src/pages/customization/themes/themes.md

@@ -314,7 +314,7 @@ That's a really powerful feature.
 const theme = createMuiTheme({
   overrides: {
     MuiButton: { // Name of the component ⚛️ / style sheet
-      root: { // Name of the rule
+      text: { // Name of the rule
         color: 'white', // Some CSS
       },
     },

packages/material-ui/src/Button/Button.js

@@ -45,7 +45,9 @@ export const styles = theme => ({
     justifyContent: 'inherit',
   },
   /* Styles applied to the root element if `variant="text"`. */
-  text: {},
+  text: {
+    padding: theme.spacing.unit,
+  },
   /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
   textPrimary: {
     color: theme.palette.primary.main,
@@ -250,9 +252,9 @@ function Button(props) {
       [classes.text]: text,
       [classes.textPrimary]: text && color === 'primary',
       [classes.textSecondary]: text && color === 'secondary',
-      [classes.flat]: variant === 'text' || variant === 'flat',
-      [classes.flatPrimary]: (variant === 'text' || variant === 'flat') && color === 'primary',
-      [classes.flatSecondary]: (variant === 'text' || variant === 'flat') && color === 'secondary',
+      [classes.flat]: text,
+      [classes.flatPrimary]: text && color === 'primary',
+      [classes.flatSecondary]: text && color === 'secondary',
       [classes.contained]: contained || fab,
       [classes.containedPrimary]: (contained || fab) && color === 'primary',
       [classes.containedSecondary]: (contained || fab) && color === 'secondary',

packages/material-ui/src/Button/Button.test.js

@@ -28,6 +28,7 @@ describe('<Button />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.flat), true);
     assert.strictEqual(wrapper.hasClass(classes.fab), false);
+    assert.strictEqual(wrapper.hasClass(classes.text), true);
     assert.strictEqual(wrapper.hasClass(classes.textPrimary), false);
     assert.strictEqual(wrapper.hasClass(classes.textSecondary), false);
     assert.strictEqual(wrapper.hasClass(classes.flatPrimary), false);
@@ -75,6 +76,7 @@ describe('<Button />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.contained), true);
     assert.strictEqual(wrapper.hasClass(classes.fab), false);
+    assert.strictEqual(wrapper.hasClass(classes.text), false);
     assert.strictEqual(wrapper.hasClass(classes.textPrimary), false);
     assert.strictEqual(wrapper.hasClass(classes.textSecondary), false);
   });
@@ -88,6 +90,7 @@ describe('<Button />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.contained), true);
     assert.strictEqual(wrapper.hasClass(classes.fab), false);
+    assert.strictEqual(wrapper.hasClass(classes.text), false);
     assert.strictEqual(wrapper.hasClass(classes.containedPrimary), true);
     assert.strictEqual(wrapper.hasClass(classes.containedSecondary), false);
   });
@@ -101,20 +104,23 @@ describe('<Button />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.contained), true);
     assert.strictEqual(wrapper.hasClass(classes.fab), false);
+    assert.strictEqual(wrapper.hasClass(classes.text), false);
     assert.strictEqual(wrapper.hasClass(classes.containedPrimary), false);
     assert.strictEqual(wrapper.hasClass(classes.containedSecondary), true);
   });
 
   it('should render a small button', () => {
     const wrapper = shallow(<Button size="small">Hello World</Button>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.text), true);
     assert.strictEqual(wrapper.hasClass(classes.sizeSmall), true);
     assert.strictEqual(wrapper.hasClass(classes.sizeLarge), false);
   });
 
   it('should render a large button', () => {
     const wrapper = shallow(<Button size="large">Hello World</Button>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.text), true);
     assert.strictEqual(wrapper.hasClass(classes.sizeSmall), false);
     assert.strictEqual(wrapper.hasClass(classes.sizeLarge), true);
   });
@@ -134,6 +140,7 @@ describe('<Button />', () => {
       assert.strictEqual(wrapper.hasClass(classes.contained), true);
       assert.strictEqual(wrapper.hasClass(classes.raised), true);
       assert.strictEqual(wrapper.hasClass(classes.fab), false);
+      assert.strictEqual(wrapper.hasClass(classes.text), false);
       assert.strictEqual(wrapper.hasClass(classes.containedPrimary), false);
       assert.strictEqual(wrapper.hasClass(classes.raisedPrimary), false);
       assert.strictEqual(wrapper.hasClass(classes.containedSecondary), false);
@@ -150,6 +157,7 @@ describe('<Button />', () => {
       assert.strictEqual(wrapper.hasClass(classes.contained), true);
       assert.strictEqual(wrapper.hasClass(classes.raised), true);
       assert.strictEqual(wrapper.hasClass(classes.fab), false);
+      assert.strictEqual(wrapper.hasClass(classes.text), false);
       assert.strictEqual(wrapper.hasClass(classes.containedPrimary), true);
       assert.strictEqual(wrapper.hasClass(classes.raisedPrimary), true);
       assert.strictEqual(wrapper.hasClass(classes.containedSecondary), false);