Problem
When a nested instance is placed inside a component and its layout is unchanged from the component it instantiates, the generated spec repeats those layout values anyway. A Toolbar that places a navigation action emits width and height on that instance even though the action component's own root already defines both, unchanged.
This makes specs longer than they need to be and misrepresents intent: a repeated value reads as a deliberate override when nothing was overridden. It also multiplies maintenance — a carousel that places nine dots restates the same size nine times, and a change to the dot would need edits in every host.
A catalog audit found 132 such declarations across 31 components.
Solution
A layout property on a nested instance is omitted when it is identical to the same property on the specific configured variant the instance points at. The value then conveys from that component's own default element styling, as it already does for every other inherited characteristic. Values that genuinely differ are still emitted.
The properties compared:
| Property |
Suppressed when equal |
width |
yes |
height |
yes |
minWidth |
yes |
minHeight |
yes |
maxWidth |
yes |
maxHeight |
yes |
layoutSizingHorizontal |
yes |
layoutSizingVertical |
yes |
All sizing values are compared, including FILL — if the instance and its component agree, the value is redundant regardless of which mode it names.
Acceptance criteria
Problems
- Redundant values read as intentional overrides
- Repetition scales with sibling count — nine carousel dots restate one decision nine times
- Six components restate a shared sheet's minimum height, so one change means seven edits
- Text-bearing subcomponents restate vertical hugging that a parent cannot override anyway
Impacted code
specs-from-figma: src/Component/Elements/Primitives/InstanceElement.ts, src/Component/Styles/
Text fixtures
- Toolbar — navigation action restating a square size
- Paging Carousel Dots — the same size repeated across nine dots
- Text Input — an end action that genuinely differs and must be retained
Implementation details are tracked internally.
Problem
When a nested instance is placed inside a component and its layout is unchanged from the component it instantiates, the generated spec repeats those layout values anyway. A Toolbar that places a navigation action emits
widthandheighton that instance even though the action component's own root already defines both, unchanged.This makes specs longer than they need to be and misrepresents intent: a repeated value reads as a deliberate override when nothing was overridden. It also multiplies maintenance — a carousel that places nine dots restates the same size nine times, and a change to the dot would need edits in every host.
A catalog audit found 132 such declarations across 31 components.
Solution
A layout property on a nested instance is omitted when it is identical to the same property on the specific configured variant the instance points at. The value then conveys from that component's own
defaultelement styling, as it already does for every other inherited characteristic. Values that genuinely differ are still emitted.The properties compared:
widthheightminWidthminHeightmaxWidthmaxHeightlayoutSizingHorizontallayoutSizingVerticalAll sizing values are compared, including
FILL— if the instance and its component agree, the value is redundant regardless of which mode it names.Acceptance criteria
FILLsizing is compared on the same terms asFIXEDandHUGProblems
Impacted code
specs-from-figma:src/Component/Elements/Primitives/InstanceElement.ts,src/Component/Styles/Text fixtures