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

package/src/divider/stories/index.js

@@ -1,64 +1,38 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { number } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
  */
-import { useCx } from '../../utils';
-import { Text } from '../../text';
 import { Divider } from '..';
 
 export default {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
-	argTypes: {
-		margin: {
-			control: { type: 'number' },
-		},
-		marginStart: {
-			control: { type: 'number' },
-		},
-		marginEnd: {
-			control: { type: 'number' },
-		},
+	parameters: {
+		knobs: { disabled: false },
 	},
 };
 
-const HorizontalTemplate = ( args ) => (
-	<div>
-		<Text>Some text before the divider</Text>
-		<Divider { ...args } />
-		<Text>Some text after the divider</Text>
-	</div>
+const BlackDivider = ( props ) => (
+	<Divider { ...props } style={ { borderColor: 'black' } } />
 );
 
-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 _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 } />;
 };
 
-export const Horizontal = HorizontalTemplate.bind( {} );
-Horizontal.args = {
-	margin: 2,
-	marginStart: undefined,
-	marginEnd: undefined,
-};
+export const splitMargins = () => {
+	const props = {
+		marginTop: number( 'marginTop', 0 ),
+		marginBottom: number( 'marginBottom', 0 ),
+	};
 
-export const Vertical = VerticalTemplate.bind( {} );
-Vertical.args = {
-	...Horizontal.args,
+	return <BlackDivider { ...props } />;
 };

package/src/divider/styles.ts

@@ -8,66 +8,29 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { space } from '../ui/utils/space';
-import { rtl } from '../utils';
-import type { Props } from './types';
+import CONFIG from '../utils/config-values';
+import type { OwnProps } from './types';
 
-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 renderMargin = ( { margin, marginTop, marginBottom }: OwnProps ) => {
+	if ( typeof margin !== 'undefined' ) {
+		return css( {
+			marginBottom: space( margin ),
+			marginTop: space( margin ),
+		} );
+	}
 
-const renderBorder = ( {
-	'aria-orientation': orientation = 'horizontal',
-}: Props ) => {
 	return css( {
-		[ orientation === 'vertical'
-			? 'borderRight'
-			: 'borderBottom' ]: '1px solid currentColor',
+		marginTop: space( marginTop ),
+		marginBottom: space( marginBottom ),
 	} );
 };
 
-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;
+export const DividerView = styled.hr< OwnProps >`
+	border-color: ${ CONFIG.colorDivider };
+	border-width: 0 0 1px 0;
+	height: 0;
 	margin: 0;
+	width: auto;
 
-	${ renderBorder }
-	${ renderSize }
 	${ renderMargin }
 `;

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

@@ -2,10 +2,10 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  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;
 }
 
@@ -25,8 +25,8 @@ Snapshot Diff:
 
 @@ -2,10 +2,8 @@
     Object {
-      "border": "0",
-      "border-bottom": "1px solid currentColor",
+      "border-color": "rgba(0, 0, 0, 0.1)",
+      "border-width": "0 0 1px 0",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 7)",
@@ -36,15 +36,15 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginEnd 1`] = `
+exports[`props should render marginBottom 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
 @@ -2,9 +2,8 @@
     Object {
-      "border": "0",
-      "border-bottom": "1px solid currentColor",
+      "border-color": "rgba(0, 0, 0, 0.1)",
+      "border-width": "0 0 1px 0",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 5)",
@@ -53,15 +53,15 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginStart 1`] = `
+exports[`props should render marginTop 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
 @@ -2,9 +2,8 @@
     Object {
-      "border": "0",
-      "border-bottom": "1px solid currentColor",
+      "border-color": "rgba(0, 0, 0, 0.1)",
+      "border-width": "0 0 1px 0",
       "height": "0",
       "margin": "0",
 -     "margin-top": "calc(4px * 5)",

package/src/divider/test/index.js

@@ -18,15 +18,15 @@ describe( 'props', () => {
 		expect( base.container.firstChild ).toMatchSnapshot();
 	} );
 
-	test( 'should render marginStart', () => {
-		const { container } = render( <Divider marginStart={ 5 } /> );
+	test( 'should render marginTop', () => {
+		const { container } = render( <Divider marginTop={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
 	} );
 
-	test( 'should render marginEnd', () => {
-		const { container } = render( <Divider marginEnd={ 5 } /> );
+	test( 'should render marginBottom', () => {
+		const { container } = render( <Divider marginBottom={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);

package/src/divider/types.ts

@@ -11,17 +11,17 @@ import type { SpaceInput } from '../ui/utils/space';
 
 export interface OwnProps {
 	/**
-	 * Adjusts all margins on the inline dimension.
+	 * Adjusts all margins.
 	 */
 	margin?: SpaceInput;
 	/**
-	 * Adjusts the inline-start margin.
+	 * Adjusts top margins.
 	 */
-	marginStart?: SpaceInput;
+	marginTop?: SpaceInput;
 	/**
-	 * Adjusts the inline-end margin.
+	 * Adjusts bottom margins.
 	 */
-	marginEnd?: SpaceInput;
+	marginBottom?: SpaceInput;
 }
 
 export interface Props extends Omit< SeparatorProps, 'children' >, OwnProps {}

package/src/drop-zone/index.js

@@ -39,14 +39,10 @@ export default function DropZoneComponent( {
 			const files = getFilesFromDataTransfer( event.dataTransfer );
 			const html = event.dataTransfer.getData( 'text/html' );
 
-			/**
-			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-			 * The order of the checks is important to recognise the HTML drop.
-			 */
-			if ( html && onHTMLDrop ) {
-				onHTMLDrop( html );
-			} else if ( files.length && onFilesDrop ) {
+			if ( files.length && onFilesDrop ) {
 				onFilesDrop( files );
+			} else if ( html && onHTMLDrop ) {
+				onHTMLDrop( html );
 			} else if ( onDrop ) {
 				onDrop( event );
 			}
@@ -56,19 +52,15 @@ export default function DropZoneComponent( {
 
 			let _type = 'default';
 
-			/**
-			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-			 * The order of the checks is important to recognise the HTML drop.
-			 */
-			if ( includes( event.dataTransfer.types, 'text/html' ) ) {
-				_type = 'html';
-			} else if (
+			if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
 				includes( event.dataTransfer.types, 'Files' ) ||
 				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
 				_type = 'file';
+			} else if ( includes( event.dataTransfer.types, 'text/html' ) ) {
+				_type = 'html';
 			}
 
 			setType( _type );

package/src/drop-zone/provider.js

@@ -5,7 +5,6 @@ import deprecated from '@wordpress/deprecated';
 
 export default function DropZoneProvider( { children } ) {
 	deprecated( 'wp.components.DropZoneProvider', {
-		since: '5.8',
 		hint:
 			'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
 	} );

package/src/dropdown-menu/stories/index.js

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

package/src/duotone-picker/README.md

@@ -22,7 +22,7 @@ const Example = () => {
 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
 	return (
 		<>
-			<DuotonePicker
+			<DuotoneControl
 				duotonePalette={ DUOTONE_PALETTE }
 				colorPalette={ COLOR_PALETTE }
 				value={ duotone }

package/src/elevation/stories/index.js

@@ -26,7 +26,7 @@ export default {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 

package/src/external-link/stories/index.js

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

package/src/flyout/styles.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled, { StyledComponent } from '@emotion/styled';
+import styled from '@emotion/styled';
 // eslint-disable-next-line no-restricted-imports
 import { Popover as ReakitPopover } from 'reakit';
 
@@ -12,9 +12,7 @@ import { Card, CardBody } from '../card';
 import * as ZIndex from '../utils/z-index';
 import CONFIG from '../utils/config-values';
 
-export const FlyoutContentView: StyledComponent<
-	React.ComponentPropsWithoutRef< typeof ReakitPopover >
-> = styled( ReakitPopover )`
+export const FlyoutContentView = styled( ReakitPopover )`
 	z-index: ${ ZIndex.Flyout };
 	box-sizing: border-box;
 	opacity: 0;

package/src/focusable-iframe/index.js

@@ -7,7 +7,6 @@ import deprecated from '@wordpress/deprecated';
 export default function FocusableIframe( { iframeRef, ...props } ) {
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
-		since: '5.9',
 		alternative: 'wp.compose.useFocusableIframe',
 	} );
 	// Disable reason: The rendered iframe is a pass-through component,

package/src/font-size-picker/stories/index.js

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

package/src/form-token-field/stories/index.js

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

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

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

package/src/grid/stories/index.js

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

package/src/guide/stories/index.js

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

package/src/higher-order/with-focus-outside/index.js

@@ -1,5 +1,3 @@
-//@ts-nocheck
-
 /**
  * WordPress dependencies
  */

package/src/icon/stories/index.js

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

package/src/index.js

@@ -47,7 +47,6 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
-export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';

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

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/InputControl',
 	component: InputControl,
 	parameters: {
-		knobs: { disable: false },
+		knobs: { disabled: false },
 	},
 };
 
@@ -44,7 +44,6 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
-				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),

package/src/input-control/styles/input-control-styles.tsx

@@ -13,7 +13,7 @@ import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
-import type { LabelPosition, Size } from '../types';
+import type { LabelPosition } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -105,6 +105,8 @@ export const Container = styled.div< ContainerProps >`
 	${ containerWidthStyles }
 `;
 
+type Size = 'default' | 'small';
+
 type InputProps = {
 	disabled?: boolean;
 	inputSize?: Size;
@@ -124,7 +126,6 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
-		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
@@ -147,22 +148,11 @@ const sizeStyles = ( { inputSize: size }: InputProps ) => {
 			height: 30,
 			lineHeight: 1,
 			minHeight: 30,
-			paddingLeft: 8,
-			paddingRight: 8,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: 8,
-			paddingRight: 8,
-		},
-		'__unstable-large': {
-			height: 40,
-			lineHeight: 1,
-			minHeight: 40,
-			paddingLeft: 16,
-			paddingRight: 16,
 		},
 	};
 
@@ -215,6 +205,8 @@ export const Input = styled.input< InputProps >`
 		display: block;
 		margin: 0;
 		outline: none;
+		padding-left: 8px;
+		padding-right: 8px;
 		width: 100%;
 
 		${ dragStyles }
@@ -323,8 +315,6 @@ export const Prefix = styled.span`
 `;
 
 export const Suffix = styled.span`
-	align-items: center;
-	align-self: stretch;
 	box-sizing: border-box;
-	display: flex;
+	display: block;
 `;

package/src/input-control/types.ts

@@ -23,14 +23,12 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
-export type Size = 'default' | 'small' | '__unstable-large';
-
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	hideLabelFromVision?: boolean;
 	isFocused: boolean;
 	labelPosition?: LabelPosition;
-	size?: Size;
+	size?: 'default' | 'small';
 }
 
 export type InputChangeCallback<