@wordpress/components 36.1.0 → 37.0.1-next.v.202607070741.0

package/src/flex/flex/hook.ts

@@ -1,24 +1,12 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 import deprecated from '@wordpress/deprecated';
 
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useResponsiveValue } from '../../utils/use-responsive-value';
 import { space } from '../../utils/space';
-import * as styles from '../styles';
-import { useCx } from '../../utils';
 import type { FlexProps } from '../types';
+import styles from '../style.module.scss';
 
 function useDeprecatedProps(
 	props: WordPressComponentProps< FlexProps, 'div' >
@@ -47,6 +35,7 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 		expanded = true,
 		gap = 2,
 		justify = 'space-between',
+		style,
 		wrap = false,
 		...otherProps
 	} = useContextSystem( useDeprecatedProps( props ), 'Flex' );
@@ -59,36 +48,28 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 	const isColumn =
 		typeof direction === 'string' && !! direction.includes( 'column' );
 
-	const cx = useCx();
-
-	const classes = useMemo( () => {
-		const base = css( {
-			alignItems: align ?? ( isColumn ? 'normal' : 'center' ),
-			flexDirection: direction,
-			flexWrap: wrap ? 'wrap' : undefined,
-			gap: space( gap ),
-			justifyContent: justify,
-			height: isColumn && expanded ? '100%' : undefined,
-			width: ! isColumn && expanded ? '100%' : undefined,
-		} );
+	const flexStyle = {
+		...style,
+		'--wp-components-flex-align':
+			align ?? ( isColumn ? 'normal' : 'center' ),
+		'--wp-components-flex-direction': direction,
+		'--wp-components-flex-wrap': wrap ? 'wrap' : 'nowrap',
+		'--wp-components-flex-gap': space( gap ),
+		'--wp-components-flex-justify': justify,
+	};
 
-		return cx(
-			styles.Flex,
-			base,
-			isColumn ? styles.ItemsColumn : styles.ItemsRow,
+	return {
+		...otherProps,
+		className: clsx(
+			styles.flex,
+			isColumn ? styles[ 'items-column' ] : styles[ 'items-row' ],
+			expanded &&
+				( isColumn
+					? styles[ 'expanded-column' ]
+					: styles[ 'expanded-row' ] ),
 			className
-		);
-	}, [
-		align,
-		className,
-		cx,
-		direction,
-		expanded,
-		gap,
+		),
+		style: flexStyle,
 		isColumn,
-		justify,
-		wrap,
-	] );
-
-	return { ...otherProps, className: classes, isColumn };
+	};
 }

package/src/flex/flex-item/hook.ts

@@ -1,18 +1,10 @@
-/**
- * External dependencies
- */
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
+import clsx from 'clsx';
 
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useFlexContext } from '../context';
-import * as styles from '../styles';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { FlexItemProps } from '../types';
+import styles from '../style.module.scss';
 
 export function useFlexItem(
 	props: WordPressComponentProps< FlexItemProps, 'div' >
@@ -21,30 +13,21 @@ export function useFlexItem(
 		className,
 		display: displayProp,
 		isBlock = false,
+		style,
 		...otherProps
 	} = useContextSystem( props, 'FlexItem' );
 
-	const sx: {
-		Base?: SerializedStyles;
-	} = {};
-
 	const contextDisplay = useFlexContext().flexItemDisplay;
+	const display = displayProp || contextDisplay;
 
-	sx.Base = css( {
-		display: displayProp || contextDisplay,
-	} );
-
-	const cx = useCx();
-
-	const classes = cx(
-		styles.Item,
-		sx.Base,
-		isBlock && styles.block,
-		className
-	);
+	const itemStyle = {
+		...style,
+		'--wp-components-flex-item-display': display || 'block',
+	};
 
 	return {
 		...otherProps,
-		className: classes,
+		className: clsx( styles.item, isBlock && styles.block, className ),
+		style: itemStyle,
 	};
 }

package/src/flex/style.module.scss

@@ -0,0 +1,40 @@
+.flex {
+	align-items: var(--wp-components-flex-align);
+	display: flex;
+	flex-direction: var(--wp-components-flex-direction);
+	flex-wrap: var(--wp-components-flex-wrap);
+	gap: var(--wp-components-flex-gap);
+	justify-content: var(--wp-components-flex-justify);
+}
+
+.expanded-column {
+	height: 100%;
+}
+
+.expanded-row {
+	width: 100%;
+}
+
+.item {
+	display: var(--wp-components-flex-item-display);
+	max-height: 100%;
+	max-width: 100%;
+	min-height: 0;
+	min-width: 0;
+}
+
+.block {
+	flex: 1;
+}
+
+.items-column {
+	> * {
+		min-height: 0;
+	}
+}
+
+.items-row {
+	> * {
+		min-width: 0;
+	}
+}

package/src/flex/test/__snapshots__/index.tsx.snap

@@ -1,178 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`props should render + wrap non Flex children 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,22 +1,18 @@
-  <div
-    class="components-flex css-4xxgm8-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
--   data-testid="flex"
-+   data-testid="base-flex"
-    data-wp-c16t="true"
-    data-wp-component="Flex"
-  >
-    <div
-      class="components-flex-item css-11ygw1k-PolymorphicDiv-Item-sx-Base e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="FlexItem"
-    >
-      Item
-    </div>
--   <div
--     class="css-1ragr82-PolymorphicDiv e19lxcc00"
--   />
--   <div />
-    <div
-      class="components-flex-item components-flex-block css-1gfd63q-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="FlexBlock"
-    >
-`;
-
-exports[`props should render align 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -1,15 +1,15 @@
-  Array [
-    Object {
--     "-ms-flex-align": "flex-start",
-+     "-ms-flex-align": "center",
-      "-ms-flex-direction": "row",
--     "-webkit-align-items": "flex-start",
--     "-webkit-box-align": "flex-start",
-+     "-webkit-align-items": "center",
-+     "-webkit-box-align": "center",
-      "-webkit-box-pack": "justify",
-      "-webkit-flex-direction": "row",
-      "-webkit-justify-content": "space-between",
--     "align-items": "flex-start",
-+     "align-items": "center",
-      "display": "flex",
-      "flex-direction": "row",
-      "gap": "calc(4px * 2)",
-      "justify-content": "space-between",
-      "width": "100%",
-`;
-
 exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
-.emotion-2 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-.emotion-4 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div
-  class="components-flex emotion-0 emotion-1"
+  class="style-flex style-items-row style-expanded-row components-flex"
   data-testid="base-flex"
   data-wp-c16t="true"
   data-wp-component="Flex"
+  style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
 >
   <div
-    class="components-flex-item emotion-2 emotion-1"
+    class="style-item components-flex-item"
     data-wp-c16t="true"
     data-wp-component="FlexItem"
+    style="--wp-components-flex-item-display: block;"
   >
     Item
   </div>
   <div
-    class="components-flex-item components-flex-block emotion-4 emotion-1"
+    class="style-item style-block components-flex-item components-flex-block"
     data-wp-c16t="true"
     data-wp-component="FlexBlock"
+    style="--wp-components-flex-item-display: block;"
   >
     Item
   </div>
 </div>
 `;
-
-exports[`props should render justify 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "-ms-flex-align": "center",
-      "-ms-flex-direction": "row",
--     "-ms-flex-pack": "start",
-      "-webkit-align-items": "center",
-      "-webkit-box-align": "center",
--     "-webkit-box-pack": "start",
-+     "-webkit-box-pack": "justify",
-      "-webkit-flex-direction": "row",
--     "-webkit-justify-content": "flex-start",
-+     "-webkit-justify-content": "space-between",
-      "align-items": "center",
-      "display": "flex",
-      "flex-direction": "row",
-      "gap": "calc(4px * 2)",
--     "justify-content": "flex-start",
-+     "justify-content": "space-between",
-      "width": "100%",
-    },
-  ]
-`;
-
-exports[`props should render spacing 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
--     "min-width": "0",
--   },
--   Object {
-      "-ms-flex": "1",
-      "-webkit-flex": "1",
-      "display": "block",
-      "flex": "1",
-      "max-height": "100%",
-      "max-width": "100%",
-      "min-height": "0",
-+     "min-width": "0",
-+   },
-+   Object {
-      "min-width": "0",
-    },
-  ]
-`;

package/src/flex/test/index.tsx

@@ -1,11 +1,6 @@
-/**
- * External dependencies
- */
+import type { CSSProperties } from 'react';
 import { render, screen } from '@testing-library/react';
 
-/**
- * Internal dependencies
- */
 import { View } from '../../view';
 import { Flex, FlexBlock, FlexItem } from '../';
 
@@ -21,90 +16,126 @@ describe( 'props', () => {
 		expect( screen.getByTestId( 'base-flex' ) ).toMatchSnapshot();
 	} );
 
-	test( 'should render + wrap non Flex children', () => {
-		render(
-			<Flex data-testid="base-flex">
-				<FlexItem>Item</FlexItem>
-				<FlexBlock>Item</FlexBlock>
-			</Flex>
-		);
-
+	test( 'should render non Flex children', () => {
 		render(
 			<Flex data-testid="flex">
 				<FlexItem>Item</FlexItem>
-				<View />
-				<div />
+				<View data-testid="view-child" />
+				<div data-testid="div-child" />
 				<FlexBlock>Item</FlexBlock>
 			</Flex>
 		);
 
-		expect( screen.getByTestId( 'flex' ) ).toMatchDiffSnapshot(
-			screen.getByTestId( 'base-flex' )
-		);
+		expect( screen.getByTestId( 'view-child' ) ).toBeInTheDocument();
+		expect( screen.getByTestId( 'div-child' ) ).toBeInTheDocument();
 	} );
 
 	test( 'should render align', () => {
 		render(
-			<Flex data-testid="base-flex">
+			<Flex align="flex-start" data-testid="flex">
 				<FlexItem>Item</FlexItem>
 				<FlexBlock>Item</FlexBlock>
 			</Flex>
 		);
+		expect( screen.getByTestId( 'flex' ) ).toHaveStyle( {
+			'--wp-components-flex-align': 'flex-start',
+		} );
+	} );
 
+	test( 'should render justify', () => {
 		render(
-			<Flex align="flex-start" data-testid="flex">
+			<Flex justify="flex-start" data-testid="flex">
 				<FlexItem>Item</FlexItem>
 				<FlexBlock>Item</FlexBlock>
 			</Flex>
 		);
-		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
-			screen.getByTestId( 'base-flex' )
-		);
+		expect( screen.getByTestId( 'flex' ) ).toHaveStyle( {
+			'--wp-components-flex-justify': 'flex-start',
+		} );
 	} );
 
-	test( 'should render justify', () => {
+	test( 'should render spacing', () => {
 		render(
-			<Flex data-testid="base-flex">
+			<Flex gap={ 5 } data-testid="flex">
 				<FlexItem>Item</FlexItem>
 				<FlexBlock>Item</FlexBlock>
 			</Flex>
 		);
 
+		expect( screen.getByTestId( 'flex' ) ).toHaveStyle( {
+			'--wp-components-flex-gap': 'calc(4px * 5)',
+		} );
+	} );
+
+	test( 'should prefer generated flex styles over consumer CSS custom properties', () => {
 		render(
-			<Flex justify="flex-start" data-testid="flex">
+			<Flex
+				align="flex-start"
+				data-testid="flex"
+				style={
+					{
+						'--wp-components-flex-align': 'center',
+					} as CSSProperties
+				}
+			>
 				<FlexItem>Item</FlexItem>
-				<FlexBlock>Item</FlexBlock>
 			</Flex>
 		);
-		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
-			screen.getByTestId( 'base-flex' )
-		);
+
+		expect( screen.getByTestId( 'flex' ) ).toHaveStyle( {
+			'--wp-components-flex-align': 'flex-start',
+		} );
 	} );
 
-	test( 'should render spacing', () => {
+	test( 'should render column direction', () => {
 		render(
-			<Flex data-testid="base-flex">
-				<FlexItem>Item</FlexItem>
-				<FlexBlock>Item</FlexBlock>
+			<Flex direction="column" data-testid="flex">
+				<FlexItem data-testid="flex-item">Item</FlexItem>
 			</Flex>
 		);
 
+		expect( screen.getByTestId( 'flex' ) ).toHaveStyle( {
+			'--wp-components-flex-align': 'normal',
+			'--wp-components-flex-direction': 'column',
+		} );
+		expect( screen.getByTestId( 'flex-item' ) ).toHaveStyle( {
+			'--wp-components-flex-item-display': 'block',
+		} );
+	} );
+
+	test( 'should render flex item display', () => {
 		render(
-			<>
-				<Flex>
-					<FlexItem>Item</FlexItem>
-					<FlexBlock data-testid="flex-block">Item</FlexBlock>
-				</Flex>
-				<Flex gap={ 5 }>
-					<FlexItem>Item</FlexItem>
-					<FlexBlock data-testid="flex-block-with-gap">
-						Item
-					</FlexBlock>
-				</Flex>
-			</>
+			<Flex>
+				<FlexItem display="inline-flex" data-testid="item">
+					Item
+				</FlexItem>
+			</Flex>
 		);
-		expect( screen.getByTestId( 'flex-block' ) ).toMatchStyleDiffSnapshot(
-			screen.getByTestId( 'flex-block-with-gap' )
+
+		expect( screen.getByTestId( 'item' ) ).toHaveStyle( {
+			'--wp-components-flex-item-display': 'inline-flex',
+		} );
+	} );
+
+	test( 'should prefer generated flex item styles over consumer CSS custom properties', () => {
+		render(
+			<Flex>
+				<FlexItem
+					display="inline-flex"
+					data-testid="item"
+					style={
+						{
+							'--wp-components-flex-item-display': 'block',
+						} as CSSProperties
+					}
+				>
+					Item
+				</FlexItem>
+			</Flex>
 		);
+
+		expect( screen.getByTestId( 'item' ) ).toHaveStyle( {
+			'--wp-components-flex-item-display': 'inline-flex',
+		} );
 	} );
 } );

package/src/focal-point-picker/controls.tsx

@@ -86,7 +86,6 @@ export default function FocalPointPickerControls( {
 function FocalPointUnitControl( props: UnitControlProps ) {
 	return (
 		<StyledUnitControl
-			__next40pxDefaultSize
 			className="focal-point-picker__controls-position-unit-control"
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }

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

@@ -94,6 +94,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
 export function FocalPointPicker( {
 	// Prevent passing to internal component.
 	__nextHasNoMarginBottom: _,
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	autoPlay = true,
 	className,
 	help,

package/src/font-size-picker/README.md

@@ -29,7 +29,6 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
-			__next40pxDefaultSize
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
@@ -81,13 +80,6 @@ If onChange is called without any parameter, it should reset the value, attendin
 
 -   Required: Yes
 
-### `size`: `'default' | '__unstable-large'`
-
-Size of the control.
-
--   Required: No
--   Default: `'default'`
-
 ### `units`: `string[]`
 
 Available units for custom font size selection.
@@ -126,10 +118,3 @@ If `true`, a slider will be displayed alongside the input field when a custom fo
 
 -   Required: no
 -   Default: `false`
-
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
-- Required: No
-- Default: `false`

package/src/font-size-picker/font-size-picker-select.tsx

@@ -21,14 +21,7 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 };
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const {
-		__next40pxDefaultSize,
-		fontSizes,
-		value,
-		size,
-		valueMode = 'literal',
-		onChange,
-	} = props;
+	const { fontSizes, value, valueMode = 'literal', onChange } = props;
 
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
@@ -67,8 +60,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 	return (
 		<StyledCustomSelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
@@ -96,7 +87,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 				onChange( selectedItem.value, matchingFontSize );
 			} }
-			size={ size }
 		/>
 	);
 };

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,14 +14,7 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const {
-		fontSizes,
-		value,
-		valueMode = 'literal',
-		__next40pxDefaultSize,
-		size,
-		onChange,
-	} = props;
+	const { fontSizes, value, valueMode = 'literal', onChange } = props;
 
 	// Find the current value based on valueMode
 	const currentValue = ( () => {
@@ -56,8 +49,6 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ currentValue }
@@ -78,7 +69,6 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 				}
 			} }
 			isBlock
-			size={ size }
 		>
 			{ fontSizes.map( ( fontSize, index ) => (
 				<ToggleGroupControlOption