The new stretch prop essentially applies inline-size: 100%. This is most useful in narrow layouts (e.g. appui widgets) and mobile views.
See similar examples from other design systems: 1, 2, 3
Implementation notes: This is implemented using a private inline CSS variable. There is some global CSS applied on every element, where this CSS variable's value is used to convert it to inline-size. Benefits:
The consumer can still specify a custom width in their CSS and it will be respected.
There is no need to add a data attribute or anything like that to the button SCSS.
Other components can add similar props in the future with no extra effort.
Changes
The new
stretchprop essentially appliesinline-size: 100%. This is most useful in narrow layouts (e.g. appui widgets) and mobile views.See similar examples from other design systems: 1, 2, 3
Implementation notes: This is implemented using a private inline CSS variable. There is some global CSS applied on every element, where this CSS variable's value is used to convert it to
inline-size. Benefits:widthin their CSS and it will be respected.Testing
Added story + visual test + unit test.
Docs
Added jsdocs + documentation section + changeset.