Repository navigation
fix(buttons): render leading icon slot when checkmark is not active - #153
Conversation
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://fix-button-icon-slot-material.treeder.workers.dev (commit e58f63f)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
There was a problem hiding this comment.
📋 Review Summary
This pull request fixes a defect in the button component where leading icons were inadvertently hidden when no checkmark was shown. Because Lit's nothing sentinel is a truthy Symbol, the expression checkmark || icon was previously resolving to nothing rather than falling back to the icon slot. Changing the unselected checkmark value to null restores the expected fallback behaviour for leading icons.
🔍 General Feedback
- Great catch on identifying this bug. In Lit,
nothingis aSymbol(Symbol.for('lit-nothing')), which evaluates to truthy under JavaScript boolean coercion. Consequently,nothing || iconalways returnednothing, suppressing standard leading icons on non-selected buttons. - The fix correctly allows
null || iconto fall back to the standard icon slot. Consider adding a unit test covering button icon rendering whencheckmarkis disabled or unselected to safeguard against future regressions.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 22,806 |
| Input Tokens (cached) | 427,664 (⚡ 94.9% cached) |
| Thinking / Reasoning Tokens | 8,023 |
| Output Tokens | 396 |
| Total Session Tokens | 458,889 |
| Cost (uncached input) | $0.0171 |
| Cost (cached input) | $0.0321 |
| Cost (thinking / reasoning) | $0.0301 |
| Cost (response output) | $0.0015 |
| Estimated Total Cost | $0.0808 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Summary
Button.renderContent(),checkmarkdefaulted to Lit'snothing(Symbol.for('lit-nothing')), which is truthy in JavaScript (Boolean(nothing) === true).checkmark || iconevaluatednothing || icon→nothingwheneverthis.checkmark && this.selectedwas false, preventing<slot name="icon">from ever rendering for leading icons.checkmarktonullsocheckmark || iconfalls back toiconwhen the checkmark is not shown.Verification
<md-button><md-icon slot="icon">...</md-icon>Label</md-button>renders<slot name="icon">in shadow DOM and aligns leading icons properly.