fix(Alert): [DSYS-132] Rollback inline Alert styles and add new actions layout prop by cmwinters · Pull Request #1885 · launchdarkly/launchpad-ui

cmwinters · 2026-04-15T23:07:05Z

Summary

Updated video 4/17

After reviewing the Meticulous test, we've decided to roll back to the old styles for inline alerts. Meticulous has revealed several instances of inline alerts actually being used “inline”, alongside or inside of other elements. The new styles don’t work well for this kind of usage. 😬

Updates in this PR:

Rolls back to old styles and functionality for the Inline variant: https://github.com/launchdarkly/launchpad-ui/pull/1876/changes
Keeps new styles for the Block variant
Introduces a layout prop for the block variant to allow you to place actions on the far right or on the bottom.

Screenshots (if appropriate):

Testing approaches

Test by merging ;)
Use the pkg.pr.new packages to update the Gonfalon PR: https://github.com/launchdarkly/gonfalon/pull/61299
Run Meticulous test again

Note

Medium Risk
Changes affect a widely used UI component’s layout/CSS and public API (actionsLayout, AlertText), which could cause visual regressions in consuming apps despite limited runtime logic changes.

Overview
Updates Alert’s block (default) variant to support a new actionsLayout prop (stacked default, inline to place actions on the right) and introduces AlertText to explicitly wrap heading/description when using inline actions.

Refactors Alert.module.css to improve block layout (padding/close-button positioning/icon alignment) and rolls back inline-variant styling to a simpler, truly-inline presentation. Exports AlertText/AlertTextProps, updates Storybook controls to include actionsLayout, and reorganizes Alert stories under Block/* and Inline/* examples.

^{Reviewed by Cursor Bugbot for commit 75e526c. Bugbot is set up for automated code reviews on this repo. Configure here.}

Related Jira issue: DSYS-132: Update Alert Component

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

…ions 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

… stacked and inline actions

changeset-bot · 2026-04-15T23:07:12Z

🦋 Changeset detected

Latest commit: bea5f05

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pkg-pr-new · 2026-04-15T23:07:47Z

yarn add https://pkg.pr.new/@launchpad-ui/components@1885.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1885.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1885.tgz

commit: bea5f05

nhironaka

please use slots!

nhironaka · 2026-04-16T12:28:43Z

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


rather than doing this, I'd use slot="action" or something like that

I tried slots, but it didn't solve the problem of the Heading and Text displaying inline when actionsLayout="inline".

Rather than using using the complex child parsing logic that Cursor came up with before, what if we just wrap Heading and Text in a new parent called AlertText. This gives us a CSS selector (.text) to target and ensure that the heading and text are always displayed as stacked (i.e. flex column)

wdyt?

…tra 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

…apper - 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

kteplitz-hue · 2026-04-16T21:50:12Z

Suggested copy edits to alert banners:

Block/With actions

Heading: Test drive SSO
Body: Verify your SSO configuration is working. You’ll be redirected back here after a successful test; this won’t require all members to sign in with SSO yet.
Primary CTA: Test drive SSO
Secondary CTA: Cancel

Block/Inline actions

Heading: SDK update available
Body: A new SDK version is available with performance improvements and bug fixes.
Primary CTA: Update

Block/Without header

Warning alert
[No changes]

Error message
Body: Unable to save your changes. Try again, or contact support if the problem continues.

Info alert
Body: A new relay proxy is available. Update to stay compatible with the latest SDK features.
CTA: Update 

Neutral alert
A new SDK version is available with performance improvements and bug fixes.

Inline/Default

This flag is a prerequisite of 1 other flag in production.

Inline/Tones

[No changes]

- 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'

launchdarkly-octoauth · 2026-04-17T03:03:47Z

AI Security Review

Commit: 44e7409

After reviewing the full diff, these changes are UI component updates to the Alert component — adding AlertText, an actionsLayout prop, CSS layout variants, and Storybook story reorganization.

{"findings": []}

No security issues found. The changes are purely presentational:

AlertText component — uses React's className string concatenation, which is not vulnerable to XSS (React escapes attribute values; no dangerouslySetInnerHTML used).
{...props} spread — typed as HTMLAttributes<HTMLDivElement>, no unexpected surface exposed.
role="alert" — correct ARIA role, no security implication.
CSS changes — no executable code, no data handling.
No new dependencies, no credentials, no cryptography, no server-side logic.

launchdarkly-octoauth · 2026-04-17T03:10:40Z

AI Security Review

Commit: bf0217b

{"findings": []}

No security vulnerabilities found. The diff is entirely UI component changes: a new AlertText wrapper component, CSS layout refactoring for the Alert block variant, a new actionsLayout prop, ButtonGroup.displayName addition, and Storybook story reorganization. There is no user input handling, no data persistence, no authentication logic, no cryptography, no external API calls, and no dynamic content injection patterns that could introduce security issues.

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

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

launchdarkly-octoauth · 2026-04-17T03:38:37Z

AI Security Review

Commit: a01a383

{"findings": []}

Security review complete — no security vulnerabilities found.

The diff spans UI component changes in a React component library (Alert, AlertText, ButtonGroup, CSS modules, Storybook stories). None of the OWASP-relevant categories apply here:

XSS: The AlertText className template literal (${styles.text} ${className ?? ''}) is safe — React escapes attribute values at the DOM boundary. The {...props} spread onto the div is standard React wrapper idiom; passing dangerouslySetInnerHTML through it would require a deliberate caller choice (same pattern already existed on Alert itself pre-diff).
Injection / Auth / Secrets / Crypto / Deserialization: No server-side logic, no credentials, no external API calls, no cryptographic operations.
Dependencies: No new dependencies added.
Input validation: Not applicable — this is a presentational component library consumed by trusted internal developers, not a system boundary accepting untrusted input.

…itionally 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

… values

launchdarkly-octoauth · 2026-04-17T16:29:17Z

AI Security Review

Commit: 95e1651

The files field only publishes dist/, so the screenshot in src/styles/ won't be in the npm package. The security review is complete.

{
  "findings": [
    {
      "file": ".changeset/CleanShot 2026-04-17 at 08.54.45@2x.png",
      "line": 0,
      "severity": "LOW",
      "description": "Accidental screenshot file committed to the repository. Screenshot files from the CleanShot app may capture sensitive UI state (credentials, private data, internal tooling) depending on what was on screen when the screenshot was taken. The binary content cannot be inspected in a diff review. This file is now permanently in git history.",
      "fix": "Remove the file with `git rm`, amend or rebase to excise it from history (e.g. git filter-repo), and add a .gitignore rule for 'CleanShot*' or '*.png' in the .changeset/ directory."
    },
    {
      "file": "packages/components/src/styles/CleanShot 2026-04-17 at 08.54.45@2x.png",
      "line": 0,
      "severity": "LOW",
      "description": "Accidental screenshot file committed inside a source package directory (src/styles/). Same information-disclosure risk as above. The npm package.json 'files' field restricts publishing to 'dist/' only, so this will not be shipped to npm consumers, but it persists in git history and could be cloned by contributors.",
      "fix": "Remove the file with `git rm`, excise it from git history, and add a .gitignore rule to prevent screenshot files from being staged (e.g. 'CleanShot*.png' in packages/components/src/styles/ or globally)."
    }
  ]
}

No other security issues found. The substantive code changes — the AlertText component, CSS module updates, and Storybook story refactors — are purely presentational UI changes with no injection vectors, authentication logic, secrets, deserialization, or cryptographic operations.

- 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

launchdarkly-octoauth · 2026-04-17T16:31:19Z

AI Security Review

Commit: 5f7e492

The diff is purely UI/component changes — CSS, React component refactoring, and Storybook stories. No security-relevant code paths.

{"findings": []}

No security issues found. The changes are limited to:

CSS module refactoring for Alert layout variants
A new AlertText wrapper component and actionsLayout prop
ButtonGroup.displayName addition
Storybook story reorganization

None of these touch authentication, authorization, input validation boundaries, cryptography, secrets, or any data that flows to/from external systems.

launchdarkly-octoauth · 2026-04-17T16:50:36Z

AI Security Review

Commit: bd15d37

The diff is entirely UI component changes — React/TypeScript for an Alert component, CSS module updates, and Storybook stories. No backend logic, no data handling, no authentication, no external requests.

{"findings": []}

No security issues found. The changes are purely presentational: new CSS class variants, a new AlertText wrapper component, props for layout control, and Storybook story reorganization. There is no user input processing, no data serialization/deserialization, no credentials, no SQL or shell execution, no HTTP requests, and no cryptography involved.

cmwinters · 2026-04-17T17:47:34Z

View on Loom

Update!

abandoned responsive styles because it was causing some layout issues and turning into a big headache. Will followup in the next release
Cleaned up padding and left a bunch of comments on the CSS styles
Went back and forth in Chromatic and made some minor tweaks.

cmwinters added 4 commits April 15, 2026 14:07

style(components): make padding & positioning more consistent between…

e891f78

… stacked and inline actions

style(components): clean up CSS

9eaf069

cmwinters requested review from antonio-darkly and nhironaka April 15, 2026 23:07

cmwinters requested a review from a team as a code owner April 15, 2026 23:07