Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update button bar examples from pattern update #4451

Merged
merged 1 commit into from
Nov 28, 2024
Merged

Update button bar examples from pattern update #4451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions packages/core/stories/split-layout/split-layout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,16 +65,18 @@ const endItem = (

const startButtonsItem = (
<FlowLayout gap={1}>
<Button sentiment="accented">Button 1</Button>
<Button>Button 2</Button>
<Button appearance="transparent">Button 3</Button>
<Button appearance="bordered" style={{ marginRight: "auto" }}>
My privacy settings
</Button>
</FlowLayout>
);

const endButtonsItem = (
<FlowLayout gap={1}>
<Button sentiment="accented">Button 4</Button>
<Button>Button 5</Button>
<Button sentiment="accented" appearance="bordered">
Cancel
</Button>
<Button sentiment="accented">Accept</Button>
</FlowLayout>
);

Expand Down
17 changes: 15 additions & 2 deletions site/src/examples/dialog/CloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const CloseButton = (): ReactElement => {
<Button onClick={handleRequestOpen}>Open dialog with close button</Button>
<Dialog open={open} onOpenChange={onOpenChange} id={id}>
<DialogHeader header="Terms and conditions" />
<DialogContent>
<DialogContent style={{ maxHeight: 250 }}>
<StackLayout>
<div>
When you add a Chase Card to a Wallet, you agree to these Terms:
Expand Down Expand Up @@ -69,7 +69,20 @@ export const CloseButton = (): ReactElement => {
</StackLayout>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button
appearance="bordered"
onClick={handleClose}
style={{ marginRight: "auto" }}
>
My privacy settings
</Button>
<Button
sentiment="accented"
appearance="bordered"
onClick={handleClose}
>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Accept
</Button>
Expand Down
17 changes: 15 additions & 2 deletions site/src/examples/dialog/Default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const Default = (): ReactElement => {
</Button>
<Dialog open={open} onOpenChange={onOpenChange} id={id}>
<DialogHeader header="Terms and conditions" />
<DialogContent>
<DialogContent style={{ maxHeight: 250 }}>
<StackLayout>
<div>
When you add a Chase Card to a Wallet, you agree to these Terms:
Expand Down Expand Up @@ -70,7 +70,20 @@ export const Default = (): ReactElement => {
</StackLayout>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button
appearance="bordered"
onClick={handleClose}
style={{ marginRight: "auto" }}
>
My privacy settings
</Button>
<Button
sentiment="accented"
appearance="bordered"
onClick={handleClose}
>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Accept
</Button>
Expand Down
17 changes: 15 additions & 2 deletions site/src/examples/dialog/DisableScrim.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const DisableScrim = (): ReactElement => {
<Button onClick={handleRequestOpen}>Open dialog without Scrim</Button>
<Dialog open={open} onOpenChange={onOpenChange} disableScrim id={id}>
<DialogHeader header="Terms and conditions" disableAccent />
<DialogContent>
<DialogContent style={{ maxHeight: 250 }}>
<StackLayout>
<div>
When you add a Chase Card to a Wallet, you agree to these Terms:
Expand Down Expand Up @@ -68,7 +68,20 @@ export const DisableScrim = (): ReactElement => {
</StackLayout>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button
appearance="bordered"
onClick={handleClose}
style={{ marginRight: "auto" }}
>
My privacy settings
</Button>
<Button
sentiment="accented"
appearance="bordered"
onClick={handleClose}
>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Accept
</Button>
Expand Down
4 changes: 3 additions & 1 deletion site/src/examples/dialog/Info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ export const Info = (): ReactElement => {
A new version of this file is available with 26 updates.
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Close</Button>
<Button appearance="bordered" onClick={handleClose}>
Close
</Button>
<Button sentiment="accented" onClick={handleClose}>
See updates
</Button>
Expand Down
4 changes: 3 additions & 1 deletion site/src/examples/dialog/MandatoryAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export const MandatoryAction = (): ReactElement => {
Are you sure you want to permenantly delete transaction?
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button appearance="bordered" onClick={handleClose}>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Delete
</Button>
Expand Down
4 changes: 3 additions & 1 deletion site/src/examples/dialog/Preheader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ export const Preheader = (): ReactElement => {
</FormField>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button appearance="bordered" onClick={handleClose}>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Subscribe
</Button>
Expand Down
16 changes: 13 additions & 3 deletions site/src/examples/dialog/Sizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ const SmallDialog = (): ReactElement => {
will not be saved
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button appearance="bordered" onClick={handleClose}>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Accept
</Button>
Expand Down Expand Up @@ -157,7 +159,9 @@ const MediumDialog = (): ReactElement => {
</StackLayout>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button appearance="bordered" onClick={handleClose}>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Save
</Button>
Expand Down Expand Up @@ -230,7 +234,13 @@ const LargeDialog = (): ReactElement => {
Wizard Content Area
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button
appearance="bordered"
onClick={handleClose}
style={{ marginRight: "auto" }}
>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Next
</Button>
Expand Down
4 changes: 3 additions & 1 deletion site/src/examples/dialog/Success.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ export const Success = (): ReactElement => {
File has been successfully uploaded to the shared drive.
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Close</Button>
<Button appearance="bordered" onClick={handleClose}>
Close
</Button>
<Button sentiment="accented" onClick={handleClose}>
Go to file
</Button>
Expand Down
4 changes: 3 additions & 1 deletion site/src/examples/dialog/Warning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ export const Warning = (): ReactElement => {
access anyway?
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button appearance="bordered" onClick={handleClose}>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Give access
</Button>
Expand Down
21 changes: 18 additions & 3 deletions site/src/examples/dialog/WithHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,12 @@ export const WithHeader = (): ReactElement => {
<Button onClick={handleRequestOpen}>Open dialog with header</Button>
<Dialog open={open} onOpenChange={onOpenChange} id={id}>
<DialogHeader
preheader="Settlements"
header={<H2>Terms and conditions</H2>}
description="Effective date: August 29, 2024"
actions={closeButton}
/>
<DialogContent>
<DialogContent style={{ maxHeight: 250 }}>
<StackLayout>
<div>
When you add a Chase Card to a Wallet, you agree to these Terms:
Expand Down Expand Up @@ -83,8 +85,21 @@ export const WithHeader = (): ReactElement => {
</StackLayout>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button variant="cta" onClick={handleClose}>
<Button
appearance="bordered"
onClick={handleClose}
style={{ marginRight: "auto" }}
>
My privacy settings
</Button>
<Button
sentiment="accented"
appearance="bordered"
onClick={handleClose}
>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Accept
</Button>
</DialogActions>
Expand Down
17 changes: 15 additions & 2 deletions site/src/examples/dialog/WithoutAccent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const WithoutAccent = (): ReactElement => {
<Button onClick={handleRequestOpen}>Open dialog without accent</Button>
<Dialog open={open} onOpenChange={onOpenChange} id={id}>
<DialogHeader header="Terms and conditions" disableAccent />
<DialogContent>
<DialogContent style={{ maxHeight: 250 }}>
<StackLayout>
<div>
When you add a Chase Card to a Wallet, you agree to these Terms:
Expand Down Expand Up @@ -68,7 +68,20 @@ export const WithoutAccent = (): ReactElement => {
</StackLayout>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button
appearance="bordered"
onClick={handleClose}
style={{ marginRight: "auto" }}
>
My privacy settings
</Button>
<Button
sentiment="accented"
appearance="bordered"
onClick={handleClose}
>
Cancel
</Button>
<Button sentiment="accented" onClick={handleClose}>
Accept
</Button>
Expand Down
12 changes: 7 additions & 5 deletions site/src/examples/split-layout/ButtonBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ import styles from "./index.module.css";

const startItem = (
<FlowLayout gap={1}>
<Button sentiment="accented">Button 1</Button>
<Button sentiment="neutral">Button 2</Button>
<Button appearance="transparent">Button 3</Button>
<Button appearance="bordered" style={{ marginRight: "auto" }}>
My privacy settings
</Button>
</FlowLayout>
);
const endItem = (
<FlowLayout gap={1}>
<Button sentiment="accented">Button 4</Button>
<Button sentiment="neutral">Button 5</Button>
<Button sentiment="accented" appearance="bordered">
Cancel
</Button>
<Button sentiment="accented">Accept</Button>
</FlowLayout>
);

Expand Down
Loading