@wordpress/components 19.7.0-next.e230fbab09.0 → 19.8.1

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

@@ -1,145 +1,128 @@
-/**
- * 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' } },
+		initialPosition: { control: { type: 'number' } },
+		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 [ value, setValue ] = useState( initialValue );
+	const [ value, setValue ] = useState();
 
 	return <RangeControl { ...props } value={ value } onChange={ setValue } />;
 };
 
-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 (
-		<Wrapper>
-			<RangeControl { ...props } />
-		</Wrapper>
-	);
-};
-
-const RangeControlLabeledByMarksType = ( props ) => {
-	const label = Array.isArray( props.marks ) ? 'Custom' : 'Automatic';
-	return <RangeControl { ...{ ...props, label } } />;
+export const Default = RangeControlWithState.bind( {} );
+Default.args = {
+	label: 'Range label',
 };
 
-export const _default = () => {
-	return <DefaultExample />;
+/**
+ * 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 (
-		<RangeControlWithState
-			initialPosition={ 0 }
-			label={ label }
-			max={ 20 }
-			min={ 0 }
-			value={ null }
-		/>
+		<>
+			<RangeControl value={ value } onChange={ setValue } { ...props } />
+			<p>Current value: { value }</p>
+		</>
 	);
 };
-
-export const withAnyStep = () => {
-	return <RangeControlWithState label="Brightness" step="any" />;
+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 <RangeControlWithState label={ label } help={ help } />;
+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 <RangeControlWithState label={ label } min={ min } max={ max } />;
+/**
+ * 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 (
-		<RangeControlWithState
-			label={ label }
-			beforeIcon={ showIcon ? wordpress : undefined }
-		/>
-	);
+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 (
-		<RangeControlWithState
-			label={ label }
-			afterIcon={ showIcon ? wordpress : undefined }
-		/>
-	);
+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 <RangeControlWithState label={ label } allowReset />;
+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 +147,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 <RangeControl { ...{ ...localProps, ...props, label } } />;
+	};
 
 	return (
-		<Wrapper>
+		<>
 			<h2>Integer Step</h2>
 			<Range marks { ...stepInteger } />
 			<Range marks={ marksBase } { ...stepInteger } />
@@ -188,21 +175,6 @@ export const marks = () => {
 			<h2>Any Step</h2>
 			<Range marks { ...{ ...stepInteger, step: 'any' } } />
 			<Range marks={ marksBase } { ...{ ...stepInteger, step: 'any' } } />
-		</Wrapper>
+		</>
 	);
 };
-
-export const multiple = () => {
-	return (
-		<Wrapper>
-			<RangeControlWithState />
-			<RangeControlWithState />
-			<RangeControlWithState />
-			<RangeControlWithState />
-		</Wrapper>
-	);
-};
-
-const Wrapper = styled.div`
-	padding: 60px 40px;
-`;

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -48,5 +48,6 @@ export const LabelText = styled( Text )`
 		display: block;
 		font-size: 13px;
 		line-height: 1.4;
+		white-space: nowrap;
 	}
 `;

package/src/surface/styles.js

@@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.black };
+	color: ${ COLORS.darkGray.primary };
 	position: relative;
 `;
 

package/src/surface/test/__snapshots__/index.js.snap

@@ -6,8 +6,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-k1ws5-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-pt58n0-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -21,8 +21,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-gi9sau-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1vckp4o-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -36,8 +36,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1lwskr8-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-sw9dzi-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -51,8 +51,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-sdy6q1-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-123k66h-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -63,7 +63,7 @@ Snapshot Diff:
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
 }
 
@@ -82,8 +82,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-jkj9zl-View-Surface-getBorders-secondary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >

package/src/toggle-group-control/index.ts

@@ -1,2 +1,3 @@
 export { ToggleGroupControl } from './toggle-group-control';
 export { ToggleGroupControlOption } from './toggle-group-control-option';
+export { ToggleGroupControlOptionIcon } from './toggle-group-control-option-icon';

package/src/toggle-group-control/stories/index.js

@@ -7,11 +7,16 @@ import { boolean, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
 import { View } from '../../view';
 import Button from '../../button';
 
@@ -57,23 +62,23 @@ const _default = ( { options } ) => {
 		KNOBS_GROUPS.ToggleGroupControl
 	);
 
-	const controlOptions = options.map( ( opt, index ) => (
+	const controlOptions = options.map( ( option, index ) => (
 		<ToggleGroupControlOption
-			key={ opt.value }
-			value={ opt.value }
+			key={ option.value }
+			value={ option.value }
 			label={ text(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				opt.label,
+				option.label,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 			aria-label={ text(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: aria-label`,
-				opt[ 'aria-label' ],
+				option[ 'aria-label' ],
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 			showTooltip={ boolean(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
-				opt.showTooltip,
+				option.showTooltip,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 		/>
@@ -125,6 +130,31 @@ WithAriaLabel.args = {
 	],
 };
 
+export const WithIcons = () => {
+	const [ state, setState ] = useState();
+	return (
+		<ToggleGroupControl
+			onChange={ setState }
+			value={ state }
+			label={ 'With icons' }
+			hideLabelFromVision
+		>
+			<ToggleGroupControlOptionIcon
+				value="uppercase"
+				icon={ formatUppercase }
+				showTooltip={ true }
+				aria-label="Uppercase"
+			/>
+			<ToggleGroupControlOptionIcon
+				value="lowercase"
+				icon={ formatLowercase }
+				showTooltip={ true }
+				aria-label="Lowercase"
+			/>
+		</ToggleGroupControl>
+	);
+};
+
 export const WithReset = () => {
 	const [ alignState, setAlignState ] = useState();
 	const aligns = [ 'Left', 'Center', 'Right' ];