This is an automated email from the ASF dual-hosted git repository.
rahulvats pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new 92015a5060f fix(ui): Remove explicit bg color from filter buttons to
fix pale appearance (#60346 backport fix) (#61457)
92015a5060f is described below
commit 92015a5060ff6fd38ecf97fe04ea5ef069b45a06
Author: Rahul Vats <[email protected]>
AuthorDate: Fri Feb 6 19:16:49 2026 +0530
fix(ui): Remove explicit bg color from filter buttons to fix pale
appearance (#60346 backport fix) (#61457)
* fix pale filter buttons
---
.../ui/src/components/DataTable/ToggleTableDisplay.tsx | 2 --
.../ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx | 3 ---
.../ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx | 3 ---
.../ui/src/pages/DagsList/DagsFilters/StateFilters.tsx | 13 +------------
4 files changed, 1 insertion(+), 20 deletions(-)
diff --git
a/airflow-core/src/airflow/ui/src/components/DataTable/ToggleTableDisplay.tsx
b/airflow-core/src/airflow/ui/src/components/DataTable/ToggleTableDisplay.tsx
index 75e336d615f..6b28ba0b958 100644
---
a/airflow-core/src/airflow/ui/src/components/DataTable/ToggleTableDisplay.tsx
+++
b/airflow-core/src/airflow/ui/src/components/DataTable/ToggleTableDisplay.tsx
@@ -34,7 +34,6 @@ export const ToggleTableDisplay = ({ display, setDisplay }:
Props) => {
<ButtonGroup attached colorPalette="brand" pb={2} size="sm"
variant="outline">
<IconButton
aria-label={translate("toggleCardView")}
- bg={display === "card" ? "colorPalette.muted" : undefined}
onClick={() => setDisplay("card")}
title={translate("toggleCardView")}
variant={display === "card" ? "solid" : "outline"}
@@ -43,7 +42,6 @@ export const ToggleTableDisplay = ({ display, setDisplay }:
Props) => {
</IconButton>
<IconButton
aria-label={translate("toggleTableView")}
- bg={display === "table" ? "colorPalette.muted" : undefined}
onClick={() => setDisplay("table")}
title={translate("toggleTableView")}
variant={display === "table" ? "solid" : "outline"}
diff --git
a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
index 3554658f98d..a825b11c68e 100644
---
a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/FavoriteFilter.tsx
@@ -33,7 +33,6 @@ export const FavoriteFilter = ({ onFavoriteChange,
showFavorites }: Props) => {
return (
<ButtonGroup attached size="sm" variant="outline">
<Button
- bg={currentValue === "all" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onFavoriteChange}
value="all"
@@ -42,7 +41,6 @@ export const FavoriteFilter = ({ onFavoriteChange,
showFavorites }: Props) => {
{translate("filters.favorite.all")}
</Button>
<Button
- bg={currentValue === "true" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onFavoriteChange}
value="true"
@@ -54,7 +52,6 @@ export const FavoriteFilter = ({ onFavoriteChange,
showFavorites }: Props) => {
{translate("filters.favorite.favorite")}
</Button>
<Button
- bg={currentValue === "false" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onFavoriteChange}
value="false"
diff --git
a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
index ec21d605109..2c26af00f28 100644
---
a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/PausedFilter.tsx
@@ -33,7 +33,6 @@ export const PausedFilter = ({ defaultShowPaused,
onPausedChange, showPaused }:
return (
<ButtonGroup attached size="sm" variant="outline">
<Button
- bg={currentValue === "all" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onPausedChange}
value="all"
@@ -42,7 +41,6 @@ export const PausedFilter = ({ defaultShowPaused,
onPausedChange, showPaused }:
{translate("filters.paused.all")}
</Button>
<Button
- bg={currentValue === "false" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onPausedChange}
value="false"
@@ -51,7 +49,6 @@ export const PausedFilter = ({ defaultShowPaused,
onPausedChange, showPaused }:
{translate("filters.paused.active")}
</Button>
<Button
- bg={currentValue === "true" ? "colorPalette.muted" : undefined}
colorPalette="brand"
onClick={onPausedChange}
value="true"
diff --git
a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
index 0533de4dc3a..13d1a97ce7c 100644
---
a/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
+++
b/airflow-core/src/airflow/ui/src/pages/DagsList/DagsFilters/StateFilters.tsx
@@ -45,17 +45,10 @@ export const StateFilters = ({
return (
<ButtonGroup attached size="sm" variant="outline">
- <Button
- bg={isAll ? "colorPalette.muted" : undefined}
- colorPalette="brand"
- onClick={onStateChange}
- value="all"
- variant={isAll ? "solid" : "outline"}
- >
+ <Button colorPalette="brand" onClick={onStateChange} value="all"
variant={isAll ? "solid" : "outline"}>
{translate("dags:filters.paused.all")}
</Button>
<Button
- bg={isFailed ? "colorPalette.muted" : undefined}
colorPalette="brand"
data-testid="dags-failed-filter"
onClick={onStateChange}
@@ -66,7 +59,6 @@ export const StateFilters = ({
{translate("common:states.failed")}
</Button>
<Button
- bg={isQueued ? "colorPalette.muted" : undefined}
colorPalette="brand"
data-testid="dags-queued-filter"
onClick={onStateChange}
@@ -77,7 +69,6 @@ export const StateFilters = ({
{translate("common:states.queued")}
</Button>
<Button
- bg={isRunning ? "colorPalette.muted" : undefined}
colorPalette="brand"
data-testid="dags-running-filter"
onClick={onStateChange}
@@ -88,7 +79,6 @@ export const StateFilters = ({
{translate("common:states.running")}
</Button>
<Button
- bg={isSuccess ? "colorPalette.muted" : undefined}
colorPalette="brand"
data-testid="dags-success-filter"
onClick={onStateChange}
@@ -99,7 +89,6 @@ export const StateFilters = ({
{translate("common:states.success")}
</Button>
<Button
- bg={needsReview ? "colorPalette.muted" : undefined}
colorPalette="brand"
data-testid="dags-needs-review-filter"
onClick={onStateChange}
