@wordpress/components 29.6.0 → 29.8.0

package/src/utils/math.js

@@ -59,9 +59,9 @@ function getPrecision( value ) {
 /**
  * Clamps a value based on a min/max range.
  *
- * @param {number} value The value.
- * @param {number} min   The minimum range.
- * @param {number} max   The maximum range.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        max   The maximum range.
  *
  * @return {number} The clamped value.
  */
@@ -71,28 +71,23 @@ export function clamp( value, min, max ) {
 }
 
 /**
- * Clamps a value based on a min/max range with rounding
+ * Rounds a value to the nearest step offset by a minimum.
  *
- * @param {number | string} value The value.
- * @param {number}          min   The minimum range.
- * @param {number}          max   The maximum range.
- * @param {number}          step  A multiplier for the value.
+ * @param {number|string} value The value.
+ * @param {number}        min   The minimum range.
+ * @param {number}        step  The increment for the value.
  *
- * @return {number} The rounded and clamped value.
+ * @return {number} The value as a valid step.
  */
-export function roundClamp(
-	value = 0,
-	min = Infinity,
-	max = Infinity,
-	step = 1
-) {
+export function ensureValidStep( value, min, step ) {
 	const baseValue = getNumber( value );
 	const stepValue = getNumber( step );
-	const precision = getPrecision( step );
-	const rounded = Math.round( baseValue / stepValue ) * stepValue;
-	const clampedValue = clamp( rounded, min, max );
-
-	return precision
-		? getNumber( clampedValue.toFixed( precision ) )
-		: clampedValue;
+	const precision = Math.max( getPrecision( step ), getPrecision( min ) );
+	const realMin = Math.abs( min ) === Infinity ? 0 : min;
+	// If the step is not a factor of the minimum then the step must be
+	// offset by the minimum.
+	const tare = realMin % stepValue ? realMin : 0;
+	const rounded = Math.round( ( baseValue - tare ) / stepValue ) * stepValue;
+	const fromMin = rounded + tare;
+	return precision ? getNumber( fromMin.toFixed( precision ) ) : fromMin;
 }

package/src/utils/test/get-node-text.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import getNodeText from '../get-node-text';
+
+describe( 'getNodeText', () => {
+	it( 'should return an empty string for null', () => {
+		expect( getNodeText( null ) ).toBe( '' );
+	} );
+
+	it( 'should return the string representation of a string node', () => {
+		expect( getNodeText( 'Hello' ) ).toBe( 'Hello' );
+	} );
+
+	it( 'should return the string representation of a number node', () => {
+		expect( getNodeText( 123 ) ).toBe( '123' );
+	} );
+
+	it( 'should return an empty string for a boolean node', () => {
+		expect( getNodeText( true ) ).toBe( '' );
+	} );
+
+	it( 'should concatenate text from an array of nodes', () => {
+		expect( getNodeText( [ 'Hello', ' ', 'World' ] ) ).toBe(
+			'Hello World'
+		);
+	} );
+
+	it( 'should return text from a React element with children', () => {
+		const element = (
+			<div>
+				Hello <span>World</span>
+			</div>
+		);
+		expect( getNodeText( element ) ).toBe( 'Hello World' );
+	} );
+} );

package/src/utils/test/math.js

@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { add, clamp, subtract, roundClamp } from '../math';
+
+import { add, subtract, clamp, ensureValidStep } from '../math';
 
 describe( 'add', () => {
 	it( 'should add string and number values', () => {
@@ -58,44 +59,39 @@ describe( 'clamp', () => {
 	} );
 } );
 
-describe( 'roundClamp', () => {
-	it( 'should clamp a value between min and max', () => {
-		expect( roundClamp( 10, 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( 1, 1, 10 ) ).toBe( 1 );
-		expect( roundClamp( 0, 1, 10 ) ).toBe( 1 );
+describe( 'ensureValidStep', () => {
+	it( 'should work with number or string values', () => {
+		expect( ensureValidStep( '49', 0, 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, '0', 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, 0, '10' ) ).toBe( 50 );
+	} );
 
-		expect( roundClamp( 50, 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( 50, -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, 10 ) ).toBe( -10 );
+	it( 'should round to step', () => {
+		expect( ensureValidStep( 40, 0, 10 ) ).toBe( 40 );
+		expect( ensureValidStep( 42, 0, 10 ) ).toBe( 40 );
+		expect( ensureValidStep( 45, 0, 10 ) ).toBe( 50 );
+		expect( ensureValidStep( 49, 0, 10 ) ).toBe( 50 );
 
-		expect( roundClamp( '50', 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( '50', -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, '10' ) ).toBe( -10 );
+		expect( ensureValidStep( 50, 0, 15 ) ).toBe( 45 );
+		expect( ensureValidStep( 50, 0, 11 ) ).toBe( 55 );
 	} );
 
-	it( 'should clamp number or string values', () => {
-		expect( roundClamp( '50', 1, 10 ) ).toBe( 10 );
-		expect( roundClamp( '50', -10, 10 ) ).toBe( 10 );
-		expect( roundClamp( -50, -10, '10' ) ).toBe( -10 );
+	it( 'should round with float in step', () => {
+		expect( ensureValidStep( 40.5, 1, 0.1 ) ).toBe( 40.5 );
+		expect( ensureValidStep( 40.05, 1, 0.01 ) ).toBe( 40.05 );
+		expect( ensureValidStep( 40.06, 1, 0.1 ) ).toBe( 40.1 );
+		expect( ensureValidStep( 40.123005, 1, 0.001 ) ).toBe( 40.123 );
 	} );
 
-	it( 'should clamp with step', () => {
-		expect( roundClamp( 40, 1, 100, 10 ) ).toBe( 40 );
-		expect( roundClamp( 42, 1, 100, 10 ) ).toBe( 40 );
-		expect( roundClamp( 45, 1, 100, 10 ) ).toBe( 50 );
-		expect( roundClamp( 49, 1, 100, 10 ) ).toBe( 50 );
-		expect( roundClamp( 50, 1, 100, 10 ) ).toBe( 50 );
-
-		expect( roundClamp( 50, 1, 100, 15 ) ).toBe( 45 );
-		expect( roundClamp( 50, 1, 100, '15' ) ).toBe( 45 );
-		expect( roundClamp( 50, 1, 100, 11 ) ).toBe( 55 );
+	it( 'should round to steps starting from min', () => {
+		expect( ensureValidStep( 10, 0.25, 1 ) ).toBe( 10.25 );
+		expect( ensureValidStep( 10, -20.25, 1 ) ).toBe( 9.75 );
+		expect( ensureValidStep( 10.5, 0.05, 0.1 ) ).toBe( 10.45 );
+		expect( ensureValidStep( 10.51, 0.05, 0.1 ) ).toBe( 10.55 );
 	} );
 
-	it( 'should clamp with float in step', () => {
-		expect( roundClamp( 40, 1, 100, 1 ) ).toBe( 40 );
-		expect( roundClamp( 40.5, 1, 100, 0.1 ) ).toBe( 40.5 );
-		expect( roundClamp( 40.05, 1, 100, 0.01 ) ).toBe( 40.05 );
-		expect( roundClamp( 40.06, 1, 100, 0.1 ) ).toBe( 40.1 );
-		expect( roundClamp( 40.123005, 1, 100, 0.001 ) ).toBe( 40.123 );
+	it( 'should round with a precision that’s the greater of min and step', () => {
+		expect( ensureValidStep( 10.061, 0.01, 0.1 ) ).toBe( 10.11 );
+		expect( ensureValidStep( 10.105, 0.1, 0.01 ) ).toBe( 10.11 );
 	} );
 } );

package/src/utils/theme-variables.scss

@@ -4,10 +4,6 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-
-// Define accent color transparent variants.
-$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
-
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));