From 1ed4ea0c60decee7aa2ac4ff3ec2baf055b888d0 Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Wed, 11 Feb 2026 10:33:55 -0700
Subject: [PATCH] fix: updated styling based on feedback (#42694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

small: Update styling for filters based on internal feedback

## Demo
<img width="286" height="307" alt="Screenshot 2026-02-11 at 8 52 18 AM"
src="https://github.com/user-attachments/assets/fb7b6b01-a1c3-47be-b979-2dd774f535ca"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Simplified FilterBar item layout: operator symbol now appears inline
after labels and the right-side check indicator has been removed.
  * Filter headers use bolder text weight for improved hierarchy.
* Operator badges use a lighter foreground color for better visual
contrast and consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/ui-patterns/src/FilterBar/CommandListItem.tsx   | 9 +--------
 .../src/FilterBar/DefaultCommandList.helpers.tsx         | 2 +-
 .../ui-patterns/src/FilterBar/DefaultCommandList.tsx     | 3 ---
 packages/ui-patterns/src/FilterBar/FilterCondition.tsx   | 1 -
 .../ui-patterns/src/FilterBar/OperatorSymbolBadge.tsx    | 2 +-
 5 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/ui-patterns/src/FilterBar/CommandListItem.tsx b/packages/ui-patterns/src/FilterBar/CommandListItem.tsx
index c420640469a..8c05ebb985b 100644
--- a/packages/ui-patterns/src/FilterBar/CommandListItem.tsx
+++ b/packages/ui-patterns/src/FilterBar/CommandListItem.tsx
@@ -1,4 +1,3 @@
-import { Check } from 'lucide-react'
 import { cn } from 'ui'
 
 import { OperatorSymbolBadge } from './OperatorSymbolBadge'
@@ -7,7 +6,6 @@ import { MenuItem } from './types'
 export type CommandListItemProps = {
   item: MenuItem
   isHighlighted: boolean
-  isSelected: boolean
   includeIcon: boolean
   onSelect: (item: MenuItem) => void
   setRef: (el: HTMLDivElement | null) => void
@@ -16,7 +14,6 @@ export type CommandListItemProps = {
 export function CommandListItem({
   item,
   isHighlighted,
-  isSelected,
   includeIcon,
   onSelect,
   setRef,
@@ -25,7 +22,6 @@ export function CommandListItem({
     <div
       ref={setRef}
       role="option"
-      aria-selected={isSelected}
       onClick={() => onSelect(item)}
       className={cn(
         'relative flex items-center justify-between gap-2 px-2 py-1.5 text-xs cursor-pointer select-none outline-none text-foreground-light',
@@ -37,10 +33,7 @@ export function CommandListItem({
         {includeIcon && item.icon}
         {item.label}
       </span>
-      <span className="flex items-center gap-1.5">
-        {item.operatorSymbol && <OperatorSymbolBadge symbol={item.operatorSymbol} />}
-        {isSelected && <Check className="h-4 w-4 text-foreground-muted" strokeWidth={2} />}
-      </span>
+      {item.operatorSymbol && <OperatorSymbolBadge symbol={item.operatorSymbol} />}
     </div>
   )
 }
diff --git a/packages/ui-patterns/src/FilterBar/DefaultCommandList.helpers.tsx b/packages/ui-patterns/src/FilterBar/DefaultCommandList.helpers.tsx
index 7f75ff009ca..7a507adc69f 100644
--- a/packages/ui-patterns/src/FilterBar/DefaultCommandList.helpers.tsx
+++ b/packages/ui-patterns/src/FilterBar/DefaultCommandList.helpers.tsx
@@ -4,7 +4,7 @@ export function EmptyState() {
 
 export function GroupHeader({ label }: { label: string }) {
   return (
-    <div className="px-2 py-1.5 text-xs text-foreground-lighter font-normal tracking-wide">
+    <div className="px-2 py-1.5 text-xs text-foreground-lighter font-medium tracking-wide">
       {label}
     </div>
   )
diff --git a/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx b/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx
index 09d5065ac6d..761019dfc25 100644
--- a/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx
+++ b/packages/ui-patterns/src/FilterBar/DefaultCommandList.tsx
@@ -13,7 +13,6 @@ export type DefaultCommandListProps = {
   onSelect: (item: MenuItem) => void
   includeIcon?: boolean
   grouped?: boolean
-  selectedValue?: string
 }
 
 export function DefaultCommandList({
@@ -22,7 +21,6 @@ export function DefaultCommandList({
   onSelect,
   includeIcon = true,
   grouped = false,
-  selectedValue,
 }: DefaultCommandListProps) {
   const listRef = useRef<HTMLDivElement>(null)
   const itemRefs = useRef<Map<number, HTMLDivElement>>(new Map())
@@ -78,7 +76,6 @@ export function DefaultCommandList({
               key={`${item.value}-${item.label}`}
               item={item}
               isHighlighted={index === highlightedIndex}
-              isSelected={selectedValue === item.value}
               includeIcon={includeIcon}
               onSelect={onSelect}
               setRef={setItemRef(index)}
diff --git a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
index 27e7637b590..1c10369aae1 100644
--- a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx
@@ -260,7 +260,6 @@ export function FilterCondition({
             highlightedIndex={opHighlightedIndex}
             onSelect={handleSelectMenuItem}
             includeIcon={false}
-            selectedValue={condition.operator}
             grouped
           />
         </PopoverContent_Shadcn_>
diff --git a/packages/ui-patterns/src/FilterBar/OperatorSymbolBadge.tsx b/packages/ui-patterns/src/FilterBar/OperatorSymbolBadge.tsx
index d0788fd7b28..1870be99c0b 100644
--- a/packages/ui-patterns/src/FilterBar/OperatorSymbolBadge.tsx
+++ b/packages/ui-patterns/src/FilterBar/OperatorSymbolBadge.tsx
@@ -4,7 +4,7 @@ export type OperatorSymbolBadgeProps = {
 
 export function OperatorSymbolBadge({ symbol }: OperatorSymbolBadgeProps) {
   return (
-    <span className="ml-auto text-xs text-brand bg-surface-200 rounded px-1.5 py-0.5 font-mono">
+    <span className="ml-auto text-xs text-foreground-light bg-surface-200 rounded px-1.5 py-0.5 font-mono">
       {symbol}
     </span>
   )