From 439507a3081a7e56d2ffdb9328b0def56ff097ab Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 25 Jan 2020 00:02:02 +0000 Subject: [PATCH] [docs] Separate ButtonGroup and Fab pages from Button --- docs/pages/components/button-group.js | 14 +++++ .../components/floating-action-button.js | 14 +++++ docs/src/pages.js | 2 + .../BasicButtonGroup.js} | 2 +- .../BasicButtonGroup.tsx} | 2 +- .../button-group/GroupOrientation.js | 51 +++++++++++++++ .../button-group/GroupOrientation.tsx | 52 ++++++++++++++++ .../GroupSizesColors.js | 0 .../GroupSizesColors.tsx | 0 .../{buttons => button-group}/SplitButton.js | 0 .../{buttons => button-group}/SplitButton.tsx | 0 .../components/button-group/button-group.md | 26 ++++++++ .../buttons/{ButtonBases.js => ButtonBase.js} | 0 .../{ButtonBases.tsx => ButtonBase.tsx} | 0 .../pages/components/buttons/ButtonSizes.js | 43 +------------ .../pages/components/buttons/ButtonSizes.tsx | 37 ----------- .../components/buttons/GroupOrientation.js | 17 ----- .../components/buttons/GroupOrientation.tsx | 17 ----- docs/src/pages/components/buttons/buttons.md | 48 +------------- .../FloatingActionButtonSize.js | 60 ++++++++++++++++++ .../FloatingActionButtonSize.tsx | 62 +++++++++++++++++++ .../FloatingActionButtonZoom.js | 0 .../FloatingActionButtonZoom.tsx | 0 .../FloatingActionButtons.js | 0 .../FloatingActionButtons.tsx | 0 .../floating-action-button.md | 39 ++++++++++++ 26 files changed, 327 insertions(+), 159 deletions(-) create mode 100644 docs/pages/components/button-group.js create mode 100644 docs/pages/components/floating-action-button.js rename docs/src/pages/components/{buttons/GroupedButtons.js => button-group/BasicButtonGroup.js} (95%) rename docs/src/pages/components/{buttons/GroupedButtons.tsx => button-group/BasicButtonGroup.tsx} (96%) create mode 100644 docs/src/pages/components/button-group/GroupOrientation.js create mode 100644 docs/src/pages/components/button-group/GroupOrientation.tsx rename docs/src/pages/components/{buttons => button-group}/GroupSizesColors.js (100%) rename docs/src/pages/components/{buttons => button-group}/GroupSizesColors.tsx (100%) rename docs/src/pages/components/{buttons => button-group}/SplitButton.js (100%) rename docs/src/pages/components/{buttons => button-group}/SplitButton.tsx (100%) create mode 100644 docs/src/pages/components/button-group/button-group.md rename docs/src/pages/components/buttons/{ButtonBases.js => ButtonBase.js} (100%) rename docs/src/pages/components/buttons/{ButtonBases.tsx => ButtonBase.tsx} (100%) delete mode 100644 docs/src/pages/components/buttons/GroupOrientation.js delete mode 100644 docs/src/pages/components/buttons/GroupOrientation.tsx create mode 100644 docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js create mode 100644 docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx rename docs/src/pages/components/{buttons => floating-action-button}/FloatingActionButtonZoom.js (100%) rename docs/src/pages/components/{buttons => floating-action-button}/FloatingActionButtonZoom.tsx (100%) rename docs/src/pages/components/{buttons => floating-action-button}/FloatingActionButtons.js (100%) rename docs/src/pages/components/{buttons => floating-action-button}/FloatingActionButtons.tsx (100%) create mode 100644 docs/src/pages/components/floating-action-button/floating-action-button.md diff --git a/docs/pages/components/button-group.js b/docs/pages/components/button-group.js new file mode 100644 index 00000000000000..0e3151df11e729 --- /dev/null +++ b/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 ; +} diff --git a/docs/pages/components/floating-action-button.js b/docs/pages/components/floating-action-button.js new file mode 100644 index 00000000000000..0c80af5888200a --- /dev/null +++ b/docs/pages/components/floating-action-button.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/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 ; +} diff --git a/docs/src/pages.js b/docs/src/pages.js index e99760c34a486a..69a01b7cd4297b 100644 --- a/docs/src/pages.js +++ b/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' }, diff --git a/docs/src/pages/components/buttons/GroupedButtons.js b/docs/src/pages/components/button-group/BasicButtonGroup.js similarity index 95% rename from docs/src/pages/components/buttons/GroupedButtons.js rename to docs/src/pages/components/button-group/BasicButtonGroup.js index 8014baf81b135b..e2b580e62f6011 100644 --- a/docs/src/pages/components/buttons/GroupedButtons.js +++ b/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 ( diff --git a/docs/src/pages/components/buttons/GroupedButtons.tsx b/docs/src/pages/components/button-group/BasicButtonGroup.tsx similarity index 96% rename from docs/src/pages/components/buttons/GroupedButtons.tsx rename to docs/src/pages/components/button-group/BasicButtonGroup.tsx index 15256556ac62e2..58247634eeda14 100644 --- a/docs/src/pages/components/buttons/GroupedButtons.tsx +++ b/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 ( diff --git a/docs/src/pages/components/button-group/GroupOrientation.js b/docs/src/pages/components/button-group/GroupOrientation.js new file mode 100644 index 00000000000000..f60b9f3372fe47 --- /dev/null +++ b/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 ( +
+ + + + + + + + + + + + + + + +
+ ); +} diff --git a/docs/src/pages/components/button-group/GroupOrientation.tsx b/docs/src/pages/components/button-group/GroupOrientation.tsx new file mode 100644 index 00000000000000..8bd29dbe37db54 --- /dev/null +++ b/docs/src/pages/components/button-group/GroupOrientation.tsx @@ -0,0 +1,52 @@ +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 ( +
+ + + + + + + + + + + + + + + +
+ ); +} diff --git a/docs/src/pages/components/buttons/GroupSizesColors.js b/docs/src/pages/components/button-group/GroupSizesColors.js similarity index 100% rename from docs/src/pages/components/buttons/GroupSizesColors.js rename to docs/src/pages/components/button-group/GroupSizesColors.js diff --git a/docs/src/pages/components/buttons/GroupSizesColors.tsx b/docs/src/pages/components/button-group/GroupSizesColors.tsx similarity index 100% rename from docs/src/pages/components/buttons/GroupSizesColors.tsx rename to docs/src/pages/components/button-group/GroupSizesColors.tsx diff --git a/docs/src/pages/components/buttons/SplitButton.js b/docs/src/pages/components/button-group/SplitButton.js similarity index 100% rename from docs/src/pages/components/buttons/SplitButton.js rename to docs/src/pages/components/button-group/SplitButton.js diff --git a/docs/src/pages/components/buttons/SplitButton.tsx b/docs/src/pages/components/button-group/SplitButton.tsx similarity index 100% rename from docs/src/pages/components/buttons/SplitButton.tsx rename to docs/src/pages/components/button-group/SplitButton.tsx diff --git a/docs/src/pages/components/button-group/button-group.md b/docs/src/pages/components/button-group/button-group.md new file mode 100644 index 00000000000000..8803b89b1a27ff --- /dev/null +++ b/docs/src/pages/components/button-group/button-group.md @@ -0,0 +1,26 @@ +--- +title: ButtonGroup React component +components: Button, ButtonGroup +--- + +# Button group + +

The ButtonGroup component can be used to group related buttons.

+ +## 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"}} diff --git a/docs/src/pages/components/buttons/ButtonBases.js b/docs/src/pages/components/buttons/ButtonBase.js similarity index 100% rename from docs/src/pages/components/buttons/ButtonBases.js rename to docs/src/pages/components/buttons/ButtonBase.js diff --git a/docs/src/pages/components/buttons/ButtonBases.tsx b/docs/src/pages/components/buttons/ButtonBase.tsx similarity index 100% rename from docs/src/pages/components/buttons/ButtonBases.tsx rename to docs/src/pages/components/buttons/ButtonBase.tsx diff --git a/docs/src/pages/components/buttons/ButtonSizes.js b/docs/src/pages/components/buttons/ButtonSizes.js index d3a7bbc0c13ed1..b3c8e0ce05f1c5 100644 --- a/docs/src/pages/components/buttons/ButtonSizes.js +++ b/docs/src/pages/components/buttons/ButtonSizes.js @@ -1,11 +1,11 @@ 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 +55,6 @@ export default function ButtonSizes() { Large -
- - - - - - - - - -
-
- - - Extended - - - - Extended - - - - Extended - -
diff --git a/docs/src/pages/components/buttons/ButtonSizes.tsx b/docs/src/pages/components/buttons/ButtonSizes.tsx index dfff7e2f99078b..7e8d0685aa6fb6 100644 --- a/docs/src/pages/components/buttons/ButtonSizes.tsx +++ b/docs/src/pages/components/buttons/ButtonSizes.tsx @@ -57,43 +57,6 @@ export default function ButtonSizes() { Large
-
- - - - - - - - - -
-
- - - Extended - - - - Extended - - - - Extended - -
diff --git a/docs/src/pages/components/buttons/GroupOrientation.js b/docs/src/pages/components/buttons/GroupOrientation.js deleted file mode 100644 index d734964c20a2e3..00000000000000 --- a/docs/src/pages/components/buttons/GroupOrientation.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Button from '@material-ui/core/Button'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; - -export default function GroupOrientation() { - return ( - - - - - - ); -} diff --git a/docs/src/pages/components/buttons/GroupOrientation.tsx b/docs/src/pages/components/buttons/GroupOrientation.tsx deleted file mode 100644 index d734964c20a2e3..00000000000000 --- a/docs/src/pages/components/buttons/GroupOrientation.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Button from '@material-ui/core/Button'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; - -export default function GroupOrientation() { - return ( - - - - - - ); -} diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index b6df6213d1d98f..e6c13f102ed619 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -1,6 +1,6 @@ --- title: Button React component -components: Button, ButtonGroup, Fab, IconButton, ButtonBase, Zoom +components: Button, IconButton, ButtonBase --- # Button @@ -52,50 +52,6 @@ or a higher emphasis alternative to text buttons. {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Grouped Buttons - -The `ButtonGroup` component can be used to group buttons. - -{{"demo": "pages/components/buttons/GroupedButtons.js"}} - -### Group sizes and colors - -{{"demo": "pages/components/buttons/GroupSizesColors.js"}} - -### Group orientation - -{{"demo": "pages/components/buttons/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/buttons/SplitButton.js"}} - -## Floating Action Buttons - -A [floating action button](https://material.io/design/components/buttons-floating-action-button.html) -(FAB) performs the primary, or most common, action on a screen. -It appears in front of all screen content, typically as a circular shape with an icon in its center. -FABs come in two types: regular, and extended. - -Only use a FAB if it is the most suitable way to present a screen’s primary action. - -Only one floating action button is recommended per screen to represent the most common action. - -{{"demo": "pages/components/buttons/FloatingActionButtons.js"}} - -The floating action button animates onto the screen as an expanding piece of material, by default. - -A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, -then reappear if its action changes. - -The Zoom transition can be used to achieve this. Note that since both the exiting and entering -animations are triggered at the same time, we use `enterDelay` to allow the outgoing Floating Action Button's -animation to finish before the new one enters. - -{{"demo": "pages/components/buttons/FloatingActionButtonZoom.js", "bg": true}} - ## Upload button {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -135,7 +91,7 @@ Here are some examples of customizing the component. You can learn more about th The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. -{{"demo": "pages/components/buttons/ButtonBases.js"}} +{{"demo": "pages/components/buttons/ButtonBase.js"}} ## Third-party routing library diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js new file mode 100644 index 00000000000000..3363c4eaeb1593 --- /dev/null +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Fab from '@material-ui/core/Fab'; +import AddIcon from '@material-ui/icons/Add'; +import NavigationIcon from '@material-ui/icons/Navigation'; + +const useStyles = makeStyles(theme => ({ + margin: { + margin: theme.spacing(1), + }, + extendedIcon: { + marginRight: theme.spacing(1), + }, +})); + +export default function FloatingActionButtonSize() { + const classes = useStyles(); + + return ( +
+
+ + + + + + + + + +
+
+ + + Extended + + + + Extended + + + + Extended + +
+
+ ); +} diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx new file mode 100644 index 00000000000000..64240376e53c19 --- /dev/null +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import Fab from '@material-ui/core/Fab'; +import AddIcon from '@material-ui/icons/Add'; +import NavigationIcon from '@material-ui/icons/Navigation'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + margin: { + margin: theme.spacing(1), + }, + extendedIcon: { + marginRight: theme.spacing(1), + }, + }), +); + +export default function FloatingActionButtonSize() { + const classes = useStyles(); + + return ( +
+
+ + + + + + + + + +
+
+ + + Extended + + + + Extended + + + + Extended + +
+
+ ); +} diff --git a/docs/src/pages/components/buttons/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js similarity index 100% rename from docs/src/pages/components/buttons/FloatingActionButtonZoom.js rename to docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js diff --git a/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx similarity index 100% rename from docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx rename to docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx diff --git a/docs/src/pages/components/buttons/FloatingActionButtons.js b/docs/src/pages/components/floating-action-button/FloatingActionButtons.js similarity index 100% rename from docs/src/pages/components/buttons/FloatingActionButtons.js rename to docs/src/pages/components/floating-action-button/FloatingActionButtons.js diff --git a/docs/src/pages/components/buttons/FloatingActionButtons.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx similarity index 100% rename from docs/src/pages/components/buttons/FloatingActionButtons.tsx rename to docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx diff --git a/docs/src/pages/components/floating-action-button/floating-action-button.md b/docs/src/pages/components/floating-action-button/floating-action-button.md new file mode 100644 index 00000000000000..467aec0422b661 --- /dev/null +++ b/docs/src/pages/components/floating-action-button/floating-action-button.md @@ -0,0 +1,39 @@ +--- +title: Fab React component +components: Fab +--- + +# Floating action button + +

A floating action button (FAB) performs the primary, or most common, action on a screen.

+ +## Floating Action Button + +A [floating action button](https://material.io/design/components/buttons-floating-action-button.html) +appears in front of all screen content, typically as a circular shape with an icon in its center. +FABs come in two types: regular, and extended. + +Only use a FAB if it is the most suitable way to present a screen’s primary action. + +Only one floating action button is recommended per screen to represent the most common action. + +{{"demo": "pages/components/floating-action-button/FloatingActionButtons.js"}} + +## Size + +Use the `size` property for larger or smaller floating action buttons. + +{{"demo": "pages/components/floating-action-button/FloatingActionButtonSize.js"}} + +## Animation + +The floating action button animates onto the screen as an expanding piece of material, by default. + +A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, +then reappear if its action changes. + +The Zoom transition can be used to achieve this. Note that since both the exiting and entering +animations are triggered at the same time, we use `enterDelay` to allow the outgoing Floating Action Button's +animation to finish before the new one enters. + +{{"demo": "pages/components/floating-action-button/FloatingActionButtonZoom.js", "bg": true}} \ No newline at end of file