Add a button component.

Review Request #13616 — Created March 6, 2024 and submitted

Information

Ink
master

Reviewers

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 (or Ink.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.

Summary ID
Add a button component.
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` (or `Ink.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.
92e828cc734736ecdcba2e5a0fdcca68305d7819

Description From Last Updated

Typo: "vald" -> "valid"

maubinmaubin

Small nit but I notice in other comments we capitalize button types, we should do that here too (Danger and …

maubinmaubin

Should capitalize Primary and Submit too.

maubinmaubin
chipx86
chipx86
david
  1. Ship It!
  2. 
      
maubin
  1. 
      
  2. Show all issues

    Typo: "vald" -> "valid"

  3. Show all issues

    Small nit but I notice in other comments we capitalize button types, we should do that here too (Danger and Reset)

  4. Show all issues

    Should capitalize Primary and Submit too.

  5. 
      
chipx86
david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to master (20614d8)
Loading...