Add a dialog component.

Review Request #14054 — Created July 25, 2024 and submitted — Latest diff uploaded

Information

Ink
master

Reviewers

This change adds a new dialog component to Ink. It uses the new(ish)
<dialog> element, which comes with a bunch of advantages. It can be
shown as either a modal or non-modal.

The dialog has three areas that can be customized: the title, the body,
and actions. Actions can be separated into primary (right-aligned) and
secondary (left-aligned).

Actions can be specified either as regular buttons (or other elements),
or as a special DialogAction. The DialogAction exists to prevent
boilerplate for common cases, and has two modes: close or callback. If
an action uses a callback and said callback returns a promise, all of
the dialog's actions will be disabled while that promise runs, and the
action that triggered it will be shown as busy.

  • Used dialog in storybook.
  • Used this from some code in Review Board.

Diff Revision 2

This is not the most recent revision of the diff. The latest diff is revision 6. See what's changed.

orig
1
2
3
4
5
6

Commits

First Last Summary ID Author
Add a dialog component.
This change adds a new dialog component to Ink. It uses the new(ish) `<dialog>` element, which comes with a bunch of advantages. It can be shown as either a modal or non-modal. The dialog has three areas that can be customized: the title, the body, and actions. Actions can be separated into primary (right-aligned) and secondary (left-aligned). Testing Done: - Used dialog in storybook. - Used this from some code in Review Board.
298ec0d381688c14c0784f4b2fcf0a3e331f3fdb David Trowbridge
src/ink/js/components/views/dialogView.ts
src/ink/js/components/views/index.ts
src/ink/less/components/dialog.component.less
src/ink/less/components/index.less
src/ink/less/components/schemas/dialog.schema.less
src/ink/less/components/schemas/index.less
src/ink/less/themes/default/components/dialog.theme.less
src/ink/less/themes/default/components/index.less
src/stories/components/dialog.stories.ts
Loading...