material-components / material-components/material-web
Buttons' appearance in disabled fieldset
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
### What is affected?
Component
### Description
When a button or icon button is in a disabled fieldset, it correctly does not trigger `click` event. However, the appearance is not changed to match:
### Reproduction
[Lit Playground](https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy50cyIsImNvbnRlbnQiOiJpbXBvcnQgXCJAbWF0ZXJpYWwvd2ViL2FsbFwiOyJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCJodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2NzczI_ZmFtaWx5PU1hdGVyaWFsK1N5bWJvbHMrT3V0bGluZWQ6b3Bzeix3Z2h0LEZJTEwsR1JBREAyMC4uNDgsMTAwLi43MDAsMC4uMSwtNTAuLjIwMFwiIC8-XG4gIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vc2ltcGxlLWdyZWV0aW5nLmpzXCI-PC9zY3JpcHQ-XG48L2hlYWQ-XG48Ym9keT4gIFxuICA8cD5cbiAgICA8bWQtZmlsbGVkLWJ1dHRvbiBjbGFzcz1cImJ0blwiPlxuICAgICAgSGVsbG9cbiAgICA8L21kLWZpbGxlZC1idXR0b24-XG4gICAgPG1kLW91dGxpbmVkLWljb24tYnV0dG9uIGNsYXNzPVwiYnRuXCI-XG4gICAgICA8bWQtaWNvbj5hZGQ8L21kLWljb24-XG4gICAgPC9tZC1vdXRsaW5lZC1pY29uLWJ1dHRvbj5cbiAgPC9wPlxuICBcbiAgPHA-XG4gICAgPG1kLWZpbGxlZC1idXR0b24gY2xhc3M9XCJidG5cIiBkaXNhYmxlZD5cbiAgICAgIEhlbGxvXG4gICAgPC9tZC1maWxsZWQtYnV0dG9uPlxuICAgIDxtZC1vdXRsaW5lZC1pY29uLWJ1dHRvbiBjbGFzcz1cImJ0blwiIGRpc2FibGVkPlxuICAgICAgPG1kLWljb24-YWRkPC9tZC1pY29uPlxuICAgIDwvbWQtb3V0bGluZWQtaWNvbi1idXR0b24-XG4gIDwvcD5cbiAgXG4gIERpc2FibGVkIGZpZWxkc2V0OlxuICBcbiAgPGZpZWxkc2V0IGRpc2FibGVkPlxuICAgIDxtZC1maWxsZWQtYnV0dG9uIGNsYXNzPVwiYnRuXCI-XG4gICAgICBIZWxsb1xuICAgIDwvbWQtZmlsbGVkLWJ1dHRvbj5cbiAgICA8bWQtb3V0bGluZWQtaWNvbi1idXR0b24gY2xhc3M9XCJidG5cIj5cbiAgICAgIDxtZC1pY29uPmFkZDwvbWQtaWNvbj5cbiAgICA8L21kLW91dGxpbmVkLWljb24tYnV0dG9uPlxuICA8L2ZpZWxkc2V0PlxuICBcbiAgPHNjcmlwdD5cbiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKFwiLmJ0blwiKS5mb3JFYWNoKGVsID0-IGVsLmFkZEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCAoKSA9PiBhbGVydChcIkNsaWNrZWRcIikpKTtcbiAgPC9zY3JpcHQ-XG48L2JvZHk-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMy4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4yLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeNC4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjMuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d)
### Workaround
We have to manually keep track of the buttons' state and disable/enable each of them.
### Is this a regression?
No or unsure. This never worked, or I haven't tried before.
### Affected versions
1.4.0
### Browser/OS/Node environment
Browser: Google Chrome Version 123.0.6312.86 (Official Build) (64-bit)
OS: Windows 11
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.
Research direction
Start with the Lit Playground reproduction in the issue, focusing on md-filled-button and md-outlined-icon-button inside the disabled fieldset. Trace the components' disabled styling and verify that buttons and icon buttons in a disabled fieldset receive the same appearance as individually disabled controls.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100