Automattic / Automattic/woocommerce-services

Button is-busy state animation does not play while button is disabled

Open
#2,138 0 comments 0 reactions 0 assignees View on GitHub
[Pri] Low [Type] Bug [Type] Good First Change woocommerce-services
Dominant language
JavaScript
Stars
112
Forks
31
Avg merge
3d 1h
Merged PRs (30d)
14

Description

**Description**

When a button click triggers a request it triggers both an is-busy state and the disabled state. While the button has both states the animation for is-busy does not play.

**Steps to Reproduce**

You should be able to test this on any of the primary buttons in the WCS area. The Buy Shipping Label button in particular is a good test as it will typically have the is-busy and disabled state the longest.

1. With WC store and WCS set up to print shipping labels, go to an order that is shippable.
2. Click on the Create shipping label button.
3. Provide any necessary information for addresses, packages, and shipping rates to get the Buy shipping label button active.
4. Click on the Buy shipping label button and while the purchase is processed, the button should have the pink colors with animated slashes signifying the is-busy state.

Alternatively, you can inspect one of the WCS primary buttons (any pink button) from the browser Dev Tools and manually add the is-busy class and the disabled attribute to the button.

**Additional Notes**
While exploring this issue, I found that the particular CSS that breaks the animation is from:

```
.wp-core-ui.wp-admin .wcc-root .button.is-primary[disabled], .wp-core-ui.wp-admin .wcc-root .button.is-primary:disabled, .wp-core-ui.wp-admin .wcc-root .button.is-primary.disabled {
background: #fff !important;
}
```

and

```
.wp-core-ui .button[disabled], .wp-core-ui .button:disabled, .wp-core-ui .button.disabled, .wp-core-ui .button-secondary[disabled], .wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled, .wp-core-ui .button-disabled {
background: #f7f7f7 !important;
}
```

Disabling both of those styles fixes the animation however I was not able to override them in the stylesheet.

Contributor guide

Open the contributing guide

Research direction

Search the WCS admin button styles for the listed .button.is-primary[disabled] and .wp-core-ui disabled selectors; inspect the primary-button rules in DevTools while both is-busy and disabled are present. Reproduce the issue with a WCS primary button and verify that the pink animated-slashes state remains visible while the button is disabled during the request.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.