[ButtonGroup] Add orientation prop

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

@@ -12,6 +12,10 @@ import Button from '../Button';
 Button.styles;
 
 export const styles = theme => ({
+  /* Styles applied to the root element if `orientation="vertical"`. */
+  vertical: {
+   flexDirection: 'column',
+  },
   /* Styles applied to the root element. */
   root: {
     display: 'inline-flex',
@@ -28,6 +32,9 @@ export const styles = theme => ({
   /* Styles applied to the children. */
   grouped: {
     minWidth: 40,
+  },
+  /* Styles applied to the children if `orientation="horizontal"`. */
+  groupedHorizontal: {
     '&:not(:first-child)': {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
@@ -36,15 +43,36 @@ export const styles = theme => ({
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
     },
+  },
+    /* Styles applied to the children if `orientation="vertical"`. */
+  groupedVertical: {
+    '&:not(:first-child)': {
+      borderTopRightRadius: 0,
+     borderTopLeftRadius: 0,
+    },
+    '&:not(:last-child)': {
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
   },
   /* Styles applied to the children if `variant="text"`. */
-  groupedText: {
+  groupedText: {},
+  /* Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */
+  groupedTextHorizontal: {
     '&:not(:last-child)': {
       borderRight: `1px solid ${
         theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
       }`,
     },
   },
+  /* Styles applied to the children if `variant="text"` and `orientation="vertical"`. */
+  groupedTextVertical: {
+    '&:not(:last-child)': {
+      borderBottom: `1px solid ${
+        theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+      }`,
+    },
+  },
   /* Styles applied to the children if `variant="text"` and `color="primary"`. */
   groupedTextPrimary: {
     '&:not(:last-child)': {
@@ -58,14 +86,25 @@ export const styles = theme => ({
     },
   },
   /* Styles applied to the children if `variant="outlined"`. */
-  groupedOutlined: {
+   groupedOutlined: {},
+   /* Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */
+   groupedOutlinedHorizontal: {
     '&:not(:first-child)': {
       marginLeft: -1,
     },
     '&:not(:last-child)': {
       borderRightColor: 'transparent',
     },
   },
+  /* Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */
+  groupedOutlinedVertical: {
+    '&:not(:first-child)': {
+      marginTop: -1,
+    },
+    '&:not(:last-child)': {
+      borderBottomColor: 'transparent',
+    },
+  },
   /* Styles applied to the children if `variant="outlined"` and `color="primary"`. */
   groupedOutlinedPrimary: {
     '&:hover': {
@@ -81,23 +120,36 @@ export const styles = theme => ({
   /* Styles applied to the children if `variant="contained"`. */
   groupedContained: {
     boxShadow: 'none',
+  },
+  /* Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */
+  groupedContainedHorizontal: {
     '&:not(:last-child)': {
       borderRight: `1px solid ${theme.palette.grey[400]}`,
       '&$disabled': {
         borderRight: `1px solid ${theme.palette.action.disabled}`,
       },
     },
   },
+
+  /* Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */
+  groupedContainedVertical: {
+    '&:not(:last-child)': {
+      borderBottom: `1px solid ${theme.palette.grey[400]}`,
+      '&$disabled': {
+        borderBottom: `1px solid ${theme.palette.action.disabled}`,
+      },
+    },
+  },
   /* Styles applied to the children if `variant="contained"` and `color="primary"`. */
   groupedContainedPrimary: {
     '&:not(:last-child)': {
-      borderRight: `1px solid ${theme.palette.primary.dark}`,
+      borderColor: theme.palette.primary.dark,
     },
   },
   /* Styles applied to the children if `variant="contained"` and `color="secondary"`. */
   groupedContainedSecondary: {
     '&:not(:last-child)': {
-      borderRight: `1px solid ${theme.palette.secondary.dark}`,
+      borderColor: theme.palette.secondary.dark,
     },
   },
   /* Pseudo-class applied to child elements if `disabled={true}`. */
@@ -115,14 +167,17 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(props, ref) {
     disableFocusRipple = false,
     disableRipple = false,
     fullWidth = false,
+    orientation = 'horizontal',
     size = 'medium',
     variant = 'outlined',
     ...other
   } = props;
 
   const buttonClassName = clsx(
     classes.grouped,
+    classes[`grouped${capitalize(orientation)}`],
     classes[`grouped${capitalize(variant)}`],
+    classes[`grouped${capitalize(variant)}${capitalize(orientation)}`],
     classes[`grouped${capitalize(variant)}${color !== 'default' ? capitalize(color) : ''}`],
     {
       [classes.disabled]: disabled,
@@ -136,6 +191,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(props, ref) {
         classes.root,
         {
           [classes.contained]: variant === 'contained',
+          [classes.vertical]: orientation === 'vertical',
           [classes.fullWidth]: fullWidth,
         },
         className,
@@ -201,6 +257,10 @@ ButtonGroup.propTypes = {
    * If `true`, the buttons will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * The group orientation.
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * If `true`, the button keyboard focus ripple will be disabled.
    * `disableRipple` must also be true.