fix: match inputs with figma styles#261
Conversation
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
📝 WalkthroughWalkthroughThis PR introduces a centralized MUI theme configuration module and applies border styling updates to the SearchInput component. The theme file defines customizations for outlined inputs and select dropdowns, a new SearchInput styling rule applies border colors via ChangesMUI Theme Customization and Styling
🎯 2 (Simple) | ⏱️ ~10 minutes Suggested Reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| label={label} | ||
| labelId={`${name}-label`} | ||
| multiple | ||
| IconComponent={KeyboardArrowDownIcon} |
There was a problem hiding this comment.
was this a request ? I cannot see this anywhere on the ticket or the figma
There was a problem hiding this comment.
Yes, it is.
Ticket Request:
Figma Screenshot:
| name={name} | ||
| label={label} | ||
| labelId={`${name}-label`} | ||
| IconComponent={KeyboardArrowDownIcon} |
There was a problem hiding this comment.
if we are going to change all dropdown please use CustomTheme:
const theme = createTheme({ components: { MuiSelect: { defaultProps: { // Change the dropdown arrow icon globally IconComponent: KeyboardArrowDownIcon, }, }, }, });
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/mui/search-input.js`:
- Around line 87-89: SearchInput contains hardcoded MuiOutlinedInput
notchedOutline color overrides that conflict with the centralized theme; remove
the three style overrides using "& .MuiOutlinedInput-root
.MuiOutlinedInput-notchedOutline", "& .MuiOutlinedInput-root:hover
.MuiOutlinedInput-notchedOutline", and "& .MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline" from the SearchInput styles and let the global
MuiOutlinedInput theme in theme.js control default/hover/focus borders, or if a
local variant is required read colors from the theme (e.g., theme.palette.*)
instead of hardcoded "rgba(...)" or "primary.main" so the component honors the
centralized contract.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a229d797-2481-4618-af81-c087054e1532
📒 Files selected for processing (3)
src/components/mui/search-input.jssrc/utils/theme.jswebpack.common.js
| "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | ||
| "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | ||
| "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" } |
There was a problem hiding this comment.
Border-state overrides conflict with the centralized theme contract.
At Line 87-89, SearchInput hardcodes notched-outline colors (rgba(...) and primary.main), but src/utils/theme.js already centralizes MuiOutlinedInput border colors for default/hover/focus (#000). This creates cross-component inconsistency and defeats the new theme abstraction.
Suggested fix
sx={{
"& .MuiOutlinedInput-root": {
height: "36px",
paddingX: 1
- },
- "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" },
- "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" },
- "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" }
+ }
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | |
| "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | |
| "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" } | |
| sx={{ | |
| "& .MuiOutlinedInput-root": { | |
| height: "36px", | |
| paddingX: 1 | |
| } | |
| }} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/mui/search-input.js` around lines 87 - 89, SearchInput
contains hardcoded MuiOutlinedInput notchedOutline color overrides that conflict
with the centralized theme; remove the three style overrides using "&
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline", "&
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline", and "&
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline" from the
SearchInput styles and let the global MuiOutlinedInput theme in theme.js control
default/hover/focus borders, or if a local variant is required read colors from
the theme (e.g., theme.palette.*) instead of hardcoded "rgba(...)" or
"primary.main" so the component honors the centralized contract.
| } | ||
| }; | ||
|
|
||
| export const CustomThemeBase = createTheme(uiCoreThemeOverrides); |
There was a problem hiding this comment.
I don't think we need to createTheme in uicore, just export the definitions and let the client app use it as they need. Also please name it MuiBaseCustomTheme
| paddingX: 1 | ||
| }, | ||
| }, | ||
| "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, |
There was a problem hiding this comment.
@smarcet another example, we need to standarize these colors and use one in the color palette or use a custom one set on CustomTheme. If for some reason we don't want to do that because is too specific, then we should use one of the definitions gray[500] or something. In this particular case @priscila-moneo looks like this color is the default for border color on outline variant so I don't understand why are you overriding with that same color
There was a problem hiding this comment.
The override is intentional. The outlined variant default border color was changed to #000, but according to the current Figma designs, the Search input should keep using the previous border color instead of inheriting the new default. That's why the color is explicitly set here.
There was a problem hiding this comment.
Consistency is key in design systems. We should check with design team and see which one should be used and if it's differentiated by input type categorize that difference so it can be referenced the same way by all input types of that category.
3 participants
ref: https://app.clickup.com/t/9014802374/86b8tt4df
Summary by CodeRabbit