Files
sure/test/components/previews/pill_component_preview.rb
Guillem Arias Fauste d22ffe5994 fix(ds-pill): default show_dot per mode (badges clean, markers keep dot) (#2107)
Closes #2001.

DS::Pill defaulted show_dot: true for both modes, so every status/category
badge got a leading dot by default — redundant with the pill shape + tone +
label already carrying the signal, and noisy in dense lists. More than half
the marker:false callsites were already passing show_dot: false to fight it.

The default is now mode-aware: marker: true keeps the dot (stage markers),
marker: false (badges) is dot-less. An explicit show_dot: still wins.

Only one in-tree callsite relied on the old default without an icon and wants
the dot: settings/providers/_status_pill (live connection state) — pinned with
show_dot: true. The enable_banking "Beta" badge loses its dot, which is the
desired outcome (ref #1997). Icon-bearing transaction badges are unaffected
(an icon already suppresses the dot).

Left the now-redundant show_dot: false overrides in place to avoid churn and
conflicts with in-flight pill-migration branches; they're harmless (explicit
false == new default).

Adds tests pinning the per-mode default resolution; updates the Lookbook
preview to show the opt-in dot vs the clean default.
2026-06-03 00:01:38 +02:00

73 lines
2.2 KiB
Ruby

class PillComponentPreview < ViewComponent::Preview
# @param tone select ["violet", "indigo", "fuchsia", "amber", "green", "gray", "red", "success", "warning", "error", "info", "neutral"]
# @param style select ["soft", "filled", "outline"]
# @param size select ["sm", "md"]
# @param label text
# @param show_dot toggle
# @param dot_only toggle
# @param marker toggle
# @param icon text
def default(tone: "violet", style: "soft", size: "sm", label: "Preview", show_dot: true, dot_only: false, marker: true, icon: nil)
render DS::Pill.new(
label: label,
tone: tone.to_sym,
style: style.to_sym,
size: size.to_sym,
show_dot: show_dot,
dot_only: dot_only,
marker: marker,
icon: icon.presence
)
end
# @!group Stage markers (marker: true — original #1829 shape)
def canary
render DS::Pill.new(label: "Canary", tone: :fuchsia)
end
def beta
render DS::Pill.new(label: "Beta", tone: :violet)
end
def new_marker
render DS::Pill.new(label: "New", tone: :indigo)
end
def dot_only_collapsed_sidebar
render DS::Pill.new(dot_only: true, tone: :violet)
end
# @!endgroup
# @!group Status badges (marker: false, semantic tones)
# Badge mode is dot-less by default — tone + label carry the signal. Opt the
# dot back in with show_dot: true only where it's genuinely additive (live /
# temporal status, or a single sparse pill). status_active below shows the
# opt-in; status_pending / status_archived show the clean default.
def status_active
render DS::Pill.new(label: "Active", tone: :success, marker: false, show_dot: true)
end
def status_pending
render DS::Pill.new(label: "Pending", tone: :warning, marker: false)
end
def status_failed
render DS::Pill.new(label: "Failed", tone: :error, marker: false, icon: "circle-alert")
end
def status_archived
render DS::Pill.new(label: "Archived", tone: :neutral, marker: false)
end
def status_info
render DS::Pill.new(label: "Syncing", tone: :info, marker: false, icon: "loader")
end
# @!endgroup
# @!group Sizes (md)
def status_md
render DS::Pill.new(label: "Past due", tone: :error, marker: false, size: :md)
end
# @!endgroup
end