fix(Alert): [DSYS-132] Rollback inline Alert styles and add new actions layout prop

.storybook/preview.tsx

@@ -269,6 +269,7 @@ const enhanceArgTypes = (context: any) => {
 						'appearance',
 						'position',
 						'placement',
+						'actionsLayout',
 					];
 
 					if (componentProps.includes(key)) {
@@ -326,6 +327,7 @@ const enhanceArgTypes = (context: any) => {
 					'appearance',
 					'position',
 					'placement',
+					'actionsLayout',
 				];
 
 				if (componentProps.includes(key)) {

packages/components/src/Alert.tsx

@@ -1,16 +1,57 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { HTMLAttributes, Ref } from 'react';
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
 
 import { StatusIcon } from '@launchpad-ui/icons';
 import { useControlledState } from '@react-stately/utils';
 import { cva } from 'class-variance-authority';
+import { Children, Fragment, isValidElement } from 'react';
 import { HeadingContext, Provider } from 'react-aria-components';
 
-import { ButtonContext } from './Button';
-import { ButtonGroupContext } from './ButtonGroup';
+import { ButtonGroup, ButtonGroupContext } from './ButtonGroup';
 import { IconButton } from './IconButton';
 import styles from './styles/Alert.module.css';
 
+const isButtonGroup = (child: ReactNode): boolean => {
+	if (!isValidElement(child)) return false;
+	const type = child.type as { displayName?: string; name?: string };
+	return (
+		child.type === ButtonGroup || type.displayName === 'ButtonGroup' || type.name === 'ButtonGroup'
+	);
+};
+
+const flattenChildren = (children: ReactNode): ReactNode[] => {
+	const result: ReactNode[] = [];
+
+	Children.forEach(children, (child) => {
+		if (isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) {
+			result.push(...flattenChildren(child.props.children));
+		} else {
+			result.push(child);
+		}
+	});
+
+	return result;
+};
+
+const separateChildren = (
+	children: ReactNode,
+): { textContent: ReactNode[]; actions: ReactNode } => {
+	const textContent: ReactNode[] = [];
+	let actions: ReactNode = null;
+
+	const flatChildren = flattenChildren(children);
+
+	for (const child of flatChildren) {
+		if (isButtonGroup(child)) {
+			actions = child;
+		} else {
+			textContent.push(child);
+		}
+	}
+
+	return { textContent, actions };
+};
+
 const alertStyles = cva(styles.base, {
 	variants: {
 		status: {
@@ -24,17 +65,24 @@ const alertStyles = cva(styles.base, {
 			default: styles.default,
 			inline: styles.inline,
 		},
+		actionsLayout: {
+			stacked: styles.actionsStacked,
+			inline: styles.actionsInline,
+		},
 	},
 	defaultVariants: {
 		status: 'neutral',
 		variant: 'default',
+		actionsLayout: 'stacked',
 	},
 });
 
 interface AlertVariants extends VariantProps<typeof alertStyles> {}
 
 interface AlertProps extends HTMLAttributes<HTMLDivElement>, AlertVariants {
-	/** Hides the status icon. */
+	/** Controls the layout of actions within the alert (block variant only). */
+	actionsLayout?: 'stacked' | 'inline';
+	/** Hides the status icon (block variant only). */
 	hideIcon?: boolean;
 	/** Whether the alert can be dismissed. */
 	isDismissable?: boolean;
@@ -50,6 +98,7 @@ const Alert = ({
 	children,
 	status = 'neutral',
 	variant = 'default',
+	actionsLayout = 'stacked',
 	isDismissable,
 	isOpen,
 	onDismiss,
@@ -59,11 +108,18 @@ const Alert = ({
 }: AlertProps) => {
 	const [open, setOpen] = useControlledState(isOpen, true, (val) => !val && onDismiss?.());
 
+	const showIcon = status !== 'neutral' && !(hideIcon && variant === 'default');
+	const resolvedActionsLayout = variant === 'default' ? actionsLayout : undefined;
+	const { textContent, actions } = separateChildren(children);
+
 	return open ? (
-		<div ref={ref} {...props} role="alert" className={alertStyles({ status, variant, className })}>
-			{!hideIcon && status !== 'neutral' && (
-				<StatusIcon size="small" kind={status || 'info'} className={styles.icon} />
-			)}
+		<div
+			ref={ref}
+			{...props}
+			role="alert"
+			className={alertStyles({ status, variant, actionsLayout: resolvedActionsLayout, className })}
+		>
+			{showIcon && <StatusIcon size="small" kind={status || 'info'} className={styles.icon} />}
 			<div className={styles.content}>
 				<Provider
 					values={[
@@ -74,19 +130,10 @@ const Alert = ({
 								className: styles.buttonGroup,
 							},
 						],
-						[
-							ButtonContext,
-							variant === 'inline'
-								? {
-										className: styles.inlineAction,
-										size: 'medium' as const,
-										variant: 'default' as const,
-									}
-								: {},
-						],
 					]}
 				>
-					{children}
+					<div className={styles.text}>{textContent}</div>
+					{actions}
 				</Provider>
 			</div>
 			{isDismissable && (

packages/components/src/ButtonGroup.tsx

@@ -40,7 +40,7 @@ interface ButtonGroupProps extends GroupProps, VariantProps<typeof buttonGroupSt
 
 const ButtonGroupContext = createContext<ContextValue<ButtonGroupProps, HTMLDivElement>>(null);
 
-const ButtonGroup = ({ ref, ...props }: ButtonGroupProps) => {
+const ButtonGroup = ({ ref, ...props }: ButtonGroupProps): React.JSX.Element => {
 	[props, ref] = useLPContextProps(props, ref, ButtonGroupContext);
 	const { spacing = 'basic', orientation = 'horizontal' } = props;
 
@@ -67,5 +67,7 @@ const ButtonGroup = ({ ref, ...props }: ButtonGroupProps) => {
 	);
 };
 
+ButtonGroup.displayName = 'ButtonGroup';
+
 export { ButtonGroup, ButtonGroupContext, buttonGroupStyles };
 export type { ButtonGroupProps };

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

@@ -48,8 +48,8 @@
 	}
 }
 
-.default,
-.inline {
+/* Stacked actions variant */
+.default {
 	padding: var(--lp-spacing-500);
 	background-color: var(--alert-color-bg-neutral);
 	border: 1px solid var(--alert-color-border-neutral);
@@ -76,50 +76,49 @@
 		background-color: var(--alert-color-bg-warning);
 	}
 
-	&:has(.heading) {
-		/* biome-ignore lint/style/noDescendingSpecificity: ignore */
-		& .icon {
-			transform: translateY(var(--lp-size-2));
-		}
+	& .icon {
+		transform: translateY(var(--lp-size-2));
 	}
 
-	/* Let's keep the close button in the default position, but position relative in case we want to move it later. */
-	& .close {
+	.close {
 		position: relative;
+		bottom: var(--lp-spacing-300);
+		left: var(--lp-spacing-300);
 	}
-}
-
-.inline {
-	align-items: center;
-	gap: var(--lp-spacing-300);
-	padding: var(--lp-spacing-400) var(--lp-spacing-500);
 
-	& .close {
-		margin-left: var(--lp-spacing-300);
+	.buttonGroup {
+		margin-top: var(--lp-spacing-500);
 	}
+}
+
+/* Inline actions variant */
+.actionsInline {
+	padding: var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-500);
 
 	& .content {
 		flex-direction: row;
-		align-items: center;
-		gap: var(--lp-spacing-400);
+		align-items: flex-start;
+		gap: var(--lp-spacing-500);
 	}
 
-	/* Adjust padding so the alert maintains the same height if there's an inline action or close button. We have to hardcode the vertical values because of the way borders get calculated as a part of an element's dimensions. */
-	&:has(.inlineAction),
-	&:has(.close) {
-		padding: 7px var(--lp-spacing-300) 7px var(--lp-spacing-500);
+	& .icon {
+		transform: translateY(var(--lp-spacing-300));
 	}
 
-	&:has(.inlineAction) {
-		.close {
-			margin-left: 0;
-		}
+	/* This magic number is used to ensure the text baseline is aligned with the trailing actions and dismiss buttons */
+	& .text {
+		padding: calc(var(--lp-spacing-300) - 2px) 0;
+	}
+
+	& .buttonGroup {
+		margin-top: unset;
+		margin-left: auto;
 	}
-}
 
-.inlineAction {
-	flex-shrink: 0;
-	margin-left: auto;
+	& .close {
+		bottom: unset;
+		left: unset;
+	}
 }
 
 .content {
@@ -131,21 +130,22 @@
 	align-items: flex-start;
 }
 
+.text .heading,
 .content .heading {
 	font: var(--lp-text-body-2-semibold);
 }
 
-.buttonGroup {
-	margin-top: var(--lp-spacing-500);
-}
-
-.default .close {
-	bottom: var(--lp-spacing-300);
-	left: var(--lp-spacing-300);
-}
-
 /* Sometimes we want to make text bold, but we need to make sure this maps to the correct font weight. */
 .content strong,
 .content b {
 	font-weight: var(--lp-font-weight-semibold);
 }
+
+/* Inline variant styles */
+.inline {
+	align-items: center;
+
+	& .close {
+		margin-left: var(--lp-spacing-300);
+	}
+}