feat(components): add sizes to drawer variant for Modal (#1631)

Author: Niznikr

.changeset/fine-kiwis-raise.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Add sizes to `drawer` variant for `Modal`

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

packages/components/src/styles/Modal.module.css

@@ -69,6 +69,7 @@
 
 	& [slot='body'] {
 		overflow: auto;
+		flex: 1;
 	}
 
 	& [slot='footer'] {
@@ -85,18 +86,26 @@
 	}
 }
 
-.small {
+.defaultSmall {
 	width: var(--lp-size-480);
 }
 
-.medium {
+.defaultMedium {
 	width: var(--lp-size-640);
 }
 
 .large {
 	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] {

packages/components/stories/Modal.stories.tsx

@@ -94,6 +94,7 @@ export const Drawer: Story = {
 	play,
 	args: {
 		variant: 'drawer',
+		size: 'small',
 	},
 	parameters: {
 		chromatic: {