fix(styles): Inverted styles on Button and InputSearch ignore custom themes. #931
Conversation
masoudmanson
added
Bug
| @@ -81,6 +81,9 @@ exports[`<Pagination /> Default story renders snapshot 1`] = ` | |||
| width="16" | |||
| /> | |||
| </div> | |||
| <span | |||
| class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root" | |||
There was a problem hiding this comment.
not sure if the Material UI ripple effect actually shows up, but wanted to flag this to make this this is expected to be here!
There was a problem hiding this comment.
Wow, sharp eyes as always, @tihuan! 😯 Great catch!
I’ll make sure to disable the ripple effect. 😬
There was a problem hiding this comment.
This is strange! 🥲
I’ve disabled all ripple effects in the theme file, yet the TouchRipple element is still being added to the components! It seems like a bug with MUI, and hopefully, it’ll be resolved once we upgrade to MUI v6.
There was a problem hiding this comment.
Oh awesome! Thanks for looking into it 😄 ❤️ So MUI adds the class due to the bug, but it doesn't actually have ripple effect? If so, then I think that's good enough and we can see if the upgrade will get rid of it 💪 Thanks so much!
Summary
NavigationHeader, Button, InputSearch
Github issue: Jira Ticket
The Issue
The current implementation of inverted styles in some sub-components of NavigationHeader does not respect custom theme overrides. While the default light and dark SDS themes work correctly, custom themes—such as modified color values—are ignored, causing the components to revert to the default SDS theme instead.
Affected Components
Expected Behavior
Inverted styles should adapt to custom theme overrides instead of defaulting to the SDS theme.
Next Steps
Checklist
defaultTheme.tsused wherever possible