Skip to content

Commit

Permalink
feat(button-group): add justifyContent prop, use flex (#4051)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz authored Aug 29, 2024
1 parent 37acfcd commit bc7d13f
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 14 deletions.
6 changes: 6 additions & 0 deletions .changeset/tame-games-hammer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/button-group": minor
"@twilio-paste/core": minor
---

[Button Group] add justifyContent prop on unattached button groups. Use flex for unattached button groups.
56 changes: 55 additions & 1 deletion packages/paste-core/components/ai-chat-log/stories/aiChatLog.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,61 @@ export const ExampleAIChatLog = (): React.ReactNode => {
iure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit nesciunt
impedit repellat assumenda.
<Box marginTop="space50">
<ButtonGroup>
<ButtonGroup aria-label="code options, select the desired code">
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30009
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30009
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30009
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30009
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30009
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30009
</Button>
<Button variant="secondary" onClick={() => {}} size="rounded_small">
30007
</Button>
Expand Down
21 changes: 14 additions & 7 deletions packages/paste-core/components/button-group/src/ButtonGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@ const AttachedStyled = styled.span(

const UnattachedStyled = styled.span(
css({
"& > button:not(:first-of-type)": {
marginLeft: "space40",
},
"& > button:first-of-type": {
marginLeft: "space0",
},
display: "flex",
columnGap: "space40",
}),
);

type JustifyOptions = "flex-start" | "center" | "flex-end" | "space-between";

export interface ButtonGroupProps extends HTMLPasteProps<"div"> {
/**
* Overrides the default element name to apply unique styles with the Customization Provider
Expand All @@ -65,11 +63,19 @@ export interface ButtonGroupProps extends HTMLPasteProps<"div"> {
* @memberof ButtonGroupProps
*/
attached?: boolean;
/**
* Sets the `justify-content` CSS property. Only used for unattached button groups.
*
* @default "flex-start"
* @type {JustifyOptions}
* @memberof ButtonGroupProps
*/
justifyContent?: JustifyOptions;
children: React.ReactElement[];
}

export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
({ element = "BUTTON_GROUP", children, attached = false, ...props }, ref) => {
({ element = "BUTTON_GROUP", children, attached = false, justifyContent = "flex-start", ...props }, ref) => {
return (
<Box
{...safelySpreadBoxProps(props)}
Expand All @@ -80,6 +86,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
element={element}
display="inline-flex"
flexWrap={attached ? "nowrap" : "wrap"}
justifyContent={attached ? "flex-start" : justifyContent}
rowGap="space40"
role="group"
>
Expand Down
25 changes: 25 additions & 0 deletions packages/paste-core/components/button-group/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,31 @@ export const ManyButtons: StoryFn = () => (
</Box>
);

export const JustifyContent: StoryFn = () => (
<Box display="flex" flexDirection="column" borderStyle="solid" width="size30" rowGap="space100">
<ButtonGroup aria-label="A decisive group of buttons">
<Button variant="secondary">Yes</Button>
<Button variant="secondary">No</Button>
<Button variant="secondary">Maybe</Button>
</ButtonGroup>
<ButtonGroup justifyContent="center" aria-label="A decisive group of buttons">
<Button variant="secondary">Yes</Button>
<Button variant="secondary">No</Button>
<Button variant="secondary">Maybe</Button>
</ButtonGroup>
<ButtonGroup justifyContent="flex-end" aria-label="A decisive group of buttons">
<Button variant="secondary">Yes</Button>
<Button variant="secondary">No</Button>
<Button variant="secondary">Maybe</Button>
</ButtonGroup>
<ButtonGroup justifyContent="space-between" aria-label="A decisive group of buttons">
<Button variant="secondary">Yes</Button>
<Button variant="secondary">No</Button>
<Button variant="secondary">Maybe</Button>
</ButtonGroup>
</Box>
);

export const PopoverButtons: StoryFn = () => {
const id = useUID();
return (
Expand Down
7 changes: 7 additions & 0 deletions packages/paste-core/components/button-group/type-docs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,13 @@
"required": false,
"externalProp": true
},
"justifyContent": {
"type": "JustifyOptions",
"defaultValue": "flex-start",
"required": false,
"externalProp": false,
"description": "Sets the `justify-content` CSS property. Only used for unattached button groups."
},
"key": {
"type": "Key",
"defaultValue": null,
Expand Down
12 changes: 6 additions & 6 deletions packages/paste-website/src/pages/experiences/artificial-intelligence/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const getStaticProps = async () => {

<content>

<LivePreview scope={{Box, Heading, ArtificialIntelligenceIcon, ChatComposerContainer, ChatComposer, ChatComposerActionGroup, Button, SendIcon, ProductCLIIcon, ProductMessagingIcon, ProductSendGridIcon}}>
<LivePreview scope={{ButtonGroup, Box, Heading, ArtificialIntelligenceIcon, ChatComposerContainer, ChatComposer, ChatComposerActionGroup, Button, SendIcon, ProductCLIIcon, ProductMessagingIcon, ProductSendGridIcon}}>
{`<Box width="100%" display="flex" justifyContent="center" flexDirection="column">
<Box display="flex" flexDirection="column" alignItems="center" rowGap="space40" width="100%" padding="space130">
<ArtificialIntelligenceIcon decorative size="sizeIcon100"/>
Expand All @@ -80,13 +80,13 @@ export const getStaticProps = async () => {
</ChatComposerContainer>
</Box>
</Box>
<Box display="flex" flexDirection="row" flexWrap="wrap" justifyContent="center" rowGap="space40" columnGap="space40">
<ButtonGroup justifyContent="center">
<Button variant="secondary" size="rounded_small"><ProductMessagingIcon decorative />How do I set up SMS?</Button>
<Button variant="secondary" size="rounded_small"><ProductSendGridIcon decorative />I’m unable to login to SendGrid due to 2FA</Button>
<Button variant="secondary" size="rounded_small"><ProductSendGridIcon decorative />How can I get in touch with SendGrid support?</Button>
<Button variant="secondary" size="rounded_small"><ProductCLIIcon decorative />How to uninstall Twilio CLI?</Button>
<Button variant="secondary" size="rounded_small"><ProductSendGridIcon decorative />How do I report spam?</Button>
</Box>
</ButtonGroup>
</Box>
`}
</LivePreview>
Expand Down Expand Up @@ -294,7 +294,7 @@ export const SidePanelExample = (): React.ReactNode => {

#### Chat empty state

<LivePreview scope={{Box, Heading, ArtificialIntelligenceIcon, ChatComposerContainer, ChatComposer, ChatComposerActionGroup, Button, SendIcon, ProductCLIIcon, ProductMessagingIcon, ProductSendGridIcon}}>
<LivePreview scope={{ButtonGroup, Box, Heading, ArtificialIntelligenceIcon, ChatComposerContainer, ChatComposer, ChatComposerActionGroup, Button, SendIcon, ProductCLIIcon, ProductMessagingIcon, ProductSendGridIcon}}>
{`<Box width="100%" display="flex" justifyContent="center" flexDirection="column">
<Box display="flex" flexDirection="column" alignItems="center" rowGap="space40" width="100%" padding="space130">
<ArtificialIntelligenceIcon decorative size="sizeIcon100"/>
Expand All @@ -319,13 +319,13 @@ export const SidePanelExample = (): React.ReactNode => {
</ChatComposerContainer>
</Box>
</Box>
<Box display="flex" flexDirection="row" flexWrap="wrap" justifyContent="center" rowGap="space40" columnGap="space40">
<ButtonGroup justifyContent="center">
<Button variant="secondary" size="rounded_small"><ProductMessagingIcon decorative />How do I set up SMS?</Button>
<Button variant="secondary" size="rounded_small"><ProductSendGridIcon decorative />I’m unable to login to SendGrid due to 2FA</Button>
<Button variant="secondary" size="rounded_small"><ProductSendGridIcon decorative />How can I get in touch with SendGrid support?</Button>
<Button variant="secondary" size="rounded_small"><ProductCLIIcon decorative />How to uninstall Twilio CLI?</Button>
<Button variant="secondary" size="rounded_small"><ProductSendGridIcon decorative />How do I report spam?</Button>
</Box>
</ButtonGroup>
</Box>
`}
</LivePreview>
Expand Down

0 comments on commit bc7d13f

Please sign in to comment.