feat(dialog): add declarative title/content/actions API - #5038
Open
avenali5 wants to merge 1 commit into
Open
Conversation
Adds an optional declarative API to Dialog via `icon`, `title`, `content` and `actions` props, alongside the existing composition-based `Dialog.Title` / `Dialog.Content` / `Dialog.Actions` children. When `children` are provided they take precedence and the declarative props are ignored (with a dev-only warning), so the change is fully backward compatible. String `content` is wrapped in a themed `onSurfaceVariant` Text, and the title/content are centered automatically when an `icon` is present, per MD3. Refs callstack#4933 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds an optional declarative API to Dialog via
icon,title,contentandactionsprops, alongside the existing composition-basedDialog.Title/Dialog.Content/Dialog.Actionschildren. Whenchildrenare provided they take precedence and the declarative props are ignored (with a dev-only warning), so the change is fully backward compatible.String
contentis wrapped in a themedonSurfaceVariantText, and the title/content are centered automatically when aniconis present, per MD3.Refs #4933
Motivation
Creating a dialog today requires composing Dialog.Title / Dialog.Content / Dialog.Actions children for even the most common case (a title, a line of supporting text, and one or two buttons). That is verbose, easy to get subtly wrong (spacing, button props, centering when an icon is present), and harder to type and discover.
This PR adds an optional declarative API to Dialog so those common dialogs can be expressed as plain props, while leaving the existing composition API fully intact. It implements the direction proposed in #4933 additively, no breaking changes.
Related issue
Refs #4933.
New optional props on Dialog:
icon — renders a centered Dialog.Icon above the title (MD3).
title — string or node, rendered inside Dialog.Title.
content — string or node, rendered inside Dialog.Content. A string is wrapped in a themed onSurfaceVariant Text.
actions — a DialogAction[] ({ label, onPress, mode?, icon?, loading?, disabled?, labelStyle?, testID? }) rendered as Buttons inside Dialog.Actions.
Behavior:
When children are provided they take precedence and the declarative props are ignored, with a DEV-only warning. This keeps every existing usage working unchanged.
When an icon is present, the title and string content are centered automatically, per MD3.
Test plan
yarn test — added 4 Dialog tests (declarative title/content render, action button press, React-node content, children-take-precedence + dev warning). Full suite passes (736 tests).
yarn typecheck — passes.
yarn lint — passes.
Manual (example app): Dialog → "Declarative API" button opens a dialog built entirely via the new props (example/src/Examples/Dialogs/DialogWithDeclarativeApi.tsx).