@wordpress/components 33.0.0 → 33.1.0

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

@@ -46,7 +46,7 @@ const meta: Meta< typeof Modal > = {
 	parameters: {
 		controls: { expanded: true },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `Dialog` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/modal/style.scss

@@ -16,22 +16,27 @@
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
 	// This animates the appearance of the backdrop.
-	@include animation__fade-in();
+	@include animation__fade-in($speed: var(--wpds-motion-duration-sm), $easing: var(--wpds-motion-easing-subtle));
 
 	&.is-animating-out {
 		// Note: it's important that the fade-out animation doesn't end after the
 		// modal frame's disappear animation, because the component will be removed
 		// from the DOM when that animation ends.
-		@include animation__fade-out($delay: 80ms);
+		@include animation__fade-out($speed: var(--wpds-motion-duration-sm), $delay: var(--wpds-motion-duration-xs), $easing: var(--wpds-motion-easing-subtle));
 	}
 }
 
 // The modal window element.
 .components-modal__frame {
 	@include reset;
-	// Use the entire viewport on smaller screens.
-	margin: $grid-unit-50 0 0 0;
+	// On smaller screens, render as a bottom sheet: edge-to-edge, anchored
+	// to the bottom of the viewport. `align-self: flex-end` both anchors
+	// the modal to the bottom of the flex overlay and breaks the default
+	// `align-items: stretch`, so the modal hugs its content height.
+	align-self: flex-end;
+	margin: 0;
 	width: 100%;
+	max-height: calc(100% - #{$grid-unit-50});
 	background: $white;
 	box-shadow: $elevation-large;
 	border-radius: $radius-large $radius-large 0 0;
@@ -42,7 +47,7 @@
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
 	animation-fill-mode: forwards;
-	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
+	animation-timing-function: var(--wpds-motion-easing-expressive);
 
 	// Ensure all headings use the proper editor text color, overriding wp-admin common.css
 	h1,
@@ -52,16 +57,17 @@
 	}
 
 	@media not (prefers-reduced-motion) {
-		animation-duration: var(--modal-frame-animation-duration);
+		animation-duration: var(--wpds-motion-duration-md);
 	}
 
 	.components-modal__screen-overlay.is-animating-out & {
 		animation-name: components-modal__disappear-animation;
-		animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+		animation-timing-function: var(--wpds-motion-easing-expressive);
 	}
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
+		align-self: auto;
 		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
@@ -69,19 +75,6 @@
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
-		&.is-full-screen {
-			@include break-small() {
-				width: calc(100% - #{ $grid-unit-20 * 2 });
-				height: calc(100% - #{ $grid-unit-20 * 2 });
-				max-height: none;
-			}
-			@include break-medium() {
-				width: calc(100% - #{ $grid-unit-50 * 2 });
-				height: calc(100% - #{ $grid-unit-50 * 2 });
-				max-width: none;
-			}
-		}
-
 		&.has-size-small,
 		&.has-size-medium,
 		&.has-size-large {
@@ -105,6 +98,14 @@
 	}
 
 	&.is-full-screen {
+		// Full-screen modals cover the entire viewport on mobile,
+		// overriding the bottom-sheet defaults.
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		max-height: none;
+		border-radius: 0;
+
 		// When full screen, make sure the children container is full height.
 		:where(.components-modal__content) {
 			display: flex;
@@ -116,17 +117,33 @@
 				flex: 1;
 			}
 		}
+
+		@include break-small() {
+			// Reset the mobile bottom-sheet overrides so the desktop
+			// full-screen modal is centered with rounded corners.
+			margin: auto;
+			border-radius: $radius-large;
+			width: calc(100% - #{ $grid-unit-20 * 2 });
+			height: calc(100% - #{ $grid-unit-20 * 2 });
+		}
+
+		@include break-medium() {
+			width: calc(100% - #{ $grid-unit-50 * 2 });
+			height: calc(100% - #{ $grid-unit-50 * 2 });
+			max-width: none;
+		}
 	}
 }
 
+// On mobile, the modal slides up from the bottom of the viewport.
 @keyframes components-modal__appear-animation {
 	from {
 		opacity: 0;
-		transform: scale(0.9);
+		transform: translateY(100%);
 	}
 	to {
 		opacity: 1;
-		transform: scale(1);
+		transform: translateY(0);
 	}
 }
 
@@ -135,11 +152,38 @@
 @keyframes components-modal__disappear-animation {
 	from {
 		opacity: 1;
-		transform: scale(1);
+		transform: translateY(0);
 	}
 	to {
 		opacity: 0;
-		transform: scale(0.9);
+		transform: translateY(100%);
+	}
+}
+
+// On bigger screens, the modal scales in/out instead of sliding. The keyframe
+// names are intentionally reused so the JS animationend listener
+// (use-modal-exit-animation.ts) keeps working unchanged.
+@include break-small() {
+	@keyframes components-modal__appear-animation {
+		from {
+			opacity: 0;
+			transform: scale(0.9);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes components-modal__disappear-animation {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.9);
+		}
 	}
 }
 

package/src/modal/use-modal-exit-animation.ts

@@ -10,9 +10,15 @@ import warning from '@wordpress/warning';
  */
 import { CONFIG } from '../utils';
 
-// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
-const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;
-const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(
+/**
+ * Milliseconds used as a fallback when racing `animationend` against a timeout.
+ *
+ * Sourced from `CONFIG.transitionDuration`. This value is implicitly coupled to
+ * the modal frame’s CSS `animation-duration` in `style.scss`, which uses
+ * `var(--wpds-motion-duration-md)`. If either the token, the SCSS, or
+ * `CONFIG.transitionDuration` changes, keep them aligned so exit timing stays correct.
+ */
+const FRAME_ANIMATION_DURATION_MS = Number.parseInt(
 	CONFIG.transitionDuration
 );
 
@@ -68,7 +74,7 @@ export function useModalExitAnimation() {
 							// Allow an extra 20% of the animation duration for the
 							// animationend event to fire, in case the animation frame is
 							// slightly delayes by some other events in the event loop.
-							FRAME_ANIMATION_DURATION_NUMBER * 1.2
+							FRAME_ANIMATION_DURATION_MS * 1.2
 						);
 					} );
 
@@ -91,9 +97,6 @@ export function useModalExitAnimation() {
 	return {
 		overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,
 		frameRef,
-		frameStyle: {
-			'--modal-frame-animation-duration': `${ FRAME_ANIMATION_DURATION }`,
-		},
 		closeModal,
 	};
 }

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof Navigator > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -31,7 +31,7 @@ const meta: Meta< typeof Notice > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `Notice` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof NumberControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `InputControl` with `type="number"` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/palette-edit/index.tsx

@@ -299,7 +299,6 @@ function PaletteEditListView< T extends PaletteElement >( {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
 	const elementsReferenceRef = useRef< T[] >( undefined );
 	useEffect( () => {
-		// eslint-disable-next-line react-compiler/react-compiler -- false positive, see https://github.com/facebook/react/issues/29196
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 

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

@@ -25,7 +25,7 @@ const meta: Meta< typeof PaletteEdit > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -29,7 +29,7 @@ const meta: Meta< typeof Panel > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof Placeholder > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -57,7 +57,7 @@ const meta: Meta< typeof Popover > = {
 	parameters: {
 		controls: { expanded: true },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/popover/style.scss

@@ -73,10 +73,6 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 	width: 100%;
 }
 
-.components-popover__close.components-button {
-	z-index: z-index(".components-popover__close");
-}
-
 .components-popover__arrow {
 	position: absolute;
 	width: $arrow-triangle-base-size;

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof ProgressBar > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -41,7 +41,7 @@ const meta: Meta< typeof QueryControls > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -38,7 +38,7 @@ const meta: Meta< typeof RadioControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `RadioGroupControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -59,7 +59,7 @@ const meta: Meta< typeof RangeControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SliderControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -27,7 +27,7 @@ const meta: Meta< typeof ResizableBox > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof SandBox > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof ScrollLock > = {
 		controls: { hideNoControlsWarning: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -26,7 +26,7 @@ const meta: Meta< typeof SearchControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SearchControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof SelectControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof Shortcut > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/slot-fill/fill.tsx

@@ -37,9 +37,9 @@ export default function Fill( { name, children }: FillComponentProps ) {
 	useLayoutEffect( () => {
 		registry.updateFill( name, {
 			instance: instanceRef.current,
-			children: childrenRef.current,
+			children,
 		} );
-	} );
+	}, [ registry, name, children ] );
 
 	const slot = useObservableValue( registry.slots, name );
 

package/src/slot-fill/stories/index.story.tsx

@@ -28,7 +28,7 @@ const meta: Meta< typeof Slot > = {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -39,7 +39,7 @@ const meta: Meta< typeof Snackbar > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -20,7 +20,7 @@ const meta: Meta< typeof Spinner > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/style-provider/index.tsx

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import * as uuid from 'uuid';
-
-/**
- * Internal dependencies
- */
+import { useLayoutEffect } from '@wordpress/element';
+import { registerDocument } from '@wordpress/style-runtime';
 import type { StyleProviderProps } from './types';
 
 const uuidCache = new Set();
@@ -36,6 +31,14 @@ const memoizedCreateCacheWithContainer = ( container: HTMLElement ) => {
 export function StyleProvider( props: StyleProviderProps ) {
 	const { children, document } = props;
 
+	useLayoutEffect( () => {
+		if ( ! document ) {
+			return;
+		}
+
+		return registerDocument( document );
+	}, [ document ] );
+
 	if ( ! document ) {
 		return null;
 	}

package/src/style-provider/test/index.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import { registerStyle } from '@wordpress/style-runtime';
+import StyleProvider from '..';
+
+type GlobalScopeWithStyleRuntime = typeof globalThis & {
+	__wpStyleRuntime?: unknown;
+};
+
+describe( 'StyleProvider', () => {
+	const globalScope = globalThis as GlobalScopeWithStyleRuntime;
+
+	afterEach( () => {
+		delete globalScope.__wpStyleRuntime;
+		document.head.innerHTML = '';
+	} );
+
+	it( 'registers the provided document for package style injection', () => {
+		render(
+			<StyleProvider document={ document }>
+				<div />
+			</StyleProvider>
+		);
+
+		registerStyle( 'test-style', '.test-class{color:red;}' );
+
+		const iframeDocument = document.implementation.createHTMLDocument();
+
+		render(
+			<StyleProvider document={ iframeDocument }>
+				<div />
+			</StyleProvider>
+		);
+
+		expect( iframeDocument.head.innerHTML ).toBe(
+			'<style data-wp-hash="test-style">.test-class{color:red;}</style>'
+		);
+	} );
+} );

package/src/tab-panel/style.scss

@@ -45,7 +45,7 @@
 
 		// Animation
 		@media not (prefers-reduced-motion) {
-			transition: all 0.1s linear;
+			transition: height 0.1s linear;
 		}
 	}
 
@@ -74,7 +74,7 @@
 
 		// Animation
 		@media not (prefers-reduced-motion) {
-			transition: all 0.1s linear;
+			transition: box-shadow 0.1s linear;
 		}
 	}
 

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

@@ -35,7 +35,7 @@ const meta: Meta< typeof Tabs > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'When building for the Gutenberg repo, use this component instead of `TabPanel`. Otherwise, continue using `TabPanel`. Both will be superseded by `Tabs` in `@wordpress/ui`, but continue using these for now.',
 		},

package/src/text/styles.ts

@@ -28,7 +28,7 @@ export const destructive = css`
 `;
 
 export const muted = css`
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 `;
 
 export const highlighterText = css`

package/src/text/test/index.tsx

@@ -69,7 +69,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: COLORS.gray[ 700 ],
+			color: COLORS.theme.gray[ 700 ],
 		} );
 	} );
 

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof TextControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Prefer `InputControl` when placing buttons or icons in the prefix/suffix slots.',
 		},

package/src/text-highlight/stories/index.story.tsx

@@ -19,7 +19,7 @@ const meta: Meta< typeof TextHighlight > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -33,7 +33,7 @@ const meta: Meta< typeof TextareaControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `TextareaControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -28,7 +28,7 @@ const meta: Meta< typeof ToggleControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `ToggleControl` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/toggle-group-control/stories/index.story.tsx

@@ -38,7 +38,7 @@ const meta: Meta< typeof ToggleGroupControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `ToggleGroupControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -57,7 +57,7 @@ const meta: Meta< typeof Toolbar > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -46,7 +46,7 @@ const meta: Meta< typeof ToolsPanel > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -38,7 +38,7 @@ const meta: Meta< typeof Tooltip > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},