Setting individual shape to outlined text field fails if unit is not set
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
Research direction
Start at the md-outlined-text-field component's handling of its shape-related CSS custom properties and reproduce the issue with the provided CSS, especially unitless zero values. Add regression coverage for overriding the bottom corners while preserving the top radius and padding, then verify that explicit 0px or 0rem values continue to work.
Written by the indexing model from the issue text.
Description
What is affected?
Component
Description
I need to set a shape of the md-outlined-text-field to have rounded top angles but not rounded bottom ones when active. But it does not work if unit is not specified in css custom property which controls the shape.
Reproduction
I need to set a shape of the md-outlined-text-field to have rounded top angles and not rounded bottom.
So I set the default shape and override the bottom corners:
md-outlined-text-field {
--md-outlined-text-field-container-shape: 1.7rem;
}
md-outlined-text-field:focus {
--md-outlined-text-field-container-shape-end-start: 0;
--md-outlined-text-field-container-shape-end-end: 0;
}
But it results in broken shape of the component: not only the top left corner has the radius of 0, but also the left padding / margin completely disappeared:
Workaround
I found that if I set units explicitly (0px or 0rem) it works.
md-outlined-text-field:focus {
--md-outlined-text-field-container-shape-end-start: 0rem;
--md-outlined-text-field-container-shape-end-end: 0px;
}
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
Failing on 1.2.0
Browser/OS/Node environment
Firefox 123.0b4 (64-bit)
mas OS 14.3 (23D56)
node v18.14.0
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
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.
More from material-components/material-web
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
material-components/material-web#6014 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 55/100
material-components/material-web#6030 ·
-
Agent Skill Open
Difficulty 5/5 Over a week Newbie friendliness 20/100
material-components/material-web#5918 ·
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
material-components/material-web#5894 · 12 reactions ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
material-components/material-web#5888 · 16 reactions ·
All issues in material-components/material-web
Similar issues
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 92/100
-
Request: SumUp Opennew icon permissions in review
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
simple-icons/simple-icons#15027 ·
-
area:auth FE mvp P3
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
klasolsson81/jobbliggaren#1788 ·
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
internal team/grafana-datapro
Difficulty 2/5 1-3 hours Newbie friendliness 68/100