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

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

@@ -269,10 +269,10 @@ Object {
 }
 
 .emotion-10 {
-  border: 0;
-  margin: 0;
-  border-bottom: 1px solid currentColor;
+  border-color: rgba(0, 0, 0, 0.1);
+  border-width: 0 0 1px 0;
   height: 0;
+  margin: 0;
   width: auto;
   box-sizing: border-box;
   display: block;
@@ -525,10 +525,10 @@ Object {
 }
 
 .emotion-10 {
-  border: 0;
-  margin: 0;
-  border-bottom: 1px solid currentColor;
+  border-color: rgba(0, 0, 0, 0.1);
+  border-width: 0 0 1px 0;
   height: 0;
+  margin: 0;
   width: auto;
   box-sizing: border-box;
   display: block;

package/src/checkbox-control/index.js

@@ -27,7 +27,7 @@ export default function CheckboxControl( {
 	if ( heading ) {
 		deprecated( '`heading` prop in `CheckboxControl`', {
 			alternative: 'a separate element to implement a heading',
-			since: '5.8',
+			plugin: 'Gutenberg',
 		} );
 	}
 

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

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

package/src/clipboard-button/index.js

@@ -26,7 +26,8 @@ export default function ClipboardButton( {
 	...buttonProps
 } ) {
 	deprecated( 'wp.components.ClipboardButton', {
-		since: '5.8',
+		since: '10.3',
+		plugin: 'Gutenberg',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 

package/src/color-indicator/stories/index.js

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

package/src/color-indicator/style.scss

@@ -1,8 +1,11 @@
 .component-color-indicator {
-	width: $grid-unit-50 * 0.5;
-	height: $grid-unit-50 * 0.5;
-	border-radius: 50%;
-	border: $border-width solid $gray-300;
+	width: 25px;
+	height: 16px;
+	margin-left: 0.8rem;
+	border: 1px solid #dadada;
 	display: inline-block;
-	padding: 0;
+
+	& + & {
+		margin-left: 0.5rem;
+	}
 }

package/src/color-palette/index.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -136,9 +136,10 @@ export default function ColorPalette( {
 	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
-	const Component = __experimentalHasMultipleOrigins
-		? MultiplePalettes
-		: SinglePalette;
+	const Component =
+		__experimentalHasMultipleOrigins && colors?.length
+			? MultiplePalettes
+			: SinglePalette;
 
 	const renderCustomColorPicker = () => (
 		<ColorPicker
@@ -148,23 +149,14 @@ export default function ColorPalette( {
 		/>
 	);
 
-	let dropdownPosition;
-	let popoverProps;
-	if ( __experimentalIsRenderedInSidebar ) {
-		dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
-		popoverProps = { __unstableForcePosition: true };
-	}
-
 	const colordColor = colord( value );
 
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<CustomColorPickerDropdown
-					position={ dropdownPosition }
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
-					popoverProps={ popoverProps }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
 							className="components-color-palette__custom-color"

package/src/color-palette/stories/index.js

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

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -173,7 +173,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       data-wp-component="VStack"
       isColumn={true}
     >
-      <Noop />
       <div
         className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
         data-wp-c16t={true}

package/src/color-picker/color-display.tsx

@@ -18,7 +18,6 @@ import { Flex, FlexItem } from '../flex';
 import { Tooltip } from '../ui/tooltip';
 import type { ColorType } from './types';
 import { space } from '../ui/utils/space';
-import { COLORS } from '../utils/colors-values';
 
 interface ColorDisplayProps {
 	color: Colord;
@@ -42,7 +41,7 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
 		{ values.map( ( [ value, abbreviation ] ) => {
 			return (
 				<FlexItem key={ abbreviation } isBlock display="flex">
-					<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>
+					<Text color="blue">{ abbreviation }</Text>
 					<Text>{ value }</Text>
 				</FlexItem>
 			);
@@ -85,7 +84,7 @@ const HexDisplay = ( { color }: DisplayProps ) => {
 	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
 	return (
 		<FlexItem>
-			<Text color={ COLORS.ui.theme }>#</Text>
+			<Text color="blue">#</Text>
 			<Text>{ colorWithoutHash }</Text>
 		</FlexItem>
 	);

package/src/color-picker/hex-input.tsx

@@ -15,7 +15,6 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
-import { COLORS } from '../utils/colors-values';
 
 interface HexInputProps {
 	color: Colord;
@@ -36,7 +35,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				<Spacer
 					as={ Text }
 					marginLeft={ space( 3.5 ) }
-					color={ COLORS.ui.theme }
+					color="blue"
 					lineHeight={ 1 }
 				>
 					#

package/src/color-picker/input-with-slider.tsx

@@ -6,7 +6,6 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
-import { COLORS } from '../utils/colors-values';
 
 interface InputWithSliderProps {
 	min: number;
@@ -38,7 +37,7 @@ export const InputWithSlider = ( {
 					<Spacer
 						as={ Text }
 						paddingLeft={ space( 3.5 ) }
-						color={ COLORS.ui.theme }
+						color="blue"
 						lineHeight={ 1 }
 					>
 						{ abbreviation }

package/src/color-picker/stories/index.js

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

package/src/combobox-control/README.md

@@ -21,7 +21,7 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
  * WordPress dependencies
  */
 import { ComboboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState } from '@wordpress/compose';
 
 const options = [
 	{
@@ -51,7 +51,7 @@ function MyComboboxControl() {
 			value={ fontSize }
 			onChange={ setFontSize }
 			options={ filteredOptions }
-			onFilterValueChange={ ( inputValue ) =>
+			onInputChange={ ( inputValue ) =>
 				setFilteredOptions(
 					options.filter( ( option ) =>
 						option.label

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

@@ -98,7 +98,6 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
-			size="__unstable-large"
 			value={ hasGradient && type }
 		/>
 	);

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

@@ -111,6 +111,10 @@ $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,10 +64,3 @@ 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,14 +11,9 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
+import { Component, createRef, useEffect, useRef } from '@wordpress/element';
 import { isRTL, _n, sprintf } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { getMomentDate } from './utils';
-
 /**
  * Module Constants
  */
@@ -75,18 +70,21 @@ function DatePickerDay( { day, events = [] } ) {
 	);
 }
 
-function DatePicker( {
-	currentDate,
-	onChange,
-	events,
-	isInvalidDate,
-	onMonthPreviewed,
-} ) {
-	const nodeRef = useRef();
-	const onMonthPreviewedHandler = ( newMonthDate ) => {
-		onMonthPreviewed?.( newMonthDate.toISOString() );
-		keepFocusInside();
-	};
+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();
+	}
 
 	/*
 	 * Todo: We should remove this function ASAP.
@@ -94,21 +92,21 @@ function DatePicker( {
 	 * This focus loss closes the date picker popover.
 	 * Ideally we should add an upstream commit on react-dates to fix this issue.
 	 */
-	const keepFocusInside = () => {
-		if ( ! nodeRef.current ) {
+	keepFocusInside() {
+		if ( ! this.nodeRef.current ) {
 			return;
 		}
 
-		const { ownerDocument } = nodeRef.current;
+		const { ownerDocument } = this.nodeRef.current;
 		const { activeElement } = ownerDocument;
 
 		// If focus was lost.
 		if (
 			! activeElement ||
-			! nodeRef.current.contains( ownerDocument.activeElement )
+			! this.nodeRef.current.contains( ownerDocument.activeElement )
 		) {
 			// Retrieve the focus region div.
-			const focusRegion = nodeRef.current.querySelector(
+			const focusRegion = this.nodeRef.current.querySelector(
 				'.DayPicker_focusRegion'
 			);
 			if ( ! focusRegion ) {
@@ -117,9 +115,11 @@ function DatePicker( {
 			// 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,54 +131,71 @@ function DatePicker( {
 		onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
 
 		// Keep focus on the date picker.
-		keepFocusInside();
-	};
+		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();
+	}
 
-	const getEventsPerDay = ( day ) => {
-		if ( ! events?.length ) {
+	getEventsPerDay( day ) {
+		if ( ! this.props.events?.length ) {
 			return [];
 		}
 
-		return events.filter( ( eventDay ) =>
+		return this.props.events.filter( ( eventDay ) =>
 			day.isSame( eventDay.date, 'day' )
 		);
-	};
-
-	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>
-	);
+	}
+
+	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>
+		);
+	}
 }
 
 export default DatePicker;

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

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

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

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

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

@@ -31,6 +31,32 @@ 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();
@@ -43,7 +69,7 @@ describe( 'DatePicker', () => {
 			);
 			const newDate = moment();
 
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
+			wrapper.instance().onChangeMoment( newDate );
 
 			expect( onChangeSpy ).toHaveBeenCalledWith(
 				newDate.format( TIMEZONELESS_FORMAT )
@@ -61,7 +87,7 @@ describe( 'DatePicker', () => {
 				minutes: current.minutes(),
 				seconds: current.seconds(),
 			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
+			wrapper.instance().onChangeMoment( newDate );
 
 			expect(
 				moment( onChangeSpyArgument ).isSame(
@@ -84,7 +110,7 @@ describe( 'DatePicker', () => {
 				minutes: current.minutes(),
 				seconds: current.seconds(),
 			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
+			wrapper.instance().onChangeMoment( newDate );
 
 			expect(
 				moment( onChangeSpyArgument ).isSame(

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/components';
+import { DimensionControl } from '@wordpress/block-editor';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...

package/src/divider/README.md

@@ -9,43 +9,15 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import {
-	__experimentalDivider as Divider,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-} from `@wordpress/components`;
+import { Divider, FormGroup, ListGroup } from '@wordpress/components/ui';
 
 function Example() {
 	return (
-		<VStack spacing={4}>
-			<Text>Some text here</Text>
+		<ListGroup>
+			<FormGroup>...</FormGroup>
 			<Divider />
-			<Text>Some more text here</Text>
-		</VStack>
+			<FormGroup>...</FormGroup>
+		</ListGroup>
 	);
 }
 ```
-
-## 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,18 +38,17 @@ function Divider(
  * @example
  * ```js
  * import {
- * 		__experimentalDivider as Divider,
- * 		__experimentalText as Text,
- * 		__experimentalVStack as VStack,
- * } from `@wordpress/components`;
+ *     __experimentalDivider as Divider,
+ *     __experimentalText as Text }
+ * from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
- * 		<VStack spacing={4}>
- * 			<Text>Some text here</Text>
+ * 		<ListGroup>
+ * 			<FormGroup>...</FormGroup>
  * 			<Divider />
- * 			<Text>Some more text here</Text>
- * 		</VStack>
+ * 			<FormGroup>...</FormGroup>
+ * 		</ListGroup>
  * 	);
  * }
  * ```