Update button bar examples from pattern update (#4451)

jpmorganchase · Nov 28, 2024 · 5c8d47b · 5c8d47b
1 parent b272497
commit 5c8d47b
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 29 deletions.
diff --git a/packages/core/stories/split-layout/split-layout.stories.tsx b/packages/core/stories/split-layout/split-layout.stories.tsx
@@ -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>
 );
 

diff --git a/site/src/examples/dialog/CloseButton.tsx b/site/src/examples/dialog/CloseButton.tsx
@@ -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:
@@ -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>

diff --git a/site/src/examples/dialog/Default.tsx b/site/src/examples/dialog/Default.tsx
@@ -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:
@@ -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>

diff --git a/site/src/examples/dialog/DisableScrim.tsx b/site/src/examples/dialog/DisableScrim.tsx
@@ -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:
@@ -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>

diff --git a/site/src/examples/dialog/Info.tsx b/site/src/examples/dialog/Info.tsx
@@ -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>

diff --git a/site/src/examples/dialog/MandatoryAction.tsx b/site/src/examples/dialog/MandatoryAction.tsx
@@ -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>

diff --git a/site/src/examples/dialog/Preheader.tsx b/site/src/examples/dialog/Preheader.tsx
@@ -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>

diff --git a/site/src/examples/dialog/Sizes.tsx b/site/src/examples/dialog/Sizes.tsx
@@ -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>
@@ -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>
@@ -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>

diff --git a/site/src/examples/dialog/Success.tsx b/site/src/examples/dialog/Success.tsx
@@ -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>

diff --git a/site/src/examples/dialog/Warning.tsx b/site/src/examples/dialog/Warning.tsx
@@ -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>

diff --git a/site/src/examples/dialog/WithHeader.tsx b/site/src/examples/dialog/WithHeader.tsx
@@ -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:
@@ -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>

diff --git a/site/src/examples/dialog/WithoutAccent.tsx b/site/src/examples/dialog/WithoutAccent.tsx
@@ -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:
@@ -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>

diff --git a/site/src/examples/split-layout/ButtonBar.tsx b/site/src/examples/split-layout/ButtonBar.tsx
@@ -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>
 );