[Side Modal]!: Align Side Modal footer actions to left

.changeset/smooth-ads-admire.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/side-modal": minor
+"@twilio-paste/core": minor
+---
+
+[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.

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)}

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>

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>

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>