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.

Changes between revision 3 and 4

orig
1
2
3
4
5
6

Commits

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.
6e376a9e83eb52922560b6e45122822e5fa3f81b David Trowbridge
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). 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. Testing Done: - Used dialog in storybook. - Used this from some code in Review Board.
0855a6917de9d72b1c3407082e5db672ebb9369a David Trowbridge
src/ink/js/components/views/dialogView.ts
Loading...