vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

fix(ui): improve Variables Dropdown styling consistency (#26675)

Browse Source 
* fix(ui): improve Variables Dropdown styling consistency

- Change focus ring from brand-800 to subtle for consistent design
- Add rounded-md to dropdown container for visual consistency
- Add rounded-md to DropdownMenuItem for rounded corners
- Remove redundant hover:bg-muted and conditional bg-muted styling

Fixes #25848

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: restore keyboard navigation active state indicator

Keep the conditional bg-muted styling for the selected item during
keyboard navigation, while still removing the redundant hover:bg-muted
since DropdownMenuItem already handles hover styling.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: simiondolha <simiondolha@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
This commit is contained in:
simiondolha
2026-01-13 14:53:11 -03:00
committed by GitHub
co-authored by Claude Opus 4.5 simiondolha Anik Dhabal Babu
parent 0b73491367
commit 455973b394
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+4 -4
View File
@@ -142,20 +142,20 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
onChange={(e) => setQuery(e.target.value)}
placeholder={t("search_variables")}
aria-label={t("search_variables")}
className="border-subtle bg-default focus:ring-brand-800 w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-1"
className="border-subtle bg-default focus:ring-subtle w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-1"
/>
</div>
<div className="max-h-64 overflow-y-auto overflow-x-hidden md:max-h-80" ref={dropdownContainerRef}>
<div className="max-h-64 overflow-y-auto overflow-x-hidden rounded-md md:max-h-80" ref={dropdownContainerRef}>
{filteredVariables.length === 0 ? (
<div className="text-subtle px-4 py-2 text-center text-sm">{t("no_variables_found")}</div>
) : (
filteredVariables.map((variable, index) => (
<DropdownMenuItem key={variable} className="w-full p-1 hover:ring-0 focus:outline-none">
<DropdownMenuItem key={variable} className="w-full rounded-md p-1 hover:ring-0 focus:outline-none">
<button
ref={(el) => (itemRefs.current[index] = el)}
key={variable}
type="button"
className={`hover:bg-muted w-full rounded-md px-3 py-2 text-left transition-colors focus:outline-none ${
className={`w-full rounded-md px-3 py-2 text-left transition-colors focus:outline-none ${
selectedIndex === index ? "bg-muted" : ""
}`}
onMouseEnter={() => setSelectedIndex(index)}