feat(components): add width prop to Popover (#1687)

Author: Niznikr

.changeset/easy-deer-cross.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Add `width` prop to `Popover`

packages/components/src/Popover.tsx

@@ -1,3 +1,4 @@
+import type { VariantProps } from 'class-variance-authority';
 import type { Ref } from 'react';
 import type {
 	OverlayArrowProps as AriaOverlayArrowProps,
@@ -16,7 +17,7 @@ import {
 import styles from './styles/Popover.module.css';
 import { useLPContextProps } from './utils';
 
-interface PopoverProps extends AriaPopoverProps {
+interface PopoverProps extends AriaPopoverProps, VariantProps<typeof popoverStyles> {
 	ref?: Ref<HTMLElement>;
 }
 interface OverlayArrowProps extends Omit<AriaOverlayArrowProps, 'children'> {
@@ -25,7 +26,17 @@ interface OverlayArrowProps extends Omit<AriaOverlayArrowProps, 'children'> {
 
 const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
 
-const popoverStyles = cva(styles.popover);
+const popoverStyles = cva(styles.popover, {
+	variants: {
+		width: {
+			default: styles.default,
+			trigger: styles.trigger,
+		},
+	},
+	defaultVariants: {
+		width: 'default',
+	},
+});
 const overlayArrowStyles = cva(styles.arrow);
 
 /**
@@ -35,7 +46,7 @@ const overlayArrowStyles = cva(styles.arrow);
  */
 const Popover = ({ ref, ...props }: PopoverProps) => {
 	[props, ref] = useLPContextProps(props, ref, PopoverContext);
-	const { offset = 4, crossOffset = 0 } = props;
+	const { offset = 4, crossOffset = 0, width = 'default' } = props;
 
 	return (
 		<AriaPopover
@@ -44,7 +55,7 @@ const Popover = ({ ref, ...props }: PopoverProps) => {
 			{...props}
 			ref={ref}
 			className={composeRenderProps(props.className, (className, renderProps) =>
-				popoverStyles({ ...renderProps, className }),
+				popoverStyles({ ...renderProps, width, className }),
 			)}
 		/>
 	);

packages/components/src/Tooltip.tsx

@@ -14,7 +14,7 @@ import {
 	composeRenderProps,
 } from 'react-aria-components';
 
-import popoverStyles from './styles/Popover.module.css';
+import { popoverStyles } from './Popover';
 import styles from './styles/Tooltip.module.css';
 import { useLPContextProps } from './utils';
 
@@ -29,7 +29,7 @@ const tooltipStyles = cva(styles.base, {
 	variants: {
 		variant: {
 			default: styles.tooltip,
-			popover: popoverStyles.popover,
+			popover: popoverStyles({ width: 'default' }),
 		},
 	},
 	defaultVariants: {

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

@@ -11,7 +11,7 @@
 }
 
 .popover {
-	--lp-arrow-offset: var(--lp-size-2);
+	--arrow-offset: var(--lp-size-2);
 
 	isolation: isolate;
 	border-radius: var(--lp-border-radius-medium);
@@ -39,21 +39,6 @@
 
 	&[data-trigger='DialogTrigger'] {
 		padding: var(--lp-spacing-300);
-		min-width: var(--lp-size-192);
-	}
-
-	&[data-trigger='MenuTrigger'],
-	&[data-trigger='SubmenuTrigger'] {
-		min-width: var(--lp-size-192);
-		max-width: var(--lp-size-400);
-	}
-
-	&[data-trigger='Select'] {
-		min-width: var(--trigger-width);
-	}
-
-	&[data-trigger='ComboBox'] {
-		min-width: var(--trigger-width);
 	}
 
 	&[data-trigger='ComboBoxDialog'] {
@@ -68,7 +53,7 @@
 		--origin: translateY(4px);
 
 		&:has(.arrow) {
-			margin-bottom: var(--lp-arrow-offset);
+			margin-bottom: var(--arrow-offset);
 		}
 	}
 
@@ -80,7 +65,7 @@
 		}
 
 		&:has(.arrow) {
-			margin-top: var(--lp-arrow-offset);
+			margin-top: var(--arrow-offset);
 		}
 	}
 
@@ -92,7 +77,7 @@
 		}
 
 		&:has(.arrow) {
-			margin-left: var(--lp-arrow-offset);
+			margin-left: var(--arrow-offset);
 		}
 	}
 
@@ -104,7 +89,7 @@
 		}
 
 		&:has(.arrow) {
-			margin-right: var(--lp-arrow-offset);
+			margin-right: var(--arrow-offset);
 		}
 	}
 
@@ -120,3 +105,29 @@
 		}
 	}
 }
+
+.default {
+	&[data-trigger='DialogTrigger'] {
+		min-width: var(--lp-size-192);
+	}
+
+	&[data-trigger='MenuTrigger'],
+	&[data-trigger='SubmenuTrigger'] {
+		min-width: var(--lp-size-192);
+		max-width: var(--lp-size-400);
+	}
+
+	&[data-trigger='Select'] {
+		min-width: var(--trigger-width);
+	}
+
+	&[data-trigger='ComboBox'] {
+		min-width: var(--trigger-width);
+	}
+}
+
+.trigger {
+	&[data-trigger] {
+		width: var(--trigger-width);
+	}
+}