From 8264406182bee37a668961d37e4b08a4b05c63ad Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Tue, 5 Nov 2024 15:42:54 +0530
Subject: [PATCH 1/5] feat(side-modal)!: update alignment of Side Modal footer
 actions to left

---
 .../components/side-modal/src/SideModalFooterActions.tsx        | 2 +-
 .../components/side-modal/stories/customization.stories.tsx     | 2 +-
 .../paste-core/components/side-modal/stories/index.stories.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx b/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx
index 644c9e26ea..e08ca487cc 100644
--- a/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx
@@ -31,7 +31,7 @@ export interface SideModalFooterActionsProps extends HTMLPasteProps<"div"> {
 }
 
 const SideModalFooterActions = React.forwardRef<HTMLDivElement, SideModalFooterActionsProps>(
-  ({ children, element = "SIDE_MODAL_FOOTER_ACTIONS", justifyContent = "flex-end", ...props }, ref) => {
+  ({ children, element = "SIDE_MODAL_FOOTER_ACTIONS", justifyContent = "flex-start", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}
diff --git a/packages/paste-core/components/side-modal/stories/customization.stories.tsx b/packages/paste-core/components/side-modal/stories/customization.stories.tsx
index 0ecd1784d5..726b81aaf2 100644
--- a/packages/paste-core/components/side-modal/stories/customization.stories.tsx
+++ b/packages/paste-core/components/side-modal/stories/customization.stories.tsx
@@ -85,8 +85,8 @@ export const CustomizedDialog: StoryFn = (_args, { parameters: { isTestEnvironme
           </SideModalBody>
           <SideModalFooter>
             <SideModalFooterActions>
-              <Button variant="secondary">Cancel</Button>
               <Button variant="primary">Save</Button>
+              <Button variant="secondary">Cancel</Button>
             </SideModalFooterActions>
           </SideModalFooter>
         </SideModal>
diff --git a/packages/paste-core/components/side-modal/stories/index.stories.tsx b/packages/paste-core/components/side-modal/stories/index.stories.tsx
index 8b6a5f087f..bc41d35b6e 100644
--- a/packages/paste-core/components/side-modal/stories/index.stories.tsx
+++ b/packages/paste-core/components/side-modal/stories/index.stories.tsx
@@ -64,8 +64,8 @@ export const Default: StoryFn = () => {
         </SideModalBody>
         <SideModalFooter>
           <SideModalFooterActions>
-            <Button variant="secondary">Cancel</Button>
             <Button variant="primary">Start chat</Button>
+            <Button variant="secondary">Cancel</Button>
           </SideModalFooterActions>
         </SideModalFooter>
       </SideModal>

From bdb2eb611db8a0dddc4c3e06b3ed831158af8a30 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Tue, 5 Nov 2024 15:43:09 +0530
Subject: [PATCH 2/5] feat(side-modal)!: add changeset

---
 .changeset/smooth-ads-admire.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/smooth-ads-admire.md

diff --git a/.changeset/smooth-ads-admire.md b/.changeset/smooth-ads-admire.md
new file mode 100644
index 0000000000..7cfc335616
--- /dev/null
+++ b/.changeset/smooth-ads-admire.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/side-modal": major
+"@twilio-paste/core": major
+---
+
+[Side Modal]: Align Side Modal footer actions to left

From 1fe85b0d38d648e808cc8462670d78bd5795ba0d Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Tue, 5 Nov 2024 17:43:34 +0530
Subject: [PATCH 3/5] feat(side-modal)!: update position on docs site

---
 .../paste-website/src/component-examples/SideModalExamples.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/paste-website/src/component-examples/SideModalExamples.ts b/packages/paste-website/src/component-examples/SideModalExamples.ts
index cdf63eda78..fffd978651 100644
--- a/packages/paste-website/src/component-examples/SideModalExamples.ts
+++ b/packages/paste-website/src/component-examples/SideModalExamples.ts
@@ -52,8 +52,8 @@ const SideModalFooterExample = () => {
         </SideModalBody>
         <SideModalFooter>
           <SideModalFooterActions>
-          <Button variant="secondary">Secondary action</Button>
           <Button variant="primary">Primary action</Button>
+          <Button variant="secondary">Secondary action</Button>
           </SideModalFooterActions>
         </SideModalFooter>
       </SideModal>

From b40268e46205e0263889468b5e0dc4ebb5a52ffe Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Tue, 5 Nov 2024 22:19:40 +0530
Subject: [PATCH 4/5] feat(side-modal): update changeset

---
 .changeset/smooth-ads-admire.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/smooth-ads-admire.md b/.changeset/smooth-ads-admire.md
index 7cfc335616..3a4d2c227e 100644
--- a/.changeset/smooth-ads-admire.md
+++ b/.changeset/smooth-ads-admire.md
@@ -1,6 +1,6 @@
 ---
-"@twilio-paste/side-modal": major
-"@twilio-paste/core": major
+"@twilio-paste/side-modal": minor
+"@twilio-paste/core": minor
 ---
 
-[Side Modal]: Align Side Modal footer actions to left
+[Side Modal]: Align `SideModalFooterActions` to left. This change is to make `Side Modal` more aligned with `Side Panel` component.

From 0398e50c12c50398b84ac10ed2e37310f449313d Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <shahmed@twilio.com>
Date: Wed, 6 Nov 2024 10:06:58 +0530
Subject: [PATCH 5/5] feat(side-modal): update changeset

---
 .changeset/smooth-ads-admire.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/smooth-ads-admire.md b/.changeset/smooth-ads-admire.md
index 3a4d2c227e..56d39a9aac 100644
--- a/.changeset/smooth-ads-admire.md
+++ b/.changeset/smooth-ads-admire.md
@@ -3,4 +3,4 @@
 "@twilio-paste/core": minor
 ---
 
-[Side Modal]: Align `SideModalFooterActions` to left. This change is to make `Side Modal` more aligned with `Side Panel` component.
+[Side Modal]: Align `SideModalFooterActions` to left. This change is to make `Side Modal` more aligned with `Side Panel` component. If you want to keep the actions on the right, you can use the `justifyContent` prop to align them to the right. If you are keeping them on the left, it's recommended to move the primary action to the left and the secondary action to the right.