fix: match inputs with figma styles#261
Conversation
|
Warning Review limit reached
More reviews will be available in 35 minutes and 34 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughAdds a new ChangesMUI Theme Customization and Styling
Estimated code review effort🎯 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 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, }, }, }, });
![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
| } | ||
| }; | ||
|
|
||
| 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.
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
priscila-moneo
force-pushed
the
fix/match-inputs-figma-style
branch
from
e81f567 to
b4d388c
Compare
santipalenque
left a comment
santipalenque
left a comment
There was a problem hiding this comment.
Looks good @priscila-moneo , I'll pre-approve but can you move the MuiBaseCustomTheme to /components/mui/MuiBaseCustomTheme.js ? I don't think this should go in utils. Also remember to update the export
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
priscila-moneo
force-pushed
the
fix/match-inputs-figma-style
branch
from
b4d388c to
0045c0c
Compare
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
priscila-moneo
force-pushed
the
fix/match-inputs-figma-style
branch
from
0045c0c to
c85ca8a
Compare
3 participants
ref: https://app.clickup.com/t/9014802374/86b8tt4df
Summary by CodeRabbit
New Features
Style