@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.2.1

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

@@ -18,7 +18,6 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
-	size: SelectSize;
 };
 
 export const Root = styled.div`
@@ -26,21 +25,11 @@ export const Root = styled.div`
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits, size }: InputProps ) => {
-	const paddings = {
-		default: {
-			paddingRight: 8,
-		},
-		small: {
-			paddingRight: 8,
-		},
-		'__unstable-large': {
-			paddingRight: disableUnits ? 16 : 8,
-		},
-	};
+const paddingStyles = ( { disableUnits }: InputProps ) => {
+	const value = disableUnits ? 3 : 24;
 
 	return css`
-		${ rtl( paddings[ size ] )() };
+		${ rtl( { paddingRight: value } )() };
 	`;
 };
 
@@ -73,24 +62,49 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-const baseUnitLabelStyles = css`
-	appearance: none;
-	background: transparent;
-	border-radius: 2px;
-	border: none;
-	box-sizing: border-box;
-	color: ${ COLORS.darkGray[ 500 ] };
-	display: block;
-	font-size: 8px;
-	letter-spacing: -0.5px;
-	outline: none;
-	padding: 2px 1px;
-	text-align-last: center;
-	text-transform: uppercase;
-	width: 20px;
-
-	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-`;
+const unitSizeStyles = ( { selectSize }: SelectProps ) => {
+	const sizes = {
+		default: {
+			height: 28,
+			lineHeight: '24px',
+			minHeight: 28,
+			top: 1,
+		},
+		small: {
+			height: 22,
+			lineHeight: '18px',
+			minHeight: 22,
+			top: 1,
+		},
+	};
+
+	return css( sizes[ selectSize ] );
+};
+
+const baseUnitLabelStyles = ( props: SelectProps ) => {
+	return css`
+		appearance: none;
+		background: transparent;
+		border-radius: 2px;
+		border: none;
+		box-sizing: border-box;
+		color: ${ COLORS.darkGray[ 500 ] };
+		display: block;
+		font-size: 8px;
+		line-height: 1;
+		letter-spacing: -0.5px;
+		outline: none;
+		padding: 2px 1px;
+		position: absolute;
+		text-align-last: center;
+		text-transform: uppercase;
+		width: 20px;
+
+		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
+		${ rtl( { right: 0 } )() }
+		${ unitSizeStyles( props ) }
+	`;
+};
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
@@ -105,7 +119,6 @@ export const UnitSelect = styled.select< SelectProps >`
 		${ baseUnitLabelStyles };
 		cursor: pointer;
 		border: 1px solid transparent;
-		height: 100%;
 
 		&:hover {
 			background-color: ${ COLORS.lightGray[ 300 ] };

package/src/unit-control/types.ts

@@ -8,14 +8,11 @@ import type { SyntheticEvent } from 'react';
  * Internal dependencies
  */
 import type { StateReducer } from '../input-control/reducer/state';
-import type {
-	InputChangeCallback,
-	Size as InputSize,
-} from '../input-control/types';
+import type { InputChangeCallback } from '../input-control/types';
 
 export type Value = number | string;
 
-export type SelectSize = InputSize;
+export type SelectSize = 'default' | 'small';
 
 export type WPUnitControlUnit = {
 	/**

package/src/z-stack/README.md

@@ -34,7 +34,7 @@ Reverse the layer ordering. When `true`, the first child has the lowest `z-index
 
 ### `offset`: `number`
 
-The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
+The amount of space between each child element. Defaults to `0`.
 
 ### `children`: `ReactNode`
 

package/src/z-stack/component.tsx

@@ -31,7 +31,7 @@ export interface ZStackProps {
 	 */
 	isReversed?: boolean;
 	/**
-	 * The amount of offset between each child element. The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
+	 * The amount of offset between each child element.
 	 *
 	 * @default 0
 	 */

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

@@ -15,7 +15,7 @@ export default {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/z-stack/styles.ts

@@ -4,11 +4,6 @@
 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;
@@ -21,8 +16,8 @@ export const ZStackChildView = styled.div< {
 } >`
 	${ ( { isLayered, offsetAmount } ) =>
 		isLayered
-			? css( rtl( { marginLeft: offsetAmount } )() )
-			: css( rtl( { right: offsetAmount * -1 } )() ) }
+			? css( { marginLeft: offsetAmount } )
+			: css( { right: offsetAmount * -1 } ) }
 
 	${ ( { isLayered } ) =>
 		isLayered ? positionAbsolute : positionRelative }

package/tsconfig.json

@@ -28,7 +28,6 @@
 		"src/base-field/**/*",
 		"src/button/**/*",
 		"src/card/**/*",
-		"src/confirm-dialog/**/*",
 		"src/dashicon/**/*",
 		"src/disabled/**/*",
 		"src/divider/**/*",
@@ -42,13 +41,11 @@
 		"src/grid/**/*",
 		"src/h-stack/**/*",
 		"src/heading/**/*",
-		"src/higher-order/with-focus-outside/**/*",
-		"src/icon/**/*",
-		"src/input-control/**/*",
 		"src/item-group/**/*",
+		"src/input-control/**/*",
+		"src/icon/**/*",
 		"src/menu-item/**/*",
 		"src/menu-group/**/*",
-		"src/modal/**/*",
 		"src/navigable-container/**/*",
 		"src/navigator/**/*",
 		"src/number-control/**/*",
@@ -60,7 +57,6 @@
 		"src/select-control/**/*",
 		"src/shortcut/**/*",
 		"src/slot-fill/**/*",
-		"src/style-provider/**/*",
 		"src/spacer/**/*",
 		"src/spinner/**/*",
 		"src/surface/**/*",