Remove {...props} from DOM nodes in global nav link, label, menus, page-header, tab

Author: donnieberg

.gitignore

@@ -1,4 +1,4 @@
-
+# filesystem
 .DS_Store
 
 # dependencies
@@ -24,5 +24,3 @@ server/public/assets/bundle
 scripts/pre-commit.sh
 coverage/
 storybook/
-
-.jscsrc

components/button-stateful/index.jsx

@@ -135,29 +135,50 @@ class ButtonStateful extends TooltipTrigger {
 	}
 
 	render () {
-		const active = isBoolean(this.props.active) ? this.props.active : this.state.active;
-
-		if (this.props.variant === 'icon') {
+		const {
+			active,
+			assistiveText,
+			disabled,
+			iconName,
+			iconSize,
+			id,
+			onFocus,
+			onKeyDown,
+			onKeyPress,
+			onKeyUp,
+			onMouseEnter,
+			onMouseLeave,
+			stateOne,
+			stateTwo,
+			stateThree,
+			tabIndex,
+			variant
+		} = this.props;
+
+		const isActive = isBoolean(active) ? active : this.state.active;
+
+		if (variant === 'icon') {
 			return (
 				<button
 					aria-live="polite"
-					className={this.getClassName(active)}
-					disabled={this.props.disabled}
+					className={this.getClassName(isActive)}
+					disabled={disabled}
+					id={id}
 					onBlur={this.handleBlur.bind(this)}
 					onClick={this.handleClick.bind(this)}
-					onFocus={this.props.onFocus}
-					onKeyDown={this.props.onKeyDown}
-					onKeyPress={this.props.onKeyPress}
-					onKeyUp={this.props.onKeyUp}
-					onMouseEnter={this.props.onMouseEnter}
+					onFocus={onFocus}
+					onKeyDown={onKeyDown}
+					onKeyPress={onKeyPress}
+					onKeyUp={onKeyUp}
+					onMouseEnter={onMouseEnter}
 					onMouseLeave={this.handleBlur.bind(this)}
-					tabIndex={this.props.tabIndex}
+					tabIndex={tabIndex}
 				>
 					<ButtonIcon
-						assistiveText={active ?	`${this.props.assistiveText} selected` : this.props.assistiveText}
-						disabled={this.props.disabled}
-						name={this.props.iconName}
-						size={this.props.iconSize}
+						assistiveText={isActive ? `${assistiveText} selected` : assistiveText}
+						disabled={disabled}
+						name={iconName}
+						size={iconSize}
 						className="slds-button__icon--stateful"
 					/>
 					{this.getTooltip()}
@@ -168,47 +189,48 @@ class ButtonStateful extends TooltipTrigger {
 		return (
 			<button
 				aria-live="assertive"
-				className={this.getClassName(active)}
-				disabled={this.props.disabled}
+				className={this.getClassName(isActive)}
+				disabled={disabled}
+				id={id}
 				onBlur={this.handleBlur.bind(this)}
 				onClick={this.handleClick.bind(this)}
-				onFocus={this.props.onFocus}
-				onKeyDown={this.props.onKeyDown}
-				onKeyPress={this.props.onKeyPress}
-				onKeyUp={this.props.onKeyUp}
-				onMouseEnter={this.props.onMouseEnter}
+				onFocus={onFocus}
+				onKeyDown={onKeyDown}
+				onKeyPress={onKeyPress}
+				onKeyUp={onKeyUp}
+				onMouseEnter={onMouseEnter}
 				onMouseLeave={this.handleBlur.bind(this)}
-				tabIndex={this.props.tabIndex}
+				tabIndex={tabIndex}
 			>
 				<span className="slds-text-not-selected">
 					<ButtonIcon
-						disabled={this.props.disabled}
-						name={this.props.stateOne.iconName}
+						disabled={disabled}
+						name={stateOne.iconName}
 						size="small"
 						position="left"
 						className="slds-button__icon--stateful"
 					/>
-					{this.props.stateOne.label}
+					{stateOne.label}
 				</span>
 				<span className="slds-text-selected">
 					<ButtonIcon
-						disabled={this.props.disabled}
-						name={this.props.stateTwo.iconName}
+						disabled={disabled}
+						name={stateTwo.iconName}
 						size="small"
 						position="left"
 						className="slds-button__icon--stateful"
 					/>
-					{this.props.stateTwo.label}
+					{stateTwo.label}
 				</span>
 				<span className="slds-text-selected-focus">
 					<ButtonIcon
-						disabled={this.props.disabled}
-						name={this.props.stateThree.iconName}
+						disabled={disabled}
+						name={stateThree.iconName}
 						size="small"
 						position="left"
 						className="slds-button__icon--stateful"
 					/>
-					{this.props.stateThree.label}
+					{stateThree.label}
 				</span>
 				{this.getTooltip()}
 			</button>

components/button/index.jsx

@@ -19,6 +19,14 @@ import { BUTTON } from '../../utilities/constants';
 
 const displayName = BUTTON;
 const propTypes = {
+	/**
+	 * Used if the Button triggers a menu or popup. Bool indicates if the menu or popup is open or closed.
+	 */
+	ariaExpanded: PropTypes.bool,
+	/**
+	 * True if Button triggers a menu or popup to open/close.
+	 */
+	ariaHaspopup: PropTypes.bool,
 	/**
 	 * Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means.
 	 * If the button has an icon and a visible label, you can omit the <code>assistiveText</code> prop and use the <code>label</code> prop.
@@ -57,7 +65,7 @@ const propTypes = {
 	 */
 	iconVariant: PropTypes.oneOf(['bare', 'container', 'border', 'border-filled', 'more', 'global-header']),
 	/**
-	 * For icon variants, please reference <a href="http://www.lightningdesignsystem.com/components/buttons/#icon">Lightning Design System Icons</a>.
+	 * Id string applied to button node.
 	 */
 	id: PropTypes.string,
 	/**
@@ -192,29 +200,51 @@ class Button extends TooltipTrigger {
 	}
 
 	render () {
+		const {
+			ariaExpanded,
+			ariaHaspopup,
+			children,
+			disabled,
+			iconName,
+			iconPosition,
+			iconVariant,
+			id,
+			onBlur,
+			onFocus,
+			onKeyDown,
+			onKeyPress,
+			onKeyUp,
+			onMouseEnter,
+			onMouseLeave,
+			tabIndex
+		} = this.props;
+
 		return (
 			<button
+				aria-expanded={ariaExpanded}
+				aria-haspopup={ariaHaspopup}
 				className={this.getClassName()}
-				disabled={this.props.disabled}
-				onBlur={this.props.onBlur}
+				disabled={disabled}
+				id={id}
+				onBlur={onBlur}
 				onClick={this.handleClick}
-				onFocus={this.props.onFocus}
-				onKeyDown={this.props.onKeyDown}
-				onKeyPress={this.props.onKeyPress}
-				onKeyUp={this.props.onKeyUp}
-				onMouseEnter={this.props.onMouseEnter}
-				onMouseLeave={this.props.onBlur}
-				tabIndex={this.props.tabIndex}
+				onFocus={onFocus}
+				onKeyDown={onKeyDown}
+				onKeyPress={onKeyPress}
+				onKeyUp={onKeyUp}
+				onMouseEnter={onMouseEnter}
+				onMouseLeave={onMouseLeave}
+				tabIndex={tabIndex}
 			>
-				{this.props.iconPosition === 'right' ? this.renderLabel() : null}
+				{iconPosition === 'right' ? this.renderLabel() : null}
 
-				{this.props.iconName ? this.renderIcon(this.props.iconName) : null}
-				{this.props.iconVariant === 'more'
+				{iconName ? this.renderIcon(this.props.iconName) : null}
+				{iconVariant === 'more'
 				? <ButtonIcon	category="utility" name="down" size="x-small" />
 				: null}
 
-				{(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.renderLabel() : null}
-				{this.props.children}
+				{(iconPosition === 'left' || !iconPosition) ? this.renderLabel() : null}
+				{children}
 				{this.getTooltip()}
 			</button>
 		);