From eccffafab64ccc83683bac6a9db451ac1907bd67 Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Mon, 14 Apr 2025 16:44:53 -0400
Subject: [PATCH] feat(components): add sizes to `drawer` variant for `Modal`

---
 .changeset/fine-kiwis-raise.md                |  5 ++++
 packages/components/src/Modal.tsx             | 26 +++++++++++++++++--
 .../components/src/styles/Modal.module.css    | 18 ++++++++-----
 packages/components/stories/Modal.stories.tsx |  1 +
 4 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/fine-kiwis-raise.md

diff --git a/.changeset/fine-kiwis-raise.md b/.changeset/fine-kiwis-raise.md
new file mode 100644
index 000000000..5dadb4b1e
--- /dev/null
+++ b/.changeset/fine-kiwis-raise.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Add sizes to `drawer` variant for `Modal`
diff --git a/packages/components/src/Modal.tsx b/packages/components/src/Modal.tsx
index f6db3e56a..012266631 100644
--- a/packages/components/src/Modal.tsx
+++ b/packages/components/src/Modal.tsx
@@ -19,8 +19,8 @@ import { useLPContextProps } from './utils';
 const modalStyles = cva(styles.base, {
 	variants: {
 		size: {
-			small: styles.small,
-			medium: styles.medium,
+			small: undefined,
+			medium: undefined,
 			large: styles.large,
 		},
 		variant: {
@@ -32,6 +32,28 @@ const modalStyles = cva(styles.base, {
 		size: 'medium',
 		variant: 'default',
 	},
+	compoundVariants: [
+		{
+			variant: 'default',
+			size: 'small',
+			className: styles.defaultSmall,
+		},
+		{
+			variant: 'default',
+			size: 'medium',
+			className: styles.defaultMedium,
+		},
+		{
+			variant: 'drawer',
+			size: 'small',
+			className: styles.drawerSmall,
+		},
+		{
+			variant: 'drawer',
+			size: 'medium',
+			className: styles.drawerMedium,
+		},
+	],
 });
 const modalOverlayStyles = cva(styles.overlay);
 
diff --git a/packages/components/src/styles/Modal.module.css b/packages/components/src/styles/Modal.module.css
index bfc173c5f..653c8100b 100644
--- a/packages/components/src/styles/Modal.module.css
+++ b/packages/components/src/styles/Modal.module.css
@@ -69,6 +69,7 @@
 
 	& [slot='body'] {
 		overflow: auto;
+		flex: 1;
 	}
 
 	& [slot='footer'] {
@@ -85,11 +86,11 @@
 	}
 }
 
-.small {
+.defaultSmall {
 	width: var(--lp-size-480);
 }
 
-.medium {
+.defaultMedium {
 	width: var(--lp-size-640);
 }
 
@@ -97,6 +98,14 @@
 	width: var(--lp-size-800);
 }
 
+.drawerSmall {
+	width: var(--lp-size-400);
+}
+
+.drawerMedium {
+	width: var(--lp-size-560);
+}
+
 .default {
 	@media (prefers-reduced-motion: no-preference) {
 		&[data-entering] {
@@ -112,11 +121,6 @@
 	top: 0;
 	bottom: 0;
 	right: 0;
-	width: var(--lp-size-400);
-
-	& [slot='footer'] {
-		justify-content: flex-start;
-	}
 
 	@media (prefers-reduced-motion: no-preference) {
 		&[data-entering] {
diff --git a/packages/components/stories/Modal.stories.tsx b/packages/components/stories/Modal.stories.tsx
index aec9c2244..dc0df1af4 100644
--- a/packages/components/stories/Modal.stories.tsx
+++ b/packages/components/stories/Modal.stories.tsx
@@ -94,6 +94,7 @@ export const Drawer: Story = {
 	play,
 	args: {
 		variant: 'drawer',
+		size: 'small',
 	},
 	parameters: {
 		chromatic: {