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

.changeset/clever-walls-switch.md

@@ -0,0 +1,12 @@
+---
+"@launchpad-ui/components": minor
+---
+
+Add AlertText component and actionsLayout prop for block variant
+
+- Add new `AlertText` component to wrap heading and description content
+- Add `actionsLayout` prop with "stacked" (default) and "inline" options for block variant
+- Add `hideIcon` prop to hide the status icon
+- Refactor block variant styles with new color system and layout improvements
+- Reorganize Storybook stories with clearer naming (Block/* and Inline/*)
+- Export AlertText and AlertTextProps from components package

.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,27 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { HTMLAttributes, Ref } from 'react';
+import type { ComponentProps, HTMLAttributes, Ref } from 'react';
 
 import { StatusIcon } from '@launchpad-ui/icons';
 import { useControlledState } from '@react-stately/utils';
 import { cva } from 'class-variance-authority';
 import { HeadingContext, Provider } from 'react-aria-components';
 
-import { ButtonContext } from './Button';
 import { ButtonGroupContext } from './ButtonGroup';
 import { IconButton } from './IconButton';
 import styles from './styles/Alert.module.css';
 
+interface AlertTextProps extends ComponentProps<'div'> {
+	ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * AlertText wraps the title and description content within an Alert.
+ * Use this to group Heading and Text elements when using actionsLayout="inline".
+ */
+const AlertText = ({ className, ref, ...props }: AlertTextProps) => {
+	return <div ref={ref} className={`${styles.text} ${className ?? ''}`.trim()} {...props} />;
+};
+
 const alertStyles = cva(styles.base, {
 	variants: {
 		status: {
@@ -24,6 +35,10 @@ const alertStyles = cva(styles.base, {
 			default: styles.default,
 			inline: styles.inline,
 		},
+		actionsLayout: {
+			stacked: null,
+			inline: styles.actionsInline,
+		},
 	},
 	defaultVariants: {
 		status: 'neutral',
@@ -34,6 +49,8 @@ const alertStyles = cva(styles.base, {
 interface AlertVariants extends VariantProps<typeof alertStyles> {}
 
 interface AlertProps extends HTMLAttributes<HTMLDivElement>, AlertVariants {
+	/** Controls the layout of actions within the alert (block variant only). */
+	actionsLayout?: 'stacked' | 'inline';
 	/** Hides the status icon. */
 	hideIcon?: boolean;
 	/** Whether the alert can be dismissed. */
@@ -50,6 +67,7 @@ const Alert = ({
 	children,
 	status = 'neutral',
 	variant = 'default',
+	actionsLayout = 'stacked',
 	isDismissable,
 	isOpen,
 	onDismiss,
@@ -59,31 +77,27 @@ const Alert = ({
 }: AlertProps) => {
 	const [open, setOpen] = useControlledState(isOpen, true, (val) => !val && onDismiss?.());
 
+	const showIcon = !hideIcon && status !== 'neutral';
+	const resolvedActionsLayout = variant === 'default' ? actionsLayout : undefined;
+
 	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={[
 						[HeadingContext, { className: styles.heading }],
-						[
-							ButtonGroupContext,
-							{
-								className: styles.buttonGroup,
-							},
-						],
-						[
-							ButtonContext,
-							variant === 'inline'
-								? {
-										className: styles.inlineAction,
-										size: 'medium' as const,
-										variant: 'default' as const,
-									}
-								: {},
-						],
+						[ButtonGroupContext, { className: styles.buttonGroup }],
 					]}
 				>
 					{children}
@@ -103,5 +117,5 @@ const Alert = ({
 	) : null;
 };
 
-export { Alert, alertStyles };
-export type { AlertProps };
+export { Alert, AlertText, alertStyles };
+export type { AlertProps, AlertTextProps };

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/index.ts

@@ -1,7 +1,7 @@
 import './styles/base.css';
 import './styles/themes.css';
 
-export type { AlertProps } from './Alert';
+export type { AlertProps, AlertTextProps } from './Alert';
 export type { AutocompleteProps } from './Autocomplete';
 export type { AvatarProps, InitialsAvatarProps } from './Avatar';
 export type { BreadcrumbProps, BreadcrumbsProps } from './Breadcrumbs';
@@ -94,7 +94,7 @@ export type {
 	TreeProps,
 } from './Tree';
 
-export { Alert, alertStyles } from './Alert';
+export { Alert, AlertText, alertStyles } from './Alert';
 export { Autocomplete } from './Autocomplete';
 export { Avatar, avatarStyles, InitialsAvatar } from './Avatar';
 export {

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

@@ -25,12 +25,14 @@
 	--alert-color-bg-warning: #3c170c;
 }
 
+/* Shared styles for both the block and inline variants */
 .base {
 	display: flex;
 	border-radius: var(--lp-border-radius-medium);
 	gap: var(--lp-spacing-300);
 	align-items: flex-start;
 
+	/* Status icon styles */
 	&.error .icon {
 		fill: var(--lp-color-fill-feedback-error);
 	}
@@ -48,14 +50,16 @@
 	}
 }
 
-.default,
-.inline {
-	padding: var(--lp-spacing-500);
+/* Base styles for the block variant */
+.default {
+	/* Add a base layer of padding on the Alert itself. This is just enough to create some breathing room in case any buttons are present. */
+	padding: var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-500);
 	background-color: var(--alert-color-bg-neutral);
 	border: 1px solid var(--alert-color-border-neutral);
 	position: relative;
 	min-height: var(--lp-size-48);
 
+	/* Status borders and background colors */
 	&.error {
 		border-color: var(--alert-color-border-error);
 		background-color: var(--alert-color-bg-error);
@@ -76,52 +80,76 @@
 		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-10));
 	}
 
-	/* Let's keep the close button in the default position, but position relative in case we want to move it later. */
-	& .close {
-		position: relative;
+	/* Add another layer of vertical padding to the Alert content (text and actions). This will align the basline of the text with the baseline of the dismiss button. */
+	.content {
+		padding: var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-300) 0;
 	}
-}
 
-.inline {
-	align-items: center;
-	gap: var(--lp-spacing-300);
-	padding: var(--lp-spacing-400) var(--lp-spacing-500);
+	/* Add a little space at the top of the button group to separate it from the text */
+	.buttonGroup {
+		margin-top: var(--lp-spacing-400);
+	}
 
-	& .close {
-		margin-left: var(--lp-spacing-300);
+	/* We need to position the close button absolutely so we can adjust its position without affecting the layout of the Alert content. */
+	.close {
+		position: absolute;
+		top: var(--lp-spacing-300);
+		right: var(--lp-spacing-300);
 	}
 
+	/* Add extra right padding when there's a close button to prevent text from overlapping the button */
+	&:has(.close) .content {
+		padding-right: var(--lp-size-48);
+	}
+}
+
+/* Inline actions variant */
+.actionsInline {
+	/* Switch the direction of the content to row and make sure it fills its container. */
 	& .content {
 		flex-direction: row;
-		align-items: center;
-		gap: var(--lp-spacing-400);
+		align-items: flex-start;
+		flex: 1;
+		gap: var(--lp-spacing-500);
+
+		/* Unset padding on content to prevent it looking too big if there are actions present. */
+		padding: unset;
 	}
 
-	/* 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);
+	/* Move vertical padding from the content container to the text container. This ensures the text baseline is aligned with the trailing actions and dismiss buttons. We need to do some fancy calc stuff to make it look right. */
+	& .text {
+		padding: calc(var(--lp-spacing-300) - var(--lp-size-2)) 0;
 	}
 
-	&:has(.inlineAction) {
-		.close {
-			margin-left: 0;
-		}
+	/* Need a specific selector to override the padding on the content container when there is a close button. */
+	&:has(.close) .content {
+		padding-right: unset;
+	}
+
+	/* Adjust icon position to compensate for the different padding */
+	& .icon {
+		transform: translateY(var(--lp-spacing-300));
+	}
+
+	/* Move the button group into position. We don't need a top margin here, and we want to flush it to the right */
+	& .buttonGroup {
+		margin-top: unset;
+		margin-left: auto;
 	}
-}
 
-.inlineAction {
-	flex-shrink: 0;
-	margin-left: auto;
+	/* Remove the absolute positioning from the close button so that it can participate in the flex layout. */
+	& .close {
+		position: unset;
+		top: unset;
+		right: unset;
+	}
 }
 
+/* Base styles for the content container */
 .content {
 	min-width: 0;
 	flex: 1;
@@ -131,21 +159,30 @@
 	align-items: flex-start;
 }
 
-.content .heading {
-	font: var(--lp-text-body-2-semibold);
-}
-
-.buttonGroup {
-	margin-top: var(--lp-spacing-500);
+/* Base styles for the text container */
+.text {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
 }
 
-.default .close {
-	bottom: var(--lp-spacing-300);
-	left: var(--lp-spacing-300);
+/* Make sure the heading is the right size and weight regardless of which element is used */
+.heading {
+	font: var(--lp-text-body-2-semibold) !important;
 }
 
-/* Sometimes we want to make text bold, but we need to make sure this maps to the correct font weight. */
+/* Sometimes we want to make text bold, but we need to make sure this maps to semibold, not bold. */
 .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);
+	}
+}