mirror of
https://github.com/we-promise/sure.git
synced 2026-07-13 21:35:20 +00:00
* feat(ds): one canonical focus ring across primitives (#2136) Replaces the grab-bag of per-primitive focus indicators (neutral ring-alpha-black/white, outline-gray-900/white, faint form-field ring-4) with a single recipe — the #1737 accessibility follow-up. - New --color-focus-ring token: blue-600 (light) / blue-500 (dark), >=4:1 against both surfaces. - Canonical .focus-ring / .focus-ring-within in components.css: a 2px outline + 2px offset on :focus-visible only. Outline (not a box-shadow ring) so the offset gap is transparent on any surface with no layout shift; :focus-visible so it never shows for mouse/touch. - Applied to every focusable DS primitive: Button (had none), Link, Disclosure summary, Tabs nav, MenuItem (replaces the browser-default box), SearchInput, Tooltip trigger, Popover trigger, Select panel (focus-within), Toggle (peer-driven outline-focus-ring). .form-field adopts it via :focus-within, replacing the ~1:1 ring-4. - Dialog close button is a DS::Button icon variant, so it inherits the focus-visible-only ring and keeps no resting border (fixes "stuck ring"). Verified in-browser, light+dark: focus-visible ring on button, input, and full-width menu row — consistent blue 2px+offset, legible on both surfaces. Remaining follow-up: >=44px touch targets (disclosure trigger, composer send); bespoke notification / account-new close buttons that still carry a permanent border. * fix(ds): #2136 interactive-state follow-ups — touch target + close-button chrome - Disclosure default trigger: add min-h-11 (44px) so the standalone disclosure summary clears the touch-target minimum (was px-3 py-2 ~36px). Composer send + the coming-soon icons are already DS::Button icon/md (w-11 h-11). - Notification close buttons (sync_toast, notice): drop the resting border-alpha-black-50 box ("frame shouts, glyph muted"); keep a bg-container + shadow-xs chip so the corner control stays visible over the page, and brighten the muted glyph on hover (text-subdued -> hover:text-primary). * refactor(ds): focus ring -> neutral hugging box-shadow (was blue outline) Per design feedback: the blue 2px outline + 2px offset read as a loud, detached frame on the otherwise-neutral UI. Switch the canonical .focus-ring to a soft box-shadow ring that hugs the control (follows border-radius, no gap), in the theme-aware neutral focus-ring token (alpha-black/white-400). Transparent outline kept as a forced-colors fallback; toggle peer-driver switched from outline-* to ring-* to match. Still one token, :focus-visible only. Strength is tunable (currently subtle ~1.5:1). * fix(ds): focus ring vanished on shadowed controls — outline, not box-shadow The neutral box-shadow ring lived in the components layer, so any utility-layer shadow-* (or .form-field's focus-within:shadow-none) on the same element overrode it and the ring silently disappeared on shadowed buttons/inputs. Draw the same subtle neutral ring with a hugging `outline` (outline-offset: 0) instead — a separate property with no box-shadow conflict, and it doubles as the forced-colors indicator. Toggle peer-driver switched ring-* -> outline-* to match. Look is unchanged (neutral, hugging, subtle); it just no longer vanishes. * fix(a11y): enlarge sync-toast close-button touch target (p-0.5 -> p-1.5) The hover-revealed close button had ~2px padding around a 20px icon (~24px total), at the WCAG 2.5.8 AAA boundary. p-1.5 brings the interactive area to ~32px. Addresses CodeRabbit review on #2140. * fix(ds): keep form-field's resting halo; stop the outline color flash Two testing findings: - .form-field reverts to its original always-on soft ring (focus-within ring-4 at low alpha, theme-aware) instead of adopting the keyboard-only outline. It's a resting decoration, not a focus indicator, and the lower-opacity halo was the better look. The canonical block's comment documents the deliberate opt-out. - .focus-ring/.focus-ring-within now carry a base transparent 2px outline so consumers with transition-all (form-field had it) animate transparent -> token on focus instead of passing through currentColor, which flashed as a black border appearing and then fading out. * feat(ds): focus-ring token clears WCAG 3:1 non-text contrast alpha-black-400 (20%) measured ~1.6:1 against white — visible but below the AA bar for focus indicators. Bump to the 700 stop (50%): ~3.95:1 on light containers, ~4.6:1 on dark. Recipe unchanged; one token edit via tokens:build. * fix(ds): ring the hand-rolled privacy toggle too The header pair showed two different focus treatments: panel-right (a DS::Button) got the new token ring while the hand-rolled privacy toggle next to it fell back to the browser-default ring — the sweep covered DS primitives but not bespoke buttons. Both privacy toggles (mobile + desktop) now carry .focus-ring. Also documents the transition interplay on the focused-state rule: consumers with transition-colors fade the ring in over 150ms because Tailwind v4's color transition list includes outline-color. Verified settled value at the intended 50% alpha via Playwright. * fix(ds): ring the sidebar and settings nav links The reshoot caught both nav species falling back to the browser's blue default ring — main sidebar items and settings nav items are bespoke link_to markup the primitive sweep missed, and they're the primary keyboard path in the app. Both adopt .focus-ring (main nav adds rounded-lg so the outline follows a shape). * fix(ds): retire the legacy base-layer button ring for the canonical outline The @layer base button rule still painted a ring-2 ring-offset-2 box-shadow on :focus-visible. Box-shadow and outline are independent properties, so .focus-ring (an outline) could never clear it and every button-tag primitive double-painted both indicators on keyboard focus. Apply the canonical recipe to the base button rule itself: every <button> now gets the transparent resting outline + focus-ring token on :focus-visible by default. Two bespoke buttons suppressed the outline with focus:outline-none and relied on the base ring for their keyboard indicator (category dropdown rows, the sign-up password toggle). Drop the suppression so they pick up the canonical outline — :focus-visible keeps it keyboard-only, which is what the suppression was protecting against anyway. * fix(ds): segmented control adopts the canonical focus recipe The segment rule inlined its own focus-visible outline (offset 2, alpha-400 colors) with a comment noting it was temporary until the canonical token landed — this branch is that token. Drop the inlined utilities: button segments get the outline from the base button rule, and link segments now carry .focus-ring.
83 lines
3.2 KiB
Ruby
83 lines
3.2 KiB
Ruby
class DS::Disclosure < DesignSystemComponent
|
|
renders_one :summary_content
|
|
|
|
VARIANTS = %i[default card card_inset inline].freeze
|
|
|
|
attr_reader :title, :align, :open, :variant, :summary_class_override, :opts
|
|
|
|
# `:default` — bg-surface summary, no chrome on the `<details>`. Use
|
|
# for inline expanders that sit inside a parent card (the summary
|
|
# itself reads as the surface).
|
|
#
|
|
# `:card` — `<details>` itself becomes a `bg-container shadow-border-xs
|
|
# rounded-xl` card; the summary inherits the container (no own bg).
|
|
# Use for provider-item rows (binance, lunchflow, plaid, etc.) where
|
|
# each card is the surface and the summary is custom rich content.
|
|
#
|
|
# `:card_inset` — `<details>` is `bg-surface-inset rounded-xl` (no
|
|
# shadow). Use for inset sub-panels inside a parent card surface
|
|
# (e.g. the IBKR flex-query "report details" panel embedded inside
|
|
# the IBKR settings flow). Same summary contract as `:card`.
|
|
#
|
|
# `:inline` — no surface, no padding, no shadow. The disclosure reads
|
|
# as a plain text-link-style toggle (e.g. "Alternative auth" inside
|
|
# a form, or a "Manage connections" lazy-load opener). Caller provides
|
|
# the summary text (and optional chevron) via the `summary_content`
|
|
# slot.
|
|
#
|
|
# In card / inline variants, callers should pass their own
|
|
# `summary_content` slot; the built-in title rendering assumes the
|
|
# `:default` shape.
|
|
def initialize(title: nil, align: "right", open: false, variant: :default, summary_class: nil, **opts)
|
|
@title = title
|
|
@align = align.to_sym
|
|
@open = open
|
|
@variant = variant&.to_sym
|
|
@summary_class_override = summary_class
|
|
@opts = opts
|
|
|
|
raise ArgumentError, "Invalid variant: #{@variant.inspect}. Must be one of #{VARIANTS.inspect}" unless VARIANTS.include?(@variant)
|
|
end
|
|
|
|
def details_classes
|
|
base = case variant
|
|
when :card
|
|
"group bg-container p-4 shadow-border-xs rounded-xl"
|
|
when :card_inset
|
|
"group bg-surface-inset rounded-xl p-4"
|
|
else
|
|
"group"
|
|
end
|
|
|
|
class_names(base, opts[:class])
|
|
end
|
|
|
|
# `opts` minus the `:class` key, since `details_classes` merges that
|
|
# separately to avoid duplicate-keyword collisions when forwarding to
|
|
# `tag.details`.
|
|
def details_opts
|
|
opts.except(:class)
|
|
end
|
|
|
|
def summary_classes
|
|
return summary_class_override if summary_class_override.present?
|
|
|
|
case variant
|
|
when :card, :card_inset
|
|
# Card variants: no bg on summary — the parent details *is* the
|
|
# surface. Keep cursor + focus-visible ring + flex baseline.
|
|
# Ring token matches `settings/provider_card.html.erb` (the
|
|
# established focus pattern on container cards).
|
|
"list-none cursor-pointer focus-ring rounded-xl"
|
|
when :inline
|
|
# Inline variant: no surface, no padding — the summary reads as
|
|
# plain text-link copy. Caller markup (text + optional chevron)
|
|
# provides the visual. Keep cursor + focus-visible ring + matching
|
|
# alpha-black-300 token used by the card variants for consistency.
|
|
"list-none cursor-pointer focus-ring rounded-sm"
|
|
else
|
|
"px-3 py-2 rounded-xl cursor-pointer flex items-center justify-between bg-surface focus-ring min-h-11"
|
|
end
|
|
end
|
|
end
|