Repository navigation
fix(plugin-charts): legend swatch colour via custom property, not inline backgroundColor (#10021) - #10311
Conversation
…ine backgroundColor Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01D486C1axmXnrkJMNUfz2eb
|
changeset-claim-re-read
|
✅ Console Performance Budget
The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it. 📦 Bundle Size Report
Size Limits
|
Contract reviewServed-tier: 37/37 Adopted from an isolated at-tier reviewer by ① Derived judgments
② Semver level
③ Boundary flags
Implemented-by: VERDICT: PASS Generated by Claude Code |
✅ Console Performance Budget
The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it. 📦 Bundle Size Report
Size Limits
|
Fixes #10021
Clause-②: no
What
ChartLegendContentinpackages/plugin-charts/src/ChartContainerImpl.tsxpainted each legend swatch withstyle={{ backgroundColor: item.color }}, the colour-bearing property AGENTS.md's styling carve-out names as forbidden ("Never a colour-bearing property (backgroundColor,color) written inline"). The swatch now uses the shape the tooltip indicator in the same file already uses: a staticbg-(--color-bg)utility in the class string, and the author-declared series colour published as the custom property--color-bg. There is only one spelling. No fallback, no second path.The rendered colour is the same. This PR does not claim dark mode was broken before; that was not measured. It only moves the colour onto the mechanism the carve-out requires.
In-file census: this was the only inline colour-bearing property in
ChartContainerImpl.tsx. The container'sstylemerge (minHeight/minWidth) is layout, andChartStyleemits astyleelement, not an inline style. Nothing outside this file was looked at, by design.Tests
New
packages/plugin-charts/src/ChartContainerImpl.legendSwatchColour.test.tsx(2 cases):backgroundColororcolor;--color-bgcarries the author colour, and the swatch has thebg-(--color-bg)class.Reverse control (after commit
b63440f, viaablation-replace.mjs): the fix was swapped back to the oldbackgroundColor: item.colorshape. The anchor hit 1 time and changed 1 -> 0, and the blob changed9fbd59c6->44659e0a. Both cases went red (expected '#ff0000' to be ''andexpected '' to be '#ff0000'). The restore was checked on disk: the blob matches HEAD andgit diff HEADis empty.Run at head
b63440f, under the shared verify lock:pnpm --filter '@object-ui/plugin-charts^...' build(dependency closure): exit 0pnpm --filter @object-ui/plugin-charts run type-check: exit 0.tsconfig.test.json --listFilesincludes the new test.pnpm --filter @object-ui/plugin-charts run lint: 0 errors. The touched files have the same 6no-explicit-anywarnings as on main, so this adds no new warnings. The new test file has 0 warnings.pnpm --filter @object-ui/plugin-charts run test: 66 files, 595 tests passed.check:vi-mock-specifiers,check:vi-mock-inherit,check:vi-mock-override-shape,check:test-path-roots,check:control-bytes,check:changeset-claims,check:pending-changeset-literals,check:new-line-citations,check:unreferenced-sources: all exit 0.Acceptance notes
check:changeset-claimsflags the pending.changeset/7397-remove-duplicate-chart-primitives.mdbecause it names this file. I re-read its paragraph and it is still true: it describes label resolution and the swatch rendering unconditionally, and both are unchanged here..changeset/10021-legend-swatch-custom-property.md(patch,@object-ui/plugin-charts).https://claude.ai/code/session_01D486C1axmXnrkJMNUfz2eb
Generated by Claude Code