[Component amendment]: Button

[ethanashaw]

Component/pattern to amend

is-processing

Visual

https://vanillaframework.io/docs/patterns/buttons#processing

Context

is-processing is used to alter a disabled button, so it doesn't make sense for it to be applied to an enabled button. For this reason, I think it's worth considering that is-processing should also extend is-disabled.

[syncronize-issues-to-jira[bot]]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-22789.

This message was autogenerated

[jmuzina]

It looks like React Components applies both is-disabled and is-processing to loading ActionButton components, so they tend to be used together. I agree though, I don't think there's a case where one would use is-processing without the button also being disabled, so is-processing can likely extend is-disabled.

Here's an example of various combinations of button loading / disabled states. It seems sensible to me that the is-processing class should also visually disable the button in CSS alone, but I'm not sure how many cases there are where a loading-state button is used outside of React Components for it to matter.

Some things I'm wondering:

• Why we use the disabled attribute on loading buttons, which removes them from the tabbing order and makes them less accessible. This article suggests we should instead be using aria-disabled to keep the buttons perceptible for screen readers.
• Why the is-processing class undoes the disabled button opacity - I guess the loading spinner itself is enough indication that the button is loading, so we don't need to grey the button in this case.

[ruizi6]

DS: To discuss modifiers in the ontology group. Please also comments and add how urgent the issue is. @ethanashaw

[ethanashaw]

Hey @ruizi6, it's not very urgent since we still apply both classes manually on our end.

[dgtlntv]

Design systems contribution meeting:

• A button that is processing should not be disabled (i.e. not clickable and reduced opacity). It should however not be interactive while its processing (the user should not be able to click the button and trigger the action again).
• A designer using this pattern should consider wether showing the loading state inside of the button is the best way of showing that something is loading.