material-components / material-components/material-web
Background color of the outlined-button component doesn't get filled on hover or btn-pressed
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 I modify the shape of the outlined-button by applying this property `--md-outlined-button-container-shape: 8px`
Then I could see on the edges the background color is not fully filled on all 4 sides when hover or button is pressed.
### Reproduction
Please zoom in to have a better view of the issue:
https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9idXR0b24vb3V0bGluZWQtYnV0dG9uLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuICA8c3R5bGU-XG4gICAgOnJvb3Qge1xuICAgICAgLS1tZC1zeXMtY29sb3ItcHJpbWFyeTogYmxhY2s7XG4gICAgICAtLW1kLW91dGxpbmVkLWJ1dHRvbi1jb250YWluZXItc2hhcGU6IDhweFxuICAgIH1cbiAgXG4gIDwvc3R5bGU-XG48bWQtb3V0bGluZWQtYnV0dG9uPkEgbWF0ZXJpYWwgYnV0dG9uPC9tZC1vdXRsaW5lZC1idXR0b24-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d
### Workaround
I have not found a workaround
### Is this a regression?
No or unsure. This never worked, or I haven't tried before.
### Affected versions
1.4.0, 1.5.0
### Browser/OS/Node environment
Browser: Chrome, Firefox, Safari
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 outlined-button entry point shown in the reproduction, @material/web/button/outlined-button.js, and reproduce the issue in the linked Lit playground using --md-outlined-button-container-shape: 8px. Inspect the component's styling and hover and pressed states. Done means the background fills all four edges for the outlined button in Chrome, Firefox, and Safari.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100