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

* fix(components): rollback inline Alert styles, add actionsLayout prop

Roll back inline Alert variant to minimal styling after Meticulous tests
revealed issues with the new styles when alerts are used truly "inline"
alongside other elements.

Changes:
- Restore minimal styles for inline Alert variant (no background/border)
- Keep new block variant styles with colored backgrounds and borders
- Add actionsLayout prop ('stacked' | 'inline') for block variant to
  control whether ButtonGroup appears below content or on the right
- Automatically wrap non-ButtonGroup children in a container to keep
  heading and text stacked together when using inline actions layout
- Remove inlineAction slot and ButtonContext for inline variant
- Restrict hideIcon prop to block variant only
- Add displayName to ButtonGroup component to support runtime detection
  when separating children in Alert

Breaking changes: None - existing usage continues to work as expected.

Made-with: Cursor

* docs(components): reorganize Alert stories into Block and Inline sections

Restructure Alert stories for better organization and discoverability.

- Add nested story names (Block/*, Inline/*) to group related examples
- Consolidate individual color stories into "Tones" stories
- Add "Without Header" story showing inline actions variations
- Add actionsLayout to Storybook argTypes whitelist

Made-with: Cursor

* style(components): make padding & positioning more consistent between stacked and inline actions

* style(components): clean up CSS

* fix(Alert): use absolute positioning for dismiss button to prevent extra height

- Changed .default .close from position: relative to position: absolute
- Added conditional right padding via :has(.close) to prevent text overlap
- The actionsInline variant resets to relative positioning at wider container
  widths to maintain inline flow
- Wrapped Alert content in container div for CSS container queries
- Added isDismissable to info alert in BlockTones story for testing

Made-with: Cursor

* refactor(Alert): replace automatic children parsing with AlertText wrapper

- Removed isButtonGroup, flattenChildren, separateChildren helper functions
- Added AlertText component for grouping title/description in actionsLayout="inline"
- Simplified Alert to render children directly without auto-wrapping
- Updated stories to use AlertText wrapper for inline actions layouts
- Stacked layouts remain backward compatible (no wrapper needed)

Made-with: Cursor

* fix(components): code cleanup

* fix(Alert): remove wrapper div, apply container-type to alert element

- Moved container-type: inline-size from wrapper to .default class
- Removed unnecessary container wrapper div
- Put ref and props on same element as role="alert" (fixes ref behavior)
- Moved vertical padding to .content to enable container query modifications
- Changed default status from 'neutral' to 'info'

* fix(Alert): roll back to neutral default variant

* fix(Alert): remove unused CSS class actionsStacked

* fix(Alert): address cursor and devin issues

* chore(Alert): add changeset

* fix(Alert): restore hideIcon behavior for all variants

The hideIcon prop was incorrectly only being respected for the default
variant due to inverted logic. This restores the original behavior where
hideIcon works for both block and inline variants.

Made-with: Cursor

* feat(Alert): add Neutral story for overview page example

Add a dedicated Neutral story with args format that can be used by the
Status overview page, and update the import in Status.tsx to use it.

Made-with: Cursor

* fix(Alert): remove container query, apply actionsInline styles unconditionally

Remove responsive container query behavior to simplify the implementation.
The actionsLayout="inline" prop now always applies inline styles.
Responsive behavior can be added in a follow-up PR.

Made-with: Cursor

* refactor(Alert): improve CSS readability with comments and simplified values

* refactor(Alert): improve CSS readability and remove accidental files

- Replace calc() with var(--lp-size-48) for close button padding
- Use unset for actionsInline overrides instead of explicit values
- Add descriptive comments throughout Alert.module.css
- Remove accidentally committed screenshot files

Made-with: Cursor

* chore(changeset): update Alert changeset description

* fix(Alert): adjust right padding when no dismiss button is present

* chore(Alert): update copy on stories

Author: cmwinters

.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);
+	}
+}