Make loading disabled buttons colorful

[denieler]

Description

After discussion with Milos it appeared that the buttons in loading state, even if they are disabled should look like normal buttons, instead of becoming grey. So, here is the change.

Let's make them colorful!

How to test

• Open storybook and check Button with both loading and disabled at the same time.
• It should be disabled, but having color of the variant

Screenshots

Before.	After.

Development checks

• Add changeset according to guidelines (if needed)
• Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping for reviews

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: c93192c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 35 packages

Name	Type
@toptal/picasso-button	Patch
@toptal/picasso-forms	Patch
@toptal/picasso-query-builder	Patch
@toptal/picasso-rich-text-editor	Patch
@toptal/picasso	Patch
@toptal/picasso-accordion	Patch
@toptal/picasso-alert	Patch
@toptal/picasso-application-update-notification	Patch
@toptal/picasso-calendar	Patch
@toptal/picasso-carousel	Patch
@toptal/picasso-drawer	Patch
@toptal/picasso-file-input	Patch
@toptal/picasso-helpbox	Patch
@toptal/picasso-modal	Patch
@toptal/picasso-notification	Patch
@toptal/picasso-outlined-input	Patch
@toptal/picasso-page	Patch
@toptal/picasso-pagination	Patch
@toptal/picasso-password-input	Patch
@toptal/picasso-prompt-modal	Patch
@toptal/picasso-section	Patch
@toptal/picasso-show-more	Patch
@toptal/picasso-skeleton-loader	Patch
@toptal/picasso-table	Patch
@toptal/picasso-tree-view	Patch
@toptal/picasso-date-picker	Patch
@toptal/picasso-dropzone	Patch
@toptal/picasso-autocomplete	Patch
@toptal/picasso-avatar-upload	Patch
@toptal/picasso-input	Patch
@toptal/picasso-number-input	Patch
@toptal/picasso-select	Patch
@toptal/picasso-tagselector	Patch
@toptal/picasso-timepicker	Patch
@toptal/picasso-date-select	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[denieler]

Temploy - https://picasso.toptal.net/bill-make-colorful-loading-buttons/?path=/story/components-button--button#states

[denieler]

@toptal-anvil ping reviewers

[rocodesign]

Looks good to me, as I expect buttons that are loading not to be interactible, but I would also expect them not to change color at all.

I'm thinking if buttons that only have loading, should not be disabled also.

now buttons that have loading: true disabled: false
and buttons that have loading: true disabled: true
look the same but the prior have a hover, outline, pointer cursor.

I don't think it matters that much as users will probably not try to press them but I find it a bit weird :)

[denieler]

Looks good to me, as I expect buttons that are loading not to be interactible, but I would also expect them not to change color at all.

I'm thinking if buttons that only have loading, should not be disabled also.

now buttons that have loading: true disabled: false and buttons that have loading: true disabled: true look the same but the prior have a hover, outline, pointer cursor.

I don't think it matters that much as users will probably not try to press them but I find it a bit weird :)

I agree, I was thinking about it as well. I expect that now engineers use both loading and disabled flags when they want show the loading state to the user. But in theory we could simplify that to loading only that would be disabling the button automatically. But not sure yet if this is necessary 🤔