Merge pull request #1706 from interactivellama/tooltip-learn-more-but…

…ton2 Tooltip: Require onClickTrigger for learn more pattern
salesforce · Jan 4, 2019 · e0bcddd · e0bcddd
2 parents 81a8d0d + 14f5a5e
commit e0bcddd
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 102 deletions.
diff --git a/components/button/index.jsx b/components/button/index.jsx
@@ -13,6 +13,8 @@ import checkProps from './check-props';
 import componentDoc from './docs.json';
 import Tooltip from '../tooltip';
 
+import getAriaProps from '../../utilities/get-aria-props';
+
 import { BUTTON } from '../../utilities/constants';
 
 const defaultProps = {
@@ -27,29 +29,13 @@ 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.
+ * 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-*` props will be added to the `button` element if passed in.
  */
 class Button extends React.Component {
 	static displayName = BUTTON;
 
 	static propTypes = {
-		/**
-		 * Used if the Button triggers a tooltip. The value should match the `id` of the element with `role="tooltip"`.
-		 */
-		'aria-describedby': PropTypes.string,
-		/**
-		 * Establishes a relationship between an interactive parent element and a child element to indicate which child element a parent element affects. Frequently used in cases where buttons or tabs are associated with exposing expandable regions.
-		 */
-		'aria-controls': PropTypes.string,
-		/**
-		 * Used if the Button triggers a menu or popup. Bool indicates if the menu or popup is open or closed.
-		 */
-		'aria-expanded': PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-		/**
-		 * True if Button triggers a menu or popup to open/close.
-		 */
-		'aria-haspopup': PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 		/**
 		 * **Assistive text for accessibility.**
 		 * This object is merged with the default props object on every render.
@@ -310,57 +296,57 @@ class Button extends React.Component {
 		);
 	};
 
-	renderButton = () => (
-		<button
-			aria-controls={this.props['aria-controls']}
-			aria-describedby={this.props['aria-describedby']}
-			aria-expanded={this.props['aria-expanded']}
-			aria-haspopup={this.props['aria-haspopup']}
-			className={this.getClassName()}
-			disabled={this.props.disabled}
-			id={this.props.id}
-			onBlur={this.props.onBlur}
-			onClick={this.handleClick}
-			onFocus={this.props.onFocus}
-			onKeyDown={this.props.onKeyDown}
-			onKeyPress={this.props.onKeyPress}
-			onKeyUp={this.props.onKeyUp}
-			onMouseDown={this.props.onMouseDown}
-			onMouseEnter={this.props.onMouseEnter}
-			onMouseLeave={this.props.onMouseLeave}
-			onMouseUp={this.props.onMouseUp}
-			ref={(component) => {
-				if (this.props.buttonRef) {
-					this.props.buttonRef(component);
-				}
-			}}
-			tabIndex={this.props.tabIndex}
-			title={this.props.title}
-			type={this.props.type}
-			style={this.props.style}
-		>
-			{this.props.iconPosition === 'right' ? this.renderLabel() : null}
+	renderButton = () => {
+		const ariaProps = getAriaProps(this.props);
+		return (
+			<button
+				className={this.getClassName()}
+				disabled={this.props.disabled}
+				id={this.props.id}
+				onBlur={this.props.onBlur}
+				onClick={this.handleClick}
+				onFocus={this.props.onFocus}
+				onKeyDown={this.props.onKeyDown}
+				onKeyPress={this.props.onKeyPress}
+				onKeyUp={this.props.onKeyUp}
+				onMouseDown={this.props.onMouseDown}
+				onMouseEnter={this.props.onMouseEnter}
+				onMouseLeave={this.props.onMouseLeave}
+				onMouseUp={this.props.onMouseUp}
+				ref={(component) => {
+					if (this.props.buttonRef) {
+						this.props.buttonRef(component);
+					}
+				}}
+				tabIndex={this.props.tabIndex}
+				title={this.props.title}
+				type={this.props.type}
+				style={this.props.style}
+				{...ariaProps}
+			>
+				{this.props.iconPosition === 'right' ? this.renderLabel() : null}
 
-			{this.props.iconName || this.props.iconPath
-				? this.renderIcon(this.props.iconName)
-				: null}
-			{this.props.iconVariant === 'more' ? (
-				<ButtonIcon
-					category="utility"
-					name="down"
-					size="x-small"
-					className={this.props.iconClassName}
-				/>
-			) : null}
+				{this.props.iconName || this.props.iconPath
+					? this.renderIcon(this.props.iconName)
+					: null}
+				{this.props.iconVariant === 'more' ? (
+					<ButtonIcon
+						category="utility"
+						name="down"
+						size="x-small"
+						className={this.props.iconClassName}
+					/>
+				) : null}
 
-			{this.props.iconPosition === 'left' || !this.props.iconPosition
-				? this.renderLabel()
-				: null}
-			{
-				this.props.children // eslint-disable-line react/prop-types
-			}
-		</button>
-	);
+				{this.props.iconPosition === 'left' || !this.props.iconPosition
+					? this.renderLabel()
+					: null}
+				{
+					this.props.children // eslint-disable-line react/prop-types
+				}
+			</button>
+		);
+	};
 
 	// This is present for backwards compatibility and should be removed at a future breaking change release. Please wrap a `Button` in a `PopoverTooltip` to achieve the same result. There will be an extra trigger `div` wrapping the `Button` though.
 	renderTooltip = () => (

diff --git a/components/date-picker/__tests__/__snapshots__/datepicker.snapshot-test.jsx.snap b/components/date-picker/__tests__/__snapshots__/datepicker.snapshot-test.jsx.snap
@@ -2570,7 +2570,7 @@ exports[`Datepicker Default DOM Snapshot 1`] = `
 exports[`Datepicker Default HTML Snapshot 1`] = `
 "<div class=\\"slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-is-open\\">
   <div class=\\"slds-form-element\\">
-    <div class=\\"slds-form-element__control slds-input-has-icon slds-input-has-icon_right\\"><input type=\\"text\\" class=\\"slds-input\\" id=\\"sample-datepicker\\" placeholder=\\"Pick a Date\\" value=\\"7/23/2014\\" /><button aria-expanded=\\"true\\" aria-haspopup=\\"true\\" class=\\"slds-button slds-button_icon slds-input__icon slds-input__icon_right\\" type=\\"button\\"><svg aria-hidden=\\"true\\" class=\\"slds-button__icon\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#event\\"></use></svg><span class=\\"slds-assistive-text\\">Open Calendar</span></button></div>
+    <div class=\\"slds-form-element__control slds-input-has-icon slds-input-has-icon_right\\"><input type=\\"text\\" class=\\"slds-input\\" id=\\"sample-datepicker\\" placeholder=\\"Pick a Date\\" value=\\"7/23/2014\\" /><button class=\\"slds-button slds-button_icon slds-input__icon slds-input__icon_right\\" type=\\"button\\" aria-haspopup=\\"true\\" aria-expanded=\\"true\\"><svg aria-hidden=\\"true\\" class=\\"slds-button__icon\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#event\\"></use></svg><span class=\\"slds-assistive-text\\">Open Calendar</span></button></div>
   </div>
   <div class=\\"slds-datepicker slds-dropdown slds-dropdown_left\\">
     <div class=\\"\\" aria-hidden=\\"false\\" data-selection=\\"single\\">