Add a button component.
Review Request #13616 — Created March 6, 2024 and submitted — Latest diff uploaded
This introduces a component used to display a button. This button
appears and behaves like a standard button, complete with a slight
recess of the content when pressing it down, and all standard states
(focused, active, disabled).Buttons are managed by
ButtonView
(orInk.Button
in a crafted
template), which handles all rendering and states for the button. Nearly
all properties are dynamic and will re-render the contents, allowing for
a UI to trigger updates to the presentation of the buttons as needed.Buttons include the following supported types:
- Standard (normal buttons)
- Primary (main button on a form/page/dialog)
- Danger (performs a destructive operation)
- Submit (similar to Primary, but submits a form)
- Reset (resets the contents of a form)
It also includes a "busy" state, which disables all events (when managed
by ButtonView
) and displays a horizontal barberpole animation.
Keyboard shortcuts can be assigned to buttons, registered with a parent
KeyboardShortcutRegistry
. This will have the effect of clicking the
button.
Aside from the label, buttons can have an icon displayed to the left,
and keyboard shortcuts displayed to the right (helping to highlight
the associated shortcuts). These are optional, and shortcuts can be
registered without being shown on the button.
While <button>
is most standard for buttons, an <a href="...">
can
also be styled and managed as a button. This allows for navigation to
other URLs like any other link, but with all the benefits of the button
component.
All unit tests pass.
Played with all the various combinations of button states in Storybook,
for both<button>
and<a>
-based buttons.