@wordpress/components 25.6.0 → 25.6.1

package/src/color-palette/test/index.tsx

@@ -225,6 +225,8 @@ describe( 'ColorPalette', () => {
 
 		render( <ControlledColorPalette /> );
 
+		const { name: colorName, color: colorCode } = EXAMPLE_COLORS[ 0 ];
+
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
 
 		// Click the first unpressed button
@@ -236,11 +238,19 @@ describe( 'ColorPalette', () => {
 		);
 
 		// Confirm the correct color name, color value, and button label are used
-		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
-		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
+		expect(
+			screen.getByText( colorName, {
+				selector: '.components-color-palette__custom-color-name',
+			} )
+		).toBeVisible();
+		expect(
+			screen.getByText( colorCode, {
+				selector: '.components-color-palette__custom-color-value',
+			} )
+		).toBeVisible();
 		expect(
 			screen.getByRole( 'button', {
-				name: `Custom color picker. The currently selected color is called "${ EXAMPLE_COLORS[ 0 ].name }" and has a value of "${ EXAMPLE_COLORS[ 0 ].color }".`,
+				name: `Custom color picker. The currently selected color is called "${ colorName }" and has a value of "${ colorCode }".`,
 				expanded: false,
 			} )
 		).toBeInTheDocument();
@@ -248,12 +258,8 @@ describe( 'ColorPalette', () => {
 		// Clear the color, confirm that the relative values are cleared/updated.
 		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
-		expect(
-			screen.queryByText( EXAMPLE_COLORS[ 0 ].name )
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByText( EXAMPLE_COLORS[ 0 ].color )
-		).not.toBeInTheDocument();
+		expect( screen.queryByText( colorName ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {
 				name: /^Custom color picker.$/,

package/src/color-palette/test/utils.ts

@@ -3,7 +3,6 @@
  */
 import {
 	extractColorNameFromCurrentValue,
-	showTransparentBackground,
 	normalizeColorValue,
 } from '../utils';
 
@@ -25,20 +24,6 @@ describe( 'ColorPalette: Utils', () => {
 			expect( result ).toBe( 'Blue' );
 		} );
 	} );
-	describe( 'showTransparentBackground', () => {
-		test( 'should return true for undefined color values', () => {
-			expect( showTransparentBackground( undefined ) ).toBe( true );
-		} );
-		test( 'should return true for transparent colors', () => {
-			expect( showTransparentBackground( 'transparent' ) ).toBe( true );
-			expect( showTransparentBackground( '#75757500' ) ).toBe( true );
-		} );
-		test( 'should return false for non-transparent colors', () => {
-			expect( showTransparentBackground( '#FFF' ) ).toBe( false );
-			expect( showTransparentBackground( '#757575' ) ).toBe( false );
-			expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha.
-		} );
-	} );
 
 	describe( 'normalizeColorValue', () => {
 		test( 'should return the value as is if the color value is not a CSS variable', () => {

package/src/color-palette/utils.ts

@@ -52,13 +52,6 @@ export const extractColorNameFromCurrentValue = (
 	return __( 'Custom' );
 };
 
-export const showTransparentBackground = ( currentValue?: string ) => {
-	if ( typeof currentValue === 'undefined' ) {
-		return true;
-	}
-	return colord( currentValue ).alpha() === 0;
-};
-
 // The PaletteObject type has a `colors` property (an array of ColorObject),
 // while the ColorObject type has a `color` property (the CSS color value).
 export const isMultiplePaletteObject = (

package/src/color-picker/stories/index.story.tsx

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

package/src/combobox-control/stories/index.story.tsx

@@ -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;

package/src/confirm-dialog/stories/index.story.js

@@ -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' } },
 	},
 };
 

package/src/custom-gradient-picker/stories/index.story.tsx

@@ -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;

package/src/date-time/stories/date-time.story.tsx

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

package/src/date-time/stories/date.story.tsx

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

package/src/date-time/stories/time.story.tsx

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

package/src/dimension-control/stories/index.story.tsx

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

package/src/disabled/stories/index.story.tsx

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

package/src/divider/stories/index.story.tsx

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

package/src/drop-zone/stories/index.story.tsx

@@ -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;

package/src/dropdown-menu/stories/index.story.tsx

@@ -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: {

package/src/dropdown-menu-v2/stories/index.story.tsx

@@ -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

package/src/duotone-picker/stories/duotone-picker.story.tsx

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

package/src/duotone-picker/stories/duotone-swatch.story.tsx

@@ -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;

package/src/elevation/stories/index.story.tsx

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

package/src/external-link/stories/index.story.tsx

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

package/src/flex/stories/index.story.tsx

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

package/src/focal-point-picker/stories/index.story.tsx

@@ -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;

package/src/font-size-picker/stories/index.story.tsx

@@ -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;

package/src/form-file-upload/stories/index.story.tsx

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

package/src/form-toggle/stories/index.story.tsx

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

package/src/form-token-field/stories/index.story.tsx

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

package/src/gradient-picker/stories/index.story.tsx

@@ -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: {

package/src/grid/stories/index.story.tsx

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

package/src/h-stack/stories/index.story.tsx

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

package/src/heading/stories/index.story.tsx

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

package/src/icon/stories/index.story.tsx

@@ -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;

package/src/input-control/stories/index.story.tsx

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

package/src/item-group/stories/index.story.tsx

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

package/src/keyboard-shortcuts/stories/index.story.tsx

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

package/src/menu-group/stories/index.story.tsx

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

package/src/menu-items-choice/stories/index.story.tsx

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

package/src/navigable-container/stories/navigable-menu.story.tsx

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

package/src/navigable-container/stories/tabbable-container.story.tsx

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

package/src/navigation/stories/index.story.tsx

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

package/src/navigator/stories/index.story.tsx

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

package/src/notice/stories/index.story.tsx

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

package/src/number-control/stories/index.story.tsx

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

package/src/palette-edit/stories/index.story.tsx

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

package/src/panel/stories/index.story.tsx

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

package/src/placeholder/stories/index.story.tsx

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

package/src/progress-bar/stories/index.story.tsx

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

package/src/query-controls/stories/index.story.tsx

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

package/src/radio-control/stories/index.story.tsx

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

package/src/range-control/stories/index.story.tsx

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

package/src/resizable-box/stories/index.story.tsx

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

package/src/responsive-wrapper/stories/index.story.tsx

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

package/src/sandbox/index.tsx

@@ -254,7 +254,10 @@ function SandBox( {
 
 		return () => {
 			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
-			defaultView?.addEventListener( 'message', checkMessageForResize );
+			defaultView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
 		};
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378

package/src/sandbox/stories/index.story.tsx

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

package/src/scroll-lock/stories/index.story.tsx

@@ -20,7 +20,7 @@ const meta: ComponentMeta< typeof ScrollLock > = {
 	title: 'Components/ScrollLock',
 	parameters: {
 		controls: { hideNoControlsWarning: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/scrollable/stories/index.story.tsx

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

package/src/search-control/stories/index.story.tsx

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