Merge pull request #4197 from mbrookes/enhanced-button-deprecate-link…

…button

[Buttons] Deprecate linkButton property

docs/src/app/components/Master.js

@@ -176,7 +176,6 @@ class Master extends Component {
             <IconButton
               iconClassName="muidocs-icon-custom-github"
               href="https://github.com/callemall/material-ui"
-              linkButton={true}
             />
           }
           style={styles.appBar}
@@ -218,7 +217,6 @@ class Master extends Component {
             iconStyle={styles.iconButton}
             iconClassName="muidocs-icon-custom-github"
             href="https://github.com/callemall/material-ui"
-            linkButton={true}
           />
           <p style={prepareStyles(styles.browserstack)}>
             {'Thank you to '}

docs/src/app/components/pages/Home.js

@@ -93,7 +93,6 @@ class HomePage extends Component {
             className="demo-button"
             label="Demo"
             onTouchTap={this.handleTouchTapDemo}
-            linkButton={true}
             style={styles.demoStyle}
             labelStyle={styles.label}
           />
@@ -192,7 +191,6 @@ class HomePage extends Component {
         <RaisedButton
           label="GitHub"
           primary={true}
-          linkButton={true}
           href="https://github.com/callemall/material-ui"
           style={styles.button}
         />

docs/src/app/components/pages/components/FlatButton/ExampleComplex.js

@@ -32,7 +32,6 @@ const FlatButtonExampleComplex = () => (
 
     <FlatButton
       label="GitHub Link"
-      linkButton={true}
       href="https://github.com/callemall/material-ui"
       secondary={true}
       icon={<FontIcon className="muidocs-icon-custom-github" />}

docs/src/app/components/pages/components/FlatButton/ExampleIcon.js

@@ -21,7 +21,6 @@ const FlatButtonExampleIcon = () => (
       style={style}
     />
     <FlatButton
-      linkButton={true}
       href="https://github.com/callemall/material-ui"
       secondary={true}
       icon={<FontIcon className="muidocs-icon-custom-github" />}

docs/src/app/components/pages/components/RaisedButton/ExampleComplex.js

@@ -37,7 +37,6 @@ const RaisedButtonExampleComplex = () => (
     />
     <RaisedButton
       label="Github Link"
-      linkButton={true}
       href="https://github.com/callemall/material-ui"
       secondary={true}
       style={styles.button}

docs/src/app/components/pages/components/RaisedButton/ExampleIcon.js

@@ -20,7 +20,6 @@ const RaisedButtonExampleIcon = () => (
       style={style}
     />
     <RaisedButton
-      linkButton={true}
       href="https://github.com/callemall/material-ui"
       secondary={true}
       icon={<FontIcon className="muidocs-icon-custom-github" />}

src/FlatButton/FlatButton.js

@@ -38,7 +38,7 @@ class FlatButton extends Component {
      */
     hoverColor: PropTypes.string,
     /**
-     * URL to link to when button clicked if `linkButton` is set to true.
+     * The URL to link to when the button is clicked.
      */
     href: PropTypes.string,
     /**
@@ -60,10 +60,6 @@ class FlatButton extends Component {
      * Override the inline-styles of the button's label element.
      */
     labelStyle: PropTypes.object,
-    /**
-     * Enables use of `href` property to provide a URL to link to if set to true.
-     */
-    linkButton: PropTypes.bool,
     /**
      * Callback function fired when the element is focused or blurred by the keyboard.
      *
@@ -162,7 +158,6 @@ class FlatButton extends Component {
       label,
       labelStyle,
       labelPosition,
-      linkButton,
       primary,
       rippleColor,
       secondary,
@@ -268,7 +263,6 @@ class FlatButton extends Component {
         disabled={disabled}
         focusRippleColor={buttonRippleColor}
         focusRippleOpacity={0.3}
-        linkButton={linkButton}
         onKeyboardFocus={this.handleKeyboardFocus}
         onMouseLeave={this.handleMouseLeave}
         onMouseEnter={this.handleMouseEnter}

src/FlatButton/FlatButton.spec.js

@@ -31,7 +31,6 @@ describe('<FlatButton />', () => {
       ariaLabel: 'Say hello world',
       disabled: true,
       href: 'http://google.com',
-      linkButton: true,
       name: 'Hello World',
     };
 

src/FloatingActionButton/FloatingActionButton.js

@@ -88,7 +88,7 @@ class FloatingActionButton extends Component {
      */
     disabledColor: PropTypes.string,
     /**
-     * URL to link to when button clicked if `linkButton` is set to true.
+     * The URL to link to when the button is clicked.
      */
     href: PropTypes.string,
     /**
@@ -103,10 +103,6 @@ class FloatingActionButton extends Component {
      * overriding the inline-styles of the FontIcon component.
      */
     iconStyle: PropTypes.object,
-    /**
-     * Enables use of `href` property to provide a URL to link to if set to true.
-     */
-    linkButton: PropTypes.bool,
     /**
      * If true, the button will be a small floating action button.
      */

src/IconButton/IconButton.js

@@ -61,6 +61,10 @@ class IconButton extends Component {
      * If true, the element will be disabled.
      */
     disabled: PropTypes.bool,
+    /**
+     * The URL to link to when the button is clicked.
+     */
+    href: PropTypes.string,
     /**
      * The CSS class name of the icon. Used for setting the icon with a stylesheet.
      */

src/List/ListItem.js

@@ -640,10 +640,10 @@ class ListItem extends Component {
           hasCheckbox ? this.createLabelElement(styles, contentChildren, other) :
           disabled ? this.createDisabledElement(styles, contentChildren, other) : (
             <EnhancedButton
+              containerElement={'span'}
               {...other}
               disabled={disabled}
               disableKeyboardFocus={disableKeyboardFocus || this.state.rightIconButtonKeyboardFocused}
-              linkButton={true}
               onKeyboardFocus={this.handleKeyboardFocus}
               onMouseLeave={this.handleMouseLeave}
               onMouseEnter={this.handleMouseEnter}

src/RaisedButton/RaisedButton.js

@@ -146,8 +146,7 @@ class RaisedButton extends Component {
      */
     fullWidth: PropTypes.bool,
     /**
-     * If `linkButton` is true, the URL to link to when the button
-     * is clicked.
+     * The URL to link to when the button is clicked.
      */
     href: PropTypes.string,
     /**
@@ -175,11 +174,6 @@ class RaisedButton extends Component {
      * Override the inline-styles of the button's label element.
      */
     labelStyle: PropTypes.object,
-    /**
-     * If true, enable the use of the `href` property to provide
-     * a URL to link to.
-     */
-    linkButton: PropTypes.bool,
     /**
      * Callback function fired when a mouse button is pressed down on
      * the element.

src/RaisedButton/RaisedButton.spec.js

@@ -34,7 +34,6 @@ describe('<RaisedButton />', () => {
       ariaLabel: 'Say hello world',
       disabled: true,
       href: 'http://google.com',
-      linkButton: true,
       name: 'Hello World',
     };
 

src/internal/EnhancedButton.js

@@ -4,6 +4,7 @@ import Events from '../utils/events';
 import keycode from 'keycode';
 import FocusRipple from './FocusRipple';
 import TouchRipple from './TouchRipple';
+import deprecated from '../utils/deprecatedPropType';
 
 let styleInjected = false;
 let listening = false;
@@ -49,8 +50,12 @@ class EnhancedButton extends Component {
     disabled: PropTypes.bool,
     focusRippleColor: PropTypes.string,
     focusRippleOpacity: PropTypes.number,
+    href: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool,
+    ]),
     keyboardFocused: PropTypes.bool,
-    linkButton: PropTypes.bool,
+    linkButton: deprecated(PropTypes.bool, 'LinkButton is no longer required when the `href` property is provided.'),
     onBlur: PropTypes.func,
     onClick: PropTypes.func,
     onFocus: PropTypes.func,
@@ -264,7 +269,8 @@ class EnhancedButton extends Component {
       disableTouchRipple, // eslint-disable-line no-unused-vars
       focusRippleColor, // eslint-disable-line no-unused-vars
       focusRippleOpacity, // eslint-disable-line no-unused-vars
-      linkButton,
+      href,
+      linkButton, // eslint-disable-line no-unused-vars
       touchRippleColor, // eslint-disable-line no-unused-vars
       touchRippleOpacity, // eslint-disable-line no-unused-vars
       onBlur, // eslint-disable-line no-unused-vars
@@ -313,7 +319,7 @@ class EnhancedButton extends Component {
       mergedStyles.background = 'none';
     }
 
-    if (disabled && linkButton) {
+    if (disabled && href) {
       return (
         <span
           {...other}
@@ -329,6 +335,7 @@ class EnhancedButton extends Component {
       style: prepareStyles(mergedStyles),
       ref: 'enhancedButton',
       disabled: disabled,
+      href: href,
       onBlur: this.handleBlur,
       onClick: this.handleClick,
       onFocus: this.handleFocus,
@@ -340,12 +347,9 @@ class EnhancedButton extends Component {
     };
     const buttonChildren = this.createButtonChildren();
 
-    // Provides backward compatibility. Added to support wrapping around <a> element.
-    const targetLinkElement = buttonProps.hasOwnProperty('href') ? 'a' : 'span';
-
     return React.isValidElement(containerElement) ?
       React.cloneElement(containerElement, buttonProps, buttonChildren) :
-      React.createElement(linkButton ? targetLinkElement : containerElement, buttonProps, buttonChildren);
+      React.createElement(href ? 'a' : containerElement, buttonProps, buttonChildren);
   }
 }
 

src/internal/EnhancedButton.spec.js

@@ -18,9 +18,9 @@ describe('<EnhancedButton />', () => {
     assert.ok(wrapper.is('button'), 'should match a button element');
   });
 
-  it('renders a link when href is provided & linkButton is true', () => {
+  it('renders a link when href is provided', () => {
     const wrapper = shallowWithContext(
-      <EnhancedButton href="http://google.com" linkButton={true}>Button</EnhancedButton>
+      <EnhancedButton href="http://google.com">Button</EnhancedButton>
     );
     assert.ok(wrapper.text(), 'Button', 'should say Button');
     assert.ok(wrapper.is('a'), 'should match a <a> element');
@@ -65,7 +65,6 @@ describe('<EnhancedButton />', () => {
       <EnhancedButton
         disabled={true}
         href="http://google.com"
-        linkButton={true}
       >
         Button
       </EnhancedButton>