From 7c93dafd52ac78b1325b1c76f3ed0476bc98170e Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed <ashoaib540918@gmail.com> Date: Wed, 6 Nov 2024 21:00:51 +0530 Subject: [PATCH] [Side Modal]!: Align Side Modal footer actions to left (#4140) * feat(side-modal)!: update alignment of Side Modal footer actions to left * feat(side-modal)!: add changeset * feat(side-modal)!: update position on docs site * feat(side-modal): update changeset * feat(side-modal): update changeset --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .changeset/smooth-ads-admire.md | 6 ++++++ .../components/side-modal/src/SideModalFooterActions.tsx | 2 +- .../components/side-modal/stories/customization.stories.tsx | 2 +- .../components/side-modal/stories/index.stories.tsx | 2 +- .../src/component-examples/SideModalExamples.ts | 2 +- 5 files changed, 10 insertions(+), 4 deletions(-) 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..56d39a9aac --- /dev/null +++ b/.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. 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> 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>