diff --git a/docs/pages/api/button-group.md b/docs/pages/api/button-group.md index 07a906a7f944c1..1f5b55b896d49e 100644 --- a/docs/pages/api/button-group.md +++ b/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/) diff --git a/docs/pages/api/button.md b/docs/pages/api/button.md index 489e9bcf7f2e89..d7d25baaae4a50 100644 --- a/docs/pages/api/button.md +++ b/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/) diff --git a/docs/pages/api/fab.md b/docs/pages/api/fab.md index c002f4e8d06870..29b9b8a1a9dce7 100644 --- a/docs/pages/api/fab.md +++ b/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/) diff --git a/docs/pages/api/zoom.md b/docs/pages/api/zoom.md index bc239fdd03b557..cc1bf049222961 100644 --- a/docs/pages/api/zoom.md +++ b/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/) 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..aa3238a39ea958 --- /dev/null +++ b/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 ; +} 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..f60b9f3372fe47 --- /dev/null +++ b/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 ( +
+ + + + + + + + + + + + + + + +
+ ); +} 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..a815704ee0cf86 100644 --- a/docs/src/pages/components/buttons/ButtonSizes.js +++ b/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 -
- - - - - - - - - -
-
- - - Extended - - - - Extended - - - - Extended - -
diff --git a/docs/src/pages/components/buttons/ButtonSizes.tsx b/docs/src/pages/components/buttons/ButtonSizes.tsx index dfff7e2f99078b..f256a5963cee8a 100644 --- a/docs/src/pages/components/buttons/ButtonSizes.tsx +++ b/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
-
- - - - - - - - - -
-
- - - 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..3be9ce822418e0 --- /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` prop 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}}