From 208b3dec9deb6cf372591fb9af73c8138e0886fd Mon Sep 17 00:00:00 2001 From: glorydavid03023 Date: Fri, 29 May 2026 17:48:17 -0500 Subject: [PATCH] fix(transactions): migrate transaction filter searches to DS::SearchInput (#1998) * fix(transactions): migrate filter sidebar searches to DS::SearchInput Replace hand-rolled search fields that used invalid focus:ring-gray-500 with DS::SearchInput (:embedded). Align date filter focus styles with the DS focus ring pattern. Refs #1715 * fix(transactions): localize filter search copy and align date focus ring Address validator feedback by replacing hardcoded filter input labels with i18n keys and updating date filter focus classes to the current design-system ring pattern. Co-authored-by: Cursor --------- Co-authored-by: Cursor --- .../searches/filters/_account_filter.html.erb | 13 +++++++++---- .../searches/filters/_category_filter.html.erb | 13 +++++++++---- .../searches/filters/_date_filter.html.erb | 4 ++-- .../searches/filters/_merchant_filter.html.erb | 13 +++++++++---- .../searches/filters/_tag_filter.html.erb | 13 +++++++++---- config/locales/views/transactions/en.yml | 8 ++++++++ 6 files changed, 46 insertions(+), 18 deletions(-) diff --git a/app/views/transactions/searches/filters/_account_filter.html.erb b/app/views/transactions/searches/filters/_account_filter.html.erb index 4641a3ddb..5339c4447 100644 --- a/app/views/transactions/searches/filters/_account_filter.html.erb +++ b/app/views/transactions/searches/filters/_account_filter.html.erb @@ -1,9 +1,14 @@ <%# locals: (form:) %>
-
- - <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %> -
+ <%= render DS::SearchInput.new( + variant: :embedded, + placeholder: t(".filter_accounts"), + aria_label: t(".filter_accounts"), + data: { + list_filter_target: "input", + action: "input->list-filter#filter" + } + ) %>
<% Current.user.accessible_accounts.alphabetically.each do |account| %>
diff --git a/app/views/transactions/searches/filters/_category_filter.html.erb b/app/views/transactions/searches/filters/_category_filter.html.erb index 6b848ed9f..649651ff1 100644 --- a/app/views/transactions/searches/filters/_category_filter.html.erb +++ b/app/views/transactions/searches/filters/_category_filter.html.erb @@ -1,9 +1,14 @@ <%# locals: (form:) %>
-
- - <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %> -
+ <%= render DS::SearchInput.new( + variant: :embedded, + placeholder: t(".filter_category"), + aria_label: t(".filter_category"), + data: { + list_filter_target: "input", + action: "input->list-filter#filter" + } + ) %>
<% family_categories.each do |category| %>
diff --git a/app/views/transactions/searches/filters/_date_filter.html.erb b/app/views/transactions/searches/filters/_date_filter.html.erb index 32ce60452..f7b27f544 100644 --- a/app/views/transactions/searches/filters/_date_filter.html.erb +++ b/app/views/transactions/searches/filters/_date_filter.html.erb @@ -3,9 +3,9 @@ <%= form.date_field :start_date, placeholder: t(".start_date"), value: @q[:start_date], - class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 focus:ring-gray-500 sm:text-sm" %> + class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 text-base sm:text-sm focus-visible:ring-2 focus-visible:ring-alpha-black-300" %> <%= form.date_field :end_date, placeholder: t(".end_date"), value: @q[:end_date], - class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 focus:ring-gray-500 sm:text-sm mt-2" %> + class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 text-base sm:text-sm mt-2 focus-visible:ring-2 focus-visible:ring-alpha-black-300" %>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb index bcfd6b789..b1f08ff08 100644 --- a/app/views/transactions/searches/filters/_merchant_filter.html.erb +++ b/app/views/transactions/searches/filters/_merchant_filter.html.erb @@ -1,9 +1,14 @@ <%# locals: (form:) %>
-
- - <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %> -
+ <%= render DS::SearchInput.new( + variant: :embedded, + placeholder: t(".filter_merchants"), + aria_label: t(".filter_merchants"), + data: { + list_filter_target: "input", + action: "input->list-filter#filter" + } + ) %>
<% Current.family.assigned_merchants_for(Current.user).alphabetically.each do |merchant| %>
diff --git a/app/views/transactions/searches/filters/_tag_filter.html.erb b/app/views/transactions/searches/filters/_tag_filter.html.erb index 8ba4fd0cc..06c9a1b95 100644 --- a/app/views/transactions/searches/filters/_tag_filter.html.erb +++ b/app/views/transactions/searches/filters/_tag_filter.html.erb @@ -1,9 +1,14 @@ <%# locals: (form:) %>
-
- - <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %> -
+ <%= render DS::SearchInput.new( + variant: :embedded, + placeholder: t(".filter_tags"), + aria_label: t(".filter_tags"), + data: { + list_filter_target: "input", + action: "input->list-filter#filter" + } + ) %>
<% Current.family.tags.alphabetically.each do |tag| %>
diff --git a/config/locales/views/transactions/en.yml b/config/locales/views/transactions/en.yml index d051ef130..9e45f810f 100644 --- a/config/locales/views/transactions/en.yml +++ b/config/locales/views/transactions/en.yml @@ -278,9 +278,17 @@ en: unexpected_error: "Unexpected error during conversion: %{error}" searches: filters: + account_filter: + filter_accounts: Filter accounts + category_filter: + filter_category: Filter category date_filter: start_date: "Start date" end_date: "End date" + merchant_filter: + filter_merchants: Filter merchants + tag_filter: + filter_tags: Filter tags amount_filter: equal_to: Equal to greater_than: Greater than