Improve capabilities and styling of config forms list item action buttons.

Review Request #11036 — Created May 22, 2020 and submitted — Latest diff uploaded

Information

Djblets
release-2.0.x

Reviewers

Action definitions now support a couple additional settings:

  • ariaLabel can be can be provided to set a better label used for
    screen readers.
  • url can be set to use an <a href="..."> instead of a <button>.

Action button callbacks can also now return a Promise. This will cause
the button's contents to be replaced with a spinner and the button to be
disabled until the promise is resolved, making it clear when an action
is occurring and avoiding issues with the action being triggered
multiple times.

ListItem models also now have a convenient setActions() method for
setting new actions on the model and triggering the appropriate signal
to re-render the actions list.

To support the new capabilities, particularly the link buttons, the
styling had to be tweaked to increase rule specificity. This is because
for link actions, we set a btn class, and this is overridden in other
stylesheets in a way that caused our settings to be lost. The new rules
ensure we have higher specificity in any common case.

Tested our config forms usage with the new settings and saw that they
were all rendering correctly.

Tested the new Promise support, verifying the spinner replaced the
contents at the start of the operation and restored the contents at
the end.

Diff Revision 1

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

orig
1
2

Commits

First Last Summary ID Author
Improve capabilities and styling of config forms list item action buttons.
Action definitions now support a couple additional settings: * `ariaLabel` can be can be provided to set a better label used for screen readers. * `url` can be set to use an `<a href="...">` instead of a `<button>`. Action button callbacks can also now return a `Promise`. This will cause the button's contents to be replaced with a spinner and the button to be disabled until the promise is resolved, making it clear when an action is occurring and avoiding issues with the action being triggered multiple times. `ListItem` models also now have a convenient `setActions()` method for setting new actions on the model and triggering the appropriate signal to re-render the actions list. To support the new capabilities, particularly the link buttons, the styling had to be tweaked to increase rule specificity. This is because for link actions, we set a `btn` class, and this is overridden in other stylesheets in a way that caused our settings to be lost. The new rules ensure we have higher specificity in any common case.
ff5d55c8c85d3ebb4e222503d9133eefb16f614f Christian Hammond
djblets/static/djblets/css/config-forms.less
djblets/static/djblets/js/configForms/models/listItemModel.es6.js
djblets/static/djblets/js/configForms/views/listItemView.es6.js
Loading...