Repository navigation
feat: add expand button to categorical legend - #647
Merged
Merged
Conversation
Signed-off-by: Ihor Dykhta <[email protected]>
Contributor
📝 WalkthroughWalkthroughCustomMapLegend.tsx updates the legend's layer item UI by changing expand/collapse icons from Arrow variants to Chevron icons, removing old inline CSS styling, and introducing scoped CSS styling via a ChangesLegend Layer Item UI Styling and Icons
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 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 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/kepler/src/components/CustomMapLegend.tsx (1)
183-194:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd accessibility attributes to expand/collapse button.
The expand/collapse button is missing key accessibility attributes:
aria-expandedattribute to indicate the current state to screen readersaria-labeloraria-labelledbyto describe the button's purpose♿ Proposed accessibility improvements
<Button className="h-7 w-7" variant="ghost" size="icon" onClick={handleToggleExpanded} + aria-expanded={isExpanded} + aria-label={isExpanded ? "Collapse legend" : "Expand legend"} > {isExpanded ? ( <ChevronDownIcon className="h-4 w-4" /> ) : ( <ChevronRightIcon className="h-4 w-4" /> )} </Button>🤖 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/kepler/src/components/CustomMapLegend.tsx` around lines 183 - 194, The expand/collapse Button (the Button element that calls handleToggleExpanded and renders ChevronDownIcon/ChevronRightIcon based on isExpanded) lacks accessibility attributes; add aria-expanded={isExpanded} and an aria-label (e.g., aria-label={isExpanded ? "Collapse legend" : "Expand legend"}) to the Button, and if the collapsible content has an id (e.g., a panel element you control), also add aria-controls="<that-panel-id>" on the Button so screen readers can associate the button with the collapsible legend content.
🧹 Nitpick comments (1)
packages/kepler/src/components/CustomMapLegend.tsx (1)
199-216: ⚖️ Poor tradeoffRefactor inline style tag to a more maintainable approach.
The inline
<style>tag is recreated in the DOM every time a layer expands or collapses (the entire div is conditionally rendered within{isExpanded && (...)}), which creates performance and maintainability issues:
- Performance: Style tag injection on every expand/collapse cycle
- Maintainability: CSS rules are embedded in component logic rather than in a dedicated stylesheet
- Testing: Makes it harder to test styling in isolation
Consider these alternatives:
- Option 1 (Recommended): Extract to a CSS module or external stylesheet
- Option 2: Use Tailwind classes if these styles can be expressed with utility classes
- Option 3: Move styles outside the conditional so they're only injected once
🤖 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/kepler/src/components/CustomMapLegend.tsx` around lines 199 - 216, The inline <style> block inside the conditional rendering of the legend (within CustomMapLegend's isExpanded branch) causes repeated DOM style injections; move these rules out of the component into a maintainable stylesheet or CSS module (or replace with equivalent Tailwind utility classes) and apply the existing class names (.legend-content-wrapper, .legend--layer_size-title-row, .panel--header__action) from that stylesheet; alternatively place the <style> once outside the conditional so it’s injected a single time, ensuring CustomMapLegend still uses the same class names and behavior.
🤖 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.
Outside diff comments:
In `@packages/kepler/src/components/CustomMapLegend.tsx`:
- Around line 183-194: The expand/collapse Button (the Button element that calls
handleToggleExpanded and renders ChevronDownIcon/ChevronRightIcon based on
isExpanded) lacks accessibility attributes; add aria-expanded={isExpanded} and
an aria-label (e.g., aria-label={isExpanded ? "Collapse legend" : "Expand
legend"}) to the Button, and if the collapsible content has an id (e.g., a panel
element you control), also add aria-controls="<that-panel-id>" on the Button so
screen readers can associate the button with the collapsible legend content.
---
Nitpick comments:
In `@packages/kepler/src/components/CustomMapLegend.tsx`:
- Around line 199-216: The inline <style> block inside the conditional rendering
of the legend (within CustomMapLegend's isExpanded branch) causes repeated DOM
style injections; move these rules out of the component into a maintainable
stylesheet or CSS module (or replace with equivalent Tailwind utility classes)
and apply the existing class names (.legend-content-wrapper,
.legend--layer_size-title-row, .panel--header__action) from that stylesheet;
alternatively place the <style> once outside the conditional so it’s injected a
single time, ensuring CustomMapLegend still uses the same class names and
behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0456465a-d943-4832-9cab-720c630613a0
📒 Files selected for processing (1)
packages/kepler/src/components/CustomMapLegend.tsx
ilyabo
approved these changes
May 20, 2026
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
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
Release Notes