← All proposals

SpinnerSequence

A new component, SpinnerSequence, that composes the existing PDS v2 Spinner and Illustration (the Spinner is not changed).

Net-new componentOpen in Storybook

proposals/SpinnerSequence/figma.json27 lines · View on GitHub
{
	"fileKey": "AMGWJbraJoi2PKWnxo29Ah",
	"pageId": "615:43",
	"pageName": "Spinner Sequence",
	"pageUrl": "https://www.figma.com/design/AMGWJbraJoi2PKWnxo29Ah/PDS-Proposals?node-id=615-43",
	"sent": "2026-11-03",
	"frames": {
		"component-proposals-spinner-sequence--default": "616:2",
		"component-proposals-spinner-sequence--own-timing-and-steps": "617:2",
		"component-proposals-spinner-sequence--all-sizes": "618:2",
		"component-proposals-spinner-sequence--controlled-by-the-work": "619:2",
		"component-proposals-spinner-sequence--other-illustration": "620:2"
	},
	"note": "The five frames (2026-11-03) are Storybook captures, light only. The Default, Own Timing and Controlled frames show the first step; All Sizes and Other Illustration show the final state. The ring arc in the frames that show it was rebuilt by hand (Figma read the dashed arc as four dashes).",
	"component": {
		"componentSetId": "625:2582",
		"componentSetName": "Spinner Sequence",
		"variantIds": {
			"Loading": "625:56",
			"Complete": "625:174"
		},
		"exampleFrameId": "627:70",
		"built": "2026-11-03",
		"note": "A real Figma component (2 variants: State Loading/Complete). Loading holds the PDS library Spinner (Color Default, Size 5XL) and Complete holds the library Illustrations instance (TASK, 64px, width and height bound to primitive/spacing/5XL), both exposed instances, so Color and Size of the Spinner and which Illustration show on every instance. Text properties: Label and Final label. The gap is bound to primitive/spacing/L and the text to semantic/foreground/default, with the first text layer copied from the Storybook capture (Inter Tight cannot be loaded here), so its font and size are bound variables. The component set and the example (three instances over a background, with copy/s captions) sit on the page, not in a section, and the example is not grouped: Inter Tight blocks moving them. The example's second step shows the first step's text (a text property on a font the tool cannot load could not be set); change it in Figma."
	}
}