Adds support for data-* attributes to Button. (#2749)

Author: gburnett

components/button/__docs__/__snapshots__/storybook-stories.storyshot

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DOM snapshots SLDSButton Aria attribute 1`] = `
+<div
+  className="slds-p-around_medium"
+>
+  <button
+    aria-label="Base"
+    className="slds-button"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Base
+  </button>
+</div>
+`;
+
 exports[`DOM snapshots SLDSButton Base 1`] = `
 <div
   className="slds-p-around_medium"
@@ -15,6 +31,22 @@ exports[`DOM snapshots SLDSButton Base 1`] = `
 </div>
 `;
 
+exports[`DOM snapshots SLDSButton Data attribute 1`] = `
+<div
+  className="slds-p-around_medium"
+>
+  <button
+    className="slds-button"
+    data-some-property="Some value"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Base
+  </button>
+</div>
+`;
+
 exports[`DOM snapshots SLDSButton Disabled 1`] = `
 <div
   className="slds-p-around_medium"

components/button/__docs__/storybook-stories.jsx

@@ -29,6 +29,16 @@ storiesOf(BUTTON, module)
 		</div>
 	))
 	.add('Base', () => getButton({ label: 'Base', variant: 'base' }))
+	.add('Aria attribute', () =>
+		getButton({ label: 'Base', 'aria-label': 'Base', variant: 'base' })
+	)
+	.add('Data attribute', () =>
+		getButton({
+			label: 'Base',
+			'data-some-property': 'Some value',
+			variant: 'base',
+		})
+	)
 	.add('Neutral', () => getButton({ label: 'Neutral' }))
 	.add('Neutral with id', () =>
 		getButton({ label: 'Neutral', id: 'custom-id' })

components/button/__tests__/button.browser-test.jsx

@@ -102,6 +102,27 @@ describe('SLDSButton: ', () => {
 		});
 	});
 
+	describe('Data Props Render ', () => {
+		let cmp;
+		let btn;
+
+		beforeEach(() => {
+			cmp = getButton({
+				id: 'custom-id',
+				'data-some-attribute': 'some value',
+			});
+			btn = findRenderedDOMComponentWithClass(cmp, 'slds-button');
+		});
+
+		afterEach(() => {
+			removeButton();
+		});
+
+		it('renders data-some-attribute prop', () => {
+			expect(btn.getAttribute('data-some-attribute')).to.equal('some value');
+		});
+	});
+
 	describe('Icon with Label Button Props Render', () => {
 		let cmp;
 		let btn;

components/button/index.jsx

@@ -15,6 +15,7 @@ import componentDoc from './component.json';
 import Tooltip from '../tooltip';
 
 import getAriaProps from '../../utilities/get-aria-props';
+import getDataProps from '../../utilities/get-data-props';
 import getFormProps from '../../utilities/get-form-props';
 
 import { BUTTON } from '../../utilities/constants';
@@ -32,7 +33,7 @@ const defaultProps = {
 /**
  * The Button component is the Lightning Design System Button component. The Button should be used for label buttons, icon buttons, or buttons that have both labels and icons.
  * Either a <code>label</code> or <code>assistiveText.icon</code> is required; see the Prop Details table below. For buttons that maintain selected/unselected states, use the <a href="#/button-stateful">ButtonStateful</a> component.
- * Although not listed in the prop table, all `aria-*` and `form*` props will be added to the `button` element if passed in.
+ * Although not listed in the prop table, all `aria-*`, `data-*` and `form*` props will be added to the `button` element if passed in.
  */
 class Button extends React.Component {
 	static displayName = BUTTON;
@@ -305,6 +306,7 @@ class Button extends React.Component {
 
 	renderButton = () => {
 		const ariaProps = getAriaProps(this.props);
+		const dataProps = getDataProps(this.props);
 		const formProps = getFormProps(this.props);
 
 		return (
@@ -334,6 +336,7 @@ class Button extends React.Component {
 				type={this.props.type || 'button'}
 				style={this.props.style}
 				{...ariaProps}
+				{...dataProps}
 				{...formProps}
 			>
 				{this.props.iconPosition === 'right' ? this.renderLabel() : null}

components/component-docs.json

@@ -2033,7 +2033,7 @@
         "dependencies": []
     },
     "button": {
-        "description": "The Button component is the Lightning Design System Button component. The Button should be used for label buttons, icon buttons, or buttons that have both labels and icons.\nEither a <code>label</code> or <code>assistiveText.icon</code> is required; see the Prop Details table below. For buttons that maintain selected/unselected states, use the <a href=\"#/button-stateful\">ButtonStateful</a> component.\nAlthough not listed in the prop table, all `aria-*` and `form*` props will be added to the `button` element if passed in.",
+        "description": "The Button component is the Lightning Design System Button component. The Button should be used for label buttons, icon buttons, or buttons that have both labels and icons.\nEither a <code>label</code> or <code>assistiveText.icon</code> is required; see the Prop Details table below. For buttons that maintain selected/unselected states, use the <a href=\"#/button-stateful\">ButtonStateful</a> component.\nAlthough not listed in the prop table, all `aria-*`, `data-*` and `form*` props will be added to the `button` element if passed in.",
         "methods": [
             {
                 "name": "getClassName",