@wordpress/components 19.1.2 → 19.2.1-next.33ec3857e2.0

package/src/custom-gradient-bar/index.js

@@ -78,6 +78,7 @@ export default function CustomGradientBar( {
 	onChange,
 	disableInserter = false,
 	disableAlpha = false,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const gradientPickerDomRef = useRef();
 
@@ -134,6 +135,10 @@ export default function CustomGradientBar( {
 				{ ! disableInserter &&
 					( isMovingInserter || isInsertingControlPoint ) && (
 						<ControlPoints.InsertPoint
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							gradientPickerDomRef={ gradientPickerDomRef }
 							disableAlpha={ disableAlpha }
 							insertPosition={ gradientBarState.insertPosition }
 							value={ controlPoints }
@@ -151,6 +156,9 @@ export default function CustomGradientBar( {
 						/>
 					) }
 				<ControlPoints
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
 					disableAlpha={ disableAlpha }
 					disableRemove={ disableInserter }
 					gradientPickerDomRef={ gradientPickerDomRef }

package/src/custom-gradient-picker/index.js

@@ -98,12 +98,17 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
+			size="__unstable-large"
 			value={ hasGradient && type }
 		/>
 	);
 };
 
-export default function CustomGradientPicker( { value, onChange } ) {
+export default function CustomGradientPicker( {
+	value,
+	onChange,
+	__experimentalIsRenderedInSidebar,
+} ) {
 	const gradientAST = getGradientAstWithDefault( value );
 	// On radial gradients the bar should display a linear gradient.
 	// On radial gradients the bar represents a slice of the gradient from the center until the outside.
@@ -120,6 +125,9 @@ export default function CustomGradientPicker( { value, onChange } ) {
 	return (
 		<div className="components-custom-gradient-picker">
 			<CustomGradientBar
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
 				background={ background }
 				hasGradient={ hasGradient }
 				value={ controlPoints }

package/src/custom-gradient-picker/style.scss

@@ -111,10 +111,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 
 // All these styles should be made generic and changed on the inputs for all components.
 .components-custom-gradient-picker {
-	.components-select-control__input,
-	.components-input-control__input {
-		height: 40px !important;
-	}
 	.components-input-control__label {
 		line-height: 1;
 		padding-bottom: $grid-unit-10 !important;

package/src/date-time/README.md

@@ -64,3 +64,10 @@ A callback function which receives a Date object representing a day as an argume
 
 -   Type: `Function`
 -   Required: No
+
+### onMonthPreviewed
+
+A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
+
+- Type: `Function`
+- Required: No

package/src/date-time/date.js

@@ -11,9 +11,14 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 /**
  * WordPress dependencies
  */
-import { Component, createRef, useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { isRTL, _n, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { getMomentDate } from './utils';
+
 /**
  * Module Constants
  */
@@ -70,21 +75,18 @@ function DatePickerDay( { day, events = [] } ) {
 	);
 }
 
-class DatePicker extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onChangeMoment = this.onChangeMoment.bind( this );
-		this.nodeRef = createRef();
-		this.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(
-			this
-		);
-	}
-
-	onMonthPreviewedHandler( newMonthDate ) {
-		this.props.onMonthPreviewed?.( newMonthDate.toISOString() );
-		this.keepFocusInside();
-	}
+function DatePicker( {
+	currentDate,
+	onChange,
+	events,
+	isInvalidDate,
+	onMonthPreviewed,
+} ) {
+	const nodeRef = useRef();
+	const onMonthPreviewedHandler = ( newMonthDate ) => {
+		onMonthPreviewed?.( newMonthDate.toISOString() );
+		keepFocusInside();
+	};
 
 	/*
 	 * Todo: We should remove this function ASAP.
@@ -92,21 +94,21 @@ class DatePicker extends Component {
 	 * This focus loss closes the date picker popover.
 	 * Ideally we should add an upstream commit on react-dates to fix this issue.
 	 */
-	keepFocusInside() {
-		if ( ! this.nodeRef.current ) {
+	const keepFocusInside = () => {
+		if ( ! nodeRef.current ) {
 			return;
 		}
 
-		const { ownerDocument } = this.nodeRef.current;
+		const { ownerDocument } = nodeRef.current;
 		const { activeElement } = ownerDocument;
 
 		// If focus was lost.
 		if (
 			! activeElement ||
-			! this.nodeRef.current.contains( ownerDocument.activeElement )
+			! nodeRef.current.contains( ownerDocument.activeElement )
 		) {
 			// Retrieve the focus region div.
-			const focusRegion = this.nodeRef.current.querySelector(
+			const focusRegion = nodeRef.current.querySelector(
 				'.DayPicker_focusRegion'
 			);
 			if ( ! focusRegion ) {
@@ -115,11 +117,9 @@ class DatePicker extends Component {
 			// Keep the focus on focus region.
 			focusRegion.focus();
 		}
-	}
-
-	onChangeMoment( newDate ) {
-		const { currentDate, onChange } = this.props;
+	};
 
+	const onChangeMoment = ( newDate ) => {
 		// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
 		const momentDate = currentDate ? moment( currentDate ) : moment();
 		const momentTime = {
@@ -131,71 +131,54 @@ class DatePicker extends Component {
 		onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
 
 		// Keep focus on the date picker.
-		this.keepFocusInside();
-	}
-
-	/**
-	 * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
-	 * object representing now. If a null value is passed, return a null value.
-	 *
-	 * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
-	 * @return {?moment.Moment} Moment object for selected date or null.
-	 */
-	getMomentDate( currentDate ) {
-		if ( null === currentDate ) {
-			return null;
-		}
-		return currentDate ? moment( currentDate ) : moment();
-	}
+		keepFocusInside();
+	};
 
-	getEventsPerDay( day ) {
-		if ( ! this.props.events?.length ) {
+	const getEventsPerDay = ( day ) => {
+		if ( ! events?.length ) {
 			return [];
 		}
 
-		return this.props.events.filter( ( eventDay ) =>
+		return events.filter( ( eventDay ) =>
 			day.isSame( eventDay.date, 'day' )
 		);
-	}
-
-	render() {
-		const { currentDate, isInvalidDate } = this.props;
-		const momentDate = this.getMomentDate( currentDate );
-
-		return (
-			<div className="components-datetime__date" ref={ this.nodeRef }>
-				<DayPickerSingleDateController
-					date={ momentDate }
-					daySize={ 30 }
-					focused
-					hideKeyboardShortcutsPanel
-					// This is a hack to force the calendar to update on month or year change
-					// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
-					key={ `datepicker-controller-${
-						momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
-					}` }
-					noBorder
-					numberOfMonths={ 1 }
-					onDateChange={ this.onChangeMoment }
-					transitionDuration={ 0 }
-					weekDayFormat="ddd"
-					dayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }
-					isRTL={ isRTL() }
-					isOutsideRange={ ( date ) => {
-						return isInvalidDate && isInvalidDate( date.toDate() );
-					} }
-					onPrevMonthClick={ this.onMonthPreviewedHandler }
-					onNextMonthClick={ this.onMonthPreviewedHandler }
-					renderDayContents={ ( day ) => (
-						<DatePickerDay
-							day={ day }
-							events={ this.getEventsPerDay( day ) }
-						/>
-					) }
-				/>
-			</div>
-		);
-	}
+	};
+
+	const momentDate = getMomentDate( currentDate );
+
+	return (
+		<div className="components-datetime__date" ref={ nodeRef }>
+			<DayPickerSingleDateController
+				date={ momentDate }
+				daySize={ 30 }
+				focused
+				hideKeyboardShortcutsPanel
+				// This is a hack to force the calendar to update on month or year change
+				// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
+				key={ `datepicker-controller-${
+					momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
+				}` }
+				noBorder
+				numberOfMonths={ 1 }
+				onDateChange={ onChangeMoment }
+				transitionDuration={ 0 }
+				weekDayFormat="ddd"
+				dayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }
+				isRTL={ isRTL() }
+				isOutsideRange={ ( date ) => {
+					return isInvalidDate && isInvalidDate( date.toDate() );
+				} }
+				onPrevMonthClick={ onMonthPreviewedHandler }
+				onNextMonthClick={ onMonthPreviewedHandler }
+				renderDayContents={ ( day ) => (
+					<DatePickerDay
+						day={ day }
+						events={ getEventsPerDay( day ) }
+					/>
+				) }
+			/>
+		</div>
+	);
 }
 
 export default DatePicker;

package/src/date-time/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/date-time/stories/time.js

@@ -13,7 +13,7 @@ export default {
 	title: 'Components/TimePicker',
 	component: TimePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/date-time/test/date.js

@@ -31,32 +31,6 @@ describe( 'DatePicker', () => {
 		expect( moment.isMoment( date ) ).toBe( true );
 	} );
 
-	describe( 'getMomentDate', () => {
-		it( 'should return a Moment object representing a given date string', () => {
-			const currentDate = '1986-10-18T23:00:00';
-			const wrapper = shallow( <DatePicker /> );
-			const momentDate = wrapper.instance().getMomentDate( currentDate );
-
-			expect( moment.isMoment( momentDate ) ).toBe( true );
-			expect( momentDate.isSame( moment( currentDate ) ) ).toBe( true );
-		} );
-
-		it( 'should return null when given a null agrument', () => {
-			const currentDate = null;
-			const wrapper = shallow( <DatePicker /> );
-			const momentDate = wrapper.instance().getMomentDate( currentDate );
-
-			expect( momentDate ).toBeNull();
-		} );
-
-		it( 'should return a Moment object representing now when given an undefined argument', () => {
-			const wrapper = shallow( <DatePicker /> );
-			const momentDate = wrapper.instance().getMomentDate();
-
-			expect( moment.isMoment( momentDate ) ).toBe( true );
-		} );
-	} );
-
 	describe( 'onChangeMoment', () => {
 		it( 'should call onChange with a formated date of the input', () => {
 			const onChangeSpy = jest.fn();
@@ -69,7 +43,7 @@ describe( 'DatePicker', () => {
 			);
 			const newDate = moment();
 
-			wrapper.instance().onChangeMoment( newDate );
+			wrapper.childAt( 0 ).props().onDateChange( newDate );
 
 			expect( onChangeSpy ).toHaveBeenCalledWith(
 				newDate.format( TIMEZONELESS_FORMAT )
@@ -87,7 +61,7 @@ describe( 'DatePicker', () => {
 				minutes: current.minutes(),
 				seconds: current.seconds(),
 			} );
-			wrapper.instance().onChangeMoment( newDate );
+			wrapper.childAt( 0 ).props().onDateChange( newDate );
 
 			expect(
 				moment( onChangeSpyArgument ).isSame(
@@ -110,7 +84,7 @@ describe( 'DatePicker', () => {
 				minutes: current.minutes(),
 				seconds: current.seconds(),
 			} );
-			wrapper.instance().onChangeMoment( newDate );
+			wrapper.childAt( 0 ).props().onDateChange( newDate );
 
 			expect(
 				moment( onChangeSpyArgument ).isSame(

package/src/date-time/test/utils.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+
+/**
+ * Internal dependencies
+ */
+import { getMomentDate } from '../utils';
+
+describe( 'getMomentDate', () => {
+	it( 'should return a Moment object representing a given date string', () => {
+		const currentDate = '1986-10-18T23:00:00';
+		const momentDate = getMomentDate( currentDate );
+
+		expect( moment.isMoment( momentDate ) ).toBe( true );
+		expect( momentDate.isSame( moment( currentDate ) ) ).toBe( true );
+	} );
+
+	it( 'should return null when given a null argument', () => {
+		const currentDate = null;
+		const momentDate = getMomentDate( currentDate );
+
+		expect( momentDate ).toBeNull();
+	} );
+
+	it( 'should return a Moment object representing now when given an undefined argument', () => {
+		const momentDate = getMomentDate();
+
+		expect( moment.isMoment( momentDate ) ).toBe( true );
+	} );
+} );

package/src/date-time/utils.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+
+/**
+ * Create a Moment object from a date string. With no date supplied, default to a Moment
+ * object representing now. If a null value is passed, return a null value.
+ *
+ * @param {?string} date Date representing the currently selected date or null to signify no selection.
+ * @return {?moment.Moment} Moment object for selected date or null.
+ */
+export const getMomentDate = ( date ) => {
+	if ( null === date ) {
+		return null;
+	}
+	return date ? moment( date ) : moment();
+};

package/src/dimension-control/README.md

@@ -13,7 +13,7 @@ In a block's `edit` implementation, render a `<DimensionControl />` component.
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { DimensionControl } from '@wordpress/block-editor';
+import { DimensionControl } from '@wordpress/components';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...

package/src/divider/README.md

@@ -9,15 +9,43 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Divider, FormGroup, ListGroup } from '@wordpress/components/ui';
+import {
+	__experimentalDivider as Divider,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from `@wordpress/components`;
 
 function Example() {
 	return (
-		<ListGroup>
-			<FormGroup>...</FormGroup>
+		<VStack spacing={4}>
+			<Text>Some text here</Text>
 			<Divider />
-			<FormGroup>...</FormGroup>
-		</ListGroup>
+			<Text>Some more text here</Text>
+		</VStack>
 	);
 }
 ```
+
+## Props
+
+### `margin`: `number`
+
+Adjusts all margins on the inline dimension.
+
+- Required: No
+
+### `marginStart`: `number`
+
+Adjusts the inline-start margin.
+
+- Required: No
+
+### `marginEnd`: `number`
+
+Adjusts the inline-end margin.
+
+- Required: No
+
+### Inherited props
+
+`Divider` also inherits all of the [`Separator` props](https://reakit.io/docs/separator/).

package/src/divider/component.tsx

@@ -38,17 +38,18 @@ function Divider(
  * @example
  * ```js
  * import {
- *     __experimentalDivider as Divider,
- *     __experimentalText as Text }
- * from `@wordpress/components`;
+ * 		__experimentalDivider as Divider,
+ * 		__experimentalText as Text,
+ * 		__experimentalVStack as VStack,
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
- * 		<ListGroup>
- * 			<FormGroup>...</FormGroup>
+ * 		<VStack spacing={4}>
+ * 			<Text>Some text here</Text>
  * 			<Divider />
- * 			<FormGroup>...</FormGroup>
- * 		</ListGroup>
+ * 			<Text>Some more text here</Text>
+ * 		</VStack>
  * 	);
  * }
  * ```

package/src/divider/stories/index.js

@@ -1,38 +1,64 @@
 /**
  * External dependencies
  */
-import { number } from '@storybook/addon-knobs';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
+import { Text } from '../../text';
 import { Divider } from '..';
 
 export default {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
-	parameters: {
-		knobs: { disabled: false },
+	argTypes: {
+		margin: {
+			control: { type: 'number' },
+		},
+		marginStart: {
+			control: { type: 'number' },
+		},
+		marginEnd: {
+			control: { type: 'number' },
+		},
 	},
 };
 
-const BlackDivider = ( props ) => (
-	<Divider { ...props } style={ { borderColor: 'black' } } />
+const HorizontalTemplate = ( args ) => (
+	<div>
+		<Text>Some text before the divider</Text>
+		<Divider { ...args } />
+		<Text>Some text after the divider</Text>
+	</div>
 );
 
-export const _default = () => {
-	const props = {
-		margin: number( 'margin', 0 ),
-	};
-	// make the border color black to give higher contrast and help it appear in storybook better
-	return <BlackDivider { ...props } />;
+const VerticalTemplate = ( args ) => {
+	const cx = useCx();
+	const wrapperClassName = cx( css`
+		display: flex;
+		align-items: stretch;
+		justify-content: start;
+	` );
+
+	return (
+		<div className={ wrapperClassName }>
+			<Text>Some text before the divider</Text>
+			<Divider orientation="vertical" { ...args } />
+			<Text>Some text after the divider</Text>
+		</div>
+	);
 };
 
-export const splitMargins = () => {
-	const props = {
-		marginTop: number( 'marginTop', 0 ),
-		marginBottom: number( 'marginBottom', 0 ),
-	};
+export const Horizontal = HorizontalTemplate.bind( {} );
+Horizontal.args = {
+	margin: 2,
+	marginStart: undefined,
+	marginEnd: undefined,
+};
 
-	return <BlackDivider { ...props } />;
+export const Vertical = VerticalTemplate.bind( {} );
+Vertical.args = {
+	...Horizontal.args,
 };

package/src/divider/styles.ts

@@ -8,29 +8,66 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { space } from '../ui/utils/space';
-import CONFIG from '../utils/config-values';
-import type { OwnProps } from './types';
+import { rtl } from '../utils';
+import type { Props } from './types';
 
-const renderMargin = ( { margin, marginTop, marginBottom }: OwnProps ) => {
-	if ( typeof margin !== 'undefined' ) {
-		return css( {
-			marginBottom: space( margin ),
-			marginTop: space( margin ),
-		} );
-	}
+const MARGIN_DIRECTIONS: Record<
+	NonNullable< Props[ 'orientation' ] >,
+	Record< 'start' | 'end', string >
+> = {
+	vertical: {
+		start: 'marginLeft',
+		end: 'marginRight',
+	},
+	horizontal: {
+		start: 'marginTop',
+		end: 'marginBottom',
+	},
+};
+
+// Renders the correct margins given the Divider's `orientation` and the writing direction.
+// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
+// the latter will take priority.
+const renderMargin = ( {
+	'aria-orientation': orientation = 'horizontal',
+	margin,
+	marginStart,
+	marginEnd,
+}: Props ) =>
+	css(
+		rtl( {
+			[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
+				marginStart ?? margin
+			),
+			[ MARGIN_DIRECTIONS[ orientation ].end ]: space(
+				marginEnd ?? margin
+			),
+		} )()
+	);
 
+const renderBorder = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) => {
 	return css( {
-		marginTop: space( marginTop ),
-		marginBottom: space( marginBottom ),
+		[ orientation === 'vertical'
+			? 'borderRight'
+			: 'borderBottom' ]: '1px solid currentColor',
 	} );
 };
 
-export const DividerView = styled.hr< OwnProps >`
-	border-color: ${ CONFIG.colorDivider };
-	border-width: 0 0 1px 0;
-	height: 0;
+const renderSize = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) =>
+	css( {
+		height: orientation === 'vertical' ? 'auto' : 0,
+		width: orientation === 'vertical' ? 0 : 'auto',
+	} );
+
+export const DividerView = styled.hr< Props >`
+	border: 0;
 	margin: 0;
-	width: auto;
 
+	${ renderBorder }
+	${ renderSize }
 	${ renderMargin }
 `;