@wordpress/components 25.3.0 → 25.5.0

package/src/text-control/index.tsx

@@ -26,13 +26,13 @@ function UnforwardedTextControl(
 		hideLabelFromVision,
 		value,
 		help,
+		id: idProp,
 		className,
 		onChange,
 		type = 'text',
 		...additionalProps
 	} = props;
-	const instanceId = useInstanceId( TextControl );
-	const id = `inspector-text-control-${ instanceId }`;
+	const id = useInstanceId( TextControl, 'inspector-text-control', idProp );
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 

package/src/text-control/test/text-control.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TextControl from '..';
+
+const noop = () => {};
+
+describe( 'TextControl', () => {
+	describe( 'When no ID prop is provided', () => {
+		it( 'should generate an ID', () => {
+			render( <TextControl onChange={ noop } value="" /> );
+
+			expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+				'id',
+				expect.stringMatching( /^inspector-text-control-/ )
+			);
+		} );
+
+		it( 'should be labelled correctly', () => {
+			const labelValue = 'Test Label';
+			render(
+				<TextControl label={ labelValue } onChange={ noop } value="" />
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: labelValue } )
+			).toBeVisible();
+		} );
+	} );
+
+	describe( 'When an ID prop is provided', () => {
+		const id = 'test-id';
+
+		it( 'should use the passed ID prop if provided', () => {
+			render( <TextControl id={ id } onChange={ noop } value="" /> );
+
+			expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'id', id );
+		} );
+
+		it( 'should be labelled correctly', () => {
+			const labelValue = 'Test Label';
+			render(
+				<TextControl
+					label={ labelValue }
+					id={ id }
+					onChange={ noop }
+					value=""
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: labelValue } )
+			).toBeVisible();
+		} );
+	} );
+} );

package/src/toolbar/toolbar-group/style.native.scss

@@ -1,11 +1,10 @@
 .container {
 	flex-direction: row;
-	border-left-width: 1px;
-	border-color: #e9eff3;
+	border-color: $light-quaternary;
 	padding-left: 5px;
 	padding-right: 5px;
 }
 
 .containerDark {
-	border-color: #525354;
+	border-color: $dark-quaternary;
 }

package/src/toolbar/toolbar-group/toolbar-group-container.native.js

@@ -1,31 +1,26 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const ToolbarGroupContainer = ( {
-	getStylesFromColorScheme,
-	passedStyle,
-	children,
-} ) => (
-	<View
-		style={ [
-			getStylesFromColorScheme( styles.container, styles.containerDark ),
-			passedStyle,
-		] }
-	>
-		{ children }
-	</View>
-);
+const ToolbarGroupContainer = ( { passedStyle, children } ) => {
+	const groupStyles = [
+		usePreferredColorSchemeStyle( styles.container, styles.containerDark ),
+		{ borderLeftWidth: StyleSheet.hairlineWidth },
+		passedStyle,
+	];
 
-export default withPreferredColorScheme( ToolbarGroupContainer );
+	return <View style={ groupStyles }>{ children }</View>;
+};
+
+export default ToolbarGroupContainer;

package/src/tooltip/README.md

@@ -28,7 +28,7 @@ The direction in which the tooltip should open relative to its parent node. Spec
 
 -   Type: `String`
 -   Required: No
--   Default: `"top center"`
+-   Default: `"bottom"`
 
 ### children