mirror of
https://github.com/we-promise/sure.git
synced 2026-05-28 15:04:57 +00:00
09058b0cc6
* feat(design-system): extend DS::Pill with badge mode + semantic tones (#1751) Adds two extensions to the existing `DS::Pill` (originally landed as a stage marker primitive in #1829) so it can also serve as the shared status / category badge across the app — the use case tracked by #1751. **Badge mode (`marker: false`)** The original `DS::Pill` was intentionally sub-12px (text-[10px] / text-[11px]) + uppercase + tracking-wide so it reads as a marker (`Beta`, `Canary`, `NEW`), not a label. That shape is wrong for status badges where the surrounding context is regular UI copy and the pill needs to feel like a chip (`Pending`, `Active`, `Past due`, `Failed`). The new `marker: false` flag drops the uppercase + arbitrary sub-12px text and snaps the chrome to the DS text scale: - `marker: false, size: :sm` → `text-xs` (12px), normal case - `marker: false, size: :md` → `text-sm` (14px), normal case - `marker: true` (default) → existing #1829 behavior, unchanged **Semantic tone aliases** Status badges read more naturally with semantic tone names than with the underlying palette colors: | Alias | Resolves to | |---|---| | `:success` | `:green` | | `:warning` | `:amber` | | `:error` / `:destructive` | `:red` (new tone, added here) | | `:info` | `:indigo` | | `:neutral` | `:gray` | Visual-name tones (`:violet`, `:indigo`, `:fuchsia`, `:amber`, `:green`, `:gray`, `:red`) still work as before — semantic aliases resolve through `SEMANTIC_TONE_ALIASES` at component init time, so the callsite can pick whichever name reads better. Unknown tones still fall back to `:violet` (existing behavior). **Red palette** Adds the `:red` tone (palette already present in `design/tokens/sure.tokens.json` — `red-50/100/200/500/700/tint-10`). Needed for `:error` / `:destructive` status badges. **Icon slot** Adds an `icon:` option (already documented in the component's doc-comment as planned). When set, the Lucide glyph replaces the colored dot inside the pill — useful for status badges that read better with a glyph (`circle-check`, `triangle-alert`, `loader`, etc.) than the generic dot. **Scope** API + tests + Lookbook preview only. No callsite migrations in this PR — that's the next slice of #1751, done as separate per-bucket PRs (transaction badges, provider badges, misc) to keep diffs small. DS::Pill currently has no in-app callsites (#1829 shipped the primitive ahead of consumers), so this is a pure-additive change. Existing API is fully backwards-compatible — `marker:` defaults to `true`, so without that flag the pill renders exactly as it does today. * fix(test): use assert_no_selector for dot-suppression assertion `refute_selector ..., count: 1` only fails when there are exactly 1 matches — it would silently pass for 0 OR 2+. The intent is "no dots should render when an icon is set"; `assert_no_selector` strictly asserts zero matches. Flagged by coderabbit on #1902.
60 lines
2.2 KiB
Ruby
60 lines
2.2 KiB
Ruby
require "test_helper"
|
|
|
|
class DS::PillTest < ViewComponent::TestCase
|
|
test "marker mode (default) renders uppercase sub-12px chrome" 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])
|
|
end
|
|
|
|
test "marker: false renders normal-case DS-scale chrome" 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])
|
|
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. `refute_selector
|
|
# ..., count: N` only fails when there are exactly N matches, so use
|
|
# `assert_no_selector` to strictly assert zero dots.
|
|
assert_no_selector "span.rounded-full[style*='background-color']"
|
|
end
|
|
end
|