@wordpress/components 19.10.0 → 19.13.0

package/src/palette-edit/test/index.js

@@ -0,0 +1,63 @@
+/**
+ * Internal dependencies
+ */
+import { getNameForPosition } from '../';
+
+describe( 'getNameForPosition', () => {
+	test( 'should return 1 by default', () => {
+		const slugPrefix = 'test-';
+		const elements = [];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 1'
+		);
+	} );
+
+	test( 'should return a new color name with an incremented slug id', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'test-color-1',
+			},
+		];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 2'
+		);
+	} );
+
+	test( 'should ignore user-defined color names', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'a-sweet-color-2',
+			},
+		];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 1'
+		);
+	} );
+
+	test( 'should return a new color name with an incremented slug id one higher than the current highest', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'test-color-1',
+			},
+			{
+				slug: 'test-color-2',
+			},
+			{
+				slug: 'test-color-150',
+			},
+			{
+				slug: 'a-sweet-color-100',
+			},
+		];
+
+		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
+			'Color 151'
+		);
+	} );
+} );

package/src/panel/README.md

@@ -161,7 +161,7 @@ Props that are passed to the `Button` component in the `PanelBodyTitle` within t
 
 #### PanelRow
 
-The is a generic container for panel content. Default styles add a top margin and arrange items in a flex row.
+The `PanelRow` is a generic container for panel content. Default styles add a top margin and arrange items in a flex row.
 
 ##### Props
 

package/src/panel/body.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,8 @@ import Button from '../button';
 import Icon from '../icon';
 import { useControlledState, useUpdateEffect } from '../utils';
 
+const noop = () => {};
+
 export function PanelBody(
 	{
 		buttonProps = {},

package/src/placeholder/README.md

@@ -11,9 +11,10 @@ const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
 
 ### Props
 
-| Name             | Type                | Default     | Description                                                       |
-| ---------------- | ------------------- | ----------- | ----------------------------------------------------------------- |
-| `icon`           | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
-| `label`          | `string`            | `undefined` | Renders a label for the placeholder.                              |
-| `instructions`   | `string`            | `undefined` | Renders instruction text below label.                             |
-| `isColumnLayout` | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
+| Name              | Type                | Default     | Description                                                       |
+| ----------------  | ------------------- | ----------- | ----------------------------------------------------------------- |
+| `icon`            | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
+| `label`           | `string`            | `undefined` | Renders a label for the placeholder.                              |
+| `instructions`    | `string`            | `undefined` | Renders instruction text below label.                             |
+| `isColumnLayout`  | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
+| `withIllustration`| `bool`              | `false`     | Outputs a placeholder illustration.                             |

package/src/placeholder/index.js

@@ -7,24 +7,38 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useResizeObserver } from '@wordpress/compose';
+import { SVG, Path } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
 import Icon from '../icon';
 
+const PlaceholderIllustration = (
+	<SVG
+		className="components-placeholder__illustration"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 60 60"
+		preserveAspectRatio="none"
+	>
+		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
+	</SVG>
+);
+
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
  *
- * @param {Object}    props                The component props.
- * @param {WPIcon}    props.icon           An icon rendered before the label.
- * @param {WPElement} props.children       Children to be rendered.
- * @param {string}    props.label          Title of the placeholder.
- * @param {string}    props.instructions   Instructions of the placeholder.
- * @param {string}    props.className      Class to set on the container div.
- * @param {Object}    props.notices        A rendered notices list.
- * @param {Object}    props.preview        Preview to be rendered in the placeholder.
- * @param {boolean}   props.isColumnLayout Whether a column layout should be used.
+ * @param {Object}    props                  The component props.
+ * @param {WPIcon}    props.icon             An icon rendered before the label.
+ * @param {WPElement} props.children         Children to be rendered.
+ * @param {string}    props.label            Title of the placeholder.
+ * @param {string}    props.instructions     Instructions of the placeholder.
+ * @param {string}    props.className        Class to set on the container div.
+ * @param {Object}    props.notices          A rendered notices list.
+ * @param {Object}    props.preview          Preview to be rendered in the placeholder.
+ * @param {boolean}   props.isColumnLayout   Whether a column layout should be used.
+ * @param {boolean}   props.withIllustration Whether to add an illustration to the placeholder.
  *
  * @return {Object} The rendered placeholder.
  */
@@ -37,6 +51,7 @@ function Placeholder( {
 	notices,
 	preview,
 	isColumnLayout,
+	withIllustration,
 	...additionalProps
 } ) {
 	const [ resizeListener, { width } ] = useResizeObserver();
@@ -55,13 +70,15 @@ function Placeholder( {
 	const classes = classnames(
 		'components-placeholder',
 		className,
-		modifierClassNames
+		modifierClassNames,
+		withIllustration ? 'has-illustration' : null
 	);
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ withIllustration ? PlaceholderIllustration : null }
 			{ resizeListener }
 			{ notices }
 			{ preview && (

package/src/placeholder/style.scss

@@ -30,6 +30,13 @@
 	.components-base-control__label {
 		font-size: $default-font-size;
 	}
+
+	&.has-illustration {
+		background: none;
+		border: none;
+		box-shadow: none;
+		min-width: 100px;
+	}
 }
 
 .components-placeholder__error,
@@ -171,3 +178,19 @@
 		}
 	}
 }
+
+// Style the placeholder illustration.
+.components-placeholder__illustration {
+	border: $border-width dashed currentColor;
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	stroke: currentColor;
+	stroke-dasharray: 3;
+	opacity: 0.4;
+}

package/src/placeholder/test/index.js

@@ -14,6 +14,13 @@ import { useResizeObserver } from '@wordpress/compose';
  */
 import Placeholder from '../';
 
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( () => [] ),
+	};
+} );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		useResizeObserver.mockReturnValue( [

package/src/popover/README.md

@@ -59,13 +59,17 @@ Set this prop to `false` to disable focus changing entirely. This should only be
 -   Required: No
 -   Default: `"firstElement"`
 
-### position
+### placement
 
-The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"middle"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+The direction in which the popover should open relative to its parent node or anchor node. 
+
+The available base placements are 'top', 'right', 'bottom', 'left'.
+
+Each of these base placements has an alignment in the form -start and -end. For example, 'right-start', or 'bottom-end'. These allow you to align the tooltip to the edges of the button, rather than centering it.
 
 -   Type: `String`
 -   Required: No
--   Default: `"bottom right"`
+-   Default: `"bottom-start"`
 
 ### children
 
@@ -137,9 +141,3 @@ If you need the `DOMRect` object i.e., the position of popover to be calculated
 
 -   Type: `Function`
 -   Required: No
-
-## Methods
-
-### refresh
-
-Calling `refresh()` will force the Popover to recalculate its size and position. This is useful when a DOM change causes the anchor node to change position.