seas-computing / seas-computing/mark-one
Add "disabled" styles to Buttons
Open
@jonseitz is already working on this.
Since Jul 8, 2021.
a11y
Frontend
Technical Debt
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Our Button and Borderless Button components both accept a "disabled" prop that gets passed to the underlying <button> element, but that only prevents the onClick handler from being fired -- it doesn't change the styling to signal to the user that the can't click the button, and the :hover and :active pseudo-classes still get applied so it just looks like something is broken.
We should, at a minimum, set cursor: not-allowed on :hover. We can also switch to a "ghosted" background/text for those buttons to provide a passive visual indicator, and one that will apply on mobile.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.