@wordpress/components 19.7.0 → 19.9.0

package/src/notice/index.native.js

@@ -7,15 +7,14 @@ import {
 	Text,
 	TouchableWithoutFeedback,
 	View,
-	Dimensions,
-	Platform,
+	useWindowDimensions,
 } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -23,57 +22,48 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const Notice = ( { onNoticeHidden, content, id, status } ) => {
-	const [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );
-	const [ visible, setVisible ] = useState( true );
+const HIDE_TIMER = 3000;
 
+const Notice = ( { onNoticeHidden, content, id, status } ) => {
+	const { width } = useWindowDimensions();
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const timer = useRef( null );
-	const isIOS = Platform.OS === 'ios';
-
-	const onDimensionsChange = () => {
-		setWidth( Dimensions.get( 'window' ).width );
-	};
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
 
 	useEffect( () => {
 		startAnimation();
+
 		return () => {
 			clearTimeout( timer?.current );
 		};
-	}, [ visible, id ] );
+	}, [] );
 
-	const onHide = () => {
-		setVisible( false );
-	};
+	function onHide() {
+		Animated.timing( animationValue, {
+			toValue: 0,
+			duration: 150,
+			useNativeDriver: true,
+			easing: Easing.out( Easing.quad ),
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
+				onNoticeHidden( id );
+			}
+		} );
+	}
 
-	const startAnimation = () => {
+	function startAnimation() {
 		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
-		} ).start( () => {
-			if ( visible && onNoticeHidden ) {
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
 				timer.current = setTimeout( () => {
 					onHide();
-				}, 3000 );
-			}
-
-			if ( ! visible && onNoticeHidden ) {
-				onNoticeHidden( id );
+				}, HIDE_TIMER );
 			}
 		} );
-	};
+	}
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,
@@ -95,25 +85,25 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 		status === 'error' && errorTextStyles,
 	];
 
+	const containerStyles = [
+		styles.notice,
+		! Platform.isIOS && noticeSolidStyles,
+		{
+			width,
+			transform: [
+				{
+					translateY: animationValue.interpolate( {
+						inputRange: [ 0, 1 ],
+						outputRange: [ -24, 0 ],
+					} ),
+				},
+			],
+		},
+	];
+
 	return (
 		<>
-			<Animated.View
-				style={ [
-					styles.notice,
-					! isIOS && noticeSolidStyles,
-					{
-						width,
-						transform: [
-							{
-								translateY: animationValue.interpolate( {
-									inputRange: [ 0, 1 ],
-									outputRange: [ -24, 0 ],
-								} ),
-							},
-						],
-					},
-				] }
-			>
+			<Animated.View style={ containerStyles }>
 				<TouchableWithoutFeedback onPress={ onHide }>
 					<View style={ styles.noticeContent }>
 						<Text numberOfLines={ 3 } style={ textStyles }>
@@ -121,7 +111,7 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 						</Text>
 					</View>
 				</TouchableWithoutFeedback>
-				{ isIOS && (
+				{ Platform.isIOS && (
 					<BlurView
 						style={ styles.blurBackground }
 						blurType="prominent"

package/src/notice/list.native.js

@@ -6,9 +6,8 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -16,60 +15,37 @@ import { compose } from '@wordpress/compose';
 import Notice from './';
 import styles from './style.scss';
 
-class NoticeList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.removeNotice = this.removeNotice.bind( this );
-	}
+function NoticeList() {
+	const { notices } = useSelect( ( select ) => {
+		const { getNotices } = select( noticesStore );
+		return {
+			notices: getNotices(),
+		};
+	}, [] );
 
-	removeNotice( id ) {
-		const { removeNotice } = this.props;
+	const { removeNotice } = useDispatch( noticesStore );
+
+	function onRemoveNotice( id ) {
 		removeNotice( id );
 	}
 
-	render() {
-		const { notices, shouldStack } = this.props;
-
-		if ( ! notices.length ) {
-			return null;
-		}
+	if ( ! notices.length ) {
+		return null;
+	}
 
-		return (
-			<View style={ styles.list } key={ notices.length }>
-				{ shouldStack ? (
-					notices
-						.reverse()
-						.map( ( notice ) => (
-							<Notice
-								{ ...notice }
-								key={ notice.id }
-								onNoticeHidden={ this.removeNotice }
-							></Notice>
-						) )
-				) : (
+	return (
+		<View style={ styles.list }>
+			{ notices.map( ( notice ) => {
+				return (
 					<Notice
-						{ ...notices[ notices.length - 1 ] }
-						onNoticeHidden={ this.removeNotice }
+						{ ...notice }
+						key={ notice.id }
+						onNoticeHidden={ onRemoveNotice }
 					></Notice>
-				) }
-			</View>
-		);
-	}
+				);
+			} ) }
+		</View>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getNotices } = select( 'core/notices' );
-
-		return {
-			notices: getNotices(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { removeNotice } = dispatch( 'core/notices' );
-
-		return {
-			removeNotice,
-		};
-	} ),
-] )( NoticeList );
+export default NoticeList;

package/src/notice/style.native.scss

@@ -33,6 +33,7 @@
 
 .notice {
 	justify-content: center;
+	position: absolute;
 }
 
 .noticeContent {

package/src/palette-edit/index.js

@@ -9,7 +9,10 @@ import { kebabCase } from 'lodash';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
-import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';
+import {
+	__experimentalUseFocusOutside as useFocusOutside,
+	useDebounce,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -197,6 +200,9 @@ function PaletteEditListView( {
 			}
 		};
 	}, [] );
+
+	const debounceOnChange = useDebounce( onChange, 100 );
+
 	return (
 		<VStack spacing={ 3 }>
 			<ItemGroup isRounded>
@@ -212,7 +218,7 @@ function PaletteEditListView( {
 							}
 						} }
 						onChange={ ( newElement ) => {
-							onChange(
+							debounceOnChange(
 								elements.map(
 									( currentElement, currentIndex ) => {
 										if ( currentIndex === index ) {

package/src/query-controls/README.md

@@ -51,7 +51,7 @@ const MyQueryControls = () => {
 			selectedCategoryId={ category }
 			onCategoryChange={ ( newCategory ) => updateQuery( { category: newCategory } ) }
 			onNumberOfItemsChange={ ( newNumberOfItems ) =>
-				updateQuery( { numberOfItems: newCategory } )
+				updateQuery( { numberOfItems: newNumberOfItems } )
 			}
 		/>
 	);
@@ -104,7 +104,7 @@ const MyQueryControls = () => {
 			selectedCategories={ selectedCategories }
 			onCategoryChange={ ( category ) => updateQuery( { selectedCategories: category } ) }
 			onNumberOfItemsChange={ ( newNumberOfItems ) =>
-				updateQuery( { numberOfItems: newCategory } )
+				updateQuery( { numberOfItems: newNumberOfItems } )
 			}
 		/>
 	);

package/src/sandbox/index.js

@@ -227,11 +227,11 @@ export default function Sandbox( {
 
 	useEffect( () => {
 		trySandbox();
-	}, [ title, type, styles, scripts ] );
+	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandbox( true );
-	}, [ html ] );
+	}, [ html, type ] );
 
 	return (
 		<iframe

package/src/select-control/styles/select-control-styles.ts

@@ -96,7 +96,7 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;

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.gray[ 900 ] };
 	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/text/hook.js

@@ -105,7 +105,7 @@ export default function useText( props ) {
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.black } )
+				? css( { color: COLORS.gray[ 900 ] } )
 				: css( { color: COLORS.white } );
 		}
 

package/src/text/styles/text-mixins.native.js

@@ -3,7 +3,7 @@
  */
 import { fontFamily } from './font-family';
 import css from './emotion-css';
-import { G2 } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 
 const fontWeightNormal = `font-weight: 400;`;
 const fontWeightMedium = `font-weight: 500;`;
@@ -81,7 +81,7 @@ const sectionHeading = `
 	font-size: 11px;
 	line-height: 1.4;
 	text-transform: uppercase;
-	color: ${ G2.gray[ 700 ] }
+	color: ${ COLORS.gray[ 700 ] }
 `;
 
 /**

package/src/text/styles.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text should render align 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -3,7 +3,8 @@
+      "color": "#1e1e1e",
+      "font-size": "calc((13 / 13) * 13px)",
+      "font-weight": "normal",
+      "line-height": "1.2",
+      "margin": "0",
++     "text-align": "center",
+    },
+  ]
+`;
+
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
   color: #1e1e1e;

package/src/text/test/{index.js → index.tsx}

@@ -59,14 +59,20 @@ describe( 'Text', () => {
 
 	test( 'should render as another element', () => {
 		const { container } = render( <Text as="div">Lorem ipsum.</Text> );
-		expect( container.firstChild.nodeName ).toBe( 'DIV' );
+		expect( container.firstChild?.nodeName ).toBe( 'DIV' );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
+		const { container: centerAlignedContainer } = render(
 			<Text align="center">Lorem ipsum.</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { textAlign: 'center' } );
+		const { container: defaultAlignedContainer } = render(
+			<Text>Lorem ipsum.</Text>
+		);
+
+		expect(
+			defaultAlignedContainer.children[ 0 ]
+		).toMatchStyleDiffSnapshot( centerAlignedContainer.children[ 0 ] );
 	} );
 
 	test( 'should render color', () => {
@@ -89,7 +95,7 @@ describe( 'Text', () => {
 		const wrapper = render(
 			<Text highlightWords={ [ 'm' ] }>Lorem ipsum.</Text>
 		);
-		expect( wrapper.container.firstChild.childNodes ).toHaveLength( 5 );
+		expect( wrapper.container.firstChild?.childNodes ).toHaveLength( 5 );
 		const words = await wrapper.findAllByText( 'm' );
 		expect( words ).toHaveLength( 2 );
 		words.forEach( ( word ) => expect( word.tagName ).toEqual( 'MARK' ) );
@@ -100,7 +106,7 @@ describe( 'Text', () => {
 			<Text highlightWords={ undefined }>Lorem ipsum.</Text>
 		);
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild.childNodes ).toHaveLength( 1 );
+		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render highlighted words with highlightCaseSensitive', () => {
@@ -112,7 +118,7 @@ describe( 'Text', () => {
 
 		expect( container.firstChild ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild.childNodes ).toHaveLength( 1 );
+		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render isBlock', () => {

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' ];