Skip to content

feat(dialog): add declarative title/content/actions API - #5038

Open
avenali5 wants to merge 1 commit into
callstack:mainfrom
avenali5:feat/dialog-declarative-api
Open

feat(dialog): add declarative title/content/actions API#5038
avenali5 wants to merge 1 commit into
callstack:mainfrom
avenali5:feat/dialog-declarative-api

Conversation

@avenali5

Copy link
Copy Markdown

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 #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.

<Portal>
  <Dialog
    visible={visible}
    onDismiss={hideDialog}
    icon="alert"
    title="Delete item"
    content="Are you sure? This action cannot be undone."
    actions={[
      { label: 'Cancel', onPress: hideDialog },
      { label: 'Delete', onPress: onConfirmDelete, mode: 'contained' },
    ]}
  />
</Portal>

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).

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant