UI dropdowns: Selected option has purple highlight - #45254
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
| ) => { | ||
| if (state.isFocused) return COLORS["ui-fleet-black-5"]; | ||
| if (state.isSelected) return COLORS["ui-vibrant-blue-10"]; | ||
| if (state.isSelected) return COLORS["ui-fleet-black-10"]; |
There was a problem hiding this comment.
Hey @cdcme is this spot in the code necessary?
At first, I left this as is (vibrant-blue-10) and only made the stylesheet change...that alone fixed the bug.
There was a problem hiding this comment.
@noahtalerman Yes, it's needed. The bug screenshots are both from the legacy Dropdown component (fixed by the SCSS change), but DropdownWrapper has the same selected-option styling and it's used in a lot of other places.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #45254 +/- ##
========================================
Coverage 66.81% 66.81%
========================================
Files 2724 2724
Lines 219027 219027
Branches 10754 10627 -127
========================================
Hits 146342 146342
- Misses 59519 59520 +1
+ Partials 13166 13165 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
WalkthroughThis PR updates the background color styling for selected dropdown options across two components. The SCSS stylesheet for dropdown styles changes the Possibly related PRs
🚥 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}
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 `@frontend/components/forms/fields/Dropdown/_styles.scss`:
- Line 243: Update the selected-option styling so it is visually distinct from
the focused state: in the Dropdown styles change the .is-selected rule to use
$ui-fleet-black-10 (while leaving .is-focused using $ui-fleet-black-5) to
restore contrast and align with the DropdownWrapper component’s visual
hierarchy.
🪄 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: f691cde1-1a43-4518-a1fc-447d95ead39f
📒 Files selected for processing (2)
frontend/components/forms/fields/Dropdown/_styles.scssfrontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx
|
|
||
| &.is-selected { | ||
| background-color: $ui-vibrant-blue-10; | ||
| background-color: $ui-fleet-black-5; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Search for remaining references to ui-vibrant-blue-10 color token
# Search in SCSS files
rg -n 'ui-vibrant-blue-10' --glob '*.scss' --glob '*.css'
# Search in TypeScript/JavaScript files
rg -n 'ui-vibrant-blue-10' --glob '*.ts' --glob '*.tsx' --glob '*.js' --glob '*.jsx'Repository: fleetdm/fleet
Length of output: 457
🏁 Script executed:
# Check the actual Dropdown/_styles.scss file around line 243
head -250 frontend/components/forms/fields/Dropdown/_styles.scss | tail -20Repository: fleetdm/fleet
Length of output: 440
🏁 Script executed:
# Check DropdownWrapper.tsx around line 134
head -150 frontend/components/forms/fields/DropdownWrapper.tsx | tail -20Repository: fleetdm/fleet
Length of output: 169
🏁 Script executed:
# Verify the color token definitions
rg -n 'ui-fleet-black-5|ui-fleet-black-10' frontend/styles/var/colors.scssRepository: fleetdm/fleet
Length of output: 610
🏁 Script executed:
# Search for DropdownWrapper in the codebase
find frontend -name "*DropdownWrapper*" -type fRepository: fleetdm/fleet
Length of output: 278
🏁 Script executed:
# Also search for any file containing DropdownWrapper class/component
rg -l "DropdownWrapper" frontend/Repository: fleetdm/fleet
Length of output: 3187
🏁 Script executed:
# Check DropdownWrapper.tsx around line 134
head -150 frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx | tail -30Repository: fleetdm/fleet
Length of output: 1026
🏁 Script executed:
# Also check if there are any styles defined in DropdownWrapper directory
find frontend/components/forms/fields/DropdownWrapper -name "_styles.scss" -o -name "styles.scss"Repository: fleetdm/fleet
Length of output: 119
🏁 Script executed:
# Check DropdownWrapper _styles.scss
cat -n frontend/components/forms/fields/DropdownWrapper/_styles.scssRepository: fleetdm/fleet
Length of output: 704
🏁 Script executed:
# Get the full context of what line 243 looked like before this change
# First, let's check git to see the original state
git diff HEAD -- frontend/components/forms/fields/Dropdown/_styles.scss | head -100Repository: fleetdm/fleet
Length of output: 39
🏁 Script executed:
# Check git status to see what files are changed
git statusRepository: fleetdm/fleet
Length of output: 276
🏁 Script executed:
# Check the actual diff for the Dropdown _styles.scss file
git diff frontend/components/forms/fields/Dropdown/_styles.scssRepository: fleetdm/fleet
Length of output: 39
🏁 Script executed:
# Let's also check the commit to understand context
git log --oneline -5Repository: fleetdm/fleet
Length of output: 79
🏁 Script executed:
# Check what the previous commit changed
git show HEAD~1 -- frontend/components/forms/fields/Dropdown/_styles.scss | head -100Repository: fleetdm/fleet
Length of output: 86
🏁 Script executed:
# Show the current commit's changes
git show HEAD -- frontend/components/forms/fields/Dropdown/_styles.scss | head -100Repository: fleetdm/fleet
Length of output: 2190
🏁 Script executed:
# Continue showing the git diff for the full context
git show HEAD -- frontend/components/forms/fields/Dropdown/_styles.scss | grep -A 20 "is-selected"Repository: fleetdm/fleet
Length of output: 476
🏁 Script executed:
# Also check if there was an original version of this file before
git log --all --full-history -- frontend/components/forms/fields/Dropdown/_styles.scssRepository: fleetdm/fleet
Length of output: 2906
🏁 Script executed:
# Let me verify the complete picture - check what the previous commit had for this file
git show 29fd9c53:frontend/components/forms/fields/Dropdown/_styles.scss 2>/dev/null | grep -A 10 "is-selected" || echo "File did not exist in previous commit"Repository: fleetdm/fleet
Length of output: 281
🏁 Script executed:
# Check if there are any other dropdowns using this same component
rg "is-selected" frontend/components/forms/fields/Dropdown/_styles.scss -A 2 -B 2Repository: fleetdm/fleet
Length of output: 181
🏁 Script executed:
# Verify the color token values one more time for clarity
rg "ui-fleet-black-5|ui-fleet-black-10" frontend/styles/var/colors.scss | head -10Repository: fleetdm/fleet
Length of output: 418
Fix: Selected option background color should be more visually distinct from focused state.
The current code uses $ui-fleet-black-5 for both is-selected (line 243) and is-focused (line 248), providing no visual distinction between these two states. The previous version used $ui-vibrant-blue-10 for selected options, which provided clear visual contrast.
To align with the newer DropdownWrapper component and maintain proper visual hierarchy, change the selected state to use $ui-fleet-black-10:
Proposed fix
&.is-selected {
- background-color: $ui-fleet-black-5;
+ background-color: $ui-fleet-black-10;
font-weight: bold;
}🤖 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 `@frontend/components/forms/fields/Dropdown/_styles.scss` at line 243, Update
the selected-option styling so it is visually distinct from the focused state:
in the Dropdown styles change the .is-selected rule to use $ui-fleet-black-10
(while leaving .is-focused using $ui-fleet-black-5) to restore contrast and
align with the DropdownWrapper component’s visual hierarchy.
2 participants
For the following bug:
Summary by CodeRabbit