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

Author: interactivellama

CONTRIBUTING.md

@@ -17,7 +17,8 @@ We'll review your code, suggest any needed changes, and merge it in. Thank you.
 
 ## Concepts and Best Practices
 
-- <a name="approved-slds-patterns" href="#approved-slds-patterns">#</a> This library should include only components which have approved patterns in SLDS.
+- <a name="not-bootstrap" href="#not-bootstrap">#</a> This project is not Bootstrap. The primary audience for this project is software engineers. Yes, contributors should over-document and explain as you need to, but you do not need to have components just work when you drop them on the page. New components should always start out as controlled by their parent and only be uncontrolled (that is have state) if a use case presents itself. In short, it's better to have a component that needs 20 props set and outputs the correct SLDS markup, than to have a component that works with no props set. Think of this project as SLDS templates with minimal logic that happen to work with the React framework. 
+- <a name="approved-slds-patterns" href="#approved-slds-patterns">#</a> This library should include only components which have approved patterns in SLDS. If there is a use case from a designer that conforms to an SLDS pattern, that component should be able to be implemented with this library.
 - <a name="controlled-component" href="#controlled-component">#</a> Know what a [controlled component](#understanding-controlled-and-uncontrolled-components) is.
 - <a name="familiarize" href="#familiarize">#</a> Familiarize yourself with concepts used in the rest of the library.
 - <a name="eslint-all-files-touched" href="#eslint-all-files-touched">#</a> If a file is touched that has outstanding ESlint errors, please fix the ESlint errors first (and in a separate commit). Sometimes special cases require an `eslint-disable` comment for a particular rule and/or line. Please use sparingly.
@@ -34,6 +35,7 @@ We'll review your code, suggest any needed changes, and merge it in. Thank you.
 - <a name="event-callbacks" href="#event-callbacks">#</a> Event callbacks should pass in the synthetic event, then a data object with contents that relate to the event.
 - <a name="boolean-prop-prefix" href="#boolean-prop-prefix">#</a> If a prop is a boolean, please prefix with `is` or `can` or suffix it with `-able`. Never default a prop to `true`.
 - <a name="use-checkprops" href="#use-checkprops">#</a> Add as many prop checking tests that will _only run in development_ as needed via `checkProp`. If the test can become an independent module and work in multiple components, add it to the `utilities` folder.
+- <a name="no-window-events" href="#no-window-events">#</a> Global window events like `resize` or external DOM nodes should not be accessed from the component. If needed, `body` can be used for additional mount nodes. If a menu needs to be smaller to be responsive, consuming applications should listen for the resize event and change the correct props to make the component responsive--or a CSS solution should be found. The component should not be listening to the event directly. Global key press or mouse clicks are fine if used appropriately.
 - <a name="all-text-can-be-internationalized" href="#all-text-can-be-internationalized">#</a> Any text the user can read (including text for screenreaders) should be able to be set via a prop for internationalization.
 - <a name="avoid-css" href="#avoid-css">#</a> Avoid use of inline styles and additional CSS classes not present in SLDS.
 - <a name="different-react-component-hierarchy" href="#different-react-component-hierarchy">#</a> React component hierarchy doesn't always mean HTML tag hierarchy. Sometimes children become the wrapping component.
@@ -44,8 +46,8 @@ We'll review your code, suggest any needed changes, and merge it in. Thank you.
 ## Understanding Controlled and Uncontrolled Components
 - All new components should be controlled at first and then uncontrolled support added later if needed. 
 - All Design System React components should be able to be "controlled"--that is expose a callback and expect their parent to control them with props. 
-- Please note that if controlled by its parent, a component will appear broken if just copied and pasted into an application without a parent to control its value.
-- Controlled components can be stateless components.
+- Please note that if controlled by its parent, a component will appear broken if just copied and pasted into an application without a parent to control its props.
+- Controlled components can be stateless components, but entirely stateless components do complicate DOM selectors for the consuming applications.
 
 A **controlled** `<input>` has a `value` prop. Rendering a controlled `<input>` will reflect the value of the `value` prop.
 

README.md

@@ -1,10 +1,12 @@
-# Salesforce Design System
-### Interactive and accessible components for React
+# Salesforce Lightning Design System for JavaScript
+### Lightweight and accessible React components
 
 [![Build Status](https://travis-ci.com/salesforce-ux/design-system-react.svg?token=BMXxPFKR5GZuYsqAFsEf&branch=master)](https://travis-ci.com/salesforce-ux/design-system-react)
 
 ## Overview
-Please visit [Design System React](https://react.lightningdesignsystem.com/) for documentation and examples of using the Design System React components. The documentation site has a [Getting Started Guide](https://react.lightningdesignsystem.com/getting-started) and a [FAQ](https://react.lightningdesignsystem.com/faq) page.
+Welcome to the project! :wave: This is an internal open source project and contributions are expected from production teams consuming this library. There is only one engineer 100%-aligned to this project at this moment. All other contributors are on production teams that ship end-product with releases dates, too.
+
+Please visit [Design System React](https://react.lightningdesignsystem.com/) for documentation and examples of using the Design System React components. The documentation site has a [Getting Started Guide](https://react.lightningdesignsystem.com/getting-started) and a [FAQ](https://react.lightningdesignsystem.com/faq) page. If you are new to this project or React, please review the [Concepts and Best Practices](https://react.lightningdesignsystem.com/contributing#concepts-and-best-practices) section of the [Contributing](https://react.lightningdesignsystem.com/contributing) page. It will help you with the approach of this library and offer some suggestions for your own components.
 
 The Design System React library is the [React](https://facebook.github.io/react/) implementation of the [Lightning Design System](https://www.lightningdesignsystem.com/). Each Design System React component is a specific variant of a component from Lightning Design System. For example, `SLDSMenuDropdown` represents [Lightning Design System Menu > Dropdown](http://www.lightningdesignsystem.com/components/menus/#dropdown),
 and `SLDSLookup` represents [Lightning Design System Lookup > Base](http://www.lightningdesignsystem.com/components/lookups/#base).
@@ -38,7 +40,7 @@ Note: `design-system-react` is optimized for React 0.14.x and uses Lightning Des
 
 ### New to React?
 
-Take a look at our [recommended reading list](https://react.lightningdesignsystem.com/resources) on the documentation site and level up on your knowledge. The reading list also includes helpful articles on Redux, Webpack, ES6, and structuring your app.
+Take a look at our [recommended reading list](https://react.lightningdesignsystem.com/resources) on the documentation site and level up on your knowledge. The reading list also includes helpful articles on Redux, Webpack, ES6, and structuring your app. The [Concepts and Best Practices](https://react.lightningdesignsystem.com/contributing#concepts-and-best-practices) section of the [Contributing](https://react.lightningdesignsystem.com/contributing) page will help you understand the approach of this library and offer some suggestions for your own components, too.
 
 ### NPM
 
@@ -80,7 +82,7 @@ Read our [FAQ](https://react.lightningdesignsystem.com/faq) on the documentation
 
 ## Contributing to the code base
 
-Please read the [CONTRIBUTING.md](CONTRIBUTING.md) first.
+Please read the [CONTRIBUTING.md](CONTRIBUTING.md) first. If you'd like to meet or discuss this project, please contact @interactivellama, so you can be invited to the Slack channel and/or the weekly Cross-Cloud Office Hours.
 
 ## Licenses
 

components/menu-dropdown/menu-dropdown.jsx

@@ -78,7 +78,10 @@ const DropdownNubbinPositions = [
 ];
 
 /**
- * The MenuDropdown component is a variant of the Lightning Design System Menu component.
+ * The MenuDropdown component is a variant of the Lightning Design System Menu component. This component
+ * may require a polyfill such as [classList](https://github.com/yola/classlist-polyfill) due to
+ * [react-onclickoutside](https://github.com/Pomax/react-onclickoutside) if Internet Explorer 11 
+ * support is needed.
  */
 const MenuDropdown = React.createClass({
 	// ### Display Name

components/menu-list/list-item.jsx

@@ -147,18 +147,23 @@ const ListItem = React.createClass({
 							{
 								'slds-has-divider--top-space': this.props.divider === 'top',
 								'slds-has-divider--bottom-space': this.props.divider === 'bottom'
-							}
+							},
+							this.props.className
 						)}
 						onMouseDown={this.handleMouseDown}
 						role="separator"
 					>
-						<span className={classNames('slds-text-title--caps', this.props.className)}>{this.props.label}</span>
+						<span className="slds-text-title--caps">{this.props.label}</span>
 					</li>
 				);
 			}
 			case 'divider': {
 				return (
-					<li className="slds-has-divider" onMouseDown={this.handleMouseDown} role="separator"></li>
+					<li
+						className={classNames('slds-has-divider', this.props.className)}
+						onMouseDown={this.handleMouseDown}
+						role="separator"
+					></li>
 				);
 			}
 			case 'link':

components/tabs/index.jsx

@@ -62,7 +62,6 @@ function isTabDisabled (node) {
 	return node.getAttribute('aria-disabled') === 'true';
 }
 
-
 /**
  * Tabs keeps related content in a single container that is shown and hidden through navigation.
  */
@@ -124,6 +123,11 @@ const Tabs = React.createClass({
 		 */
 		onSelect: PropTypes.func,
 
+		/**
+		 * If the Tabs should be scopped, defaults to false
+		 */
+		variant: React.PropTypes.oneOf(['default', 'scoped']),
+
 		/**
 		 * The Tab (and corresponding TabPanel) that is currently selected.
 		 */
@@ -132,7 +136,8 @@ const Tabs = React.createClass({
 
 	getDefaultProps () {
 		return {
-			defaultSelectedIndex: 0
+			defaultSelectedIndex: 0,
+			variant: 'default'
 		};
 	},
 
@@ -143,12 +148,16 @@ const Tabs = React.createClass({
 	componentWillMount () {
 		// If no `id` is supplied in the props we generate one. An HTML ID is _required_ for several elements in a tabs component in order to leverage ARIA attributes for accessibility.
 		this.generatedId = shortid.generate();
-
+		this.flavor = this.getVariant();
 		this.setState({
 			selectedIndex: this.props.defaultSelectedIndex
 		});
 	},
 
+	getVariant () {
+		return this.props.variant === 'scoped' ? 'scoped' : 'default';
+	},
+
 	handleClick (e) {
 		let node = e.target;
 		/* eslint-disable no-cond-assign */
@@ -308,13 +317,14 @@ const Tabs = React.createClass({
 
 		return (
 			// `parentId` gets consumed by TabsList, adding a suffix of `-tabs__nav`
-			<TabsList id={parentId}>
+			<TabsList id={parentId} variant={this.getVariant()}>
 				{children.map((child, index) => {
 					const ref = `tabs-${index}`;
 					const id = `${parentId}-slds-tabs--tab-${index}`;
 					const panelId = `${parentId}-slds-tabs--panel-${index}`;
 					const selected = this.getSelectedIndex() === index;
 					const focus = selected && this.state.focus;
+					const variant = this.getVariant();
 					return (
 						<Tab
 							key={index}
@@ -324,6 +334,7 @@ const Tabs = React.createClass({
 							id={id}
 							panelId={panelId}
 							disabled={child.props.disabled}
+							variant={variant}
 						>
 							{child.props.label}
 						</Tab>
@@ -342,6 +353,7 @@ const Tabs = React.createClass({
 			const tabId = `${parentId}-slds-tabs--tab-${index}`;
 			const id = `${parentId}-slds-tabs--panel-${index}`;
 			const selected = selectedIndex === index;
+			const variant = this.getVariant();
 
 			return (
 				<TabPanel
@@ -350,6 +362,7 @@ const Tabs = React.createClass({
 					selected={selected}
 					id={id}
 					tabId={tabId}
+					variant={variant}
 				>
 					{children[index]}
 				</TabPanel>
@@ -363,6 +376,7 @@ const Tabs = React.createClass({
 		const {
 			className,
 			id = this.generatedId,
+			variant = this.getVariant,
 			...attributes
 			} = this.props;
 
@@ -381,12 +395,16 @@ const Tabs = React.createClass({
 			<div
 				id={id}
 				className={classNames(
-					'slds-tabs--default',
+					{
+						'slds-tabs--default': variant === 'default',
+						'slds-tabs--scoped': variant === 'scoped'
+					},
 					className
 				)}
 				onClick={this.handleClick}
 				onKeyDown={this.handleKeyDown}
 				data-tabs
+				variant={variant}
 				{...attributes}
 			>
 				{this.renderTabsList(id)}

components/tabs/tab-panel.jsx

@@ -22,21 +22,23 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { TAB_PANEL } from '../../utilities/constants';
 
-const TabPanel = ({ className, children, selected, id, tabId, ...attributes }) => (
+const TabPanel = ({ className, children, variant, selected, id, tabId, ...attributes }) => (
 	<div
 		{...attributes}
 		className={classNames(
-			'slds-tabs--default__content',
 			className,
 			{
 				'slds-show': selected,
-				'slds-hide': !selected
+				'slds-hide': !selected,
+				'slds-tabs--default__content': variant === 'default',
+				'slds-tabs--scoped__content': variant === 'scoped'
 			}
 		)}
 		role="tabpanel"
 		id={id}
 		aria-selected={selected ? 'true' : 'false'}
 		aria-labelledby={tabId}
+		variant={variant}
 	>
 		{children.props.children}
 	</div>
@@ -89,13 +91,19 @@ TabPanel.propTypes = {
 	 */
 	selected: PropTypes.bool,
 
+	/**
+	 * If the Tabs should be scopped, defaults to false
+	 */
+	variant: React.PropTypes.oneOf(['default', 'scoped']),
+
 	/**
 	 * The HTML ID of the `<Tab />` that controls this panel.
 	 */
 	tabId: PropTypes.string
 };
 
 TabPanel.defaultProps = {
+	variant: 'default',
 	selected: false
 };
 

components/tabs/tab.jsx

@@ -73,15 +73,21 @@ const Tab = React.createClass({
 		/**
 		 * The string that is shown as both the title and the label for this tab.
 		 */
-		children: PropTypes.string
+		children: PropTypes.string,
+
+		/**
+		 * If the Tabs should be scopped, defaults to false
+		 */
+		variant: React.PropTypes.oneOf(['default', 'scoped'])
 	},
 
 	getDefaultProps () {
 		return {
 			focus: false,
 			selected: false,
 			activeTabClassName: 'slds-active',
-			disabledTabClassName: 'slds-disabled'
+			disabledTabClassName: 'slds-disabled',
+			variant: 'default'
 		};
 	},
 
@@ -109,20 +115,21 @@ const Tab = React.createClass({
 			className,
 			children,
 			id,
+			variant,
 			...attributes } = this.props;
 
 		delete attributes.focus;
-
 		return (
 			<li
 				{...attributes}
 				className={classNames(
-					'slds-tabs--default__item',
 					'slds-text-title--caps',
 					className,
 					{
 						[activeTabClassName]: selected,
-						[disabledTabClassName]: disabled
+						[disabledTabClassName]: disabled,
+						'slds-tabs--default__item': variant === 'default',
+						'slds-tabs--scoped__item': variant === 'scoped'
 					}
 				)}
 				role="tab"
@@ -134,7 +141,14 @@ const Tab = React.createClass({
 				title={children}
 			>
 				<a
-					className="slds-tabs--default__link"
+					className={classNames(
+						{
+							[activeTabClassName]: selected,
+							[disabledTabClassName]: disabled,
+							'slds-tabs--default__link': variant === 'default',
+							'slds-tabs--scoped__link': variant === 'scoped'
+						}
+					)}
 					href="javascript:void(0);" // eslint-disable-line no-script-url
 					role="presentation"
 					tabIndex="-1"

components/tabs/tabs-list.jsx

@@ -27,16 +27,21 @@ const TabsList = ({
 	id,
 	className,
 	children,
+	variant,
 	...attributes
 }) => (
 	<ul
 		id={`${id}-slds-tabs__nav`}
 		{...attributes}
 		className={classNames(
-			'slds-tabs--default__nav',
-			className
+			className,
+			{
+				'slds-tabs--default__nav': variant === 'default',
+				'slds-tabs--scoped__nav': variant === 'scoped'
+			}
 		)}
 		role="tablist"
+		variant={variant}
 	>
 		{children}
 	</ul>
@@ -65,7 +70,12 @@ TabsList.propTypes = {
 	children: PropTypes.oneOfType([
 		PropTypes.object,
 		PropTypes.array
-	])
+	]),
+
+	/**
+	 * If the Tabs should be scopped, defaults to false
+	 */
+	variant: React.PropTypes.oneOf(['default', 'scoped'])
 };
 
 module.exports = TabsList;