Skip to content

The icon-sizes catalog fixture authors size as a t-shirt string against a declared pixel number, so it renders four identical icons #7565

Description

@os-project-manager

Found while burning the BARE_SPREAD_ON_SVG group of #5632 (PR #7564). Out of that card's scope — it is authored metadata, not a renderer defect — so recorded here, unassigned and ungraded.

What is authored

examples/schema-catalog/src/schemas/components-basic-icon/icon-sizes.json is, in full:

{"type": "flex", "gap": 4, "align": "center", "children": [
  {"type": "icon", "icon": "star", "size": "sm"},
  {"type": "icon", "icon": "star", "size": "md"},
  {"type": "icon", "icon": "star", "size": "lg"},
  {"type": "icon", "icon": "star", "size": "xl"}
]}

But IconSchema.size is declared size?: numberpixels, @default 24 (packages/types/src/layout.ts). The t-shirt enum belongs to SpinnerSchema.size, which is a genuine 'sm' | 'md' | 'lg' | 'xl'. The fixture appears to have borrowed the sibling's vocabulary.

Measured

IconRenderer builds sizeStyle = { width: schema.size, height: schema.size }, so an authored "sm" becomes style.width = 'sm' — an invalid CSS value the CSSOM drops. Rendered through the real SchemaRenderer on PR #7564's branch:

size="sm" -> width=24 height=24 style=null
size="md" -> width=24 height=24 style=null
size="lg" -> width=24 height=24 style=null
size="xl" -> width=24 height=24 style=null
size=24   -> width=24 height=24 style="width: 24px; height: 24px;"
size=48   -> width=24 height=24 style="width: 48px; height: 48px;"

So all four icons in a fixture named icon-sizes render at exactly the same size, and the example demonstrates nothing. The numeric rows are there to show the declared key does work.

Not caused by, and not worsened by, PR #7564

Worth stating precisely, because the branch is where this was found. Before that PR the bare spread also handed size to lucide's numeric size prop, so these nodes carried width="sm" height="sm" — invalid SVG dimensions, and the icons still all rendered at the fallback size. After it, the attributes are a valid 24. The fixture is equally broken either way; the PR makes the DOM valid without making the example correct. No row of the #5632 ledger is involved: width/height are legitimate on an SVG host, so no leak gate ever reported this in either direction.

Why it is worth a card rather than a drive-by edit

Two things could be wrong and they have different fixes:

  1. The fixture is simply off-spec and should author pixels (16, 24, 32, 48). Cheapest, and it makes the example show four sizes.
  2. IconSchema.size should accept the t-shirt scale the rest of the vocabulary uses, in which case the authored metadata is right and the contract is the thing that is wrong. SpinnerSchema already uses that scale for the same concept on the same kind of host, which is the argument for it.

That is a contract question, so it is not mine to answer inside an unrelated slice. Whichever way it goes, an off-spec size should be refused at authoring time rather than silently producing an invalid inline style — the same "declared = enforced" direction as #5631's resolution.

A wider sweep is probably worth doing with it: this was found by scanning JSON for icon/spinner nodes carrying size/color, and the same scan is what showed every authored icon color in the catalog is a Tailwind class. Other numeric-vs-enum key collisions of this shape may exist elsewhere in the catalog.

References

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

domain:devxobjectui devx stream: fix lands on .github/, scripts/ or release pipeline — devx lane cross-repofindingpm:dispatchedpriority:p3

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions