Merge branch 'master' of github.com:salesforce/design-system-react

Author: interactivellama

components/data-table/__examples__/advanced.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
+import Dropdown from '~/components/menu-dropdown';
 import DataTable from '~/components/data-table'; // `~` is replaced with design-system-react at runtime
 import DataTableColumn from '~/components/data-table/column';
 import DataTableCell from '~/components/data-table/cell';
@@ -174,8 +175,34 @@ const Example = createReactClass({
 									label: 'Publish',
 									value: '2',
 								},
+								{
+									id: 2,
+									label: 'Third of Seven',
+									value: '3',
+								},
+								{
+									id: 3,
+									label: 'Fourth of Seven',
+									value: '4',
+								},
+								{
+									id: 4,
+									label: 'Fifth of Seven',
+									value: '5',
+								},
+								{
+									id: 5,
+									label: 'Sixth of Seven',
+									value: '6',
+								},
+								{
+									id: 6,
+									label: 'Seventh of Seven',
+									value: '7',
+								},
 							]}
 							onAction={this.handleRowAction}
+							dropdown={<Dropdown length="7" />}
 						/>
 					</DataTable>
 				</IconSettings>

components/data-table/__tests__/data-table.browser-test.jsx

@@ -4,6 +4,7 @@ import TestUtils from 'react-addons-test-utils';
 
 import chai from 'chai';
 
+import Dropdown from '../../menu-dropdown';
 import DataTable from '../../data-table';
 import DataTableColumn from '../../data-table/column';
 import DataTableRowActions from '../../data-table/row-actions';
@@ -328,25 +329,29 @@ describe('DataTable: ', function () {
 	describe('w/ RowActions', function () {
 		afterEach(removeTable);
 
-		it('renders the RowActions', function () {
+		it('renders the RowActions and uses dropdown override property', function () {
 			renderTable(
 				<DataTable {...defaultProps}>
 					{columns.map((columnProps) => (
 						<DataTableColumn {...columnProps} key={columnProps.property} />
 					))}
 					<DataTableRowActions
-						options={[
-							{
-								id: 0,
-								label: 'Add to Group',
-								value: '1',
-							},
-							{
-								id: 1,
-								label: 'Publish',
-								value: '2',
-							},
-						]}
+						dropdown={
+							<Dropdown
+								options={[
+									{
+										id: 0,
+										label: 'Add to Group',
+										value: '1',
+									},
+									{
+										id: 1,
+										label: 'Publish',
+										value: '2',
+									},
+								]}
+							/>
+						}
 					/>
 				</DataTable>
 			).call(this);
@@ -358,11 +363,18 @@ describe('DataTable: ', function () {
 			rowActionMenus.should.have.length(6);
 		});
 
-		it('calls onAction when an action is clicked', function (done) {
+		it('calls onAction & onSelect when an action is clicked', function (done) {
+			let expectedCalbacks = 2;
+
 			this.onAction = (item, action) => {
 				item.id.should.equal('8IKZHZZV80');
 				action.value.should.equal('1');
-				done();
+				if (!--expectedCalbacks) done();
+			};
+
+			this.onSelect = (action) => {
+				action.value.should.equal('1');
+				if (!--expectedCalbacks) done();
 			};
 
 			renderTable(
@@ -371,6 +383,7 @@ describe('DataTable: ', function () {
 						<DataTableColumn {...columnProps} key={columnProps.property} />
 					))}
 					<DataTableRowActions
+						onAction={this.onAction}
 						options={[
 							{
 								id: 0,
@@ -383,7 +396,7 @@ describe('DataTable: ', function () {
 								value: '2',
 							},
 						]}
-						onAction={this.onAction}
+						dropdown={<Dropdown onSelect={this.onSelect} />}
 					/>
 				</DataTable>
 			).call(this);

components/data-table/row-actions.jsx

@@ -57,13 +57,19 @@ const DataTableRowActions = createReactClass({
 		/**
 		 * `Dropdown` options. See `Dropdown`.
 		 */
-		options: PropTypes.array.isRequired,
+		options: PropTypes.array,
+		/**
+		 * A [Dropdown](http://react.lightningdesignsystem.com/components/dropdown-menus/) component. The props from this drop will be merged and override any default props.
+		 * **Note:** onAction will not be overridden, both `DropDown`'s onSelect(dropDownActionOption) and onAction(rowItem, dropdownActionOption) will be called with appropriate parameters
+		 */
+		dropdown: PropTypes.node,
 	},
 
 	getDefaultProps () {
 		return {
 			assistiveText: 'Actions',
 			noHint: false,
+			options: [],
 		};
 	},
 
@@ -75,11 +81,36 @@ const DataTableRowActions = createReactClass({
 		if (isFunction(this.props.onAction)) {
 			this.props.onAction(this.props.item, selection);
 		}
+		if (this.props.dropdown && isFunction(this.props.dropdown.props.onSelect)) {
+			this.props.dropdown.props.onSelect(selection);
+		}
 	},
 
 	// ### Render
 	render () {
 		// i18n
+		const defaultDropdownProps = {
+			align: 'right',
+			buttonClassName: 'slds-button--icon-x-small',
+			buttonVariant: 'icon',
+			iconCategory: 'utility',
+			iconName: 'down',
+			iconSize: 'small',
+			iconVariant: 'border-filled',
+			assistiveText: this.props.assistiveText,
+			className: this.props.className,
+			options: this.props.options,
+			hint: !this.props.noHint,
+			id: this.props.id,
+		};
+
+		const props = this.props.dropdown ? this.props.dropdown.props : {};
+		const dropdownProps = {
+			...defaultDropdownProps,
+			...props,
+			onSelect: this.handleSelect,
+		};
+
 		return (
 			/* eslint-disable jsx-a11y/no-static-element-interactions */
 			<td
@@ -89,21 +120,7 @@ const DataTableRowActions = createReactClass({
 				style={{ width: '3.25rem' }}
 			>
 				{/* eslint-enable jsx-a11y/no-static-element-interactions */}
-				<Dropdown
-					align="right"
-					assistiveText={this.props.assistiveText}
-					buttonClassName="slds-button--icon-x-small"
-					buttonVariant="icon"
-					className={this.props.className}
-					options={this.props.options}
-					hint={!this.props.noHint}
-					iconCategory="utility"
-					iconName="down"
-					iconSize="small"
-					iconVariant="border-filled"
-					id={this.props.id}
-					onSelect={this.handleSelect}
-				/>
+				<Dropdown {...dropdownProps} />
 			</td>
 		);
 	},