@wordpress/components 19.10.0 → 19.11.0

package/src/popover/style.scss

@@ -1,222 +1,41 @@
-$arrow-size: 8px;
-
-/*!rtl:begin:ignore*/
 .components-popover {
-	position: fixed;
 	z-index: z-index(".components-popover");
-	top: 0;
-	left: 0;
-
-	// Hide the popover element until the position has been calculated. The position
-	// cannot be calculated until the popover element is rendered because the
-	// position depends on the size of the popover.
-	opacity: 0;
-
-	&.is-expanded,
-	&[data-x-axis][data-y-axis] {
-		opacity: 1;
-	}
 
 	&.is-expanded {
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		z-index: z-index(".components-popover") !important;
 	}
-
-	&:not(.is-without-arrow) {
-		margin-left: 2px;
-
-		&::before {
-			border: $arrow-size solid $gray-400;
-		}
-
-		&.is-alternate::before {
-			border-color: $gray-900;
-		}
-
-		&::after {
-			border: $arrow-size solid $white;
-		}
-
-		&::before,
-		&::after {
-			content: "";
-			position: absolute;
-			height: 0;
-			width: 0;
-			line-height: 0;
-		}
-
-		&[data-y-axis="top"] {
-			margin-top: - $arrow-size;
-
-			&::before {
-				bottom: - $arrow-size;
-			}
-
-			&::after {
-				bottom: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom: none;
-				border-left-color: transparent;
-				border-right-color: transparent;
-				border-top-style: solid;
-				margin-left: -10px;
-			}
-		}
-
-		&[data-y-axis="bottom"] {
-			margin-top: $arrow-size;
-
-			&::before {
-				top: -$arrow-size;
-			}
-
-			&::after {
-				top: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom-style: solid;
-				border-left-color: transparent;
-				border-right-color: transparent;
-				border-top: none;
-				margin-left: -10px;
-			}
-		}
-
-		&[data-y-axis="middle"][data-x-axis="left"] {
-			margin-left: -$arrow-size;
-
-			&::before {
-				right: -$arrow-size;
-			}
-
-			&::after {
-				right: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom-color: transparent;
-				border-left-style: solid;
-				border-right: none;
-				border-top-color: transparent;
-			}
-		}
-
-		&[data-y-axis="middle"][data-x-axis="right"] {
-			margin-left: $arrow-size;
-
-			&::before {
-				left: -$arrow-size;
-			}
-
-			&::after {
-				left: -6px;
-			}
-
-			&::before,
-			&::after {
-				border-bottom-color: transparent;
-				border-left: none;
-				border-right-style: solid;
-				border-top-color: transparent;
-			}
-		}
-	}
-
-	&[data-y-axis="top"] {
-		bottom: 100%;
-	}
-
-	&[data-y-axis="bottom"] {
-		top: 100%;
-	}
-
-	&[data-y-axis="middle"] {
-		align-items: center;
-		display: flex;
-	}
-
-	// Add spacing.
-	&.is-from-top {
-		margin-top: $grid-unit-15;
-	}
-
-	&.is-from-bottom {
-		margin-top: -$grid-unit-15;
-	}
-
-	&.is-from-left:not(.is-from-top):not(.is-from-bottom) {
-		margin-left: $grid-unit-15;
-	}
-
-	&.is-from-right:not(.is-from-top):not(.is-from-bottom) {
-		margin-right: $grid-unit-15;
-	}
 }
 
 .components-popover__content {
-	height: 100%;
 	background: $white;
-	border: $border-width solid $gray-400;
+	// Using outline instead of border to avoid impacting
+	// popover computations.
+	outline: $border-width solid $gray-400;
 	box-shadow: $shadow-popover;
 	border-radius: $radius-block-ui;
+	box-sizing: border-box;
+	width: min-content;
 
 	// Alternate treatment for popovers that put them at elevation zero with high contrast.
 	.is-alternate & {
-		border: $border-width solid $gray-900;
+		outline: $border-width solid $gray-900;
 		box-shadow: none;
 	}
 
-	.components-popover & {
-		position: absolute;
-		height: auto;
-		overflow-y: auto;
-	}
-
 	.components-popover.is-expanded & {
 		position: static;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
 		min-width: auto;
 		border: none;
+		outline: none;
 		border-top: $border-width solid $gray-900;
 	}
-
-	.components-popover[data-y-axis="top"] & {
-		bottom: 100%;
-	}
-
-	.components-popover[data-x-axis="center"] & {
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	.components-popover[data-x-axis="right"] & {
-		position: absolute;
-		left: 100%;
-	}
-
-	.components-popover:not([data-y-axis="middle"])[data-x-axis="right"] & {
-		margin-left: -($grid-unit-30 + $border-width);
-	}
-
-	.components-popover[data-x-axis="left"] & {
-		position: absolute;
-		right: 100%;
-	}
-
-	.components-popover:not([data-y-axis="middle"])[data-x-axis="left"] & {
-		margin-right: -($grid-unit-30 + $border-width);
-	}
 }
 
 .components-popover__header {
@@ -238,4 +57,15 @@ $arrow-size: 8px;
 .components-popover__close.components-button {
 	z-index: z-index(".components-popover__close");
 }
-/*!rtl:end:ignore*/
+
+.components-popover__arrow {
+	position: absolute;
+	background: $gray-400;
+	width: 8px;
+	height: 8px;
+	transform: rotate(45deg);
+	z-index: -1;
+	.is-alternate & {
+		background: $gray-900;
+	}
+}

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

@@ -3,21 +3,15 @@
 exports[`Popover should pass additional props to portaled element 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-top is-from-left is-without-arrow"
-    data-x-axis="right"
-    data-y-axis="bottom"
+    class="components-popover components-animate__appear is-from-left is-from-top"
     role="tooltip"
-    style="top: 0px; left: 0px;"
+    style="position: absolute;"
     tabindex="-1"
   >
     <div
       class="components-popover__content"
     >
-      <div
-        style="position: relative;"
-      >
-        Hello
-      </div>
+      Hello
     </div>
   </div>
 </span>
@@ -26,20 +20,14 @@ exports[`Popover should pass additional props to portaled element 1`] = `
 exports[`Popover should render content 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-top is-from-left is-without-arrow"
-    data-x-axis="right"
-    data-y-axis="bottom"
-    style="top: 0px; left: 0px;"
+    class="components-popover components-animate__appear is-from-left is-from-top"
+    style="position: absolute;"
     tabindex="-1"
   >
     <div
       class="components-popover__content"
     >
-      <div
-        style="position: relative;"
-      >
-        Hello
-      </div>
+      Hello
     </div>
   </div>
 </span>

package/src/resizable-box/resize-tooltip/utils.ts

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { useEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 const { clearTimeout, setTimeout } = window;
 
@@ -56,11 +56,10 @@ export function useResizeLabel( {
 	showPx = false,
 }: UseResizeLabelArgs ): UseResizeLabelProps {
 	/*
-	 * The width/height values derive from this special useResizeAware hook.
-	 * This custom hook uses injects an iFrame into the element, allowing it
-	 * to tap into the onResize (window) callback events.
+	 * The width/height values derive from this special useResizeObserver hook.
+	 * This custom hook uses the ResizeObserver API to listen for resize events.
 	 */
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 
 	/*
 	 * Indicates if the x/y axis is preferred.

package/src/sandbox/index.native.js

@@ -110,7 +110,7 @@ const style = `
 	/**
 	 * Add responsiveness to embeds with aspect ratios.
 	 *
-	 * These styles have been copied from the web version (https://git.io/JEFcX) and
+	 * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and
 	 * adapted for the native version.
 	 */
 	.wp-has-aspect-ratio.wp-block-embed__wrapper::before {

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

@@ -49,18 +49,21 @@ const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
 		default: {
 			height: 30,
-			lineHeight: 1,
 			minHeight: 30,
+			paddingTop: 0,
+			paddingBottom: 0,
 		},
 		small: {
 			height: 24,
-			lineHeight: 1,
 			minHeight: 24,
+			paddingTop: 0,
+			paddingBottom: 0,
 		},
 		'__unstable-large': {
 			height: 40,
-			lineHeight: 1,
 			minHeight: 40,
+			paddingTop: 0,
+			paddingBottom: 0,
 		},
 	};
 

package/src/tab-panel/style.scss

@@ -59,6 +59,6 @@
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
 	}
 }

package/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -173,12 +173,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
-      <iframe
+      <div
         aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
         class="emotion-8 emotion-9"
@@ -402,12 +399,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
+      <div
         aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
         class="emotion-8 emotion-9"

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -4,14 +4,18 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -49,7 +53,7 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'

package/src/tooltip/index.js

@@ -64,7 +64,7 @@ const addPopoverToGrandchildren = ( {
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
-				noArrow={ true }
+				offset={ 12 }
 			>
 				{ text }
 				<Shortcut
@@ -93,7 +93,13 @@ const emitToChild = ( children, eventName, event ) => {
 };
 
 function Tooltip( props ) {
-	const { children, position, text, shortcut, delay = TOOLTIP_DELAY } = props;
+	const {
+		children,
+		position = 'bottom middle',
+		text,
+		shortcut,
+		delay = TOOLTIP_DELAY,
+	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
 	 * to handle a focus event as displaying the tooltip immediately.

package/src/tooltip/style.scss

@@ -10,16 +10,14 @@
 	background: $gray-900;
 	border-radius: $radius-block-ui;
 	border-width: 0;
+	outline: none;
 	color: $white;
 	white-space: nowrap;
 	text-align: center;
 	line-height: 1.4;
 	font-size: 12px;
 	box-shadow: none;
-
-	> div {
-		padding: $grid-unit-05 $grid-unit-10;
-	}
+	padding: $grid-unit-05 $grid-unit-10;
 }
 
 .components-tooltip__shortcut {

package/src/tooltip/test/index.native.js

@@ -55,7 +55,7 @@ it( 'displays the message', () => {
 } );
 
 // Skipped until `pointerEvents: 'box-none'` no longer erroneously prevents
-// triggering `onTouch*` on the element: https://git.io/JSHZt
+// triggering `onTouch*` on the element: https://github.com/callstack/react-native-testing-library/issues/897
 it.skip( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>