From 6a4f4bbb7d8dfc6bedb81647c5b72da2702ca728 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 11 Mar 2022 04:13:21 +0900 Subject: [PATCH 1/3] RangeControl: Refactor stories to use Controls --- .../src/range-control/stories/index.js | 209 ++++++++---------- 1 file changed, 90 insertions(+), 119 deletions(-) diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js index fb52d8b7639c0..e423bd3ae1391 100644 --- a/packages/components/src/range-control/stories/index.js +++ b/packages/components/src/range-control/stories/index.js @@ -1,145 +1,127 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; -import { boolean, number, text } from '@storybook/addon-knobs'; - /** * WordPress dependencies */ import { useState } from '@wordpress/element'; -import { wordpress } from '@wordpress/icons'; +import { styles, wordpress } from '@wordpress/icons'; /** * Internal dependencies */ import RangeControl from '../index'; -import { COLORS } from '../../utils'; + +const ICONS = { styles, wordpress }; export default { title: 'Components/RangeControl', component: RangeControl, + argTypes: { + afterIcon: { + control: { type: 'select' }, + options: Object.keys( ICONS ), + mapping: ICONS, + }, + allowReset: { control: { type: 'boolean' } }, + beforeIcon: { + control: { type: 'select' }, + options: Object.keys( ICONS ), + mapping: ICONS, + }, + color: { control: { type: 'color' } }, + disabled: { control: { type: 'boolean' } }, + help: { control: { type: 'text' } }, + marks: { control: { type: 'object' } }, + min: { control: { type: 'number' } }, + max: { control: { type: 'number' } }, + railColor: { control: { type: 'color' } }, + showTooltip: { control: { type: 'boolean' } }, + step: { control: { type: 'number' } }, + trackColor: { control: { type: 'color' } }, + withInputField: { control: { type: 'boolean' } }, + }, parameters: { - knobs: { disable: false }, + docs: { source: { state: 'open' } }, }, }; -const RangeControlWithState = ( props ) => { - const initialValue = props.value === undefined ? 5 : props.value; +const RangeControlWithState = ( { initialValue, ...props } ) => { const [ value, setValue ] = useState( initialValue ); return ; }; -const DefaultExample = () => { - const [ value, setValue ] = useState( undefined ); - - const showBeforeIcon = boolean( 'beforeIcon', false ); - const showAfterIcon = boolean( 'afterIcon', false ); - - const props = { - afterIcon: showAfterIcon ? wordpress : undefined, - allowReset: boolean( 'allowReset', false ), - beforeIcon: showBeforeIcon ? wordpress : undefined, - color: text( 'color', COLORS.ui.theme ), - disabled: boolean( 'disabled', false ), - help: text( 'help', '' ), - label: text( 'label', 'Range Label' ), - marks: boolean( 'marks', false ), - max: number( 'max', 100 ), - min: number( 'min', 0 ), - showTooltip: boolean( 'showTooltip', false ), - step: text( 'step', 1 ), - railColor: text( 'railColor', null ), - trackColor: text( 'trackColor', null ), - withInputField: boolean( 'withInputField', true ), - value, - onChange: setValue, - }; - - return ( - - - - ); -}; - -const RangeControlLabeledByMarksType = ( props ) => { - const label = Array.isArray( props.marks ) ? 'Custom' : 'Automatic'; - return ; +export const Default = RangeControlWithState.bind( {} ); +Default.args = { + label: 'Range label', }; -export const _default = () => { - return ; +/** + * The `initialPosition` prop sets the starting position of the slider when no `value` is provided. + */ +export const InitialValueZero = RangeControlWithState.bind( {} ); +InitialValueZero.args = { + ...Default.args, + initialPosition: 0, + max: 20, }; -export const InitialValueZero = () => { - const label = text( 'Label', 'How many columns should this use?' ); +/** + * 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 = ( props ) => { + const [ value, setValue ] = useState( 1.2345 ); return ( - + <> + +

Current value: { value }

+ ); }; - -export const withAnyStep = () => { - return ; +WithAnyStep.args = { + label: 'Brightness', + step: 'any', }; -export const withHelp = () => { - const label = text( 'Label', 'How many columns should this use?' ); - const help = text( - 'Help Text', - 'Please select the number of columns you would like this to contain.' - ); - - return ; +export const WithHelp = RangeControlWithState.bind( {} ); +WithHelp.args = { + ...Default.args, + label: 'How many columns should this use?', + help: 'Please select the number of columns you would like this to contain.', }; -export const withMinimumAndMaximumLimits = () => { - const label = text( 'Label', 'How many columns should this use?' ); - const min = number( 'Min Value', 2 ); - const max = number( 'Max Value', 10 ); - - return ; +/** + * Set `min` and `max` values to constrain the range of allowed values. + */ +export const WithMinimumAndMaximumLimits = RangeControlWithState.bind( {} ); +WithMinimumAndMaximumLimits.args = { + ...Default.args, + min: 2, + max: 10, }; -export const withIconBefore = () => { - const label = text( 'Label', 'How many columns should this use?' ); - const showIcon = boolean( 'icon', true ); - - return ( - - ); +export const WithIconBefore = RangeControlWithState.bind( {} ); +WithIconBefore.args = { + ...Default.args, + beforeIcon: wordpress, }; -export const withIconAfter = () => { - const label = text( 'Label', 'How many columns should this use?' ); - const showIcon = boolean( 'icon', true ); - - return ( - - ); +export const WithIconAfter = RangeControlWithState.bind( {} ); +WithIconAfter.args = { + ...Default.args, + afterIcon: wordpress, }; -export const withReset = () => { - const label = text( 'Label', 'How many columns should this use?' ); - - return ; +export const WithReset = RangeControlWithState.bind( {} ); +WithReset.args = { + ...Default.args, + allowReset: true, }; -export const marks = () => { +/** + * Use `marks` to render a visual representation of `step` ticks. Custom mark indicators can be provided by an `Array`. + */ +export const WithMarks = ( props ) => { const marksBase = [ { value: 0, label: '0' }, { value: 1, label: '1' }, @@ -164,11 +146,15 @@ export const marks = () => { const minNegative = { min: -10, max: 10, step: 1 }; const rangeNegative = { min: -10, max: -1, step: 1 }; - // Use a short alias to keep formatting to fewer lines. - const Range = RangeControlLabeledByMarksType; + const Range = ( localProps ) => { + const label = Array.isArray( localProps.marks ) + ? 'Custom' + : 'Automatic'; + return ; + }; return ( - + <>

Integer Step

@@ -188,21 +174,6 @@ export const marks = () => {

Any Step

- + ); }; - -export const multiple = () => { - return ( - - - - - - - ); -}; - -const Wrapper = styled.div` - padding: 60px 40px; -`; From 3c7ba2b5d6eb6a68e76be7468d12fc6ae618cb78 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 19 Mar 2022 00:40:26 +0900 Subject: [PATCH 2/3] Remove unused `initialValue` --- packages/components/src/range-control/stories/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js index e423bd3ae1391..e7adf4d5fb739 100644 --- a/packages/components/src/range-control/stories/index.js +++ b/packages/components/src/range-control/stories/index.js @@ -43,8 +43,8 @@ export default { }, }; -const RangeControlWithState = ( { initialValue, ...props } ) => { - const [ value, setValue ] = useState( initialValue ); +const RangeControlWithState = ( props ) => { + const [ value, setValue ] = useState(); return ; }; From ebf026de8fba0a3fd396aa3ab4efbef004bb38a3 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 19 Mar 2022 00:47:29 +0900 Subject: [PATCH 3/3] Add control for `initialPosition` --- packages/components/src/range-control/stories/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js index e7adf4d5fb739..e57b421f90672 100644 --- a/packages/components/src/range-control/stories/index.js +++ b/packages/components/src/range-control/stories/index.js @@ -29,6 +29,7 @@ export default { color: { control: { type: 'color' } }, disabled: { control: { type: 'boolean' } }, help: { control: { type: 'text' } }, + initialPosition: { control: { type: 'number' } }, marks: { control: { type: 'object' } }, min: { control: { type: 'number' } }, max: { control: { type: 'number' } },