feat: forward width prop from Tooltip to Popover when variant="popover" (#1868)

* feat: add 'fit' width variant to Popover component

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* chore: add changeset for popover fit width variant

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* feat: forward width prop from Tooltip to Popover when variant='popover'

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* chore: add changeset for tooltip width prop forwarding

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: cpurps22

.changeset/tooltip-forward-width.md

@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/components': minor
+---
+
+Forward `width` prop from Tooltip to Popover styles when `variant="popover"`

packages/components/src/Tooltip.tsx

@@ -5,6 +5,7 @@ import type {
 	ContextValue,
 	TooltipTriggerComponentProps,
 } from 'react-aria-components';
+import type { PopoverProps } from './Popover';
 
 import { cva } from 'class-variance-authority';
 import { createContext } from 'react';
@@ -20,6 +21,7 @@ import { useLPContextProps } from './utils';
 
 interface TooltipProps extends AriaTooltipProps, VariantProps<typeof tooltipStyles> {
 	ref?: Ref<HTMLDivElement>;
+	width?: PopoverProps['width'];
 }
 interface TooltipTriggerProps extends TooltipTriggerComponentProps {}
 
@@ -44,7 +46,7 @@ const tooltipStyles = cva(styles.base, {
  */
 const Tooltip = ({ ref, ...props }: TooltipProps) => {
 	[props, ref] = useLPContextProps(props, ref, TooltipContext);
-	const { variant = 'default' } = props;
+	const { variant = 'default', width = 'default' } = props;
 
 	return (
 		<AriaTooltip
@@ -54,7 +56,13 @@ const Tooltip = ({ ref, ...props }: TooltipProps) => {
 			{...props}
 			ref={ref}
 			className={composeRenderProps(props.className, (className, renderProps) =>
-				tooltipStyles({ ...renderProps, variant, className }),
+				variant === 'popover'
+					? tooltipStyles({
+							...renderProps,
+							variant: null,
+							className: popoverStyles({ width, className }),
+						})
+					: tooltipStyles({ ...renderProps, variant, className }),
 			)}
 			data-trigger={variant === 'popover' ? 'DialogTrigger' : undefined}
 		/>

packages/components/stories/Tooltip.stories.tsx

@@ -84,3 +84,17 @@ export const Popover: Story = {
 	},
 	play,
 };
+
+export const PopoverFitWidth: Story = {
+	render: (args) => {
+		return (
+			<TooltipTrigger>
+				<Button>Trigger</Button>
+				<Tooltip variant="popover" width="fit" {...args}>
+					Message
+				</Tooltip>
+			</TooltipTrigger>
+		);
+	},
+	play,
+};