Merge pull request #4 from mui-org/next

current mui version

docs/src/pages/css-in-js/basics/NestedStylesHook.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles({
+  root: {
+    padding: 16,
+    color: 'red',
+    '& p': {
+      color: 'green',
+      '& span': {
+        color: 'blue',
+      },
+    },
+  },
+});
+
+export default function NestedStylesHook() {
+  const classes = useStyles();
+  return (
+    <Paper className={classes.root}>
+      This is red since it is inside the paper.
+      <p>
+        This is green since it is inside the paragraph{' '}
+        <span>and this is blue since it is inside the span</span>
+      </p>
+    </Paper>
+  );
+}

docs/src/pages/css-in-js/basics/NestedStylesHook.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles({
+  root: {
+    padding: 16,
+    color: 'red',
+    '& p': {
+      color: 'green',
+      '& span': {
+        color: 'blue',
+      },
+    },
+  },
+});
+
+export default function NestedStylesHook() {
+  const classes = useStyles();
+  return (
+    <Paper className={classes.root}>
+      This is red since it is inside the paper.
+      <p>
+        This is green since it is inside the paragraph{' '}
+        <span>and this is blue since it is inside the span</span>
+      </p>
+    </Paper>
+  );
+}

docs/src/pages/css-in-js/basics/basics.md

@@ -126,6 +126,28 @@ export default withStyles(styles)(HigherOrderComponent);
 
 {{"demo": "pages/css-in-js/basics/HigherOrderComponent.js"}}
 
+## Nesting selectors
+
+You can nest selectors to target elements inside the current class or component.
+The following example is powered by the Hook API, it works the same way with the other APIs.
+
+```js
+const useStyles = makeStyles({
+  root: {
+    padding: 16,
+    color: 'red',
+    '& p': {
+      color: 'green',
+      '& span': {
+        color: 'blue'
+      }
+    }
+  },
+});
+```
+
+{{"demo": "pages/css-in-js/basics/NestedStylesHook.js"}}
+
 ## Adapting based on props
 
 You can pass a function ("interpolations") to a style property to adapt it based on its props.

docs/src/pages/demos/bottom-navigation/LabelBottomNavigation.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import Icon from '@material-ui/core/Icon';
+import RestoreIcon from '@material-ui/icons/Restore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+const useStyles = makeStyles({
+  root: {
+    width: 500,
+  },
+});
+
+function LabelBottomNavigation() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('recents');
+
+  function handleChange(event: React.ChangeEvent<{}>, newValue: string) {
+    setValue(newValue);
+  }
+
+  return (
+    <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
+      <BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
+      <BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
+      <BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
+      <BottomNavigationAction label="Folder" value="folder" icon={<Icon>folder</Icon>} />
+    </BottomNavigation>
+  );
+}
+
+export default LabelBottomNavigation;

docs/src/pages/demos/bottom-navigation/SimpleBottomNavigation.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import RestoreIcon from '@material-ui/icons/Restore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+const useStyles = makeStyles({
+  root: {
+    width: 500,
+  },
+});
+
+function SimpleBottomNavigation() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <BottomNavigation
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+      showLabels
+      className={classes.root}
+    >
+      <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
+      <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+      <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
+    </BottomNavigation>
+  );
+}
+
+export default SimpleBottomNavigation;

docs/src/pages/utils/popper/popper.md

@@ -14,8 +14,10 @@ Some important features of the `Popper` component:
 - 📦 Less than [10 KB gzipped](/size-snapshot).
 - The children is [`Portal`](/utils/portal/) to the body of the document to avoid rendering problems.
 You can disable this behavior with `disablePortal`.
-- The scroll and click away aren't blocked like with the [`Popover`](/utils/popover/) component.
+- The scroll isn't blocked like with the [`Popover`](/utils/popover/) component.
 The placement of the popper updates with the available area in the viewport.
+- Clicking away does not hide the `Popper` component. 
+  If you need this behavior, you can use [`ClickAwayListener`](utils/click-away-listener/) - see the example in the [menu documentation section](/demos/menus/#menulist-composition).
 - The `anchorEl` is passed as the reference object to create a new `Popper.js` instance.
 
 ## Simple Popper

packages/material-ui/src/FilledInput/FilledInput.js

@@ -97,7 +97,6 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '27px 12px 10px',
-      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
     },
     /* Styles applied to the `input` element. */
     input: {

packages/material-ui/src/InputBase/InputBase.js

@@ -37,6 +37,7 @@ export const styles = theme => {
       color: theme.palette.text.primary,
       fontSize: theme.typography.pxToRem(16),
       lineHeight: '1.1875em', // Reset (19px), match the native input line-height
+      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
       cursor: 'text',
       display: 'inline-flex',
       alignItems: 'center',

packages/material-ui/src/OutlinedInput/OutlinedInput.js

@@ -53,7 +53,6 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '18.5px 14px',
-      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
     },
     /* Styles applied to the `NotchedOutline` element. */
     notchedOutline: {},

packages/material-ui/src/RadioGroup/RadioGroup.js

@@ -6,106 +6,104 @@ import warning from 'warning';
 import FormGroup from '../FormGroup';
 import { createChainedFunction, find } from '../utils/helpers';
 
-class RadioGroup extends React.Component {
-  radios = [];
+const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
+  const { actions, children, defaultValue, name, value: valueProp, onChange, ...other } = props;
+  const radiosRef = React.useRef([]);
+  const { current: isControlled } = React.useRef(props.value != null);
+  const [valueState, setValue] = React.useState(() => {
+    if (!isControlled) {
+      return defaultValue;
+    }
+    return null;
+  });
 
-  constructor(props) {
-    super();
-    this.isControlled = props.value != null;
+  React.useImperativeHandle(actions, () => ({
+    focus: () => {
+      const radios = radiosRef.current;
+      if (!radios.length) {
+        return;
+      }
 
-    if (!this.isControlled) {
-      this.state = {
-        value: props.defaultValue,
-      };
-    }
-  }
+      const focusRadios = radios.filter(n => !n.disabled);
+
+      if (!focusRadios.length) {
+        return;
+      }
+
+      const selectedRadio = find(focusRadios, n => n.checked);
+
+      if (selectedRadio) {
+        selectedRadio.focus();
+        return;
+      }
 
-  componentDidUpdate() {
+      focusRadios[0].focus();
+    },
+  }));
+
+  React.useEffect(() => {
     warning(
-      this.isControlled === (this.props.value != null),
+      isControlled === (valueProp != null),
       [
         `Material-UI: A component is changing ${
-          this.isControlled ? 'a ' : 'an un'
-        }controlled RadioGroup to be ${this.isControlled ? 'un' : ''}controlled.`,
+          isControlled ? 'a ' : 'an un'
+        }controlled RadioGroup to be ${isControlled ? 'un' : ''}controlled.`,
         'Input elements should not switch from uncontrolled to controlled (or vice versa).',
         'Decide between using a controlled or uncontrolled RadioGroup ' +
           'element for the lifetime of the component.',
         'More info: https://fb.me/react-controlled-components',
       ].join('\n'),
     );
-  }
-
-  focus = () => {
-    if (!this.radios || !this.radios.length) {
-      return;
-    }
+  }, [valueProp, isControlled]);
 
-    const focusRadios = this.radios.filter(n => !n.disabled);
+  const value = isControlled ? valueProp : valueState;
 
-    if (!focusRadios.length) {
-      return;
+  const handleChange = event => {
+    if (!isControlled) {
+      setValue(event.target.value);
     }
 
-    const selectedRadio = find(focusRadios, n => n.checked);
-
-    if (selectedRadio) {
-      selectedRadio.focus();
-      return;
+    if (onChange) {
+      onChange(event, event.target.value);
     }
-
-    focusRadios[0].focus();
   };
 
-  handleChange = event => {
-    if (!this.isControlled) {
-      this.setState({
-        value: event.target.value,
-      });
-    }
-
-    if (this.props.onChange) {
-      this.props.onChange(event, event.target.value);
-    }
-  };
-
-  render() {
-    const { children, name, value: valueProp, onChange, ...other } = this.props;
-
-    const value = this.isControlled ? valueProp : this.state.value;
-    this.radios = [];
-
-    return (
-      <FormGroup role="radiogroup" {...other}>
-        {React.Children.map(children, child => {
-          if (!React.isValidElement(child)) {
-            return null;
-          }
-
-          warning(
-            child.type !== React.Fragment,
-            [
-              "Material-UI: the RadioGroup component doesn't accept a Fragment as a child.",
-              'Consider providing an array instead.',
-            ].join('\n'),
-          );
-
-          return React.cloneElement(child, {
-            name,
-            inputRef: node => {
-              if (node) {
-                this.radios.push(node);
-              }
-            },
-            checked: value === child.props.value,
-            onChange: createChainedFunction(child.props.onChange, this.handleChange),
-          });
-        })}
-      </FormGroup>
-    );
-  }
-}
+  radiosRef.current = [];
+  return (
+    <FormGroup role="radiogroup" ref={ref} defaultValue={defaultValue} {...other}>
+      {React.Children.map(children, child => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        warning(
+          child.type !== React.Fragment,
+          [
+            "Material-UI: the RadioGroup component doesn't accept a Fragment as a child.",
+            'Consider providing an array instead.',
+          ].join('\n'),
+        );
+
+        return React.cloneElement(child, {
+          name,
+          inputRef: node => {
+            if (node) {
+              radiosRef.current.push(node);
+            }
+          },
+          checked: value === child.props.value,
+          onChange: createChainedFunction(child.props.onChange, handleChange),
+        });
+      })}
+    </FormGroup>
+  );
+});
 
 RadioGroup.propTypes = {
+  /**
+   * @ignore
+   */
+  actions: PropTypes.shape({ current: PropTypes.object }),
   /**
    * The content of the component.
    */