Add a button component.
Review Request #13616 — Created March 6, 2024 and submitted
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.
- Change Summary:
-
Updated the styling to use
:is(...)
, which is pretty widely supported now, and massively simplifies selectors (especially when nested in other components). It also avoids an issue where we needed to match ona:<component>:link
, buta&:link
could matcha:.grandparent .parent .ink-c-button:link
. - Commits:
-
Summary ID 78484230ce491dd5bc7a23c830a95c4e346c9803 b1dc1113bd24e7bd2e61eaabb0f560a90b3000b8 - Diff:
-
Revision 2 (+4984 -16)
Checks run (2 succeeded)
- Change Summary:
-
- Moved all style-related properties into the theme.
- Fixed some typos in the docs.
- Commits:
-
Summary ID b1dc1113bd24e7bd2e61eaabb0f560a90b3000b8 6772c00e85457acb2fcfa1301fa0dfef91d43557 - Diff:
-
Revision 3 (+5060 -14)
Checks run (2 succeeded)
- Change Summary:
-
- Changed capitalization of the button type names in docs.
- Fixed a docs typo.
- Added module-level docs for the unit tests.
- Commits:
-
Summary ID 6772c00e85457acb2fcfa1301fa0dfef91d43557 92e828cc734736ecdcba2e5a0fdcca68305d7819 - Diff:
-
Revision 4 (+5074 -14)