RangeControl: Convert component to TypeScript (#40535)

WordPress · Jul 12, 2022 · f60c713 · f60c713
1 parent c4e7bf5
commit f60c713
Show file tree

Hide file tree

Showing 14 changed files with 761 additions and 337 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -27,6 +27,7 @@
 -   `Autocomplete`: Refactor away from `_.deburr()` ([#42266](https://github.com/WordPress/gutenberg/pull/42266/)).
 -   `MenuItem`: Refactor away from `_.isString()` ([#42268](https://github.com/WordPress/gutenberg/pull/42268/)).
 -   `Shortcut`: Refactor away from `_.isString()` ([#42268](https://github.com/WordPress/gutenberg/pull/42268/)).
+-   `RangeControl`: Convert to TypeScript ([#40535](https://github.com/WordPress/gutenberg/pull/40535)).
 
 ## 19.14.0 (2022-06-29)
 

diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
@@ -106,7 +106,7 @@ export function useBorderControl(
 	);
 
 	const onSliderChange = useCallback(
-		( value: string ) => {
+		( value?: number ) => {
 			onWidthChange( `${ value }${ widthUnit }` );
 		},
 		[ onWidthChange, widthUnit ]

diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
@@ -52,6 +52,8 @@ export const InputWithSlider = ( {
 				min={ min }
 				max={ max }
 				value={ value }
+				// @ts-expect-error
+				// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
 				onChange={ onChange }
 				withInputField={ false }
 			/>

diff --git a/packages/components/src/icon/index.tsx b/packages/components/src/icon/index.tsx
@@ -20,7 +20,7 @@ import { SVG } from '@wordpress/primitives';
 import Dashicon from '../dashicon';
 import type { IconKey as DashiconIconKey } from '../dashicon/types';
 
-type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;
+export type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;
 
 interface BaseProps< P > {
 	/**

diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
@@ -109,75 +109,100 @@ const MyRangeControl = () => {
 };
 ```
 
-### Props
+## Props
 
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input elements.
 
-#### label
+### `afterIcon`: `string|Function|WPComponent|null`
 
-If this property is added, a label will be generated using label property as the content.
+If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered after the slider with the icon equal to `afterIcon`.
+
+For more information on `IconType` see the [Icon component](/packages/components/src/icon/index.tsx#L23).
+
+-   Required: No
+-   Platform: Web
+
+### `allowReset`: `boolean`
+
+If this property is true, a button to reset the slider is rendered.
 
--   Type: `String`
 -   Required: No
+-   Default: `false`
 -   Platform: Web | Mobile
 
-#### help
+### `beforeIcon`: `string|Function|WPComponent|null`
 
-If this property is added, a help text will be generated using help property as the content.
+If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered before the slider with the icon equal to `beforeIcon`.
+
+For more information on `IconType` see the [Icon component](/packages/components/src/icon/index.tsx#L23).
 
--   Type: `String|WPElement`
 -   Required: No
 -   Platform: Web
 
-#### beforeIcon
+### `color`: `CSSProperties['color']`
 
-If this property is added, a DashIcon component will be rendered before the slider with the icon equal to beforeIcon
+CSS color string for the `RangeControl` wrapper.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### afterIcon
+### `currentInput`: `number`
 
-If this property is added, a DashIcon component will be rendered after the slider with the icon equal to afterIcon
+The current input to use as a fallback if `value` is currently `undefined`.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### allowReset
+### `disabled`: `boolean`
 
-If this property is true, a button to reset the slider is rendered.
+Disables the `input`, preventing new values from being applied.
 
--   Type: `Boolean`
 -   Required: No
--   Platform: Web | Mobile
+-   Platform: Web
 
-#### disabled
 
-Disables the `input`, preventing new values from being applied.
+### `help`: `string|WPElement`
+
+If this property is added, a help text will be generated using help property as the content.
 
--   Type: `Boolean`
 -   Required: No
 -   Platform: Web
 
-#### initialPosition
+### `hideLabelFromVision`: `boolean`
+
+Provides control over whether the label will only be visible to screen readers.
+
+- Required: No
+
+### `icon`: `string`
+
+An icon to be shown above the slider next to its container title.
+
+-   Required: No
+-   Platform: Mobile
+
+### `initialPosition`: `number`
 
 If no value exists this prop contains the slider starting position.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web | Mobile
 
-#### isShiftStepEnabled
+### `isShiftStepEnabled`: `boolean`
 
 Passed as a prop to the `NumberControl` component and is only applicable if `withInputField` is true. If true, while the number input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key will change the value by the `shiftStep` value.
 
--   Type: `Boolean`
 -   Required: No
 
-#### marks
+### `label`: `string`
+
+If this property is added, a label will be generated using label property as the content.
+
+-   Required: No
+-   Platform: Web | Mobile
+
+### `marks`: `Array|boolean`
 
 Renders a visual representation of `step` ticks. Custom mark indicators can be provided by an `Array`.
 
@@ -204,49 +229,72 @@ const marks = [
 ];
 
 const MyRangeControl() {
-	return (<RangeControl marks={ marks } min={ 0 } max={ 10 } step={ 1 } />)
+	return ( <RangeControl marks={ marks } min={ 0 } max={ 10 } step={ 1 } /> )
 }
 ```
 
--   Type: `Array|Boolean`
 -   Required: No
 -   Platform: Web
 
-#### onChange
+### `onBlur`: `FocusEventHandler< HTMLInputElement >`
+
+Callback for when `RangeControl` input loses focus.
+
+-   Required: No
+-   Platform: Web
+
+### `onChange`: `( value?: number ) => void`
 
 A function that receives the new value. The value will be less than `max` and more than `min` unless a reset (enabled by `allowReset`) has occurred. In which case the value will be either that of `resetFallbackValue` if it has been specified or otherwise `undefined`.
 
--   Type: `function`
--   Required: Yes
+-   Required: No
 -   Platform: Web | Mobile
 
-#### min
+### `onFocus`: `FocusEventHandler< HTMLInputElement >`
+
+Callback for when `RangeControl` input gains focus.
+
+-   Required: No
+-   Platform: Web
+
+### `onMouseLeave`: `MouseEventHandler< HTMLInputElement >`
+
+Callback for when mouse exits the `RangeControl`.
+
+-   Required: No
+-   Platform: Web
+
+### `onMouseMove`: `MouseEventHandler< HTMLInputElement >`
+
+Callback for when mouse moves within the `RangeControl`.
+
+-   Required: No
+-   Platform: Web
+
+### `min`: `number`
 
 The minimum `value` allowed.
 
--   Type: `Number`
 -   Required: No
 -   Default: 0
 -   Platform: Web | Mobile
 
-#### max
+### `max`: `number`
 
 The maximum `value` allowed.
 
--   Type: `Number`
 -   Required: No
 -   Default: 100
 -   Platform: Web | Mobile
 
-#### railColor
+### `railColor`: `CSSProperties[ 'color' ]`
 
-Customizes the (background) color of the rail element.
+CSS color string to customize the rail element's background.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### renderTooltipContent
+### `renderTooltipContent`: ( value ) => value
 
 A way to customize the rendered UI of the value. Example:
 
@@ -258,89 +306,69 @@ const MyRangeControl() {
 }
 ```
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### resetFallbackValue
+### `resetFallbackValue`: `number`
 
 The value to revert to if the Reset button is clicked (enabled by `allowReset`)
 
--   Type: `Number`
--   Required: No
--   Platform: Web
-
-#### showTooltip
-
-Forcing the Tooltip UI to show or hide. This is overriden to `false` when `step` is set to the special string value `any`.
-
--   Type: `Boolean`
 -   Required: No
 -   Platform: Web
 
-#### step
+### `separatorType`: `'none' | 'fullWidth' | 'topFullWidth'`
 
-The minimum amount by which `value` changes. It is also a factor in validation as `value` must be a multiple of `step` (offset by `min`) to be valid. Accepts the special string value `any` that voids the validation constraint and overrides both `withInputField` and `showTooltip` props to `false`.
+Define if separator line under/above control row should be disabled or full width. By default it is placed below excluding underline the control icon.
 
--   Type: `Number | "any"`
 -   Required: No
--   Platform: Web
+-   Platform: Mobile
 
-#### shiftStep
+### `shiftStep`: `number`
 
 Passed as a prop to the `NumberControl` component and is only applicable if `withInputField` and `isShiftStepEnabled` are both true and while the number input has focus. Acts as a multiplier of `step`.
 
--   Type: `Number`
 -   Required: No
 
-#### trackColor
+### `showTooltip`: `boolean`
 
-Customizes the (background) color of the track element.
+Forcing the Tooltip UI to show or hide. This is overridden to `false` when `step` is set to the special string value `any`.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### value
+### `step`: `number | 'any'`
 
-The current value of the range slider.
-
--   Type: `Number`
--   Required: Yes
--   Platform: Web | Mobile
+The minimum amount by which `value` changes. It is also a factor in validation as `value` must be a multiple of `step` (offset by `min`) to be valid. Accepts the special string value `any` that voids the validation constraint and overrides both `withInputField` and `showTooltip` props to `false`.
 
-#### withInputField
+-   Required: No
+-   Platform: Web
+### `trackColor`: `CSSProperties[ 'color' ]`
 
-Determines if the `input` number field will render next to the RangeControl. This is overriden to `false` when `step` is set to the special string value `any`.
+CSS color string to customize the track element's background.
 
--   Type: `Boolean`
 -   Required: No
 -   Platform: Web
 
-#### icon
+### `type`: `string`
 
-An icon to be shown above the slider next to it's container title.
+Define if the value selection should present a stepper control or a slider control in the bottom sheet on mobile. To use the stepper set the type value as `stepper`. Defaults to slider if no option is provided.
 
--   Type: `String`
 -   Required: No
 -   Platform: Mobile
 
-#### separatorType
+### `value`: `number`
 
-Define if separator line under/above control row should be disabled or full width. By default it is placed below excluding underline the control icon.
+The current value of the range slider.
 
--   Type: `String Enum`
--   Values: `none` | `fullWidth` | `topFullWidth`
 -   Required: No
--   Platform: Mobile
+-   Platform: Web | Mobile
 
-#### type
+### `withInputField`: `boolean`
 
-Define if the value selection should present a stepper control or a slider control in the bottom sheet on mobile. To use the stepper set the type value as `stepper`. Defaults to slider if no option is provided.
+Determines if the `input` number field will render next to the RangeControl. This is overridden to `false` when `step` is set to the special string value `any`.
 
--   Type: `String`
 -   Required: No
--   Platform: Mobile
+-   Platform: Web
 
 ## Related components