[TextField] Fix error focus style #35167
Conversation
|
zannager
added
the
component: text field
42tte
changed the title
|
Changes detected by argos is as expected |
| [`&:before, &:hover:not(.${filledInputClasses.disabled}):before`]: { | ||
| borderBottomColor: (theme.vars || theme).palette.error.main, | ||
| }, | ||
| '&:after': { | ||
| borderBottomColor: (theme.vars || theme).palette.error.main, | ||
| }, |
There was a problem hiding this comment.
What's this part for? looks unrelated to me.
There was a problem hiding this comment.
This is to change the color on the bottom border, before focus. Without it it would flicker between blue & red on transform
'&:focus-within:after': {
borderBottomColor: (theme.vars || theme).palette.error.main,
transform: 'scaleX(1)', // error is always underlined in red
},
| [`&:before, &:hover:not(.${filledInputClasses.disabled}):before`]: { | ||
| borderBottomColor: (theme.vars || theme).palette.error.main, | ||
| }, |
There was a problem hiding this comment.
I rather do this instead.
// line 115
[`&:hover:not(.${filledInputClasses.disabled}):not(.${filledInputClasses.error}):before`]: {
borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
},There was a problem hiding this comment.
Good point, this will also fix a difference between MUI & Material on hover bottom-border width. I will push the changes.
42tte
force-pushed
the
fix-textfield-error-style
branch
from
5a311e4
to
d973845
Compare
@siriwatknp Changes done as requested. Please have a new look 🙏 |
👍 @siriwatknp Could you resolve comments & update review from |
This reverts commit df49d6a.
Fixes Input & FilledInput error focus state style. Fixes #35353
According to Material these should be 1px default & 2px on focus. Thus having a visible focus state.
In MUI these are currently 2px default & without any focus state.
Focus visible is an accessibility requirement by WCAG 2.4.7