From 5c8d47b934db5aee0c46c03b5461e60307e32150 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Thu, 28 Nov 2024 11:32:43 +0000
Subject: [PATCH] Update button bar examples from pattern update (#4451)

---
 .../split-layout/split-layout.stories.tsx     | 12 ++++++-----
 site/src/examples/dialog/CloseButton.tsx      | 17 +++++++++++++--
 site/src/examples/dialog/Default.tsx          | 17 +++++++++++++--
 site/src/examples/dialog/DisableScrim.tsx     | 17 +++++++++++++--
 site/src/examples/dialog/Info.tsx             |  4 +++-
 site/src/examples/dialog/MandatoryAction.tsx  |  4 +++-
 site/src/examples/dialog/Preheader.tsx        |  4 +++-
 site/src/examples/dialog/Sizes.tsx            | 16 +++++++++++---
 site/src/examples/dialog/Success.tsx          |  4 +++-
 site/src/examples/dialog/Warning.tsx          |  4 +++-
 site/src/examples/dialog/WithHeader.tsx       | 21 ++++++++++++++++---
 site/src/examples/dialog/WithoutAccent.tsx    | 17 +++++++++++++--
 site/src/examples/split-layout/ButtonBar.tsx  | 12 ++++++-----
 13 files changed, 120 insertions(+), 29 deletions(-)

diff --git a/packages/core/stories/split-layout/split-layout.stories.tsx b/packages/core/stories/split-layout/split-layout.stories.tsx
index 512bd1bf50..2c75bf6c21 100644
--- 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
index 551db46396..548478863b 100644
--- 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
index 52a3672044..f5ee271ff6 100644
--- 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
index 66594f0a66..8f1ced2c54 100644
--- 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
index b45176800c..3a68d9bc9a 100644
--- 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
index 1c3fd5b430..f98748d8f7 100644
--- 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
index 3a178b47bc..3733892ae5 100644
--- 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
index 934c746e6e..d6d3f71f22 100644
--- 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
index c3216a2092..338a94c689 100644
--- 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
index 5ba3ac3733..3d3a7220d4 100644
--- 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
index f605e142f7..14e2902a46 100644
--- 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
index 43eb659331..a43afb13f6 100644
--- 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
index 0567ddce14..7bb10d9134 100644
--- 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>
 );