simpler demo :)

mui · Sep 19, 2019 · 3496ab8 · 3496ab8
1 parent 728a930
commit 3496ab8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -12,20 +12,20 @@ import Divider from '@material-ui/core/Divider';
 const useStyles = makeStyles(theme => ({
   root: {
     width: 'fit-content',
-    border: '1px solid rgba(0, 0, 0, 0.12)',
-    borderRadius: 4,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.secondary,
     '& svg': {
-      color: 'rgba(0, 0, 0, 0.54)',
       margin: theme.spacing(2),
     },
   },
   divider: {
-    margin: theme.spacing(1, 0.5),
+    margin: theme.spacing(0, 0.5),
   },
 }));
 
-export default function ToggleButtons() {
+export default function VerticalDividers() {
   const classes = useStyles();
 
   return (

diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
@@ -9,31 +9,33 @@ import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    width: 'fit-content',
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.secondary,
-    '& svg': {
-      margin: theme.spacing(2),
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 'fit-content',
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.secondary,
+      '& svg': {
+        margin: theme.spacing(2),
+      },
+      '& hr': {
+        margin: theme.spacing(0, 0.5),
+      },
     },
-  },
-  divider: {
-    margin: theme.spacing(0, 0.5),
-  },
-}));
+  }),
+);
 
-export default function ToggleButtons() {
+export default function VerticalDividers() {
   const classes = useStyles();
 
   return (
     <Grid container alignItems="center" className={classes.root}>
       <FormatAlignLeftIcon />
       <FormatAlignCenterIcon />
       <FormatAlignRightIcon />
-      <Divider orientation="vertical" className={classes.divider} />
+      <Divider orientation="vertical" />
       <FormatBoldIcon />
       <FormatItalicIcon />
       <FormatUnderlinedIcon />

diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md
@@ -35,6 +35,6 @@ The examples below show two ways of achieving this.
 
 ## Vertical Dividers
 
-You can also render a divider vertically using the `orientation` property.
+You can also render a divider vertically using the `orientation` prop.
 
 {{"demo": "pages/components/dividers/VerticalDividers.js"}}