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

Author: interactivellama

components/combobox/__tests__/__snapshots__/combobox.snapshot-test.jsx.snap

@@ -64,6 +64,13 @@ exports[`Base Custom Menu Item Open DOM Snapshot 1`] = `
           <ul
             className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
             role="presentation"
+            style={
+              Object {
+                "maxWidth": undefined,
+                "position": undefined,
+                "width": undefined,
+              }
+            }
           >
             <li
               className="slds-listbox__item"
@@ -490,6 +497,13 @@ exports[`Base Open Custom Class Name DOM Snapshot 1`] = `
           <ul
             className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid this-is-the-menu"
             role="presentation"
+            style={
+              Object {
+                "maxWidth": undefined,
+                "position": undefined,
+                "width": undefined,
+              }
+            }
           >
             <li
               className="slds-dropdown__header slds-truncate"
@@ -690,6 +704,13 @@ exports[`Base Open DOM Snapshot 1`] = `
           <ul
             className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
             role="presentation"
+            style={
+              Object {
+                "maxWidth": undefined,
+                "position": undefined,
+                "width": undefined,
+              }
+            }
           >
             <li
               className="slds-listbox__item"
@@ -881,6 +902,7 @@ exports[`Base Open Menu Inherit Width Of Menu DOM Snapshot 1`] = `
             style={
               Object {
                 "maxWidth": "500px",
+                "position": undefined,
                 "width": "auto",
               }
             }
@@ -1013,6 +1035,13 @@ exports[`Base Open Menu Sub Header DOM Snapshot 1`] = `
           <ul
             className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
             role="presentation"
+            style={
+              Object {
+                "maxWidth": undefined,
+                "position": undefined,
+                "width": undefined,
+              }
+            }
           >
             <li
               className="slds-dropdown__header slds-truncate"
@@ -2144,6 +2173,13 @@ exports[`Readonly Single Selection Custom Menu Item Open DOM Snapshot 1`] = `
           <ul
             className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_length-with-icon-5"
             role="presentation"
+            style={
+              Object {
+                "maxWidth": undefined,
+                "position": undefined,
+                "width": undefined,
+              }
+            }
           >
             <li
               className="slds-listbox__item"
@@ -3011,6 +3047,13 @@ exports[`Readonly Single Selection Selected Open DOM Snapshot 1`] = `
           <ul
             className="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_length-with-icon-5"
             role="presentation"
+            style={
+              Object {
+                "maxWidth": undefined,
+                "position": undefined,
+                "width": undefined,
+              }
+            }
           >
             <li
               className="slds-listbox__item"

components/combobox/combobox.jsx

@@ -1040,6 +1040,7 @@ class Combobox extends React.Component {
 				}
 				labels={labels}
 				menuItem={this.props.menuItem}
+				menuPosition={this.props.menuPosition}
 				maxWidth={this.props.menuMaxWidth}
 				options={this.props.options}
 				onSelect={this.handleSelect}

components/combobox/private/menu.jsx

@@ -107,13 +107,13 @@ const propTypes = {
 const defaultProps = {};
 
 const Menu = (props) => {
-	const style =
-		props.inheritWidthOf === 'menu'
-			? {
-				width: 'auto',
-				maxWidth: props.maxWidth ? props.maxWidth : 'inherit',
-			}
-			: undefined;
+	let maxWidth = props.inheritWidthOf === 'menu' ? 'inherit' : undefined;
+	maxWidth =
+		props.inheritWidthOf === 'menu' && props.maxWidth
+			? props.maxWidth
+			: maxWidth;
+
+	// .slds-dropdown sets the menu to absolute positioning, since it has a relative parent. Absolute positioning removes clientHeight and clientWidth which Popper.js needs to absolute position the menu's wrapping div. Absolute positioning an already absolute positioned element doesn't work. Setting the menu's position to relative allows PopperJS to work it's magic.
 	const menuOptions = props.options.map((optionData, index) => {
 		const active =
 			index === props.activeOptionIndex &&
@@ -259,7 +259,11 @@ const Menu = (props) => {
 				props.classNameMenu
 			)}
 			role="presentation"
-			style={style}
+			style={{
+				width: props.inheritWidthOf === 'menu' ? 'auto' : undefined,
+				maxWidth,
+				position: props.menuPosition !== 'relative' ? 'relative' : undefined,
+			}}
 		>
 			{menuOptions.length ? (
 				menuOptions

components/radio-button-group/radio.jsx

@@ -1,4 +1,4 @@
 // Alias
-import Radio from '../forms/radio/index';
+import Radio from '../radio/index';
 
 export default Radio;

components/radio-group/radio.jsx

@@ -1,4 +1,4 @@
 // Alias
-import Radio from '../forms/radio/index';
+import Radio from '../radio/index';
 
 export default Radio;

components/radio/__docs__/site-stories.js

@@ -0,0 +1,11 @@
+// This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load.
+
+/* eslint-env node */
+/* eslint-disable global-require */
+
+const siteStories = [
+	require('raw-loader!@salesforce/design-system-react/components/radio/__examples__/default.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/radio/__examples__/disabled.jsx'),
+];
+
+module.exports = siteStories;

components/radio/__examples__/disabled.jsx

@@ -6,7 +6,7 @@ const Example = createReactClass({
 	displayName: 'RadioExample',
 
 	render () {
-		return <Radio id="radioId1" label="Radio Label" disabled />;
+		return <Radio id="radioId2" label="Radio Label" disabled />;
 	},
 });
 

components/site-stories.js

@@ -42,7 +42,7 @@ const documentationSiteLiveExamples = {
 	'progress-ring': require('@salesforce/design-system-react/components/progress-ring/__docs__/site-stories.js'),
 	'radio-button-group': require('@salesforce/design-system-react/components/radio-button-group/__docs__/site-stories.js'),
 	'radio-group': require('@salesforce/design-system-react/components/radio-group/__docs__/site-stories.js'),
-	'forms-radio': require('@salesforce/design-system-react/components/radio-group/__docs__/site-stories.js'),
+	radio: require('@salesforce/design-system-react/components/radio/__docs__/site-stories.js'),
 	tabs: require('@salesforce/design-system-react/components/tabs/__docs__/site-stories.js'),
 	slider: require('@salesforce/design-system-react/components/slider/__docs__/site-stories.js'),
 	'split-view': require('@salesforce/design-system-react/components/split-view/__docs__/site-stories.js'),

components/spinner/__docs__/site-stories.js

@@ -4,8 +4,7 @@
 /* eslint-disable global-require */
 
 const siteStories = [
-	require('raw-loader!@salesforce/design-system-react/components/forms/radio/__examples__/default.jsx'),
-	require('raw-loader!@salesforce/design-system-react/components/forms/radio/__examples__/disabled.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/spinner/__examples__/default.jsx'),
 ];
 
 module.exports = siteStories;