newspack-components 4.10.0 → 4.12.0-alpha.1

package/src/drawer/body.tsx

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies.
  */
-import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 
 /**
  * Internal dependencies.
@@ -42,18 +42,17 @@ const Body = ( { children }: DrawerBodyProps ) => {
 	}, [ node ] );
 
 	return (
-		<VStack
+		<Stack
 			ref={ setNode }
+			direction="column"
 			className="newspack-drawer__body"
-			spacing={ 0 }
-			justify="flex-start"
 			// A bare div is role=generic, where ARIA prohibits an author name.
 			role={ isScrollable ? 'group' : undefined }
 			tabIndex={ isScrollable ? 0 : undefined }
 			aria-label={ isScrollable ? __( 'Scrollable section', 'newspack-plugin' ) : undefined }
 		>
 			{ children }
-		</VStack>
+		</Stack>
 	);
 };
 

package/src/drawer/content.tsx

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies.
  */
-import { __experimentalVStack as VStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
-import { Children, isValidElement } from '@wordpress/element';
+import { Stack } from '@wordpress/ui';
 
 /**
  * External dependencies.
@@ -14,41 +13,16 @@ import classnames from 'classnames';
  */
 import type { DrawerContentProps } from './types';
 
-// VStack drops non-elements, a lone string aside. A run shares one wrapper so
-// `Edited by { name }` is one row, not three.
-const asRows = ( children: React.ReactNode ) => {
-	if ( 'string' === typeof children ) {
-		return children;
-	}
-	const rows: React.ReactNode[] = [];
-	let text: React.ReactNode[] = [];
-	const flushText = () => {
-		if ( text.some( part => '' !== String( part ).trim() ) ) {
-			rows.push( <div key={ `text-${ rows.length }` }>{ text }</div> );
-		}
-		text = [];
-	};
-	Children.toArray( children ).forEach( child => {
-		if ( isValidElement( child ) ) {
-			flushText();
-			rows.push( child );
-		} else {
-			text.push( child );
-		}
-	} );
-	flushText();
-	return rows;
-};
-
-const Content = ( { padding = 6, gap = 4, className, children }: DrawerContentProps ) => (
-	<VStack
+const Content = ( { padding = 6, gap = 'lg', className, children }: DrawerContentProps ) => (
+	<Stack
+		direction="column"
+		gap={ gap }
 		className={ classnames( 'newspack-drawer__content', className ) }
-		spacing={ gap }
 		// A custom property, not inline padding, so the stylesheet's seam rules win.
 		style={ { '--newspack-drawer-content-padding': `${ padding * 4 }px` } as React.CSSProperties }
 	>
-		{ asRows( children ) }
-	</VStack>
+		{ children }
+	</Stack>
 );
 
 export default Content;

package/src/drawer/footer.tsx

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies.
+ */
+import { Stack } from '@wordpress/ui';
+
 /**
  * External dependencies.
  */
@@ -9,7 +14,9 @@ import classnames from 'classnames';
 import type { DrawerFooterProps } from './types';
 
 const Footer = ( { className, children }: DrawerFooterProps ) => (
-	<div className={ classnames( 'newspack-drawer__footer', className ) }>{ children }</div>
+	<Stack direction="row" justify="flex-end" wrap="wrap" gap="sm" className={ classnames( 'newspack-drawer__footer', className ) }>
+		{ children }
+	</Stack>
 );
 
 export default Footer;

package/src/drawer/header.tsx

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies.
+ */
+import { Stack } from '@wordpress/ui';
+
 /**
  * External dependencies.
  */
@@ -9,7 +14,9 @@ import classnames from 'classnames';
 import type { DrawerHeaderProps } from './types';
 
 const Header = ( { className, children }: DrawerHeaderProps ) => (
-	<div className={ classnames( 'newspack-drawer__header', className ) }>{ children }</div>
+	<Stack direction="row" align="center" gap="sm" className={ classnames( 'newspack-drawer__header', className ) }>
+		{ children }
+	</Stack>
 );
 
 export default Header;

package/src/drawer/index.test.js

@@ -318,13 +318,12 @@ describe( 'Drawer sections', () => {
 	} );
 
 	// The `> * { flex: none }` rule that stops sections compressing depends on this.
-	it( 'lays the scroll container out as a flush VStack', () => {
+	it( 'lays the scroll container out as a flush column', () => {
 		renderDrawer( { contents: [ <Drawer.Content key="one">One</Drawer.Content> ] } );
 
 		const body = bodyOf( screen.getByText( 'One' ) );
-		expect( body ).toHaveClass( 'components-v-stack' );
-		expect( window.getComputedStyle( body ).gap ).toBe( '0' );
-		expect( window.getComputedStyle( body ).justifyContent ).toBe( 'flex-start' );
+		expect( body.style.flexDirection ).toBe( 'column' );
+		expect( body.style.gap ).toBe( '' );
 	} );
 
 	it( 'starts a new container after a non-content child', () => {

package/src/drawer/slots.test.js

@@ -83,65 +83,23 @@ describe( 'Drawer.Content', () => {
 		expect( sectionOf( container ).style.getPropertyValue( '--newspack-drawer-content-padding' ) ).toBe( '0px' );
 	} );
 
-	it( 'renders each section as a VStack', () => {
-		const { container } = render( <Content>stacked</Content> );
-		expect( sectionOf( container ) ).toHaveClass( 'newspack-drawer__content', 'components-v-stack' );
-	} );
-
-	// VStack emits its spacing as a `calc()` on the 4px base, not as pixels.
-	it( 'spaces its children by 16px, and by the gap prop', () => {
+	it( 'spaces its children by the lg gap token, and by the gap prop', () => {
 		const { container, rerender } = render( <Content>stacked</Content> );
-		expect( window.getComputedStyle( sectionOf( container ) ).gap ).toBe( 'calc(4px * 4)' );
+		expect( sectionOf( container ).style.gap ).toContain( 'gap-lg' );
 
-		rerender( <Content gap={ 2 }>stacked</Content> );
-		expect( window.getComputedStyle( sectionOf( container ) ).gap ).toBe( 'calc(4px * 2)' );
+		rerender( <Content gap="sm">stacked</Content> );
+		expect( sectionOf( container ).style.gap ).toContain( 'gap-sm' );
 	} );
 
-	// VStack keeps only elements, so these would otherwise vanish without warning.
 	it( 'keeps plain text sitting beside an element', () => {
-		render(
+		const { container } = render(
 			<Content>
 				Lead text
 				<span>an element</span>
 				{ 42 }
 			</Content>
 		);
-		expect( screen.getByText( 'Lead text' ) ).toBeInTheDocument();
-		expect( screen.getByText( 'an element' ) ).toBeInTheDocument();
-		expect( screen.getByText( '42' ) ).toBeInTheDocument();
-	} );
-
-	it( 'keeps a run of text and interpolations on one row', () => {
-		const { container } = render( <Content>Edited by { 'Ada' } just now</Content> );
-		const rows = sectionOf( container ).children;
-		expect( rows ).toHaveLength( 1 );
-		expect( rows[ 0 ] ).toHaveTextContent( 'Edited by Ada just now' );
-	} );
-
-	it( 'starts a new row either side of an element', () => {
-		const { container } = render(
-			<Content>
-				before
-				<span>middle</span>
-				after
-			</Content>
-		);
-		expect( Array.from( sectionOf( container ).children ).map( row => row.textContent ) ).toEqual( [ 'before', 'middle', 'after' ] );
-	} );
-
-	it( 'emits no row for whitespace or empty text between elements', () => {
-		const { container } = render(
-			<Content>
-				<span>one</span> { '' }
-				<span>two</span>
-			</Content>
-		);
-		expect( Array.from( sectionOf( container ).children ).map( row => row.textContent ) ).toEqual( [ 'one', 'two' ] );
-	} );
-
-	it( 'keeps a lone string', () => {
-		render( <Content>on its own</Content> );
-		expect( screen.getByText( 'on its own' ) ).toBeInTheDocument();
+		expect( sectionOf( container ) ).toHaveTextContent( 'Lead textan element42' );
 	} );
 } );
 
@@ -160,6 +118,14 @@ describe( 'Drawer.Footer', () => {
 		expect( screen.getByText( 'actions' ) ).toHaveClass( 'newspack-drawer__footer' );
 	} );
 
+	it( 'lays its actions out in one end-aligned row that wraps', () => {
+		render( <Footer>actions</Footer> );
+		const footer = screen.getByText( 'actions' );
+		expect( footer.style.flexDirection ).toBe( 'row' );
+		expect( footer.style.justifyContent ).toBe( 'flex-end' );
+		expect( footer.style.flexWrap ).toBe( 'wrap' );
+	} );
+
 	it( 'renders its actions as direct children', () => {
 		const { container } = render(
 			<Footer>

package/src/drawer/style.scss

@@ -80,10 +80,7 @@ $drawer-size-x-large: 640px;
 }
 
 .newspack-drawer__header {
-	align-items: center;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-30 wp-vars.$grid-unit-30 wp-vars.$grid-unit-20;
 }
 
@@ -139,23 +136,8 @@ $drawer-size-x-large: 640px;
 
 .newspack-drawer__footer {
 	background: wp-colors.$white;
-	display: flex;
 	flex: 0 0 auto;
-	gap: wp-vars.$grid-unit-10;
 	padding: wp-vars.$grid-unit-20 wp-vars.$grid-unit-30 wp-vars.$grid-unit-30;
-
-	> .components-button {
-		flex: 1;
-		justify-content: center;
-	}
-
-	&:has(> :nth-child(3)) {
-		flex-direction: column;
-
-		> .components-button {
-			flex: 0 0 auto;
-		}
-	}
 }
 
 @keyframes newspack-drawer-slide-in {

package/src/drawer/types.ts

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies.
+ */
+import type { Stack } from '@wordpress/ui';
+
 export type DrawerSize = 'small' | 'medium' | 'large' | 'x-large' | 'full';
 
 /** `text` is null unless the title's children are a plain string. */
@@ -39,10 +44,10 @@ export type DrawerCloseIconProps = {
 };
 
 export type DrawerContentProps = {
-	/** 4px scale, as VStack's `spacing`. `0` for a flush section. */
+	/** 4px scale: `6` is 24px, `0` a flush section. */
 	padding?: number;
-	/** 4px scale, as VStack's `spacing`. */
-	gap?: number;
+	/** A `Stack` gap token from `@wordpress/ui`. */
+	gap?: React.ComponentProps< typeof Stack >[ 'gap' ];
 	className?: string;
 	children?: React.ReactNode;
 };

package/src/index.js

@@ -39,6 +39,7 @@ export { default as PluginToggle } from './plugin-toggle';
 export { default as Popover } from './popover';
 export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
+export { default as ReorderModal } from './reorder-modal';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as Settings } from './settings';
@@ -50,6 +51,7 @@ export { default as StyleCard } from './style-card';
 export { default as TabbedNavigation } from './tabbed-navigation';
 export { default as TableCard } from './table-card';
 export { default as TextControl } from './text-control';
+export { default as TooltipBadge } from './tooltip-badge';
 export { default as Waiting } from './waiting';
 export { default as WebPreview } from './web-preview';
 export { default as Wizard } from './wizard';

package/src/page/index.js

@@ -49,15 +49,19 @@ const Page = ( { breadcrumbItems = [], badges, subTitle, actions, tabbedNavigati
 		<>
 			<Stack direction="column" className="newspack-page__header-region">
 				<Stack direction="column" className="newspack-page__header">
-					<Stack direction="row" gap="sm" justify="space-between">
-						<Stack direction="row" gap="sm" align="center" justify="start">
+					<Stack direction="row" gap="sm" justify="space-between" wrap="wrap">
+						<Stack direction="row" gap="sm" align="start" justify="start" className="newspack-page__header-title">
 							<div className="newspack-page__header-visual" aria-hidden="true">
 								<Icon icon={ newspack } />
 							</div>
 							<HStack className="newspack-page__breadcrumbs" justify="flex-start">
 								<Breadcrumbs items={ breadcrumbItems } />
 							</HStack>
-							{ badges }
+							{ badges && (
+								<Stack direction="row" gap="sm" align="center" className="newspack-page__header-badges">
+									{ badges }
+								</Stack>
+							) }
 						</Stack>
 						{ actions && (
 							<Stack direction="row" gap="sm" align="center" className="newspack-page__header-actions">

package/src/page/style.scss

@@ -56,8 +56,29 @@
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
 }
 
+.newspack-page__header-title {
+	min-width: 0;
+}
+
 .newspack-page__header-actions {
+	flex-basis: 100%;
+	flex-shrink: 0;
+	justify-content: flex-end;
+	margin-inline-start: auto;
+
+	@include wp-mixins.break-medium {
+		flex-basis: auto;
+	}
+
+	&:empty,
+	&:has(> :only-child:empty) {
+		display: none;
+	}
+}
+
+.newspack-page__header-badges {
 	flex-shrink: 0;
+	min-height: wp-vars.$button-size;
 }
 
 .newspack-page__header-subtitle {
@@ -68,7 +89,7 @@
 .newspack-page__header-visual {
 	display: grid;
 	flex-shrink: 0;
-	height: 24px;
+	height: wp-vars.$button-size;
 	place-items: center;
 	width: 24px;
 
@@ -80,5 +101,6 @@
 }
 
 .newspack-page__breadcrumbs {
-	min-height: wp-vars.$button-size;
+	min-width: 0;
+	padding-block: calc((#{wp-vars.$button-size} - var(--wpds-typography-line-height-md)) / 2);
 }