ryanahamilton opened a new pull request, #71806: URL: https://github.com/apache/airflow/pull/71806
The UI hand-assembled the same Chakra `Dialog` scaffolding in around fifty places, and it had drifted: close triggers, `lazyMount`/`unmountOnExit` flags, heading sizes and the placement of action buttons all varied, so a dialog's chrome depended on which screen opened it. Only 7 of ~50 dialogs used `Dialog.Footer`; the rest hand-rolled a right-aligned `<Flex>` of buttons inside the body. This adds a shared `Modal` component that takes the structure as props, migrates the call sites onto it, and moves dialog theming into the Chakra slot recipe so it applies everywhere at once. ### Notable user-facing changes - **Dark mode background fixed.** Chakra defaults dialog content to `bg.panel`, which resolves to `gray.950` in dark mode — far darker than the page, so dialogs looked detached. Both resolve to white in light mode, which is why this went unnoticed. Content now uses `bg`. - **Action buttons moved into a real footer** on ~21 dialogs, separated by a top border. - **Dialog headers** now carry the Nav sidebar's `brand.muted` tint, and the close button is styled like the nav buttons. - **A Cancel action** is now supplied automatically alongside `footerActions` (opt out with `hideCancelAction`). - **Narrow viewports** get a 4-unit gutter instead of the dialog sitting flush against the browser edges. ### Points worth a reviewer's attention - **Footer button order is deliberately reversed in source.** `footerActions` takes the primary action *first* so it leads the tab order, while `flexDirection: row-reverse` still renders it rightmost. Migrated call sites had their `Cancel`/`Save` order flipped to suit; passing them in the old order silently swaps the buttons on screen. - **`lazyMount` and `unmountOnExit` now default to `true`.** 27 dialogs previously lacked `unmountOnExit`, so their state now resets on close. This is usually what you want, but it is a behaviour change for those. - **`Dialog.Title` replaces a plain `Heading`,** which wires up `aria-labelledby` — the dialog is now announced by its title, which it was not before. - The close button moved inside the flex header. This fixes a pre-existing overlap where it sat on top of right-aligned header content (`DagImportErrorsModal` / `PluginImportErrorsModal` search bars). One consequence: a modal with no title and no custom header renders no header, and therefore no close button. ### Deliberately not migrated Four dialogs keep raw `Dialog` because they do not fit the Header/Body/Footer slot order: - `ClearTaskInstanceConfirmationDialog` — has no `Dialog.Body` at all and branches to `null`; the only user of `Dialog.Description`. - `MarkdownModal` / `DisplayMarkdownButton` — a `ResizableWrapper` sits *between* `Dialog.Content` and the Header/Body pair. - `SearchDagsButton` — a five-line command-palette dialog with none of the boilerplate `Modal` exists to remove. The Edge3 provider has 12 more hand-rolled dialogs, but it is a separate distribution that cannot import `airflow-core` UI internals. ### Testing - 1012/1012 UI tests pass; `Modal` has 12 new tests covering slot overrides, footer ordering and DOM/tab order, the cancel action, and `hideCancelAction` - `pnpm lint` (ESLint + `tsc`) and `prek run --stage pre-commit` clean - Theming verified in a real browser in both colour modes, including `size="full"` and `size="cover"`, since Chakra recipe styles are not present in the happy-dom test environment ### Still to do - **Before/after screenshots** for the visual changes, per the template — these need to be attached by hand. - A newsfragment, if maintainers judge the visual changes significant enough to warrant one. --- ##### Was generative AI tooling used to co-author this PR? - [X] Yes (please specify the tool below) Generated-by: Claude Code (Opus 5) following [the guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
