mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
20844923e6
Migrates the hand-rolled "Pending" / "Review recommended" / "Potential duplicate" / "Split" badges across the transaction views to the extended DS::Pill primitive from #1902. **Visual contract for badge mode** In #1902 the badge mode (`marker: false`) used `rounded-md` (chip shape) because the marker mode does. But every existing pill / status badge in the codebase uses `rounded-full` — see `settings/providers/_status_pill.html.erb`, `settings/providers/_maturity_badge.html.erb`, and the inline transaction badges this PR is migrating. To keep the visual contract consistent, this PR shifts `DS::Pill`'s badge mode to `rounded-full` (marker mode stays `rounded-md`, unchanged from #1829). The shape distinction now reads: markers are tags, badges are pills. **Callsites migrated** (5): - `app/views/transactions/_transaction.html.erb` — Pending, Review-recommended, Possible-duplicate, Split badges - `app/views/transactions/_header.html.erb` — Pending badge - `app/views/transactions/_split_parent_row.html.erb` — Split badge **Tone mapping** | Badge | Tone | Notes | |---|---|---| | Pending | `:neutral` | unchanged copy/icon, gains subtle DS-controlled bg | | Review recommended | `:neutral` | matches existing `bg-surface-inset` look | | Possible duplicate | `:warning` | DS semantic alias for the existing `text-warning` | | Split | `:neutral` | matches existing `bg-surface-inset` look | **Deferred to follow-up PRs** - `app/views/transactions/_transfer_match.html.erb` — uses two responsive-visibility variants (`hidden lg:inline-flex` for long copy, `inline-flex lg:hidden` for short). DS::Pill currently has no `class:` arg for caller-controlled wrapper classes; deferring until that lands. - `app/views/transactions/searches/filters/_badge.html.erb` — has a close button alongside the label (`button_to clear_filter_*`) and uses `rounded-3xl p-1.5` instead of a true pill. Closer to a removable filter chip — better fit for a separate `DS::FilterChip` primitive than for `DS::Pill`. Refs #1751.
66 lines
2.6 KiB
Ruby
66 lines
2.6 KiB
Ruby
require "test_helper"
|
|
|
|
class DS::PillTest < ViewComponent::TestCase
|
|
test "marker mode (default) renders uppercase sub-12px chrome with rounded-md" do
|
|
render_inline(DS::Pill.new(label: "Beta", tone: :violet))
|
|
|
|
pill = page.find("span", text: "Beta")
|
|
assert_includes pill[:class], "uppercase"
|
|
# Marker keeps sub-12px text via arbitrary value (intentional — see component docs).
|
|
assert_match(/text-\[1[01]px\]/, pill[:class])
|
|
# Marker uses rounded-md (chip shape).
|
|
assert_includes pill[:class], "rounded-md"
|
|
refute_includes pill[:class], "rounded-full"
|
|
end
|
|
|
|
test "marker: false renders normal-case DS-scale chrome with rounded-full" do
|
|
render_inline(DS::Pill.new(label: "Active", tone: :success, marker: false))
|
|
|
|
pill = page.find("span", text: "Active")
|
|
refute_includes pill[:class], "uppercase"
|
|
# Badge mode snaps to text-xs / text-sm — no sub-12px arbitrary values.
|
|
assert_match(/text-(xs|sm)/, pill[:class])
|
|
refute_match(/text-\[1[01]px\]/, pill[:class])
|
|
# Badge uses rounded-full to match the existing _status_pill / _maturity_badge convention.
|
|
assert_includes pill[:class], "rounded-full"
|
|
refute_includes pill[:class], "rounded-md"
|
|
end
|
|
|
|
test "semantic tone aliases resolve to visual palette tones" do
|
|
{
|
|
success: :green,
|
|
warning: :amber,
|
|
error: :red,
|
|
destructive: :red,
|
|
info: :indigo,
|
|
neutral: :gray
|
|
}.each do |alias_name, expected_visual|
|
|
pill = DS::Pill.new(label: "x", tone: alias_name)
|
|
assert_equal expected_visual, pill.tone, "Expected #{alias_name} → #{expected_visual}, got #{pill.tone}"
|
|
end
|
|
end
|
|
|
|
test "unknown tone falls back to violet" do
|
|
pill = DS::Pill.new(label: "x", tone: :nonexistent)
|
|
assert_equal :violet, pill.tone
|
|
end
|
|
|
|
test "red tone palette resolves to red-* tokens" do
|
|
pill = DS::Pill.new(label: "Failed", tone: :error)
|
|
assert_includes pill.palette[:dot], "color-red-500"
|
|
assert_includes pill.palette[:bg], "color-red-50"
|
|
end
|
|
|
|
test "icon option renders glyph in place of dot" do
|
|
render_inline(DS::Pill.new(label: "Syncing", tone: :info, marker: false, icon: "loader"))
|
|
|
|
# Lucide icon helper renders the inline SVG; verifying we see at least one <svg>
|
|
# is enough — the icon helper is covered by its own tests.
|
|
assert_selector "svg"
|
|
# And the dot is suppressed when an icon takes its place. The dot is an
|
|
# `inline-block` span (parent pill is `inline-flex`), so target it by
|
|
# `inline-block.rounded-full` to avoid matching the parent pill.
|
|
assert_no_selector "span.inline-block.rounded-full"
|
|
end
|
|
end
|