@wordpress/components 19.12.0 → 19.15.0

package/src/range-control/{rail.js → rail.tsx}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * WordPress dependencies
  */
@@ -10,15 +9,27 @@ import { isRTL } from '@wordpress/i18n';
 import RangeMark from './mark';
 import { MarksWrapper, Rail } from './styles/range-control-styles';
 
-export default function RangeRail( {
-	disabled = false,
-	marks = false,
-	min = 0,
-	max = 100,
-	step = 1,
-	value = 0,
-	...restProps
-} ) {
+import type { WordPressComponentProps } from '../ui/context';
+import type {
+	MarksProps,
+	RangeMarkProps,
+	RailProps,
+	UseMarksArgs,
+} from './types';
+
+export default function RangeRail(
+	props: WordPressComponentProps< RailProps, 'span' >
+) {
+	const {
+		disabled = false,
+		marks = false,
+		min = 0,
+		max = 100,
+		step = 1,
+		value = 0,
+		...restProps
+	} = props;
+
 	return (
 		<>
 			<Rail disabled={ disabled } { ...restProps } />
@@ -36,17 +47,17 @@ export default function RangeRail( {
 	);
 }
 
-function Marks( {
-	disabled = false,
-	marks = false,
-	min = 0,
-	max = 100,
-	step = 1,
-	value = 0,
-} ) {
-	if ( step === 'any' ) {
-		step = 1;
-	}
+function Marks( props: WordPressComponentProps< MarksProps, 'span' > ) {
+	const {
+		disabled = false,
+		marks = false,
+		min = 0,
+		max = 100,
+		step: stepProp = 1,
+		value = 0,
+	} = props;
+
+	const step = stepProp === 'any' ? 1 : stepProp;
 	const marksData = useMarks( { marks, min, max, step, value } );
 
 	return (
@@ -66,7 +77,13 @@ function Marks( {
 	);
 }
 
-function useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) {
+function useMarks( {
+	marks,
+	min = 0,
+	max = 100,
+	step = 1,
+	value = 0,
+}: UseMarksArgs ) {
 	if ( ! marks ) {
 		return [];
 	}
@@ -78,7 +95,7 @@ function useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) {
 		while ( count > marks.push( { value: step * marks.length + min } ) );
 	}
 
-	const placedMarks = [];
+	const placedMarks: RangeMarkProps[] = [];
 	marks.forEach( ( mark, index ) => {
 		if ( mark.value < min || mark.value > max ) {
 			return;

package/src/range-control/stories/index.tsx

@@ -0,0 +1,244 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import RangeControl from '..';
+
+const ICONS = { starEmpty, starFilled, styles, wordpress };
+
+const meta: ComponentMeta< typeof RangeControl > = {
+	component: RangeControl,
+	title: 'Components/RangeControl',
+	argTypes: {
+		afterIcon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+		beforeIcon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+		color: { control: { type: 'color' } },
+		help: { control: { type: 'text' } },
+		icon: { control: { type: null } },
+		marks: { control: { type: 'object' } },
+		onBlur: { control: { type: null } },
+		onChange: { action: 'onChange' },
+		onFocus: { control: { type: null } },
+		onMouseLeave: { control: { type: null } },
+		onMouseMove: { control: { type: null } },
+		railColor: { control: { type: 'color' } },
+		step: { control: { type: 'number' } },
+		trackColor: { control: { type: 'color' } },
+		type: { control: { type: 'check' }, options: [ 'stepper' ] },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof RangeControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< number >();
+
+	return (
+		<RangeControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange?.( v );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof RangeControl > = Template.bind(
+	{}
+);
+Default.args = {
+	help: 'Please select how transparent you would like this.',
+	initialPosition: 50,
+	label: 'Opacity',
+	max: 100,
+	min: 0,
+};
+
+/**
+ * Setting the `step` prop to `"any"` will allow users to select non-integer
+ * values. This also overrides both `withInputField` and `showTooltip` props to
+ * `false`.
+ */
+export const WithAnyStep: ComponentStory< typeof RangeControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< number >();
+
+	return (
+		<>
+			<RangeControl
+				{ ...args }
+				value={ value }
+				onChange={ ( v ) => {
+					setValue( v );
+					onChange?.( v );
+				} }
+			/>
+			<hr style={ { marginTop: '5em' } } />
+			<p>Current value: { value }</p>
+		</>
+	);
+};
+WithAnyStep.args = {
+	label: 'Brightness',
+	step: 'any',
+};
+
+const MarkTemplate: ComponentStory< typeof RangeControl > = ( {
+	label,
+	onChange,
+	...args
+} ) => {
+	const [ automaticValue, setAutomaticValue ] = useState< number >();
+	const [ customValue, setCustomValue ] = useState< number >();
+
+	return (
+		<>
+			<h2>{ label }</h2>
+			<RangeControl
+				{ ...args }
+				label="Automatic marks"
+				marks
+				onChange={ ( v ) => {
+					setAutomaticValue( v );
+					onChange?.( v );
+				} }
+				value={ automaticValue }
+			/>
+			<RangeControl
+				{ ...args }
+				label="Custom marks"
+				onChange={ ( v ) => {
+					setCustomValue( v );
+					onChange?.( v );
+				} }
+				value={ customValue }
+			/>
+		</>
+	);
+};
+
+const marksBase = [
+	{ value: 0, label: '0' },
+	{ value: 1, label: '1' },
+	{ value: 2, label: '2' },
+	{ value: 8, label: '8' },
+	{ value: 10, label: '10' },
+];
+
+const marksWithNegatives = [
+	...marksBase,
+	{ value: -1, label: '-1' },
+	{ value: -2, label: '-2' },
+	{ value: -4, label: '-4' },
+	{ value: -8, label: '-8' },
+];
+
+/**
+ * Use `marks` to render a visual representation of `step` ticks. Marks may be
+ * automatically generated or custom mark indicators can be provided by an
+ * `Array`.
+ */
+export const WithIntegerStepAndMarks: ComponentStory< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithIntegerStepAndMarks.args = {
+	label: 'Integer Step',
+	marks: marksBase,
+	max: 10,
+	min: 0,
+	step: 1,
+};
+
+/**
+ * Decimal values may be used for `marks` rendered as a visual representation of
+ * `step` ticks. Marks may be automatically generated or custom mark indicators
+ * can be provided by an `Array`.
+ */
+export const WithDecimalStepAndMarks: ComponentStory< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithDecimalStepAndMarks.args = {
+	marks: [
+		...marksBase,
+		{ value: 3.5, label: '3.5' },
+		{ value: 5.8, label: '5.8' },
+	],
+	max: 10,
+	min: 0,
+	step: 0.1,
+};
+
+/**
+ * A negative `min` value can be used to constrain `RangeControl` values. Mark
+ * indicators can represent negative values as well. Marks may be automatically
+ * generated or custom mark indicators can be provided by an `Array`.
+ */
+export const WithNegativeMinimumAndMarks: ComponentStory<
+	typeof RangeControl
+> = MarkTemplate.bind( {} );
+
+WithNegativeMinimumAndMarks.args = {
+	marks: marksWithNegatives,
+	max: 10,
+	min: -10,
+	step: 1,
+};
+
+/**
+ * The entire range of valid values for a `RangeControl` may be negative. Mark
+ * indicators can represent negative values as well. Marks may be automatically
+ * generated or custom mark indicators can be provided by an `Array`.
+ */
+export const WithNegativeRangeAndMarks: ComponentStory< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithNegativeRangeAndMarks.args = {
+	marks: marksWithNegatives,
+	max: -1,
+	min: -10,
+	step: 1,
+};
+
+/**
+ * When a `RangeControl` has a `step` value of `any` a user may select
+ * non-integer values. This may still be used in conjunction with `marks`
+ * rendering a visual representation of `step` ticks.
+ */
+export const WithAnyStepAndMarks: ComponentStory< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithAnyStepAndMarks.args = {
+	marks: marksBase,
+	max: 10,
+	min: 0,
+	step: 'any',
+};

package/src/range-control/styles/{range-control-styles.js → range-control-styles.ts}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -12,6 +11,15 @@ import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
+import type {
+	RangeMarkProps,
+	RailProps,
+	ThumbProps,
+	TooltipProps,
+	TrackProps,
+	WrapperProps,
+} from '../types';
+
 const rangeHeightValue = 30;
 const railHeight = 4;
 const rangeHeight = () =>
@@ -30,13 +38,13 @@ export const Root = styled.div`
 	width: 100%;
 `;
 
-const wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {
-	return css( { color: colorProp } );
-};
-const wrapperMargin = ( { marks } ) =>
-	css( { marginBottom: marks ? 16 : null } );
+const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
+	css( { color } );
 
-export const Wrapper = styled.div`
+const wrapperMargin = ( { marks }: WrapperProps ) =>
+	css( { marginBottom: marks ? 16 : undefined } );
+
+export const Wrapper = styled.div< WrapperProps >`
 	box-sizing: border-box;
 	color: ${ COLORS.blue.medium.focus };
 	display: block;
@@ -61,16 +69,14 @@ export const AfterIconWrapper = styled.span`
 	${ rtl( { marginLeft: 6 } ) }
 `;
 
-const railBackgroundColor = ( { disabled, railColor } ) => {
-	let background = railColor || null;
+const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
+	let background = railColor || '';
 
 	if ( disabled ) {
 		background = COLORS.lightGray[ 400 ];
 	}
 
-	return css( {
-		background,
-	} );
+	return css( { background } );
 };
 
 export const Rail = styled.span`
@@ -89,16 +95,14 @@ export const Rail = styled.span`
 	${ railBackgroundColor };
 `;
 
-const trackBackgroundColor = ( { disabled, trackColor } ) => {
+const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 	let background = trackColor || 'currentColor';
 
 	if ( disabled ) {
 		background = COLORS.lightGray[ 800 ];
 	}
 
-	return css( {
-		background,
-	} );
+	return css( { background } );
 };
 
 export const Track = styled.span`
@@ -124,7 +128,7 @@ export const MarksWrapper = styled.span`
 	user-select: none;
 `;
 
-const markFill = ( { disabled, isFilled } ) => {
+const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
 	let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];
 
 	if ( disabled ) {
@@ -147,7 +151,7 @@ export const Mark = styled.span`
 	${ markFill };
 `;
 
-const markLabelFill = ( { isFilled } ) => {
+const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 	return css( {
 		color: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],
 	} );
@@ -166,7 +170,7 @@ export const MarkLabel = styled.span`
 	${ markLabelFill };
 `;
 
-const thumbColor = ( { disabled } ) =>
+const thumbColor = ( { disabled }: ThumbProps ) =>
 	disabled
 		? css`
 				background-color: ${ COLORS.lightGray[ 800 ] };
@@ -198,7 +202,7 @@ export const ThumbWrapper = styled.span`
 	) };
 `;
 
-const thumbFocus = ( { isFocused } ) => {
+const thumbFocus = ( { isFocused }: ThumbProps ) => {
 	return isFocused
 		? css`
 				&::before {
@@ -216,7 +220,7 @@ const thumbFocus = ( { isFocused } ) => {
 		: '';
 };
 
-export const Thumb = styled.span`
+export const Thumb = styled.span< ThumbProps >`
 	align-items: center;
 	border-radius: 50%;
 	box-sizing: border-box;
@@ -245,13 +249,13 @@ export const InputRange = styled.input`
 	width: calc( 100% + ${ thumbSize }px );
 `;
 
-const tooltipShow = ( { show } ) => {
+const tooltipShow = ( { show }: TooltipProps ) => {
 	return css( {
 		opacity: show ? 1 : 0,
 	} );
 };
 
-const tooltipPosition = ( { position } ) => {
+const tooltipPosition = ( { position }: TooltipProps ) => {
 	const isBottom = position === 'bottom';
 
 	if ( isBottom ) {
@@ -265,7 +269,7 @@ const tooltipPosition = ( { position } ) => {
 	`;
 };
 
-export const Tooltip = styled.span`
+export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: 2px;
 	box-sizing: border-box;