DrawerDialog: Add support for zeroed out padding (#2773)

## Summary:
The DrawerDialog needs an update to support zeroed-out padding where borders and content go all the way to the edge. There is padding set in the `ModalContent` component, a nested child deep in the structure. In this PR, plumbing is created to allow a `styles.content` object to override the padding in `ModalContent`.

Issue: WB-2079

## Test plan:
1. Review stories for DrawerDialog, FlexibleDialog, and Modal Testing snapshot stories
2. Ensure ModalContent has no unexpected layout shifts in OG modals
3. Determine whether media query usage in ModalContent can be deferred until later (WB-2080)

Author: marcysutton

Reviewers: beaesguerra, marcysutton

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ 12 checks were successful, ⏭️  2 checks have been skipped

Pull Request URL: #2773

Author: marcysutton

.changeset/thin-candles-nail.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-modal": minor
+---
+
+Add support for no padding to DrawerDialog and FlexibleDialog

__docs__/wonder-blocks-modal/drawer-dialog.argtypes.ts

@@ -69,7 +69,10 @@ export default {
     styles: {
         control: {type: undefined},
         table: {
-            type: {summary: "DrawerDialogStyles"},
+            type: {
+                summary:
+                    "{root?: StyleType, dialog?: StyleType, panel?: StyleType, content?: StyleType, closeButton?: StyleType}",
+            },
         },
     },
 

__docs__/wonder-blocks-modal/drawer-dialog.stories.tsx

@@ -23,6 +23,16 @@ import DrawerDialogArgTypes from "./drawer-dialog.argtypes";
  *
  * The component automatically receives alignment, animation, and timing props from `DrawerLauncher`
  * via React Context, eliminating the need for manual prop passing in nested components.
+ *
+ * ### Custom styling
+ *
+ * You can optionally pass in the `styles` prop to override various parts of a DrawerDialog.
+ *
+ * - `styles.root` -  The outermost container of the dialog itself: alignment styles, box shadow, minWidth, maxWidth, width, height, maxHeight, etc.
+ * - `styles.dialog` - The actual dialog element with minWidth/minHeight, mostly to override View default styles
+ * - `styles.panel` - The inner dialog panel, targeting the internal `FlexiblePanel` component
+ * - `styles.content` - The internal `ModalContent` component, which sets padding
+ * - `styles.closeButton` - The close button, including absolute positioning
  */
 export default {
     title: "Packages / Modal / DrawerLauncher / DrawerDialog",
@@ -33,6 +43,55 @@ export default {
             // Drawer stories are behavior-based, disable visual regression testing
             disableSnapshot: true,
         },
+        docs: {
+            description: {
+                component: `\`DrawerDialog\` is the modal content component designed specifically for use with \`DrawerLauncher\`.
+It provides a consistent drawer interface with proper animations, positioning, and accessibility features.
+
+**IMPORTANT**: This component should only be used with \`DrawerLauncher\`. Using it with other
+modal launchers may result in incorrect animations, positioning, and styling.
+
+The component automatically receives alignment, animation, and timing props from \`DrawerLauncher\`
+via React Context, eliminating the need for manual prop passing in nested components.
+
+### Usage
+
+\`\`\`jsx
+import {DrawerLauncher} from "@khanacademy/wonder-blocks-modal";
+import {DrawerDialog} from "@khanacademy/wonder-blocks-modal";
+import {BodyText} from "@khanacademy/wonder-blocks-typography";
+
+<DrawerLauncher
+     onClose={handleClose}
+     opened={opened}
+     animated={animated}
+     alignment="inlineStart"
+     modal={({closeModal}) => (
+         <DrawerDialog
+             title="Assign Mastery Mission"
+             styles={{content: {padding: 0}}}
+             content={
+                 <View>
+                     <BodyText>
+                         Hello, world
+                     </BodyText>
+                 </View>
+             }
+         />
+     )}
+/>
+\`\`\`
+
+### Custom styling
+You can optionally pass in the \`styles\` prop to override various parts of a DrawerDialog.
+
+- \`styles.root\` -  The outermost container of the dialog itself: alignment styles, box shadow, minWidth, maxWidth, width, height, maxHeight, etc.
+- \`styles.dialog\` - The actual dialog element with minWidth/minHeight, mostly to override View default styles
+- \`styles.panel\` - The inner dialog panel, targeting the internal \`FlexiblePanel\` component
+- \`styles.content\` - The internal \`ModalContent\` component, which sets padding
+- \`styles.closeButton\` - The close button, including absolute positioning`,
+            },
+        },
     },
     argTypes: DrawerDialogArgTypes,
 } satisfies Meta<typeof DrawerDialog>;
@@ -83,6 +142,44 @@ export const Default: StoryComponentType = {
     ),
 };
 
+/**
+ * Basic drawer dialog with no padding. This allows content to go to the edges.
+ */
+// TODO (WB-2080): Use media query tokens here and in ModalContent
+const small = "@media (max-width: 767px)" as any;
+
+export const WithNoPadding: StoryComponentType = {
+    render: () => (
+        <DrawerLauncher
+            alignment="inlineEnd"
+            modal={
+                <DrawerDialog
+                    title="Default Drawer"
+                    styles={{
+                        content: {
+                            padding: 0,
+                            [small]: {
+                                paddingInline: 0,
+                            },
+                        },
+                    }}
+                    content={
+                        <View>
+                            <BodyText>
+                                This is a basic drawer dialog with no padding.
+                            </BodyText>
+                        </View>
+                    }
+                />
+            }
+        >
+            {({openModal}) => (
+                <Button onClick={openModal}>Open Default Drawer</Button>
+            )}
+        </DrawerLauncher>
+    ),
+};
+
 /**
  * Drawer with rich content including form elements and actions.
  * Demonstrates how to create more complex drawer interfaces.

__docs__/wonder-blocks-modal/drawer-launcher-testing-snapshots.stories.tsx

@@ -112,6 +112,9 @@ export const InlineEnd: StoryComponentType = {
 /**
  * InlineEnd drawer
  */
+// TODO (WB-2080): Use media query tokens here and in ModalContent
+const small = "@media (max-width: 767px)" as any;
+
 export const InlineEndCustomStyle: StoryComponentType = {
     render: () => (
         <DrawerLauncher
@@ -120,9 +123,15 @@ export const InlineEndCustomStyle: StoryComponentType = {
                     title="Single-line title"
                     styles={{
                         root: {
-                            minWidth: "320px",
+                            minWidth: "320px", // style only applies to desktop
                             width: "unset",
                         },
+                        content: {
+                            paddingInline: 0,
+                            [small]: {
+                                paddingInline: 0,
+                            },
+                        },
                     }}
                     content={
                         <View>

__docs__/wonder-blocks-modal/drawer-launcher.stories.tsx

@@ -75,11 +75,18 @@ export default {
         ),
         docs: {
             description: {
-                component: `A drawer modal launcher intended for the DrawerDialog component. It can align a dialog on the left (inlineStart), right (inlineEnd), or bottom of the screen.
+                component: `A drawer modal launcher intended for the \`DrawerDialog\` component.
+
+It can align a dialog on the \`inlineStart\` (left),  \`inlineEnd\` (right), or \`blockEnd\` (bottom).
 
 - Slide animations can be turned off with the \`animated\` prop.
 - Timing of animations can be fine-tuned with the \`timingDuration\` prop, used on enter and exit animations. It is also used to coordinate timing of focus management on open and close.
 
+**IMPORTANT**: This component should only be used with \`DrawerDialog\`. Using it with other
+dialog components may result in incorrect animations, positioning, and styling.
+
+See available styling customizations in \`DrawerDialog\` docs.
+
 ### Usage
 
 \`\`\`jsx

__docs__/wonder-blocks-modal/flexible-dialog.argtypes.ts

@@ -48,7 +48,7 @@ export default {
         table: {
             type: {
                 summary:
-                    "{root?: StyleType, dialog?: StyleType, panel?: StyleType, closeButton?: StyleType}",
+                    "{root?: StyleType, dialog?: StyleType, panel?: StyleType, content?: StyleType, closeButton?: StyleType}",
             },
         },
     },

__docs__/wonder-blocks-modal/flexible-dialog.stories.tsx

@@ -16,7 +16,7 @@ import {allModes} from "../../.storybook/modes";
 
 import celebrationBg from "../../static/celebration_bg.svg";
 import celebrationChest from "../../static/celebration-chest.svg";
-import {reallyLongText} from "../components/text-for-testing";
+import {longText, reallyLongText} from "../components/text-for-testing";
 
 const customViewports = {
     phone: {
@@ -170,6 +170,40 @@ export const WithBackgroundImage: StoryComponentType = {
     ),
 };
 
+/**
+ *
+ * A FlexibleDialog can have zeroed out padding.
+ */
+// TODO (WB-2080): Use media query tokens here and in ModalContent
+const small = "@media (max-width: 767px)" as any;
+export const WithNoPadding: StoryComponentType = {
+    render: () => (
+        <View style={styles.previewSizer}>
+            <View style={styles.modalPositioner}>
+                <FlexibleDialog
+                    styles={{
+                        content: {
+                            padding: 0,
+                            maxWidth: "90%",
+                            [small]: {
+                                paddingInline: 0,
+                            },
+                        },
+                    }}
+                    title="Dogz are the best"
+                    content={
+                        <View>
+                            <BodyText>{longText}</BodyText>
+                            <BodyText>{longText}</BodyText>
+                            <BodyText>{longText}</BodyText>
+                        </View>
+                    }
+                />
+            </View>
+        </View>
+    ),
+};
+
 /**
  *
  * A FlexibleDialog can have a movable title via the

packages/wonder-blocks-modal/src/components/drawer-dialog.tsx

@@ -71,6 +71,7 @@ export type DrawerDialogStyles = {
     root?: StyleType;
     dialog?: StyleType;
     panel?: StyleType;
+    content?: StyleType;
     closeButton?: StyleType;
 };
 
@@ -112,6 +113,16 @@ type RenderProps = {
  *     }
  * />
  * ```
+ *
+ * ### Custom styling
+ *
+ * You can optionally pass in the `styles` prop to override various parts of a DrawerDialog.
+ *
+ * - `styles.root` -  The outermost container of the dialog itself: alignment styles, box shadow, minWidth, maxWidth, width, height, maxHeight, etc.
+ * - `styles.dialog` - The actual dialog element with minWidth/minHeight, mostly to override View default styles
+ * - `styles.panel` - The inner dialog panel, targeting the internal `FlexiblePanel` component
+ * - `styles.content` - The internal `ModalContent` component, which sets padding
+ * - `styles.closeButton` - The close button, including absolute positioning
  */
 const DrawerDialog = React.forwardRef(function DrawerDialog(
     props: Props,
@@ -156,6 +167,7 @@ const DrawerDialog = React.forwardRef(function DrawerDialog(
                     Boolean,
                 ),
                 panel: styles?.panel,
+                content: styles?.content,
                 closeButton: styles?.closeButton,
             }}
         />

packages/wonder-blocks-modal/src/components/flexible-dialog.tsx

@@ -66,6 +66,7 @@ export type FlexibleDialogStyles = {
     root?: StyleType;
     dialog?: StyleType;
     panel?: StyleType;
+    content?: StyleType;
     closeButton?: StyleType;
 };
 
@@ -109,6 +110,16 @@ type RenderProps = {
  *     }
  * />
  * ```
+ *
+ * ### Custom styling
+ *
+ * You can optionally pass in the `styles` prop to override various parts of a DrawerDialog.
+ *
+ * - `styles.root` -  The outermost container of the dialog: box shadow, minWidth, maxWidth, width, height, maxHeight, etc.
+ * - `styles.dialog` - The actual dialog element with minWidth/minHeight, mostly to override View default styles
+ * - `styles.panel` - The inner dialog flex panel, targeting the internal `FlexiblePanel` component
+ * - `styles.content` - The internal `ModalContent` component, which sets padding
+ * - `styles.closeButton` - The close button, including absolute positioning
  */
 const FlexibleDialog = React.forwardRef(function FlexibleDialog(
     props: Props,
@@ -155,6 +166,7 @@ const FlexibleDialog = React.forwardRef(function FlexibleDialog(
                 <FlexiblePanel
                     styles={{
                         panel: styles?.panel,
+                        content: styles?.content,
                         closeButton: styles?.closeButton,
                     }}
                     onClose={onClose}

packages/wonder-blocks-modal/src/components/flexible-panel.tsx

@@ -35,6 +35,7 @@ type Props = {
      */
     styles?: {
         panel?: StyleType;
+        content?: StyleType;
         closeButton?: StyleType;
     };
     /**
@@ -95,7 +96,7 @@ export default function FlexiblePanel({
         const mainContent = ModalContent.isComponentOf(contentNode) ? (
             (contentNode as React.ReactElement<PropsFor<typeof ModalContent>>)
         ) : (
-            <ModalContent>{contentNode}</ModalContent>
+            <ModalContent style={styles?.content}>{contentNode}</ModalContent>
         );
         if (!mainContent) {
             return mainContent;
@@ -104,7 +105,7 @@ export default function FlexiblePanel({
         return React.cloneElement(mainContent, {
             style: [mainContent.props.style],
         });
-    }, [title, content]);
+    }, [title, content, styles?.content]);
 
     const mainContent = renderMainContent();