@wordpress/components 19.11.0 → 19.12.0

package/src/color-picker/color-copy-button.tsx

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { copy } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { CopyButton } from './styles';
+import { Text } from '../text';
+import { Tooltip } from '../ui/tooltip';
+
+import type { ColorCopyButtonProps } from './types';
+
+export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
+	const { color, colorType } = props;
+	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+	const copyRef = useCopyToClipboard< HTMLDivElement >(
+		() => {
+			switch ( colorType ) {
+				case 'hsl': {
+					return color.toHslString();
+				}
+				case 'rgb': {
+					return color.toRgbString();
+				}
+				default:
+				case 'hex': {
+					return color.toHex();
+				}
+			}
+		},
+		() => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+			setCopiedColor( color.toHex() );
+			copyTimer.current = setTimeout( () => {
+				setCopiedColor( null );
+				copyTimer.current = undefined;
+			}, 3000 );
+		}
+	);
+	useEffect( () => {
+		// Clear copyTimer on component unmount.
+		return () => {
+			if ( copyTimer.current ) {
+				clearTimeout( copyTimer.current );
+			}
+		};
+	}, [] );
+
+	return (
+		<Tooltip
+			content={
+				<Text color="white">
+					{ copiedColor === color.toHex()
+						? __( 'Copied!' )
+						: __( 'Copy' ) }
+				</Text>
+			}
+			placement="bottom"
+		>
+			<CopyButton
+				isSmall
+				ref={ copyRef }
+				icon={ copy }
+				showTooltip={ false }
+			/>
+		</Tooltip>
+	);
+};

package/src/color-picker/component.tsx

@@ -9,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -27,9 +26,8 @@ import {
 	ColorfulWrapper,
 	SelectControl,
 	AuxiliaryColorArtefactWrapper,
-	DetailsControlButton,
 } from './styles';
-import { ColorDisplay } from './color-display';
+import { ColorCopyButton } from './color-copy-button';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
@@ -85,7 +83,6 @@ const ColorPicker = (
 		[ debouncedSetColor ]
 	);
 
-	const [ showInputs, setShowInputs ] = useState< boolean >( false );
 	const [ colorType, setColorType ] = useState< ColorType >(
 		copyFormat || 'hex'
 	);
@@ -99,44 +96,27 @@ const ColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<HStack justify="space-between">
-					{ showInputs ? (
-						<SelectControl
-							options={ options }
-							value={ colorType }
-							onChange={ ( nextColorType ) =>
-								setColorType( nextColorType as ColorType )
-							}
-							label={ __( 'Color format' ) }
-							hideLabelFromVision
-						/>
-					) : (
-						<ColorDisplay
-							color={ safeColordColor }
-							colorType={ copyFormat || colorType }
-							enableAlpha={ enableAlpha }
-						/>
-					) }
-					<DetailsControlButton
-						isSmall
-						onClick={ () => setShowInputs( ! showInputs ) }
-						icon={ settings }
-						isPressed={ showInputs }
-						label={
-							showInputs
-								? __( 'Hide detailed inputs' )
-								: __( 'Show detailed inputs' )
+					<SelectControl
+						options={ options }
+						value={ colorType }
+						onChange={ ( nextColorType ) =>
+							setColorType( nextColorType as ColorType )
 						}
+						label={ __( 'Color format' ) }
+						hideLabelFromVision
 					/>
-				</HStack>
-				<Spacer margin={ 4 } />
-				{ showInputs && (
-					<ColorInput
-						colorType={ colorType }
+					<ColorCopyButton
 						color={ safeColordColor }
-						onChange={ handleChange }
-						enableAlpha={ enableAlpha }
+						colorType={ copyFormat || colorType }
 					/>
-				) }
+				</HStack>
+				<Spacer margin={ 4 } />
+				<ColorInput
+					colorType={ colorType }
+					color={ safeColordColor }
+					onChange={ handleChange }
+					enableAlpha={ enableAlpha }
+				/>
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>
 	);

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

@@ -16,6 +16,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
 import { COLORS } from '../utils/colors-values';
+import type { StateReducer } from '../input-control/reducer/state';
 
 interface HexInputProps {
 	color: Colord;
@@ -33,6 +34,20 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 		onChange( colord( hexValue ) );
 	};
 
+	const stateReducer: StateReducer = ( state, action ) => {
+		const nativeEvent = action.payload?.event?.nativeEvent as InputEvent;
+
+		if ( 'insertFromPaste' !== nativeEvent?.inputType ) {
+			return { ...state };
+		}
+
+		const value = state.value?.startsWith( '#' )
+			? state.value.slice( 1 ).toUpperCase()
+			: state.value?.toUpperCase();
+
+		return { ...state, value };
+	};
+
 	return (
 		<ColorHexInputControl
 			prefix={
@@ -50,6 +65,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			__unstableStateReducer={ stateReducer }
 		/>
 	);
 };

package/src/color-picker/styles.ts

@@ -111,10 +111,14 @@ export const ColorfulWrapper = styled.div`
 	${ inputHeightStyle }
 `;
 
-export const DetailsControlButton = styled( Button )`
+export const CopyButton = styled( Button )`
 	&&&&& {
 		min-width: ${ space( 6 ) };
 		padding: 0;
+
+		> svg {
+			margin-right: 0;
+		}
 	}
 `;
 

package/src/color-picker/types.ts

@@ -1 +1,10 @@
+/**
+ * External dependencies
+ */
+import type { Colord } from 'colord';
+
 export type ColorType = 'rgb' | 'hsl' | 'hex';
+export type ColorCopyButtonProps = {
+	color: Colord;
+	colorType: ColorType;
+};

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

@@ -75,7 +75,7 @@ export function getGradientAstWithControlPoints(
 			return {
 				length: {
 					type: '%',
-					value: position.toString(),
+					value: position?.toString(),
 				},
 				type: a < 1 ? 'rgba' : 'rgb',
 				value: a < 1 ? [ r, g, b, a ] : [ r, g, b ],

package/src/date-time/README.md

@@ -26,6 +26,8 @@ const MyDateTimePicker = () => {
 			currentDate={ date }
 			onChange={ ( newDate ) => setDate( newDate ) }
 			is12Hour={ true }
+			__nextRemoveHelpButton
+			__nextRemoveResetButton
 		/>
 	);
 };
@@ -74,3 +76,17 @@ List of events to show in the date picker. Each event will appear as a dot on th
 
 -   Type: `Array`
 -   Required: No
+
+### `__nextRemoveHelpButton`: `boolean`
+
+Start opting in to not displaying a Help button which will become the default in a future version.
+
+- Required: No
+- Default: `false`
+
+### `__nextRemoveResetButton`: `boolean`
+
+Start opting in to not displaying a Reset button which will become the default in a future version.
+
+- Required: No
+- Default: `false`

package/src/date-time/{date.tsx → date/index.tsx}

@@ -2,30 +2,28 @@
  * External dependencies
  */
 import moment from 'moment';
-import classnames from 'classnames';
 import type { Moment } from 'moment';
 import { noop } from 'lodash';
-
+// Needed to initialise the default datepicker styles.
+// See: https://github.com/airbnb/react-dates#initialize
+import 'react-dates/initialize';
 // `react-dates` doesn't tree-shake correctly, so we import from the individual
 // component here.
-// @ts-expect-error TypeScript won't find any type declarations at
-// `react-dates/lib/components/DayPickerSingleDateController` as they're located
-// at `react-dates`.
-import UntypedDayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import type { DayPickerSingleDateController } from 'react-dates';
-const TypedDayPickerSingleDateController = UntypedDayPickerSingleDateController as DayPickerSingleDateController;
+import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
 
 /**
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
 import { isRTL, _n, sprintf } from '@wordpress/i18n';
+import { arrowLeft, arrowRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { getMomentDate } from './utils';
-import type { DatePickerDayProps, DatePickerProps } from './types';
+import type { DatePickerDayProps, DatePickerProps } from '../types';
+import { Day, NavPrevButton, NavNextButton } from './styles';
 
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 const ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';
@@ -69,14 +67,14 @@ function DatePickerDay( { day, events = [] }: DatePickerDayProps ) {
 	}, [ events.length ] );
 
 	return (
-		<div
+		<Day
 			ref={ ref }
-			className={ classnames( 'components-datetime__date__day', {
-				'has-events': events?.length,
-			} ) }
+			className="components-datetime__date__day" // Unused, for backwards compatibility.
+			hasEvents={ !! events?.length }
+			alignment="center"
 		>
 			{ day.format( 'D' ) }
-		</div>
+		</Day>
 	);
 }
 
@@ -107,6 +105,7 @@ export function DatePicker( {
 	onMonthPreviewed,
 }: DatePickerProps ) {
 	const nodeRef = useRef< HTMLDivElement >( null );
+
 	const onMonthPreviewedHandler = ( newMonthDate: Moment ) => {
 		onMonthPreviewed?.( newMonthDate.toISOString() );
 		keepFocusInside();
@@ -176,9 +175,11 @@ export function DatePicker( {
 
 	return (
 		<div className="components-datetime__date" ref={ nodeRef }>
-			<TypedDayPickerSingleDateController
+			<DayPickerSingleDateController
 				date={ momentDate }
+				initialVisibleMonth={ null }
 				daySize={ 30 }
+				horizontalMonthPadding={ 0 }
 				focused
 				hideKeyboardShortcutsPanel
 				// This is a hack to force the calendar to update on month or year change
@@ -204,6 +205,28 @@ export function DatePicker( {
 						events={ getEventsPerDay( day ) }
 					/>
 				) }
+				renderMonthElement={ ( { month } ) => (
+					<>
+						<strong>{ month.format( 'MMMM' ) }</strong>{ ' ' }
+						{ month.format( 'YYYY' ) }
+					</>
+				) }
+				renderNavPrevButton={ ( { ariaLabel, ...props } ) => (
+					<NavPrevButton
+						icon={ arrowLeft }
+						variant="tertiary"
+						aria-label={ ariaLabel }
+						{ ...props }
+					/>
+				) }
+				renderNavNextButton={ ( { ariaLabel, ...props } ) => (
+					<NavNextButton
+						icon={ arrowRight }
+						variant="tertiary"
+						aria-label={ ariaLabel }
+						{ ...props }
+					/>
+				) }
 				onFocusChange={ noop }
 			/>
 		</div>

package/src/date-time/date/style.scss

@@ -0,0 +1,75 @@
+@import "./datepicker.scss";
+
+// Styles that overrides the calendar styling provided by react-dates go here.
+// Everything else goes in styles.ts.
+
+.components-datetime__date {
+	//
+	// Margin overrides
+	//
+
+	// Remove the left and right margin from the calendar by setting all the
+	// containers' widths to 100%. This means that the slide left / slide right
+	// animation won't work but we don't want that, anyway.
+
+	.CalendarMonthGrid__horizontal,
+	.DayPicker_weekHeader_li {
+		transform: none !important; // Override inline style.
+		width: 100% !important; // Override inline style.
+	}
+
+	.CalendarMonthGrid_month__horizontal,
+	.CalendarMonth_table,
+	.DayPicker_weekHeader {
+		width: 100%;
+	}
+
+	.DayPicker_weekHeaders__horizontal {
+		margin: 0;
+	}
+
+	.DayPicker_weekHeader_ul {
+		display: flex;
+	}
+
+	//
+	// Theming
+	//
+
+	.DayPicker_weekHeader {
+		top: 50px;
+	}
+
+	.CalendarMonth_caption {
+		font-size: $default-font-size;
+	}
+
+	.CalendarMonth_table {
+		border-collapse: separate;
+		border-spacing: 2px;
+	}
+
+	.CalendarDay {
+		border: none;
+		font-size: $default-font-size;
+		border-radius: $radius-round;
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
+			outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
+		}
+	}
+
+	.CalendarDay__selected {
+		background: var(--wp-admin-theme-color);
+		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.
+
+		&:hover {
+			background: var(--wp-admin-theme-color-darker-20);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 $border-width $white;
+		}
+	}
+}

package/src/date-time/date/styles.ts

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { COLORS } from '../../utils';
+import { VStack } from '../../v-stack';
+
+// Styles that overrides the calendar styling provided by react-dates go in
+// style.scss. Everything else goes here.
+
+export const Day = styled( VStack )< { hasEvents: boolean } >`
+	height: 100%;
+	position: relative;
+
+	${ ( props ) =>
+		props.hasEvents &&
+		`
+		::before {
+			background: var(--wp-admin-theme-color);
+			border-radius: 2px;
+			bottom: 0;
+			content: " ";
+			height: 4px;
+			left: 50%;
+			margin-left: -2px;
+			position: absolute;
+			width: 4px;
+
+			.CalendarDay__selected & {
+				background: ${ COLORS.white };
+			}
+		}
+		` }
+`;
+
+const baseNavButton = css`
+	position: absolute;
+	top: 15px;
+`;
+
+export const NavPrevButton = styled( Button )`
+	${ baseNavButton }
+	left: 0;
+`;
+
+export const NavNextButton = styled( Button )`
+	${ baseNavButton }
+	right: 0;
+`;

package/src/date-time/{test/date.tsx → date/test/index.tsx}

@@ -9,7 +9,7 @@ import 'react-dates/initialize';
 /**
  * Internal dependencies
  */
-import DatePicker from '../date';
+import DatePicker from '..';
 
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {