fix(DialogHeader): isolate close button compensation by ksying · Pull Request #6368 · facebook/astryx

ksying · 2026-09-18T13:35:35Z

User impact

Dialog headers with labelled endContent actions no longer pull those controls into the close button's negative block margin. The actions stay within the header padding while the close control keeps its optical edge alignment.

Visual authority

Correction follows the current DialogHeader anatomy: endContent and the close control are separate slots.
New visual direction settled by an owner-approved current specification.

Before and after

Measured in Chromium at a fixed 900×600 viewport:

State	Before	After
Title + actions	Title, actions, and close share the same centre line	Unchanged
Subtitle + actions	Actions are lifted 8.1px to the title's first line	Actions centre on the title+subtitle block; close stays on the title line

The added Storybook stories make both states directly reproducible.

State matrix

Title + close: unchanged compact header.
Title + labelled actions + close: all controls share one centre line.
Title + subtitle + close: close remains aligned with the title line.
Title + subtitle + labelled actions + close: actions centre on the title block; close remains aligned with the title line.
Logical marginInlineEnd preserves the close-button compensation in LTR and RTL.

Scope

Appearance is the primary intent.
Behavior, API, interaction model, and unrelated layout changes were removed or split.
The evidence shows the changed pixels actively running, not only source or computed styles.
Public text and artifacts contain no internal Meta context.

Testing

pnpm exec vitest run packages/core/src/Dialog/DialogHeader.test.tsx — 19/19 passed
strict ESLint on the three changed TypeScript files — passed
pnpm -F @astryxdesign/core build — passed
pnpm build — passed
pnpm storybook:build — passed
Chromium measurement of both added Storybook states — passed

The complete pnpm test suite could not run faithfully in the transferred validation checkout because its docsite fixtures and VCS metadata were intentionally omitted; CI should run the complete repository suite.

vercel · 2026-09-18T13:35:47Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 18, 2026 1:51pm UTC

github-actions · 2026-09-18T13:46:19Z

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: 36 accessibility violation(s) found — 2 critical, 34 serious.

Button pattern - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/18 stories · Learn more
- WCAG: 1.4.3 (Level AA)

ChatComposer - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/18 stories · Learn more
- WCAG: 1.4.3 (Level AA)

ChatComposerInput - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/14 stories · Learn more
- WCAG: 1.4.3 (Level AA)

ChatReasoning - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 4/5 stories · Learn more
- WCAG: 1.4.3 (Level AA)

ChatToolCalls - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 10/11 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Checkbox pattern - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/33 stories · Learn more
- WCAG: 1.4.3 (Level AA)

CheckboxList - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 4/17 stories · Learn more
- WCAG: 1.4.3 (Level AA)

ClickableCard - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/5 stories · Learn more
- WCAG: 1.4.3 (Level AA)

CodeEditor - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 3/7 stories · Learn more
- WCAG: 1.4.3 (Level AA)

CodeEditorPerf - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/2 stories · Learn more
- WCAG: 1.4.3 (Level AA)

CodeEditorTheme - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 13/14 stories · Learn more
- WCAG: 1.4.3 (Level AA)

CodeTheme - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 14/16 stories · Learn more
- WCAG: 1.4.3 (Level AA)

DateRangeInput - 1 issue(s)

🔴 critical: Ensure an element's role supports its ARIA attributes
- Rule: aria-allowed-attr · Affects 1/21 stories · Learn more
- WCAG: 4.1.2 (Level A)

FileInput - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 3/15 stories · Learn more
- WCAG: 1.4.3 (Level AA)

GridMasonry - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/3 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Heading - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/16 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Icon - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/18 stories · Learn more
- WCAG: 1.4.3 (Level AA)

LogStream - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/3 stories · Learn more
- WCAG: 1.4.3 (Level AA)

MediaTheme Auto - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/5 stories · Learn more
- WCAG: 1.4.3 (Level AA)

PowerSearch - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/26 stories · Learn more
- WCAG: 1.4.3 (Level AA)

ProgressBar - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/18 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Radio group pattern - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 3/26 stories · Learn more
- WCAG: 1.4.3 (Level AA)

RadioList - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 3/13 stories · Learn more
- WCAG: 1.4.3 (Level AA)

RichTextEditor - 2 issue(s)

🟠 serious: Ensure every ARIA input field has an accessible name
- Rule: aria-input-field-name · Affects 2/18 stories · Learn more
- WCAG: 4.1.2 (Level A)
🔴 critical: Ensure every form element has a label
- Rule: label · Affects 1/18 stories · Learn more
- WCAG: 4.1.2 (Level A)

SelectableCard - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/4 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Stepper - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/30 stories · Learn more
- WCAG: 1.4.3 (Level AA)

TableGroupedRows - 1 issue(s)

🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
- Rule: aria-conditional-attr · Affects 3/3 stories · Learn more
- WCAG: 4.1.2 (Level A)

TableTree - 1 issue(s)

🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
- Rule: aria-conditional-attr · Affects 8/9 stories · Learn more
- WCAG: 4.1.2 (Level A)

Text - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/23 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Theme - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/5 stories · Learn more
- WCAG: 1.4.3 (Level AA)

PopArt - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 3/6 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Thumbnail - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/12 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Timestamp - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/20 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Token - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/10 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Tokenizer - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/24 stories · Learn more
- WCAG: 1.4.3 (Level AA)

Visual Regression

Status: No visual change across 2 compared shot(s).

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

## User impact Dialog headers with labelled `endContent` actions no longer pull those controls into the close button's negative block margin. The actions stay within the header padding while the close control keeps its optical edge alignment. ## Visual authority - [x] Correction follows the current `DialogHeader` anatomy: `endContent` and the close control are separate slots. - [ ] New visual direction settled by an owner-approved current specification. ## Before and after Measured in Chromium at a fixed 900×600 viewport: | State | Before | After | | --- | --- | --- | | Title + actions | Title, actions, and close share the same centre line | Unchanged | | Subtitle + actions | Actions are lifted 8.1px to the title's first line | Actions centre on the title+subtitle block; close stays on the title line | The added Storybook stories make both states directly reproducible. ## State matrix - Title + close: unchanged compact header. - Title + labelled actions + close: all controls share one centre line. - Title + subtitle + close: close remains aligned with the title line. - Title + subtitle + labelled actions + close: actions centre on the title block; close remains aligned with the title line. - Logical `marginInlineEnd` preserves the close-button compensation in LTR and RTL. ## Scope - [x] Appearance is the primary intent. - [x] Behavior, API, interaction model, and unrelated layout changes were removed or split. - [x] The evidence shows the changed pixels actively running, not only source or computed styles. - [x] Public text and artifacts contain no internal Meta context. ## Testing - `pnpm exec vitest run packages/core/src/Dialog/DialogHeader.test.tsx` — 19/19 passed - strict ESLint on the three changed TypeScript files — passed - `pnpm -F @astryxdesign/core build` — passed - `pnpm build` — passed - `pnpm storybook:build` — passed - Chromium measurement of both added Storybook states — passed The complete `pnpm test` suite could not run faithfully in the transferred validation checkout because its docsite fixtures and VCS metadata were intentionally omitted; CI should run the complete repository suite.

cixzhang · 2026-09-18T16:48:05Z

Can you give an example of what visual you're trying to accomplish and why? From trying it before having end contents separate end up with buttons next to the close button appearing visually misaligned.

ksying · 2026-09-18T23:30:21Z

Can you give an example of what visual you're trying to accomplish and why? From trying it before having end contents separate end up with buttons next to the close button appearing visually misaligned.

@cixzhang The issue I am trying to fix is: when there are buttons in the header, they are out of the padding and too close to the edges:

cc @athz

Screenshots before and after the fix:

Before	After

No change without buttons in the header:

Before	After

Screenshots from Astryx Storybook (after fix):

https://facebook.github.io/astryx/pr/6368/?path=/story/core-dialog--with-header-actions

https://facebook.github.io/astryx/pr/6368/?path=/story/core-dialog--with-subtitle-and-header-actions

astracat-bot · 2026-09-20T15:43:24Z

AI review status for this pull request.

Review status	Updated
⏳ Waiting for review (for maintainers only)	Sep 21, 2026, 7:35 AM UTC

athz · 2026-09-21T02:26:40Z

To recap- there are 2 layout logic variants to account for:

1/ For the modal with subtitle variant - we should have the close button be vertically centered with respect to the action buttons. The entire end content slot should be top aligned with respect to the start content on the left.

2/ For the modal WITHOUT subtitle variant (i.e. only title exists)- the end content slot (with action buttons and close button) should be center aligned with respect to the modal title.

Design ask here is to ensure we account for these 2 variants @ksying , @cixzhang

ksying · 2026-09-21T10:11:02Z

Dropping this after further discussion with @athz. Replacing with a new theme target to style the action buttons instead in #6415.

ksying requested review from cixzhang, imdreamrunner and josephfarina as code owners September 18, 2026 13:35

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Sep 18, 2026

github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge needs:design-review Affects visuals — Design should review labels Sep 18, 2026

github-actions Bot requested review from cvkxx, ernestt, kentonquatman and rubyycheung September 18, 2026 13:36

ksying force-pushed the pr6368 branch from 28959a2 to 471b86d Compare September 18, 2026 13:36

vercel Bot deployed to Preview September 18, 2026 13:42 View deployment

ksying force-pushed the pr6368 branch from 471b86d to f6c7806 Compare September 18, 2026 13:47

vercel Bot deployed to Preview September 18, 2026 13:51 View deployment

github-actions Bot added a commit that referenced this pull request Sep 18, 2026

Deploy PR #6368 preview

6716fc2

ksying closed this Sep 21, 2026

Navigation Menu

fix(DialogHeader): isolate close button compensation - #6368

fix(DialogHeader): isolate close button compensation#6368
ksying wants to merge 1 commit into
facebook:mainfrom
ksying:pr6368

ksying commented Sep 18, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

cixzhang commented Sep 18, 2026

Uh oh!

ksying commented Sep 18, 2026

Uh oh!

astracat-bot Bot commented Sep 20, 2026 •

edited

Loading

Uh oh!

athz commented Sep 21, 2026 •

edited

Loading

Uh oh!

ksying commented Sep 21, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ksying commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User impact

Visual authority

Before and after

State matrix

Scope

Testing

Uh oh!

vercel Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Analysis Report

📚 Storybook Preview

🧪 Sandbox Preview

Bundle Size Summary

Accessibility Audit

Visual Regression

Uh oh!

cixzhang commented Sep 18, 2026

Uh oh!

ksying commented Sep 18, 2026

Uh oh!

astracat-bot Bot commented Sep 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

athz commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ksying commented Sep 21, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ksying commented Sep 18, 2026 •

edited

Loading

vercel Bot commented Sep 18, 2026 •

edited

Loading

github-actions Bot commented Sep 18, 2026 •

edited

Loading

astracat-bot Bot commented Sep 20, 2026 •

edited

Loading

athz commented Sep 21, 2026 •

edited

Loading