@wordpress/components 19.8.3 → 19.10.0

package/src/tools-panel/types.ts

@@ -148,7 +148,6 @@ export type ToolsPanelContext = {
 
 export type ToolsPanelControlsGroupProps = {
 	items: [ string, boolean ][];
-	onClose: () => void;
 	toggleItem: ( label: string ) => void;
 };
 

package/src/tooltip/test/index.js

@@ -149,6 +149,9 @@ describe( 'Tooltip', () => {
 			setTimeout( () => {
 				const popoverAfterTimeout = wrapper.find( 'Popover' );
 				expect( popoverAfterTimeout ).toHaveLength( 1 );
+
+				jest.runOnlyPendingTimers();
+				jest.useRealTimers();
 			}, TOOLTIP_DELAY );
 		} );
 
@@ -183,6 +186,9 @@ describe( 'Tooltip', () => {
 			setTimeout( () => {
 				const popoverAfterTimeout = wrapper.find( 'Popover' );
 				expect( popoverAfterTimeout ).toHaveLength( 1 );
+
+				jest.runOnlyPendingTimers();
+				jest.useRealTimers();
 			}, 2000 );
 		} );
 

package/src/ui/spinner/component.js

@@ -21,7 +21,7 @@ import { COLORS } from '../../utils/colors-values';
  */
 function Spinner( props, forwardedRef ) {
 	const {
-		color = COLORS.black,
+		color = COLORS.gray[ 900 ],
 		size = BASE_SIZE,
 		...otherProps
 	} = useContextSystem( props, 'Spinner' );

package/src/ui/spinner/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ Snapshot Diff:
       <div
         class="css-tada40-BarsView e1s9yo7h0"
 -       style="color: blue;"
-+       style="color: rgb(0, 0, 0);"
++       style="color: rgb(30, 30, 30);"
       >
         <div
           class="InnerBar1"
@@ -193,7 +193,7 @@ exports[`props should render correctly 1`] = `
   >
     <div
       class="emotion-4 emotion-5"
-      style="color: rgb(0, 0, 0);"
+      style="color: rgb(30, 30, 30);"
     >
       <div
         class="InnerBar1"
@@ -258,6 +258,6 @@ Snapshot Diff:
     >
       <div
         class="css-tada40-BarsView e1s9yo7h0"
-        style="color: rgb(0, 0, 0);"
+        style="color: rgb(30, 30, 30);"
       >
 `;

package/src/unit-control/index.tsx

@@ -88,7 +88,7 @@ function UnforwardedUnitControl(
 	);
 
 	const [ unit, setUnit ] = useControlledState< string | undefined >(
-		unitProp,
+		units.length === 1 ? units[ 0 ].value : unitProp,
 		{
 			initial: parsedUnit,
 			fallback: '',
@@ -178,10 +178,7 @@ function UnforwardedUnitControl(
 				: undefined;
 			const changeProps = { event, data };
 
-			onChangeProp?.(
-				`${ validParsedQuantity ?? '' }${ validParsedUnit }`,
-				changeProps
-			);
+			// The `onChange` callback already gets called, no need to call it explicitely.
 			onUnitChange?.( validParsedUnit, changeProps );
 
 			setUnit( validParsedUnit );

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

@@ -26,21 +26,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 ) => {
+	if ( disableUnits ) return '';
 
 	return css`
-		${ rtl( paddings[ size ] )() };
+		${ rtl( { paddingRight: 8 } )() };
 	`;
 };
 

package/src/unit-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnitControl Basic rendering should render custom className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,10 +1,10 @@
+  <div
+    class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33"
+  >
+    <div
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Flex"
+    >
+      <div
+        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+@@ -15,11 +15,11 @@
+        class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+      >
+        <input
+          autocomplete="off"
+          class="components-input-control__input css-gzm6eu-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+-         id="inspector-input-control-1"
++         id="inspector-input-control-2"
+          inputmode="numeric"
+          max="Infinity"
+          min="-Infinity"
+          step="1"
+          type="number"
+`;