-
-
Notifications
You must be signed in to change notification settings - Fork 430
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
204 additions
and
5 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,29 @@ | ||
| import { Children, cloneElement, FC, ReactElement, useMemo } from 'react'; | ||
|
|
||
| import { ButtonProps } from './Button'; | ||
|
|
||
| export type ButtonGroupProps = { | ||
| pill?: boolean; | ||
| outline?: boolean; | ||
| }; | ||
|
|
||
| export const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) => { | ||
| const items = useMemo( | ||
| () => | ||
| Children.map(children as ReactElement<ButtonProps>[], (child, index) => | ||
| cloneElement(child, { | ||
| pill, | ||
| outline, | ||
| positionInGroup: | ||
| index === 0 ? 'start' : index === (children as ReactElement<ButtonProps>[]).length - 1 ? 'end' : 'middle', | ||
| }), | ||
| ), | ||
| [children, outline, pill], | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="inline-flex" role="group"> | ||
| {items} | ||
| </div> | ||
| ); | ||
| }; |
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,124 @@ | ||
| import { FC } from 'react'; | ||
| import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi'; | ||
|
|
||
| import { CodeExample, DemoPage } from './DemoPage'; | ||
| import { Button, ButtonGroup } from '../components'; | ||
|
|
||
| const ButtonGroupPage: FC = () => { | ||
| const examples: CodeExample[] = [ | ||
| { | ||
| title: 'Default example', | ||
| code: ( | ||
| <ButtonGroup> | ||
| <Button color="alternative">Profile</Button> | ||
| <Button color="alternative">Settings</Button> | ||
| <Button color="alternative">Messages</Button> | ||
| </ButtonGroup> | ||
| ), | ||
| }, | ||
| { | ||
| title: 'Group buttons with icons', | ||
| code: ( | ||
| <ButtonGroup> | ||
| <Button color="alternative"> | ||
| <HiUserCircle className="mr-3 h-4 w-4" /> Profile | ||
| </Button> | ||
| <Button color="alternative"> | ||
| <HiAdjustments className="mr-3 h-4 w-4" /> Settings | ||
| </Button> | ||
| <Button color="alternative"> | ||
| <HiCloudDownload className="mr-3 h-4 w-4" /> Messages | ||
| </Button> | ||
| </ButtonGroup> | ||
| ), | ||
| }, | ||
| { | ||
| title: 'All colors', | ||
| code: ( | ||
| <div className="flex flex-wrap gap-2"> | ||
| <ButtonGroup> | ||
| <Button color="blue">Profile</Button> | ||
| <Button color="blue">Settings</Button> | ||
| <Button color="blue">Messages</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup> | ||
| <Button gradientMonochrome="blue">Profile</Button> | ||
| <Button gradientMonochrome="blue">Settings</Button> | ||
| <Button gradientMonochrome="blue">Messages</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup> | ||
| <Button gradientDuoTone="greenToBlue">Profile</Button> | ||
| <Button gradientDuoTone="greenToBlue">Settings</Button> | ||
| <Button gradientDuoTone="greenToBlue">Messages</Button> | ||
| </ButtonGroup> | ||
| </div> | ||
| ), | ||
| }, | ||
| { | ||
| title: 'Outline', | ||
| code: ( | ||
| <div className="flex flex-wrap gap-2"> | ||
| <ButtonGroup outline> | ||
| <Button color="alternative">Profile</Button> | ||
| <Button color="alternative">Settings</Button> | ||
| <Button color="alternative">Messages</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup outline> | ||
| <Button gradientMonochrome="blue">Profile</Button> | ||
| <Button gradientMonochrome="blue">Settings</Button> | ||
| <Button gradientMonochrome="blue">Messages</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup outline> | ||
| <Button gradientDuoTone="cyanToBlue">Profile</Button> | ||
| <Button gradientDuoTone="cyanToBlue">Settings</Button> | ||
| <Button gradientDuoTone="cyanToBlue">Messages</Button> | ||
| </ButtonGroup> | ||
| </div> | ||
| ), | ||
| }, | ||
| { | ||
| title: 'Outline with icons', | ||
| code: ( | ||
| <div className="flex flex-wrap gap-2"> | ||
| <ButtonGroup outline> | ||
| <Button color="alternative"> | ||
| <HiUserCircle className="mr-3 h-4 w-4" /> Profile | ||
| </Button> | ||
| <Button color="alternative"> | ||
| <HiAdjustments className="mr-3 h-4 w-4" /> Settings | ||
| </Button> | ||
| <Button color="alternative"> | ||
| <HiCloudDownload className="mr-3 h-4 w-4" /> Messages | ||
| </Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup outline> | ||
| <Button gradientMonochrome="blue"> | ||
| <HiUserCircle className="mr-3 h-4 w-4" /> Profile | ||
| </Button> | ||
| <Button gradientMonochrome="blue"> | ||
| <HiAdjustments className="mr-3 h-4 w-4" /> Settings | ||
| </Button> | ||
| <Button gradientMonochrome="blue"> | ||
| <HiCloudDownload className="mr-3 h-4 w-4" /> Messages | ||
| </Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup outline> | ||
| <Button gradientDuoTone="cyanToBlue"> | ||
| <HiUserCircle className="mr-3 h-4 w-4" /> Profile | ||
| </Button> | ||
| <Button gradientDuoTone="cyanToBlue"> | ||
| <HiAdjustments className="mr-3 h-4 w-4" /> Settings | ||
| </Button> | ||
| <Button gradientDuoTone="cyanToBlue"> | ||
| <HiCloudDownload className="mr-3 h-4 w-4" /> Messages | ||
| </Button> | ||
| </ButtonGroup> | ||
| </div> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| return <DemoPage examples={examples} />; | ||
| }; | ||
|
|
||
| export default ButtonGroupPage; |
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