Conversation
WalkthroughThe pull request bumps the styled package version from 1.0.1 to 1.0.2 and extends the DateRangeInputModern and Datepicker components with six new optional customization props for controlling datepicker styling and positioning (grid layout, dimensions, border radius, and absolute positioning coordinates). Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![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
🤖 Fix all issues with AI agents
In
`@packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx`:
- Around line 271-273: The wrapper Box currently applies datepickerLeftCustom
and datepickerTopCustom but the inner Datepicker component also accepts
datepickerLeft and datepickerTop (which default to 0px), causing conflicting
two-layer positioning; fix this by forwarding the wrapper positioning props into
the Datepicker component (map datepickerLeftCustom -> datepickerLeft and
datepickerTopCustom -> datepickerTop when rendering Datepicker) or, if
positioning should be exclusively at the wrapper, remove
datepickerLeft/datepickerTop from the Datepicker API and stop passing/using
them; update the render where Datepicker is instantiated (and the Box wrapper
that uses datepickerLeftCustom/datepickerTopCustom) accordingly, and apply the
same change to the other occurrence around the 303-307 block.
🧹 Nitpick comments (3)
packages/styled/src/components/Datepicker/Datepicker.tsx (1)
235-235: Avoid using!importantin CSS values.Using
!importantcan make styles difficult to override and debug. If a specific background override is required, consider using a more specific selector or adjusting the styled-components composition order.♻️ Suggested fix
- datepickerBackground: '#ffffff !important', + datepickerBackground: '#ffffff',If there's a known CSS specificity issue this addresses, please document it in a comment explaining why
!importantis necessary.packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx (2)
111-116: Consider consistent prop naming between components.The props here use a "Custom" suffix (e.g.,
datepickerBorderRadiusCustom), while theDatepickercomponent uses props without this suffix (e.g.,datepickerBorderRadius). This inconsistency may confuse consumers of the API.Consider aligning the naming convention across both components for a more intuitive developer experience.
177-179: Unused theme properties.
datepickerHeight,datepickerLeft, anddatepickerTopare defined in the theme object but are never used. The positioning logic usesdateRangeDatepickerWrapperLeftanddateRangeDatepickerWrapperTopinstead (fromgetPlacement).Consider removing these unused properties to avoid confusion.
♻️ Suggested fix
dateRangeArrowIconOpacity: 1, dateRangeStartDateInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 0x', dateRangeEndDateInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 0px', dateRangeDatepickerWrapperPosition: 'absolute', - datepickerHeight: 'unset', - datepickerLeft: '0px', - datepickerTop: '0px', ...getPlacement(placement, rtl),
1 participant
Summary
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.