WordPress · mirka · Aug 17, 2023 · Aug 16, 2023
@@ -622,7 +622,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		const meta: ComponentMeta< typeof MyComponent > = {
 			parameters: {
 				controls: { expanded: true },
-				docs: { source: { state: 'open' } },
+				docs: { canvas: { sourceState: 'shown' } },
 			},
 		};
 		```

@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof AnglePickerControl > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

@@ -14,7 +14,7 @@ const meta: ComponentMeta< typeof Animate > = {
 	component: Animate,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -19,7 +19,7 @@ const meta: ComponentMeta< typeof BaseControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof BorderBoxControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof BorderControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -17,7 +17,7 @@ const meta: ComponentMeta< typeof ButtonGroup > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -39,7 +39,7 @@ const meta: Meta< typeof Button > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof Card > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof CheckboxControl > = {
 			expanded: true,
 			exclude: [ 'heading' ],
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -27,7 +27,10 @@ const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open', excludeDecorators: true } },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
 	},
 	decorators: [
 		// Share current color state between main component, `actions` and `options`

@@ -20,7 +20,7 @@ const meta: ComponentMeta< typeof ColorIndicator > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof ColorPalette > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof ColorPicker > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof ComboboxControl > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -32,7 +32,7 @@ const meta = {
 		children: 'Would you like to privately publish the post now?',
 	},
 	parameters: {
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof CustomGradientPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof DatePicker > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof TimePicker > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -31,7 +31,7 @@ export default {
 		},
 		parameters: {
 			controls: { expanded: true },
-			docs: { source: { state: 'open' } },
+			docs: { canvas: { sourceState: 'shown' } },
 		},
 	},
 } as ComponentMeta< typeof DimensionControl >;

@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof Disabled > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 

@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof Divider > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -13,7 +13,7 @@ const meta: ComponentMeta< typeof DropZone > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -46,7 +46,10 @@ const meta: Meta< typeof DropdownMenu > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open', excludeDecorators: true } },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
 	},
 	decorators: [
 		// Layout wrapper

@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 	component: DropdownMenu,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 	argTypes: {
 		icon: {

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof DuotonePicker > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -13,7 +13,7 @@ const meta: ComponentMeta< typeof DuotoneSwatch > = {
 	component: DuotoneSwatch,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -19,7 +19,7 @@ const meta: ComponentMeta< typeof Elevation > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof ExternalLink > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof Flex > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof FocalPointPicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof FontSizePicker > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof FormFileUpload > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof FormToggle > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof FormTokenField > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -17,7 +17,7 @@ const meta: ComponentMeta< typeof GradientPicker > = {
 	component: GradientPicker,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 		actions: { argTypesRegex: '^on.*' },
 	},
 	argTypes: {

@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof Grid > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -71,7 +71,7 @@ const meta: ComponentMeta< typeof HStack > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof Heading > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -20,7 +20,7 @@ const meta: ComponentMeta< typeof Icon > = {
 	component: Icon,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;