RangeControls: Improve UI + UX (#19916)

packages/components/src/font-size-picker/index.js

@@ -95,7 +95,7 @@ export default function FontSizePicker( {
 
 	const options = getSelectOptions( fontSizes, disableCustomFontSizes );
 
-	const rangeControlNumberId = `components-range-control__number#${ instanceId }`;
+	const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
 	return (
 		<fieldset className="components-font-size-picker">
 			<legend className="screen-reader-text">
@@ -116,13 +116,13 @@ export default function FontSizePicker( {
 					/>
 				) }
 				{ ! withSlider && ! disableCustomFontSizes && (
-					<div className="components-range-control__number-container">
-						<label htmlFor={ rangeControlNumberId }>
+					<div className="components-font-size-picker__number-container">
+						<label htmlFor={ fontSizePickerNumberId }>
 							{ __( 'Custom' ) }
 						</label>
 						<input
-							id={ rangeControlNumberId }
-							className="components-range-control__number"
+							id={ fontSizePickerNumberId }
+							className="components-font-size-picker__number"
 							type="number"
 							onChange={ onChangeValue }
 							aria-label={ __( 'Custom' ) }

packages/components/src/font-size-picker/style.scss

@@ -5,12 +5,15 @@
 	margin-bottom: $grid-size * 3;
 
 	// Apply the same height as the isSmall Reset button.
-	.components-range-control__number {
+	.components-font-size-picker__number {
+		display: inline-block;
+		font-weight: 500;
 		height: 30px;
 		margin-bottom: 0;
-		margin-top: 5px;
 		margin-left: 0;
 		margin-right: $grid-size;
+		margin-top: 5px;
+		width: 54px;
 
 		// Show the reset button as disabled until a value is entered.
 		&[value=""] + .components-button {

packages/components/src/range-control/README.md

@@ -152,6 +152,14 @@ If this property is true, a button to reset the the slider is rendered.
 - Required: No
 - Platform: Web | Mobile
 
+#### disabled
+
+Disables the `input`, preventing new values from being applied.
+
+- Type: `Boolean`
+- Required: No
+- Platform: Web
+
 #### initialPosition
 
 If no value exists this prop contains the slider starting position.
@@ -160,13 +168,41 @@ If no value exists this prop contains the slider starting position.
 - Required: No
 - Platform: Web | Mobile
 
-#### value
 
-The current value of the range slider.
+#### marks
 
-- Type: `Number`
-- Required: Yes
-- Platform: Web | Mobile
+Renders a visual representation of `step` ticks. Custom mark indicators can be provided by an `Array`.
+
+Example:
+
+```jsx
+const marks = [
+	{
+		value: 0,
+		label: '0',
+	},
+	{
+		value: 1,
+		label: '1',
+	},
+	{
+		value: 8,
+		label: '8',
+	},
+	{
+		value: 10,
+		label: '10',
+	},
+];
+
+const MyRangeControl() {
+	return (<RangeControl marks={ marks } min={ 0 } max={ 10 } step={ 1 } />)
+}
+```
+
+- Type: `Array|Boolean`
+- Required: No
+- Platform: Web
 
 #### onChange
 
@@ -193,6 +229,54 @@ The maximum value accepted. If higher values are inserted onChange will not be c
 - Required: No
 - Platform: Web | Mobile
 
+#### renderTooltipContent
+
+A way to customize the rendered UI of the value. Example:
+
+```jsx
+const customTooltipContent = value => `${value}%`
+
+const MyRangeControl() {
+	return (<RangeControl renderTooltipContent={ customTooltipContent } />)
+}
+```
+
+- Type: `Function`
+- Required: No
+- Platform: Web
+
+#### showTooltip
+
+Forcing the Tooltip UI to show or hide.
+
+- Type: `Boolean`
+- Required: No
+- Platform: Web
+
+#### step
+
+The stepping interval between `min` and `max` values. Step is used both for user interface and validation purposes.
+
+- Type: `Number`
+- Required: No
+- Platform: Web
+
+#### value
+
+The current value of the range slider.
+
+- Type: `Number`
+- Required: Yes
+- Platform: Web | Mobile
+
+#### withInputField
+
+Determines if the `input` number field will render next to the RangeControl.
+
+- Type: `Boolean`
+- Required: No
+- Platform: Web
+
 #### icon
 
 An icon to be shown above the slider next to it's container title.