@wordpress/components 25.1.1 → 25.1.3

package/src/number-control/index.tsx

@@ -16,7 +16,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { Input, SpinButton } from './styles/number-control-styles';
+import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
@@ -24,6 +24,7 @@ import type { WordPressComponentProps } from '../ui/context/wordpress-component'
 import type { NumberControlProps } from './types';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
+import { useCx } from '../utils';
 
 const noop = () => {};
 
@@ -78,6 +79,8 @@ function UnforwardedNumberControl(
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
+	const cx = useCx();
+	const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
 
 	const spinValue = (
 		value: string | number | undefined,
@@ -236,6 +239,7 @@ function UnforwardedNumberControl(
 						<Spacer marginBottom={ 0 } marginRight={ 2 }>
 							<HStack spacing={ 1 }>
 								<SpinButton
+									className={ spinButtonClasses }
 									icon={ plusIcon }
 									isSmall
 									aria-hidden="true"
@@ -244,9 +248,9 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
-									size={ size }
 								/>
 								<SpinButton
+									className={ spinButtonClasses }
 									icon={ resetIcon }
 									isSmall
 									aria-hidden="true"
@@ -255,7 +259,6 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }
-									size={ size }
 								/>
 							</HStack>
 						</Spacer>

package/src/number-control/styles/number-control-styles.ts

@@ -11,7 +11,6 @@ import InputControl from '../../input-control';
 import { COLORS } from '../../utils';
 import Button from '../../button';
 import { space } from '../../ui/utils/space';
-import type { NumberControlProps } from '../types';
 
 const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
 	if ( ! hideHTMLArrows ) {
@@ -35,23 +34,16 @@ export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
 
-const spinButtonSizeStyles = ( {
-	size,
-}: Pick< NumberControlProps, 'size' > ) => {
-	if ( size !== 'small' ) {
-		return ``;
-	}
-
-	return css`
-		width: ${ space( 5 ) };
-		min-width: ${ space( 5 ) };
-		height: ${ space( 5 ) };
-	`;
-};
-
 export const SpinButton = styled( Button )`
 	&&&&& {
 		color: ${ COLORS.ui.theme };
-		${ spinButtonSizeStyles }
 	}
 `;
+
+const smallSpinButtons = css`
+	width: ${ space( 5 ) };
+	min-width: ${ space( 5 ) };
+	height: ${ space( 5 ) };
+`;
+
+export const styles = { smallSpinButtons };

package/src/select-control/index.tsx

@@ -135,6 +135,7 @@ function UnforwardedSelectControl(
 									key={ key }
 									value={ option.value }
 									disabled={ option.disabled }
+									hidden={ option.hidden }
 								>
 									{ option.label }
 								</option>

package/src/select-control/types.ts

@@ -40,6 +40,12 @@ type SelectControlBaseProps = Pick<
 			 * @default false
 			 */
 			disabled?: boolean;
+			/**
+			 * Whether or not the option should be hidden.
+			 *
+			 * @default false
+			 */
+			hidden?: boolean;
 		}[];
 		/**
 		 * As an alternative to the `options` prop, `optgroup`s and `options` can be

package/src/z-stack/component.tsx

@@ -35,13 +35,14 @@ function UnconnectedZStack(
 
 	const clonedChildren = validChildren.map( ( child, index ) => {
 		const zIndex = isReversed ? childrenLastIndex - index : index;
-		const offsetAmount = offset * index;
+		// Only when the component is layered, the offset needs to be multiplied by
+		// the item's index, so that items can correctly stack at the right distance
+		const offsetAmount = isLayered ? offset * index : offset;
 
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
 			<ZStackChildView
-				isLayered={ isLayered }
 				offsetAmount={ offsetAmount }
 				zIndex={ zIndex }
 				key={ key }
@@ -55,6 +56,7 @@ function UnconnectedZStack(
 		<ZStackView
 			{ ...otherProps }
 			className={ className }
+			isLayered={ isLayered }
 			ref={ forwardedRef }
 		>
 			{ clonedChildren }

package/src/z-stack/stories/index.tsx

@@ -8,7 +8,6 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
 import { View } from '../../view';
 import { ZStack } from '..';
 
@@ -55,18 +54,12 @@ const Avatar = ( {
 
 const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	return (
-		<View>
-			<HStack>
-				<View>
-					<ZStack { ...args }>
-						<Avatar backgroundColor="#444" />
-						<Avatar backgroundColor="#777" />
-						<Avatar backgroundColor="#aaa" />
-						<Avatar backgroundColor="#fff" />
-					</ZStack>
-				</View>
-			</HStack>
-		</View>
+		<ZStack { ...args }>
+			<Avatar backgroundColor="#444" />
+			<Avatar backgroundColor="#777" />
+			<Avatar backgroundColor="#aaa" />
+			<Avatar backgroundColor="#fff" />
+		</ZStack>
 	);
 };
 

package/src/z-stack/styles.ts

@@ -4,36 +4,35 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { rtl } from '../utils';
-
-export const ZStackView = styled.div`
-	display: flex;
-	position: relative;
-`;
-
 export const ZStackChildView = styled.div< {
-	isLayered: boolean;
 	offsetAmount: number;
 	zIndex: number;
 } >`
-	${ ( { isLayered, offsetAmount } ) =>
-		isLayered
-			? css( rtl( { marginLeft: offsetAmount } )() )
-			: css( rtl( { right: offsetAmount * -1 } )() ) }
+	&:not( :first-of-type ) {
+		${ ( { offsetAmount } ) =>
+			css( {
+				marginInlineStart: offsetAmount,
+			} ) };
+	}
 
-	${ ( { isLayered } ) =>
-		isLayered ? positionAbsolute : positionRelative }
-
-	${ ( { zIndex } ) => css( { zIndex } ) }
-`;
-
-const positionAbsolute = css`
-	position: absolute;
+	${ ( { zIndex } ) => css( { zIndex } ) };
 `;
 
-const positionRelative = css`
+export const ZStackView = styled.div< {
+	isLayered: boolean;
+} >`
+	display: inline-grid;
+	grid-auto-flow: column;
 	position: relative;
+
+	& > ${ ZStackChildView } {
+		position: relative;
+		justify-self: start;
+
+		${ ( { isLayered } ) =>
+			isLayered
+				? // When `isLayered` is true, all items overlap in the same grid cell
+				  css( { gridRowStart: 1, gridColumnStart: 1 } )
+				: undefined };
+	}
 `;