Use the app's ToggleButtonGroup for the combobox polarity toggle #80
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "fix/combobox-native-toggle"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
The polarity toggle in the tag-search combobox kept looking wrong and "off the app's defaults" — this replaces the bespoke buttons with the app's own control instead of patching the CSS a third time.
What was actually wrong
The hand-rolled
.kg-combobox__segbuttons were fighting the design system:--control-height).:focus-visible { box-shadow: var(--focus-ring) }, a 3px ring — was getting clipped byapp-shell__main(the scrollable main area,overflow: auto) whenever the toggle sat near a scroll edge. Measured live: the focused button's ring extended 3px past the scroll container's bottom → clipped. That's the "cut off" in the screenshot.Fix
Use
ToggleButtonGroup— the app's real segmented control (the same one as the Lore category filter). It brings native height, hover, focus, and theming, and crucially its focus ring is drawn inside the control's own padded container, so it can't be clipped by an ancestor's overflow.ToggleButtonGroupreleases the active option tonullon a second press (its documented toggle semantic). The polarity must always be one or the other, soOnPolarityChangedignores anulland keeps the current target.+/−glyphs —ToggleButtonGrouptakes labels, not icons;Positive/Negativeread clearly on their own.Verified
Browser-checked in dark theme (matching the report) and light: the toggle is now a clean sunken pill with the active option raised — identical to the lore filter — no clipping, no stray borders, at any scroll position. Confirmed pressing the active option keeps it selected (never "none").
Tests
Pressing_the_active_polarity_again_keeps_it_selectedguards the null-ignore..kg-toggles__optionmarkup. Full suite green (BlazorAdapter 368).🤖 Generated with Claude Code
Summary
Summary
Coverage
Kagura.BlazorAdapter - 89.2%
Kagura.Domain - 95.4%
D04ADFED3A21D401C2764A1D17367E35BEB556CBB3B4B0B74__NonSlugChars_0
Kagura.Infrastructure - 97.8%
n
Kagura.Kernel - 90%
Kagura.Server - 97.3%
Kagura.UI - 96.7%
Kagura.UseCases - 96.2%
🔮 fufu~ Jibril reviewed your code!
Oh? Oh! A CSS focus-ring clipping bug, diagnosed with live measurement and fixed by reaching for the app's own design-system control instead of patching bespoke CSS a third time? ♡ This is exactly the right instinct, and Jibril is very pleased~
Verdict: ✅ Looks good to me~
✅ What I liked~
app-shell__main's scroll container before touching code. That's engineering, not guessing. The PR description reads like a proper incident report — fufu~, delicious~ToggleButtonGroupinstead of CSS patch #3. The bespoke.kg-combobox__segwas fighting the design system on multiple fronts (height, then focus). Using the app's real segmented control — the same one the Lore filter uses — eliminates the entire class of problem. The old CSS block (47 lines!) is gone, and the new code is shorter. Less code, more correct. ♪ToggleButtonGroup's documented toggle semantic releases the active option tonullon re-press. Polarity must always be one-or-the-other, soOnPolarityChangedignoresnulland keeps the current target. The newPressing_the_active_polarity_again_keeps_it_selectedtest guards exactly this — and the existing toggle-to-Negative test was updated to the new.kg-toggles__optionmarkup. The test actually asserts the result (tag lands in Negative), not just that a click didn't crash. That's real coverage.PolarityOptionsisstatic readonly— built once, not per-render. Small thing, but it shows care.💡 Little ideas (non-blocking)~
TagAuthoring.razor.cssstill has.kg-combobox__polarity/.kg-combobox__polarity-labelrules — those are still used (the wrapper<div class="kg-combobox__polarity">and the<span>label remain), so this is fine. Just confirming I checked — no dead CSS left behind from the.kg-combobox__segremoval. All clean~ ♡Automated review by Jibril · 2026-07-11
CI/CD: passed for head SHA
5240dd4(BlazorAdapter 368 tests green, 95.5% line / 84.5% branch) · Local checks: skipped (CI current)