feat(filter): new TEDI-Ready component #530#629
Open
airikej wants to merge 10 commits into
Open
Conversation
21 tasks
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR introduces the Filter component ecosystem to TEDI, adding a flexible pill-shaped toggle/dropdown filtering UI that supports single-select, multi-select, and custom content modes via FilterGroup coordination. It also adds a borderless Calendar variant and improves Search accessibility. ChangesFilter Component & Calendar Enhancement
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related issues
Possibly related PRs
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. ✨ 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 |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 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/tedi/components/filter/filter/filter-group.tsx`:
- Around line 169-173: The managed filter group can render
role=('group'|'radiogroup') without an accessible name; update the FilterGroup
component to require or provide an accessible name whenever isManaged is true by
(a) accepting an ariaLabelledBy prop (or making label required for managed
groups) and (b) using it in the container: compute role as before (using
isManaged and multiselect) but if role is set then ensure aria-label or
aria-labelledby is provided (e.g., if !label and !ariaLabelledBy, throw or
console.error and return null or add a runtime prop-type/TS error); update the
role assignment and the div to pass aria-labelledby={ariaLabelledBy} when
provided and only set aria-label={label} if label exists so the container never
exposes a role without an accessible name (refer to the role variable, label
prop, and the div element rendering inside FilterGroupContext.Provider).
In `@src/tedi/components/filter/filter/filter.tsx`:
- Around line 339-345: The grouped case in the useMemo for isSelected only calls
group.isSelected(groupValue) which hides local selection changes; change the
logic in the isSelected computed value (the useMemo around isSelected) to, when
isGrouped && groupValue !== undefined, return group.isSelected(groupValue) OR
the local selection state (i.e., for multi-select check multiValues.length > 0,
for single-select check singleValue !== '', otherwise check toggleSelected) so
group-managed filters don't mask local dropdown selections; apply the same fix
to the other isSelected useMemo occurrences (the blocks around the other two
similar implementations).
- Around line 80-103: The component currently treats filters with children as
dropdown-only and never initializes or toggles the internal toggle state, so
defaultSelected and onSelectedChange don't work for custom-content filters;
modify the logic that decides toggle vs dropdown so that when children are
present but the filter is in "custom-content" mode you still initialize
innerSelected from defaultSelected (and sync with selected when controlled) and
keep using handleToggle to flip innerSelected and call onSelectedChange;
specifically update the code paths in the render/handler logic that switch
behavior based on children to (1) initialize innerSelected from defaultSelected,
(2) attach/retain handleToggle for custom-content filters even when children
exist, and (3) ensure handleToggle invokes onSelectedChange and updates
innerSelected when not controlled (symbols: innerSelected, handleToggle,
selected, defaultSelected, onSelectedChange, children).
In `@src/tedi/components/form/search/search.tsx`:
- Line 65: The prop spread currently does input: { role: 'searchbox' as const,
...input } which allows consumers to override the role; change the spread order
so the role is applied last (e.g., build the object as { ...input, role:
'searchbox' as const }) to guarantee role="searchbox" cannot be overridden —
update the object assigned to input in search.tsx (the input prop/object where
role is set) so the 'searchbox' role is merged after ...input.
In `@src/tedi/components/overlays/dropdown/dropdown.module.scss`:
- Line 7: The width declaration in dropdown.module.scss uses a CSS var() with a
fallback (var(--dropdown-min-width, max-content)) which violates the rule;
update the rule so it uses only the custom property name without a fallback by
replacing the value with var(--dropdown-min-width) on the width property in the
dropdown stylesheet.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9b995a7c-872c-4e9a-a64f-5b58e8dd2dc4
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
package.jsonskills/tedi-react/SKILL.mdskills/tedi-react/references/components.mdskills/tedi-react/references/forms.mdsrc/tedi/components/content/calendar/calendar.module.scsssrc/tedi/components/content/calendar/calendar.tsxsrc/tedi/components/filter/filter/filter-group-context.tssrc/tedi/components/filter/filter/filter-group.tsxsrc/tedi/components/filter/filter/filter.module.scsssrc/tedi/components/filter/filter/filter.spec.tsxsrc/tedi/components/filter/filter/filter.stories.tsxsrc/tedi/components/filter/filter/filter.tsxsrc/tedi/components/filter/filter/index.tssrc/tedi/components/form/search/search.tsxsrc/tedi/components/overlays/dropdown/dropdown.module.scsssrc/tedi/index.tssrc/tedi/providers/label-provider/labels-map.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
FilterandFilterGroupcomponents supporting toggle, single-select, and multi-select filtering modes.Documentation
Dependencies