fix(ui-components): modal body alignment (#54161)

tools/ui-components/src/modal/modal.stories.tsx

@@ -3,7 +3,10 @@ import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { Button } from '../button';
 import { Modal } from './modal';
-import { type ModalProps, type HeaderProps } from './types';
+import { type ModalProps, type HeaderProps, type BodyProps } from './types';
+
+type StoryProps = ModalProps & HeaderProps & BodyProps;
+type Story = StoryObj<StoryProps>;
 
 const story = {
   title: 'Example/Modal',
@@ -28,12 +31,11 @@ const story = {
   }
 } satisfies Meta<typeof Modal>;
 
-type Story = StoryObj<ModalProps & HeaderProps>;
-
 const Spacer = () => <div style={{ height: '5px', width: '100%' }} />;
 
-const DefaultTemplate: StoryFn<ModalProps & HeaderProps> = ({
+const DefaultTemplate: StoryFn<StoryProps> = ({
   showCloseButton,
+  alignment,
   ...modalProps
 }) => {
   const [open, setOpen] = useState(false);
@@ -47,7 +49,7 @@ const DefaultTemplate: StoryFn<ModalProps & HeaderProps> = ({
         <Modal.Header showCloseButton={showCloseButton}>
           Lorem ipsum
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body alignment={alignment}>
           <p>
             Laboriosam autem non et nisi. Ut voluptatem sit beatae assumenda
             amet aliquam corporis.
@@ -152,4 +154,18 @@ export const WithoutCloseButton: Story = {
   }
 };
 
+export const LeftAlignedBody: Story = {
+  render: DefaultTemplate,
+  args: {
+    alignment: 'left'
+  }
+};
+
+export const StartAlignedBody: Story = {
+  render: DefaultTemplate,
+  args: {
+    alignment: 'start'
+  }
+};
+
 export default story;

tools/ui-components/src/modal/modal.tsx

@@ -7,7 +7,7 @@ import React, {
 import { Dialog, Transition } from '@headlessui/react';
 
 import { CloseButton } from '../close-button';
-import { type ModalProps, type HeaderProps } from './types';
+import { type ModalProps, type HeaderProps, BodyProps } from './types';
 
 // There is a close button on the right side of the modal title.
 // Some extra padding needs to be added to the left of the title text
@@ -63,9 +63,11 @@ const Header = ({
   );
 };
 
-const Body = ({ children }: { children: ReactNode }) => {
+const Body = ({ children, alignment = 'center' }: BodyProps) => {
   return (
-    <div className='p-[15px] border-b-1 border-solid border-foreground-secondary'>
+    <div
+      className={`p-[15px] border-b-1 border-solid border-foreground-secondary text-${alignment}`}
+    >
       {children}
     </div>
   );

tools/ui-components/src/modal/types.ts

@@ -22,3 +22,13 @@ export interface HeaderProps {
    */
   closeButtonClassNames?: string;
 }
+
+export interface BodyProps {
+  children: ReactNode;
+
+  /**
+   * Use `start` for better right-to-left support.
+   * Use `left` if the modal body contains code blocks.
+   */
+  alignment?: 'center' | 'left' | 'start';
+}