[Divider] Add vertical support

mui · Aug 17, 2019 · 57c8781 · 57c8781
1 parent e5b4aa0
commit 57c8781
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js
@@ -23,7 +23,6 @@ const useStyles = makeStyles({
     padding: 10,
   },
   divider: {
-    width: 1,
     height: 28,
     margin: 4,
   },
@@ -45,7 +44,7 @@ export default function CustomizedInputBase() {
       <IconButton className={classes.iconButton} aria-label="search">
         <SearchIcon />
       </IconButton>
-      <Divider className={classes.divider} />
+      <Divider className={classes.divider} orientation="vertical" />
       <IconButton color="primary" className={classes.iconButton} aria-label="directions">
         <DirectionsIcon />
       </IconButton>

diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx
@@ -23,7 +23,6 @@ const useStyles = makeStyles({
     padding: 10,
   },
   divider: {
-    width: 1,
     height: 28,
     margin: 4,
   },
@@ -45,7 +44,7 @@ export default function CustomizedInputBase() {
       <IconButton className={classes.iconButton} aria-label="search">
         <SearchIcon />
       </IconButton>
-      <Divider className={classes.divider} />
+      <Divider className={classes.divider} orientation="vertical" />
       <IconButton color="primary" className={classes.iconButton} aria-label="directions">
         <DirectionsIcon />
       </IconButton>

diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts
@@ -4,13 +4,14 @@ declare const Divider: OverridableComponent<{
   props: {
     absolute?: boolean;
     light?: boolean;
+    orientation?: 'horizontal' | 'vertical';
     variant?: 'fullWidth' | 'inset' | 'middle';
   };
   defaultComponent: 'hr';
   classKey: DividerClassKey;
 }>;
 
-export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle';
+export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle' | 'vertical';
 
 export type DividerProps = SimplifiedPropsOf<typeof Divider>;
 

diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
@@ -33,6 +33,11 @@ export const styles = theme => ({
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
   },
+  /* Styles applied to the root element if `orientation="vertical"`. */
+  vertical: {
+    height: '100%',
+    width: 1,
+  },
 });
 
 const Divider = React.forwardRef(function Divider(props, ref) {
@@ -42,6 +47,7 @@ const Divider = React.forwardRef(function Divider(props, ref) {
     className,
     component: Component = 'hr',
     light = false,
+    orientation = 'horizontal',
     role = Component !== 'hr' ? 'separator' : undefined,
     variant = 'fullWidth',
     ...other
@@ -52,10 +58,10 @@ const Divider = React.forwardRef(function Divider(props, ref) {
       className={clsx(
         classes.root,
         {
-          [classes.inset]: variant === 'inset',
-          [classes.middle]: variant === 'middle',
+          [classes[variant]]: variant !== 'fullWidth',
           [classes.absolute]: absolute,
           [classes.light]: light,
+          [classes.vertical]: orientation === 'vertical',
         },
         className,
       )}
@@ -89,6 +95,10 @@ Divider.propTypes = {
    * If `true`, the divider will have a lighter color.
    */
   light: PropTypes.bool,
+  /**
+   * The divider orientation.
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * @ignore
    */