fix(filterChip): fix for breaking date type filterchip, width wrapping, and text value date#821
fix(filterChip): fix for breaking date type filterchip, width wrapping, and text value date#821Shreyag02 wants to merge 5 commits into
Conversation
…g, and text value date
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR migrates calendar/input props to a unified slotProps API across DatePicker and RangePicker, exports DatePicker prop/slot types, changes the default dateFormat to "DD MMM YYYY", and updates tests accordingly. FilterChip gains a typed calendarProps prop, now coerces non-Date values to undefined before passing value to DatePicker, and switches to slotProps for input sizing with content-fit CSS. DataTable/DataView filter definitions propagate calendarProps to FilterChip. Docs, demos, examples, and changelog are updated. Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
| /** Date display/parse format for `columnType="date"`, forwarded to the underlying DatePicker. | ||
| * @default "DD MMM YYYY" | ||
| */ | ||
| dateFormat?: string; |
There was a problem hiding this comment.
Let's expose a calendarProps similar to selectProps and expose and forward all props
There was a problem hiding this comment.
The input field should also shrink on parent resize which was working before, but not working now.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/raystack/components/filter-chip/filter-chip.tsx (1)
167-168: 💤 Low value
showCalendarIcon={false}is overridable viacalendarProps.It's placed before
{...calendarProps}, so a consumer passingcalendarProps={{ showCalendarIcon: true }}would re-enable the icon — unlikevalue/onSelect, which are locked after the spread. If the chip is meant to always suppress the calendar icon, move it after the spread (or excludeshowCalendarIconfromFilterChipCalendarProps).♻️ Lock the icon suppression
<DatePicker - showCalendarIcon={false} {...calendarProps} + showCalendarIcon={false} value={filterValue instanceof Date ? filterValue : undefined}🤖 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 `@packages/raystack/components/filter-chip/filter-chip.tsx` around lines 167 - 168, The showCalendarIcon prop is being overridden because in FilterChip's JSX the literal showCalendarIcon={false} is placed before the spread of calendarProps; update the FilterChip component so the suppression is locked by either moving showCalendarIcon={false} after {...calendarProps} in the element rendering, or remove/omit showCalendarIcon from the FilterChipCalendarProps type so consumers cannot pass it; locate the render of the calendar (the element receiving {...calendarProps}) in FilterChip (and adjust the calendarProps type/interface if you choose the type-level fix).apps/www/src/content/docs/components/filter-chip/demo.ts (1)
141-155:calendarPropsDemois already consumed by the docs—it's imported and rendered via<Demo data={calendarPropsDemo} />inapps/www/src/content/docs/components/filter-chip/index.mdx, so it’s not dead duplication. If the goal is to avoid duplicated code blocks, compare thecodestring against the inline “Date with calendarProps” tab content.🤖 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 `@apps/www/src/content/docs/components/filter-chip/demo.ts` around lines 141 - 155, The calendarPropsDemo code block is duplicated by the inline “Date with calendarProps” tab in the docs; locate calendarPropsDemo in demo.ts and the inline tab content rendered in index.mdx and remove the duplication by reusing one source: either import and render calendarPropsDemo via <Demo data={calendarPropsDemo} /> inside the “Date with calendarProps” tab or replace calendarPropsDemo.code with the unique content from the tab so only one canonical code snippet exists; update references to the Demo component or the tab content accordingly (symbols: calendarPropsDemo, <Demo>, “Date with calendarProps” tab).
🤖 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.
Nitpick comments:
In `@apps/www/src/content/docs/components/filter-chip/demo.ts`:
- Around line 141-155: The calendarPropsDemo code block is duplicated by the
inline “Date with calendarProps” tab in the docs; locate calendarPropsDemo in
demo.ts and the inline tab content rendered in index.mdx and remove the
duplication by reusing one source: either import and render calendarPropsDemo
via <Demo data={calendarPropsDemo} /> inside the “Date with calendarProps” tab
or replace calendarPropsDemo.code with the unique content from the tab so only
one canonical code snippet exists; update references to the Demo component or
the tab content accordingly (symbols: calendarPropsDemo, <Demo>, “Date with
calendarProps” tab).
In `@packages/raystack/components/filter-chip/filter-chip.tsx`:
- Around line 167-168: The showCalendarIcon prop is being overridden because in
FilterChip's JSX the literal showCalendarIcon={false} is placed before the
spread of calendarProps; update the FilterChip component so the suppression is
locked by either moving showCalendarIcon={false} after {...calendarProps} in the
element rendering, or remove/omit showCalendarIcon from the
FilterChipCalendarProps type so consumers cannot pass it; locate the render of
the calendar (the element receiving {...calendarProps}) in FilterChip (and
adjust the calendarProps type/interface if you choose the type-level fix).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cfabe3ba-193d-4608-a362-c58abd50f44a
📒 Files selected for processing (19)
apps/www/src/content/docs/components/calendar/props.tsapps/www/src/content/docs/components/datatable/props.tsapps/www/src/content/docs/components/filter-chip/demo.tsapps/www/src/content/docs/components/filter-chip/index.mdxapps/www/src/content/docs/components/filter-chip/props.tsdocs/V1-migration.mdpackages/raystack/CHANGELOG.mdpackages/raystack/components/calendar/__tests__/date-picker.test.tsxpackages/raystack/components/calendar/__tests__/range-picker.test.tsxpackages/raystack/components/calendar/date-picker.tsxpackages/raystack/components/calendar/index.tsxpackages/raystack/components/calendar/range-picker.tsxpackages/raystack/components/data-table/components/filters.tsxpackages/raystack/components/data-table/data-table.types.tsxpackages/raystack/components/data-view-beta/components/filters.tsxpackages/raystack/components/data-view-beta/data-view.types.tsxpackages/raystack/components/filter-chip/__tests__/filter-chip.test.tsxpackages/raystack/components/filter-chip/filter-chip.tsxpackages/raystack/components/filter-chip/index.tsx
✅ Files skipped from review due to trivial changes (6)
- packages/raystack/components/calendar/index.tsx
- packages/raystack/components/filter-chip/index.tsx
- apps/www/src/content/docs/components/filter-chip/index.mdx
- packages/raystack/CHANGELOG.md
- apps/www/src/content/docs/components/calendar/props.ts
- docs/V1-migration.md
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/www/src/content/docs/components/filter-chip/props.ts
- packages/raystack/components/filter-chip/tests/filter-chip.test.tsx
2 participants
Fixes the date-type
FilterChipand makes its value fields hug their content.After PR #819 made
DatePicker.valuestrictlyDate | undefinedand added a controlled-sync effect keyed onvalueProp?.getTime(), the date filter chip crashed:FilterChipseeds its value state with''and forwarded that string to the picker, so''.getTime()threwTypeError: valueProp?.getTime is not a function(caught by the ErrorBoundary, regenerating the tree).Changes:
Datevalues toundefined(value={filterValueinstanceof Date ? filterValue : undefined}), so an unset/string-valued chip starts on the "Selectdate" placeholder instead of throwing.slotProps.inputinputPropsAPI #819 deprecated.dateFormatprop'DD MMM YYYY', forwarded to theDatePicker, so the capture-date filter reads "27 May 2026" instead of "27/05/2026".field-sizing: contentwithwidth: autoplus guardrails (min-width: var(--rs-space-10),max-width: 200px), so the chip hugs its value like the "All Bands" select chip; falls back to a bounded intrinsic width wherefield-sizingis unsupported.V1-migration.md, a CHANGELOG entry under 0.49.0, thedateFormatprop documented in the FilterChip props doc, and the showcase/playground demos migrated off the deprecated picker props toslotProps.Behavior note: existing date
FilterChips now display month-as-text by default; this isoverridable per-chip via the new
dateFormatprop.Type of Change
How Has This Been Tested?
filter-chip.test.tsxDatevalue coercion to unselected, default month-as-text formatting (27 May 2026), customdateFormat(27/05/2026), and content-fit width wiring on both the string and date containers.@raystack/apsaraVitest suitetsc --noEmitfilter-chip/calendarand the two editedapps/wwwfiles.components/filter-chip(only the 2 pre-existinganywarnings in the originaluseCallback; no new warnings).Checklist:
Screenshots (if appropriate):
[Add screenshots here]
Related Issues
[Link any related issues here using #issue-number]