mirror of
https://github.com/we-promise/sure.git
synced 2026-05-29 15:34:58 +00:00
* feat(design-system): add DS::SearchInput + migrate 2 broken-focus callsites Resolves #1715 §3. Two standalone search-field callsites — `/settings/preferences` currency filter and `/settings/providers` filter row — had a hand- rolled markup that ended in `focus:ring-gray-500`. That utility has no backing token in the design system (`ring-gray-500` isn't in Tailwind's default + Sure doesn't register a gray ring color), so the input rendered with zero focus indicator on a bordered bg-container surface. Keyboard users couldn't tell when the field was focused. Introduce `DS::SearchInput` — icon-on-left, bordered, token-backed focus ring matching the DS::Button pattern landing in #1840 (`outline-2 outline-offset-2 outline-gray-900` with the dark-mode override). API: DS::SearchInput.new( name: "...", placeholder: "...", value: ..., aria_label: "...", # defaults to placeholder class: "...", # passed to the wrapper **opts # spread onto the <input>, e.g. data-* ) Migrate the two broken callsites. Three other "search" patterns stay as-is (out of scope for this PR): - `form.search_field :search` inside `styled_form_with` blocks (accounts/show/_activity.html.erb, UI::Account::ActivityFeed) — already routes through StyledFormBuilder's form-field CSS. - Embedded-dropdown search input inside DS::Select, DS::Menu, and the splits/category-select panels — uses a different shape (no border, no ring) because the parent panel provides the chrome. - Category dropdown's combobox search input (app/views/category/dropdowns/show.html.erb) — has a custom `role=combobox` flow and stays intentionally distinct. * feat(design-system): add embedded variant to DS::SearchInput, migrate 2 more callsites Adds `variant: :embedded` to `DS::SearchInput` for search inputs that live *inside* another DS panel (DS::Select dropdown, splits category filter, future DS::Popover-hosted filters). No own border / no own focus ring — the parent panel provides the chrome, so adding ring + outline competes with its `focus-within` state. API: DS::SearchInput.new(variant: :embedded, placeholder: "...", data: {...}) The `:standalone` default (from the previous commit) stays unchanged and remains the right choice for top-of-list filter inputs. Migrated: - `app/components/DS/select.html.erb` — the in-dropdown search input for `DS::Select.new(searchable: true)`. Was the only remaining internal raw <input type="search"> markup in the component. - `app/views/splits/_category_select.html.erb` — split-transaction category picker filter. Same shape as DS::Select's search but hand-rolled because the picker isn't a vanilla DS::Select. Three other search patterns stay out of scope (intentionally, per the previous commit): - `form.search_field :search` inside `styled_form_with` — uses form-field CSS, different visual contract. - `app/views/category/dropdowns/show.html.erb` — bespoke `role="combobox"` flow with `aria-expanded` / `aria-autocomplete` semantics that don't belong in this primitive. * fix(review): mobile font + embedded variant focus-within ring - DS::SearchInput: switch text-sm -> text-base sm:text-sm on both variants so the input keeps its 16px base size on mobile. iOS Safari zooms the viewport when a focused input is below 16px, which the unconditional text-sm was triggering on the Settings Preferences currency search and Settings Bank Sync provider search. - DS::Select (searchable variant) + splits/_category_select: add focus-within:ring-4 focus-within:ring-alpha-black-200 (with theme-dark variant) on the wrapper around the embedded search input. The embedded variant intentionally has no own focus ring so it inherits chrome from its parent panel — but the two current parent panels were not providing one, so keyboard focus on the dropdown search box rendered with no visible indicator. Ring matches the .form-field token used across the design system. * fix(merge): repair DS::Select search input merge resolution The previous merge of main left invalid Ruby inside the DS::SearchInput `data:` hash: aria-label="<%= t("helpers.select.search_placeholder") %>" This is an ERB string assignment masquerading as a hash entry — it does not parse and would have raised SyntaxError at render. Two follow-ups: - Drop the `aria-label` entry entirely. `DS::SearchInput` already defaults `aria_label` to `placeholder`, and `placeholder` is set on the call, so the resulting <input> already carries `aria-label="<%= t(...) %>"`. - Restore the `input->select#syncTabindex` action that main #1848 added on the embedded search input. It keeps the roving tabindex on the listbox in sync as filtered results change. Original PR branch had only `list-filter#filter`; reintegrate both with explicit `input->` event prefixes for parity with main. --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
This commit is contained in:
Guillem Arias Fauste
committed by
GitHub
GitHub
parent
655895341d
commit
8e444ff98b
17
app/components/DS/search_input.html.erb
Normal file
17
app/components/DS/search_input.html.erb
Normal file
@@ -0,0 +1,17 @@
|
||||
<%= tag.div class: container_classes do %>
|
||||
<%= tag.input type: "search",
|
||||
name: name,
|
||||
value: value,
|
||||
placeholder: placeholder,
|
||||
"aria-label": aria_label,
|
||||
autocomplete: "off",
|
||||
class: input_classes,
|
||||
**opts %>
|
||||
<% if variant == :embedded %>
|
||||
<%= helpers.icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
|
||||
<% else %>
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<%= helpers.icon("search", class: "text-secondary") %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
78
app/components/DS/search_input.rb
Normal file
78
app/components/DS/search_input.rb
Normal file
@@ -0,0 +1,78 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
# `DS::SearchInput` is the search-field primitive.
|
||||
#
|
||||
# Two variants:
|
||||
#
|
||||
# - `:standalone` (default) — top-of-list filter inputs (Preferences
|
||||
# currency search, Settings/Bank Sync provider filter). Bordered
|
||||
# bg-container surface, icon-on-left, full token-backed focus ring.
|
||||
#
|
||||
# - `:embedded` — search-inside-a-panel (DS::Select internal search,
|
||||
# splits category filter, any future DS::Popover that hosts a filter).
|
||||
# No border / no own focus ring — the parent panel provides the
|
||||
# chrome, so adding ring + outline here would compete with the
|
||||
# parent's focus-within state.
|
||||
#
|
||||
# For `form.search_field :foo` inside a `styled_form_with` block,
|
||||
# keep using the form helper — it routes through `StyledFormBuilder`'s
|
||||
# form-field CSS, which is a different visual contract.
|
||||
class DS::SearchInput < DesignSystemComponent
|
||||
VARIANTS = %i[standalone embedded].freeze
|
||||
|
||||
attr_reader :variant, :name, :placeholder, :value, :aria_label, :extra_classes, :opts
|
||||
|
||||
def initialize(variant: :standalone, name: nil, placeholder: nil, value: nil, aria_label: nil, class: nil, **opts)
|
||||
@variant = variant.to_sym
|
||||
@name = name
|
||||
@placeholder = placeholder
|
||||
@value = value
|
||||
@aria_label = aria_label || placeholder
|
||||
@extra_classes = binding.local_variable_get(:class)
|
||||
@opts = opts
|
||||
|
||||
raise ArgumentError, "Invalid variant: #{@variant}. Must be one of #{VARIANTS.inspect}" unless VARIANTS.include?(@variant)
|
||||
end
|
||||
|
||||
def container_classes
|
||||
class_names("relative", extra_classes)
|
||||
end
|
||||
|
||||
def input_classes
|
||||
# `text-base sm:text-sm` — keep the base font at 16px so iOS Safari
|
||||
# does not zoom the viewport when the input is focused. Shrink to
|
||||
# 14px from `sm:` upward. The previous unconditional `text-sm`
|
||||
# triggered the mobile zoom regression.
|
||||
case variant
|
||||
when :embedded
|
||||
# No own focus ring — the parent panel handles focus chrome via
|
||||
# `focus-within`. `focus:outline-hidden focus:ring-0` neutralizes
|
||||
# the browser default so it doesn't compete with the panel's
|
||||
# state.
|
||||
"bg-container text-primary text-base sm:text-sm placeholder:text-secondary font-normal " \
|
||||
"h-10 pl-10 w-full border-none rounded-lg " \
|
||||
"focus:outline-hidden focus:ring-0"
|
||||
else
|
||||
# `focus-visible:outline-*` matches the focus-ring pattern from
|
||||
# DS::Button (base.css) so every interactive surface in the design
|
||||
# system uses the same ring token. Replaces the broken
|
||||
# `focus:ring-gray-500` from the inline callsites — that utility
|
||||
# had no backing token and rendered invisibly on the bordered
|
||||
# bg-container surface.
|
||||
"block w-full border border-secondary rounded-md py-2.5 pl-10 pr-3 bg-container text-base sm:text-sm " \
|
||||
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 " \
|
||||
"theme-dark:focus-visible:outline-white"
|
||||
end
|
||||
end
|
||||
|
||||
def icon_classes
|
||||
variant == :embedded ? "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2" : "text-secondary"
|
||||
end
|
||||
|
||||
def icon_wrapper_classes
|
||||
# Standalone variant wraps the icon in a positioned div; embedded
|
||||
# places the icon as an absolutely-positioned sibling so the parent
|
||||
# panel can stay in control of vertical alignment.
|
||||
variant == :embedded ? nil : "absolute inset-0 ml-2 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
end
|
||||
end
|
||||
@@ -33,15 +33,15 @@
|
||||
</div>
|
||||
<div class="absolute z-50 p-1.5 w-full min-w-32 rounded-lg shadow-lg shadow-border-xs bg-container mt-1.5 transition duration-150 ease-out -translate-y-1 opacity-0 hidden" data-select-target="menu">
|
||||
<% if searchable %>
|
||||
<div class="relative flex items-center bg-container border border-secondary rounded-lg mb-1">
|
||||
<input type="search"
|
||||
placeholder="<%= t("helpers.select.search_placeholder") %>"
|
||||
autocomplete="off"
|
||||
aria-label="<%= t("helpers.select.search_placeholder") %>"
|
||||
class="bg-container text-primary text-sm placeholder:text-secondary font-normal h-10 pl-10 w-full border-none rounded-lg focus:outline-hidden focus:ring-0"
|
||||
data-list-filter-target="input"
|
||||
data-action="input->list-filter#filter input->select#syncTabindex">
|
||||
<%= helpers.icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
|
||||
<div class="flex items-center bg-container border border-secondary rounded-lg mb-1 focus-within:ring-4 focus-within:ring-alpha-black-200 theme-dark:focus-within:ring-alpha-white-300 transition-shadow">
|
||||
<%= render DS::SearchInput.new(
|
||||
variant: :embedded,
|
||||
placeholder: t("helpers.select.search_placeholder"),
|
||||
data: {
|
||||
list_filter_target: "input",
|
||||
action: "input->list-filter#filter input->select#syncTabindex"
|
||||
}
|
||||
) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div data-list-filter-target="list" data-select-target="content" class="flex flex-col gap-0.5 max-h-64 overflow-auto"
|
||||
|
||||
@@ -127,18 +127,13 @@
|
||||
aria-atomic="true"></p>
|
||||
</div>
|
||||
<div data-controller="list-filter" class="space-y-3">
|
||||
<div class="relative">
|
||||
<input type="search"
|
||||
autocomplete="off"
|
||||
placeholder="<%= t(".currency_search_placeholder") %>"
|
||||
aria-label="<%= t(".currency_search_placeholder") %>"
|
||||
data-list-filter-target="input"
|
||||
data-action="input->list-filter#filter"
|
||||
class="block w-full border border-secondary rounded-md py-2.5 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<%= icon("search", class: "text-secondary") %>
|
||||
</div>
|
||||
</div>
|
||||
<%= render DS::SearchInput.new(
|
||||
placeholder: t(".currency_search_placeholder"),
|
||||
data: {
|
||||
list_filter_target: "input",
|
||||
action: "input->list-filter#filter"
|
||||
}
|
||||
) %>
|
||||
<div data-list-filter-target="list" class="max-h-80 overflow-auto rounded-xl border border-secondary divide-y divide-alpha-black-100 theme-dark:divide-alpha-white-100">
|
||||
<p class="hidden px-4 py-3 text-sm text-secondary" data-list-filter-target="emptyMessage">
|
||||
<%= t(".no_matching_currencies") %>
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
<div class="flex flex-wrap items-center gap-2.5 mt-5 mb-3">
|
||||
<div class="relative flex-1 min-w-[200px]">
|
||||
<input type="search"
|
||||
autocomplete="off"
|
||||
data-providers-filter-target="input"
|
||||
data-action="input->providers-filter#filter"
|
||||
aria-label="<%= t("settings.providers.search_filters.aria_label") %>"
|
||||
placeholder="<%= t("settings.providers.search_filters.placeholder") %>"
|
||||
class="block w-full border border-secondary rounded-md py-2.5 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<%= icon "search", class: "text-secondary" %>
|
||||
</div>
|
||||
</div>
|
||||
<%= render DS::SearchInput.new(
|
||||
class: "flex-1 min-w-[200px]",
|
||||
placeholder: t("settings.providers.search_filters.placeholder"),
|
||||
aria_label: t("settings.providers.search_filters.aria_label"),
|
||||
data: {
|
||||
providers_filter_target: "input",
|
||||
action: "input->providers-filter#filter"
|
||||
}
|
||||
) %>
|
||||
<div class="inline-flex items-center gap-1 p-1 bg-surface-inset rounded-xl">
|
||||
<% %w[all bank crypto investment].each do |kind| %>
|
||||
<% active = kind == "all" %>
|
||||
|
||||
@@ -33,14 +33,15 @@
|
||||
<% end %>
|
||||
</button>
|
||||
<div class="absolute z-50 p-1.5 w-full min-w-48 rounded-lg shadow-lg shadow-border-xs bg-container mt-1.5 transition duration-150 ease-out -translate-y-1 opacity-0 hidden" data-select-target="menu">
|
||||
<div class="relative flex items-center bg-container border border-secondary rounded-lg mb-1">
|
||||
<input type="search"
|
||||
placeholder="<%= t("helpers.select.search_placeholder") %>"
|
||||
autocomplete="off"
|
||||
class="bg-container text-sm placeholder:text-secondary font-normal h-10 pl-10 w-full border-none rounded-lg focus:outline-hidden focus:ring-0"
|
||||
data-list-filter-target="input"
|
||||
data-action="list-filter#filter">
|
||||
<%= icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
|
||||
<div class="flex items-center bg-container border border-secondary rounded-lg mb-1 focus-within:ring-4 focus-within:ring-alpha-black-200 theme-dark:focus-within:ring-alpha-white-300 transition-shadow">
|
||||
<%= render DS::SearchInput.new(
|
||||
variant: :embedded,
|
||||
placeholder: t("helpers.select.search_placeholder"),
|
||||
data: {
|
||||
list_filter_target: "input",
|
||||
action: "list-filter#filter"
|
||||
}
|
||||
) %>
|
||||
</div>
|
||||
<div data-list-filter-target="list" data-select-target="content" class="flex flex-col gap-0.5 max-h-64 overflow-auto" role="listbox" tabindex="-1">
|
||||
<%# Uncategorized option %>
|
||||
|
||||
Reference in New Issue
Block a user