forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ButtonGroup] New component (mui#15744)
* [WIP] Grouped & split buttons * WIP: support outlined * Outlined complete, SplitButton own demo * Move styles from Button to new ButtonGroup component * Misc tweaks * Fix Olivier's feedback * Apply suggestions from code review Co-Authored-By: Olivier Tassinari <[email protected]> * color transparent * add TypeScript version * take the class name into account * Fix TypeScript fail * Apply suggestions from code review Co-Authored-By: Sebastian Silbermann <[email protected]> * remove dead styles, remove SSR test * Update grouped demo layout * Revise tests * prettier * revise test description wording * docs:api * refinement * fix Matt feedback
- Loading branch information
1 parent
9ff7491
commit d914dbc
Showing
15 changed files
with
707 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from 'react'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
|
|
||
| export default function GroupedButtons() { | ||
| return ( | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={12} md={6}> | ||
| <Grid container spacing={1} direction="column" alignItems="center"> | ||
| <Grid item> | ||
| <ButtonGroup size="small" aria-label="Small outlined button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup color="primary" aria-label="Outlined primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| color="secondary" | ||
| size="large" | ||
| aria-label="Large outlined secondary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid item xs={12} md={6}> | ||
| <Grid container spacing={1} direction="column" alignItems="center"> | ||
| <Grid item> | ||
| <ButtonGroup variant="contained" size="small" aria-label="Small contained button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| variant="contained" | ||
| color="primary" | ||
| aria-label="Full-width contained primary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| variant="contained" | ||
| color="secondary" | ||
| size="large" | ||
| aria-label="Large contained secondary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid item xs={12}> | ||
| <ButtonGroup fullWidth aria-label="Full width outlined button group"> | ||
| <Button>Full</Button> | ||
| <Button>width</Button> | ||
| <Button>ButtonGroup</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React from 'react'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
| import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; | ||
| import ClickAwayListener from '@material-ui/core/ClickAwayListener'; | ||
| import Grow from '@material-ui/core/Grow'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import Popper from '@material-ui/core/Popper'; | ||
| import MenuItem from '@material-ui/core/MenuItem'; | ||
| import MenuList from '@material-ui/core/MenuList'; | ||
|
|
||
| const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge']; | ||
|
|
||
| export default function SplitButton() { | ||
| const [open, setOpen] = React.useState(false); | ||
| const anchorRef = React.useRef(null); | ||
| const [selectedIndex, setSelectedIndex] = React.useState(1); | ||
|
|
||
| function handleClick() { | ||
| alert(`You clicked ${options[selectedIndex]}`); | ||
| } | ||
|
|
||
| function handleMenuItemClick(event, index) { | ||
| setSelectedIndex(index); | ||
| setOpen(false); | ||
| } | ||
|
|
||
| function handleToggle() { | ||
| setOpen(prevOpen => !prevOpen); | ||
| } | ||
|
|
||
| function handleClose(event) { | ||
| if (anchorRef.current && anchorRef.current.contains(event.target)) { | ||
| return; | ||
| } | ||
|
|
||
| setOpen(false); | ||
| } | ||
|
|
||
| return ( | ||
| <Grid container> | ||
| <Grid item xs={12} align="center"> | ||
| <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="Split button"> | ||
| <Button onClick={handleClick}>{options[selectedIndex]}</Button> | ||
| <Button | ||
| color="primary" | ||
| variant="contained" | ||
| size="small" | ||
| aria-owns={open ? 'menu-list-grow' : undefined} | ||
| aria-haspopup="true" | ||
| onClick={handleToggle} | ||
| > | ||
| <ArrowDropDownIcon /> | ||
| </Button> | ||
| </ButtonGroup> | ||
| <Popper open={open} anchorEl={anchorRef.current} transition disablePortal> | ||
| {({ TransitionProps, placement }) => ( | ||
| <Grow | ||
| {...TransitionProps} | ||
| style={{ | ||
| transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom', | ||
| }} | ||
| > | ||
| <Paper id="menu-list-grow"> | ||
| <ClickAwayListener onClickAway={handleClose}> | ||
| <MenuList> | ||
| {options.map((option, index) => ( | ||
| <MenuItem | ||
| key={option} | ||
| disabled={index === 2} | ||
| selected={index === selectedIndex} | ||
| onClick={event => handleMenuItemClick(event, index)} | ||
| > | ||
| {option} | ||
| </MenuItem> | ||
| ))} | ||
| </MenuList> | ||
| </ClickAwayListener> | ||
| </Paper> | ||
| </Grow> | ||
| )} | ||
| </Popper> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import * as React from 'react'; | ||
| import { PropTypes } from '..'; | ||
| import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent'; | ||
|
|
||
| declare const ButtonGroup: OverridableComponent<{ | ||
| props: { | ||
| color?: PropTypes.Color; | ||
| disabled?: boolean; | ||
| disableFocusRipple?: boolean; | ||
| disableRipple?: boolean; | ||
| fullWidth?: boolean; | ||
| size?: 'small' | 'medium' | 'large'; | ||
| variant?: 'outlined' | 'contained'; | ||
| }; | ||
| defaultComponent: 'div'; | ||
| classKey: ButtonGroupClassKey; | ||
| }>; | ||
|
|
||
| export type ButtonGroupClassKey = | ||
| | 'root' | ||
| | 'contained' | ||
| | 'fullWidth' | ||
| | 'grouped' | ||
| | 'groupedOutlined' | ||
| | 'groupedOutlinedPrimary' | ||
| | 'groupedOutlinedSecondary' | ||
| | 'groupedContained' | ||
| | 'groupedContainedPrimary' | ||
| | 'groupedContainedSecondary'; | ||
|
|
||
| export type ButtonGroupProps = SimplifiedPropsOf<typeof ButtonGroup>; | ||
|
|
||
| export default ButtonGroup; |
Oops, something went wrong.