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

Author: interactivellama

.eslintrc.js

@@ -119,6 +119,8 @@ module.exports = {
 		//
 		'prefer-object-spread/prefer-object-spread': [2, 'always'],
 
+		'max-lines': ['error', 500],
+
 		// Can't be used because it doesn't currently recognize props used in functions
 		'react/no-unused-prop-types': 'off',
 

CONTRIBUTING.md

@@ -2,6 +2,19 @@
 
 First, on behalf of the core maintainers, I'd like to thank you for wanting to contribute and make the user experience for your end-users better and improve the developer experience of this library. :+1::tada: -- [@interactivellama](https://github.com/interactivellama/)
 
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+* [Setup](#setup)
+* [Adding a new prop](#adding-a-new-prop)
+* [How to add a new component](#how-to-add-a-new-component)
+* [Contributing Guidelines](#contributing-guidelines)
+* [The review process](#the-review-process)
+* [Testing the documentation site (internal)](#testing-the-documentation-site-internal)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 ## Setup
 
 1. Fork this repository (button in upper right). Install [git](https://git-scm.com/) and clone your fork locally with `git clone [email protected]:[YOUR-USER]/design-system-react.git`. This library only supports use of `git-bash` in Windows. The default command prompt may not work.
@@ -11,10 +24,11 @@ First, on behalf of the core maintainers, I'd like to thank you for wanting to c
 1. Read the [Codebase Overview](docs/codebase-overview.md) to learn concepts and best practices for the codebase and to confirm contribution is within project scope.
 
 ## Adding a new prop
+
 1. This library is open to `data`, `ref`, `style`, and `className` on any element within reason, but especially open to it for the “primary part of a component” such as form elements such as `input` or a clickable elements such as `button`, since these are often used for testing purposes or form submission. This is probably a better way to write unit tests, anyway, since SLDS class changes are not considered breaking changes.
-    1. `ref` callbacks should be within an `object` named refs with typically a key name of the HTML tag name. These should be tested with a Mocha callback.
-	 1. `style` props should be `style[SUFFIX]` and be tested with a Jest DOM snapshot by adding a Story to Storybook.
-	 1. `className` props should be `className[SUFFIX]` and be `PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])` and be tested with a Jest DOM snapshot by adding a Story to Storybook.
+   1. `ref` callbacks should be within an `object` named refs with typically a key name of the HTML tag name. These should be tested with a Mocha callback.
+   1. `style` props should be `style[SUFFIX]` and be tested with a Jest DOM snapshot by adding a Story to Storybook.
+   1. `className` props should be `className[SUFFIX]` and be `PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])` and be tested with a Jest DOM snapshot by adding a Story to Storybook.
 
 ## How to add a new component
 

RELEASENOTES.md

@@ -31,6 +31,18 @@ These are changes that have backwards-compatible solutions present and that comp
 
 ### Latest Release
 
+## Release 0.9.2
+
+**Bugfixes**
+
+* `DataTable`: Adds event listeners to listen for window resize by default. This creates a behavior that truncates horizontal cells and is similar to how a `DataTable` on the Salesforce Platform works.
+
+## Release 0.9.2
+
+**Major Features**
+
+* `DataTable` supports fixed headers and this allows the table headings to be visible while the table vertically scrolls.
+
 ## Release 0.9.1
 
 **Notes**

components/app-launcher/__docs__/storybook-stories.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import React from 'react';
 
 import PropTypes from 'prop-types';

components/app-launcher/index.jsx

@@ -32,14 +32,6 @@ const defaultProps = {
  * The App Launcher allows the user to quickly access all the apps and functionality with their organization.
  * The App Launcher should generally only be used as a sub-component of the [Global Navigation Bar](/components/global-navigation-bar)
  *
- * Also note: App Launcher is not included in the standard component export. To import it, you must reference it directly via its path.
- * Example:
- * ```
- * import AppLauncher from 'design-system-react/components/app-launcher';
- * import AppLauncherTile from 'design-system-react/components/app-launcher/tile';
- * import AppLauncherSection from 'design-system-react/components/app-launcher/section';
- * ```
- *
  * USAGE EXAMPLE:
  * ```
  * <AppLauncher>

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 = () => (

components/card/__docs__/storybook-stories.jsx

@@ -20,11 +20,13 @@ import MediaObject from '../../media-object';
 import InlineEdit from '../../forms/input/inline';
 
 const sampleItems = [
-	{ name: 'Cloudhub' },
-	{ name: 'Cloudhub + Anypoint Connectors' },
-	{ name: 'Cloud City' },
+	{ id: '0', name: 'Cloudhub' },
+	{ id: '1', name: 'Cloudhub + Anypoint Connectors' },
+	{ id: '2', name: 'Cloud City' },
 ];
 
+let currentId = 3;
+
 class DemoCard extends React.Component {
 	static displayName = 'DemoCard';
 
@@ -63,7 +65,10 @@ class DemoCard extends React.Component {
 		action('add')(...rest);
 
 		this.setState({
-			items: [{ name: `New item #${shortid.generate()}` }, ...this.state.items],
+			items: [
+				{ id: currentId++, name: `New item #${shortid.generate()}` },
+				...this.state.items,
+			],
 		});
 	};
 
@@ -107,7 +112,7 @@ class DemoCard extends React.Component {
 					icon={<Icon category="standard" name="document" size="small" />}
 					empty={isEmpty ? <CardEmpty heading="No Related Items" /> : null}
 				>
-					<DataTable id="SLDSDataTableExample-1" items={items} bordered>
+					<DataTable id="SLDSDataTableExample-1" items={items}>
 						<DataTableColumn label="Opportunity Name" property="name" truncate>
 							<DataTableHighlightCell search={this.state.filter} />
 						</DataTableColumn>

components/color-picker/__tests__/color-picker.browser-test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';

components/color-picker/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';

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

@@ -1,4 +1,4 @@
-// Import your external dependencies
+/* eslint-disable max-lines */
 import React from 'react';
 import PropTypes from 'prop-types';
 import chai, { expect } from 'chai';

components/combobox/combobox.jsx

@@ -1,7 +1,9 @@
+/* eslint-disable max-lines */
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
 /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 /* eslint-disable jsx-a11y/role-has-required-aria-props */
+/* eslint-disable max-lines */
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/component-docs.json

@@ -3942,6 +3942,30 @@
                     }
                 ],
                 "returns": null
+            },
+            {
+                "name": "resizeFixedHeaders",
+                "docblock": null,
+                "modifiers": [],
+                "params": [
+                    {
+                        "name": "event",
+                        "type": null
+                    }
+                ],
+                "returns": null
+            },
+            {
+                "name": "toggleFixedHeaderListeners",
+                "docblock": null,
+                "modifiers": [],
+                "params": [
+                    {
+                        "name": "attach",
+                        "type": null
+                    }
+                ],
+                "returns": null
             }
         ],
         "props": {
@@ -4014,19 +4038,26 @@
                 "required": false,
                 "description": "A variant which adds border to the vertical columns."
             },
-            "id": {
+            "fixedHeader": {
                 "type": {
-                    "name": "string"
+                    "name": "bool"
                 },
                 "required": false,
-                "description": "A unique ID is needed in order to support keyboard navigation and ARIA support."
+                "description": "Use this to enable fixed headers and scrolling columns / rows. Appearance / behavior is consistent only if used in combination with `fixedLayout`. Since scrolling is enabled, columns are not truncated unless a width is set. Due to `overflow:hidden` elements, any dialog components will need a separate render tree (portal) such as with `menuPosition: overflowBoundaryElement` in order to break out of the container."
             },
             "fixedLayout": {
                 "type": {
                     "name": "bool"
                 },
                 "required": false,
-                "description": "Use this if you are creating an advanced table (selectable, sortable, or resizable rows)"
+                "description": "Use this if you are creating an advanced table (selectable, sortable, or resizable rows). Columns widths will be truncate based on width and DOM ancestors. See `fixedHeader` to enable horizontal and vertical scrolling."
+            },
+            "id": {
+                "type": {
+                    "name": "string"
+                },
+                "required": false,
+                "description": "A unique ID is needed in order to support keyboard navigation and ARIA support."
             },
             "items": {
                 "type": {
@@ -4051,6 +4082,13 @@
                 "required": false,
                 "description": "A variant which removes hover style on rows"
             },
+            "onFixedHeaderResize": {
+                "type": {
+                    "name": "func"
+                },
+                "required": false,
+                "description": "By default this function resizes the display headers when fixedHeader is `true`, but this behavior can be overridden. Passes an event and a data object with properties `headerRefs`, an array of DOM nodes referencing the `thead th` elements and `scrollerRef`, a DOM node referencing `.slds-table_header-fixed_scroller`"
+            },
             "onRowChange": {
                 "type": {
                     "name": "func"
@@ -4065,6 +4103,13 @@
                 "required": false,
                 "description": "This function fires when the table should be sorted."
             },
+            "onToggleFixedHeaderListeners": {
+                "type": {
+                    "name": "func"
+                },
+                "required": false,
+                "description": "By default this function attaches/detaches listeners for window resize and tbody scrolling when fixedHeader is `true`, but this behavior can be overridden. Passes an event and a data object with an `attach` boolean property to determine whether listeners should be attached, a `resizeHandler` function property that can be called as-needed, and a `scrollerRef` DOM node property that serves as a reference to `.slds-table_header-fixed_scroller`"
+            },
             "selection": {
                 "type": {
                     "name": "array"

components/data-table/__docs__/site-stories.js

@@ -8,6 +8,7 @@ const siteStories = [
 	require('raw-loader!@salesforce/design-system-react/components/data-table/__examples__/basic-fixed-layout.jsx'),
 	require('raw-loader!@salesforce/design-system-react/components/data-table/__examples__/advanced.jsx'),
 	require('raw-loader!@salesforce/design-system-react/components/data-table/__examples__/advanced-single-select.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/data-table/__examples__/fixed-header.jsx'),
 ];
 
 module.exports = siteStories;