← All changes | src/content-helper/common/components/input-range/component.tsx +7 -2 3.18.1 → 3.24.2 View file →

		@@ -1,13 +1,13 @@
1	1	/**
2	2	* WordPress dependencies
3	3	*/
4	4	import {
5		- __experimentalHeading as Heading,
6	5	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
7	6	__experimentalNumberControl as NumberControl,
8	7	RangeControl,
9	8	} from '@wordpress/components';
	9	+import { useInstanceId } from '@wordpress/compose';
10	10
11	11	/**
12	12	* Defines the props structure for InputRange.
13	13	*
		@@ -45,13 +45,18 @@
45	45	initialPosition,
46	46	disabled,
47	47	className,
48	48	}: Readonly<InputRangeProps> ): React.JSX.Element => {
	49	+ const numberControlId = `parsely-inputrange-control-${ useInstanceId( InputRange ) }`;
	50	+
49	51	return (
50	52	<div className={ `parsely-inputrange-control ${ className ? className : '' }` }>
51		- <Heading className={ 'parsely-inputrange-control__label' } level={ 3 }>{ label }</Heading>
	53	+ <label htmlFor={ numberControlId } className={ 'wp-parsely-editor-sidebar-label' }>
	54	+ { label }
	55	+ </label>
52	56	<div className={ 'parsely-inputrange-control__controls' }>
53	57	<NumberControl
	58	+ id={ numberControlId }
54	59	disabled={ disabled }
55	60	value={ value }
56	61	suffix={ <InputControlSuffixWrapper>{ suffix }</InputControlSuffixWrapper> }
57	62	size={ size ?? '__unstable-large' }