[docs] Separate ButtonGroup and Fab pages from Button page

docs/pages/api/button-group.md

@@ -81,5 +81,5 @@ If that's not sufficient, you can check the [implementation of the component](ht
 
 ## Demos
 
-- [Buttons](/components/buttons/)
+- [Button Group](/components/button-group/)
 

docs/pages/api/button.md

@@ -95,5 +95,6 @@ You can take advantage of this behavior to [target nested components](/guides/ap
 
 ## Demos
 
+- [Button Group](/components/button-group/)
 - [Buttons](/components/buttons/)
 

docs/pages/api/fab.md

@@ -72,5 +72,5 @@ You can take advantage of this behavior to [target nested components](/guides/ap
 
 ## Demos
 
-- [Buttons](/components/buttons/)
+- [Floating Action Button](/components/floating-action-button/)
 

docs/pages/api/zoom.md

@@ -41,6 +41,5 @@ You can take advantage of this behavior to [target nested components](/guides/ap
 
 ## Demos
 
-- [Buttons](/components/buttons/)
 - [Transitions](/components/transitions/)
 

docs/pages/components/button-group.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+
+const req = require.context('docs/src/pages/components/button-group', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/components/button-group',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/components/button-group';
+
+export default function Page() {
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}

docs/pages/components/floating-action-button.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+
+const req = require.context(
+  'docs/src/pages/components/floating-action-button',
+  false,
+  /\.(md|js|tsx)$/,
+);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/components/floating-action-button',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/components/floating-action-button';
+
+export default function Page() {
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}

docs/src/pages.js

@@ -34,7 +34,9 @@ const pages = [
         subheader: '/components/inputs',
         children: [
           { pathname: '/components/buttons' },
+          { pathname: '/components/button-group' },
           { pathname: '/components/checkboxes' },
+          { pathname: '/components/floating-action-button' },
           { pathname: '/components/pickers', title: 'Date / Time' },
           { pathname: '/components/radio-buttons' },
           { pathname: '/components/selects' },

docs/src/pages/components/buttons/GroupedButtons.js → docs/src/pages/components/button-group/BasicButtonGroup.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function GroupedButtons() {
+export default function BasicButtonGroup() {
   const classes = useStyles();
 
   return (

docs/src/pages/components/buttons/GroupedButtons.tsx → docs/src/pages/components/button-group/BasicButtonGroup.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export default function GroupedButtons() {
+export default function BasicButtonGroup() {
   const classes = useStyles();
 
   return (

docs/src/pages/components/button-group/GroupOrientation.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function GroupOrientation() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <ButtonGroup
+        orientation="vertical"
+        color="primary"
+        aria-label="vertical outlined primary button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        orientation="vertical"
+        color="primary"
+        aria-label="vertical contained primary button group"
+        variant="contained"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        orientation="vertical"
+        color="primary"
+        aria-label="vertical contained primary button group"
+        variant="text"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+    </div>
+  );
+}

docs/src/pages/components/button-group/GroupOrientation.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function GroupOrientation() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <ButtonGroup
+        orientation="vertical"
+        color="primary"
+        aria-label="vertical outlined primary button group"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        orientation="vertical"
+        color="primary"
+        aria-label="vertical contained primary button group"
+        variant="contained"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+      <ButtonGroup
+        orientation="vertical"
+        color="primary"
+        aria-label="vertical contained primary button group"
+        variant="text"
+      >
+        <Button>One</Button>
+        <Button>Two</Button>
+        <Button>Three</Button>
+      </ButtonGroup>
+    </div>
+  );
+}

docs/src/pages/components/button-group/button-group.md

@@ -0,0 +1,26 @@
+---
+title: ButtonGroup React component
+components: Button, ButtonGroup
+---
+
+# Button group
+
+<p class="description">The ButtonGroup component can be used to group related buttons.</p>
+
+## Basic button group
+
+{{"demo": "pages/components/button-group/BasicButtonGroup.js"}}
+
+### Group sizes and colors
+
+{{"demo": "pages/components/button-group/GroupSizesColors.js"}}
+
+### Group orientation
+
+{{"demo": "pages/components/button-group/GroupOrientation.js"}}
+
+### Split Button
+
+ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action.
+
+{{"demo": "pages/components/button-group/SplitButton.js"}}

docs/src/pages/components/buttons/ButtonSizes.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Fab from '@material-ui/core/Fab';
 import IconButton from '@material-ui/core/IconButton';
-import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
-import NavigationIcon from '@material-ui/icons/Navigation';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
 const useStyles = makeStyles(theme => ({
@@ -55,43 +52,6 @@ export default function ButtonSizes() {
           Large
         </Button>
       </div>
-      <div>
-        <Fab size="small" color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-        <Fab size="medium" color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-        <Fab color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-      </div>
-      <div>
-        <Fab
-          variant="extended"
-          size="small"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab
-          variant="extended"
-          size="medium"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab variant="extended" color="primary" aria-label="add" className={classes.margin}>
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-      </div>
       <div>
         <IconButton aria-label="delete" className={classes.margin} size="small">
           <ArrowDownwardIcon fontSize="inherit" />

docs/src/pages/components/buttons/ButtonSizes.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Fab from '@material-ui/core/Fab';
 import IconButton from '@material-ui/core/IconButton';
-import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
-import NavigationIcon from '@material-ui/icons/Navigation';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -57,43 +54,6 @@ export default function ButtonSizes() {
           Large
         </Button>
       </div>
-      <div>
-        <Fab size="small" color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-        <Fab size="medium" color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-        <Fab color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-      </div>
-      <div>
-        <Fab
-          variant="extended"
-          size="small"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab
-          variant="extended"
-          size="medium"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab variant="extended" color="primary" aria-label="add" className={classes.margin}>
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-      </div>
       <div>
         <IconButton aria-label="delete" className={classes.margin} size="small">
           <ArrowDownwardIcon fontSize="inherit" />