@wordpress/components 21.1.0 → 21.2.0

package/src/font-size-picker/style.scss

@@ -1,78 +0,0 @@
-.components-font-size-picker__header {
-	&__hint {
-		margin-left: $grid-unit-05;
-		color: $gray-700;
-	}
-
-	.components-base-control__label {
-		margin-bottom: 0;
-	}
-
-	// This button is inheriting padding and min-width.
-	// @todo: we should refactor it to not need to unset this.
-	.components-button.is-small.has-icon:not(.has-text) {
-		min-width: $icon-size;
-		padding: 0;
-	}
-}
-
-.components-font-size-picker__controls {
-	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
-	align-items: center;
-	margin-top: $grid-unit-10;
-
-	&:not(.is-next-has-no-margin-bottom) {
-		margin-bottom: $grid-unit-30;
-	}
-
-	.components-unit-control-wrapper {
-		.components-input-control__label {
-			font-weight: 300;
-			padding-bottom: 0 !important;
-			margin-bottom: $grid-unit-10 !important;
-		}
-	}
-
-	// Apply the same height as the isSmall Reset button.
-	.components-font-size-picker__number {
-		@include input-control;
-		display: inline-block;
-		font-weight: 500;
-		height: 30px;
-		margin-bottom: 0;
-		margin-left: 0;
-		margin-right: $grid-unit-10;
-		margin-top: $grid-unit-10;
-		width: 54px;
-
-		// Show the reset button as disabled until a value is entered.
-		&[value=""] + .components-button {
-			cursor: default;
-			opacity: 0.3;
-			pointer-events: none;
-		}
-
-		&-container {
-			display: flex;
-			flex-direction: column;
-		}
-	}
-
-	.components-color-palette__clear {
-		height: 30px;
-	}
-}
-
-.components-font-size-picker__custom-input {
-	.components-range-control__slider + .dashicon {
-		width: 30px;
-		height: 30px;
-	}
-}
-
-.components-font-size-picker {
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-

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

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Popover Component should pass additional props to portaled element 1`] = `
-<span>
-  <div
-    class="components-popover"
-    role="tooltip"
-    style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 0% 0% 0;"
-    tabindex="-1"
-  >
-    <div
-      class="components-popover__content"
-    >
-      Hello
-    </div>
-  </div>
-</span>
-`;
-
-exports[`Popover Component should render content 1`] = `
-<span>
-  <div
-    class="components-popover"
-    style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 0% 0% 0;"
-    tabindex="-1"
-  >
-    <div
-      class="components-popover__content"
-    >
-      Hello
-    </div>
-  </div>
-</span>
-`;

package/src/popover/test/index.js

@@ -1,164 +0,0 @@
-/**
- * External dependencies
- */
-import { act, render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Popover from '../';
-
-import { positionToPlacement, placementToMotionAnimationProps } from '../utils';
-
-describe( 'Popover', () => {
-	describe( 'Component', () => {
-		afterEach( () => {
-			if ( document.activeElement ) {
-				document.activeElement.blur();
-			}
-		} );
-
-		it( 'should allow focus-on-open behavior to be disabled', () => {
-			expect( document.activeElement ).toBe( document.body );
-
-			act( () => {
-				render( <Popover focusOnMount={ false } /> );
-
-				jest.advanceTimersByTime( 1 );
-			} );
-
-			expect( document.activeElement ).toBe( document.body );
-		} );
-
-		it( 'should render content', () => {
-			let result;
-			act( () => {
-				result = render( <Popover>Hello</Popover> );
-			} );
-
-			expect(
-				result.container.querySelector( 'span' )
-			).toMatchSnapshot();
-		} );
-
-		it( 'should pass additional props to portaled element', () => {
-			let result;
-			act( () => {
-				result = render( <Popover role="tooltip">Hello</Popover> );
-			} );
-
-			expect(
-				result.container.querySelector( 'span' )
-			).toMatchSnapshot();
-		} );
-
-		it( 'should render correctly when anchor is provided', () => {
-			const PopoverWithAnchor = ( args ) => {
-				// Use internal state instead of a ref to make sure that the component
-				// re-renders when the popover's anchor updates.
-				const [ anchor, setAnchor ] = useState( null );
-
-				return (
-					<div>
-						<p ref={ setAnchor }>Anchor</p>
-						<Popover { ...args } anchor={ anchor } />
-					</div>
-				);
-			};
-
-			render( <PopoverWithAnchor>Popover content</PopoverWithAnchor> );
-
-			expect( screen.getByText( 'Popover content' ) ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'positionToPlacement', () => {
-		it.each( [
-			[ 'top left', 'top-end' ],
-			[ 'top center', 'top' ],
-			[ 'top right', 'top-start' ],
-			[ 'middle left', 'left' ],
-			[ 'middle center', 'center' ],
-			[ 'middle right', 'right' ],
-			[ 'bottom left', 'bottom-end' ],
-			[ 'bottom center', 'bottom' ],
-			[ 'bottom right', 'bottom-start' ],
-		] )( 'converts `%s` to `%s`', ( inputPosition, expectedPlacement ) => {
-			expect( positionToPlacement( inputPosition ) ).toEqual(
-				expectedPlacement
-			);
-		} );
-	} );
-
-	describe( 'placementToMotionAnimationProps', () => {
-		describe( 'animation origin', () => {
-			it.each( [
-				[ 'top', 0.5, 1 ],
-				[ 'top-start', 0, 1 ],
-				[ 'top-end', 1, 1 ],
-				[ 'right', 0, 0.5 ],
-				[ 'right-start', 0, 0 ],
-				[ 'right-end', 0, 1 ],
-				[ 'bottom', 0.5, 0 ],
-				[ 'bottom-start', 0, 0 ],
-				[ 'bottom-end', 1, 0 ],
-				[ 'left', 1, 0.5 ],
-				[ 'left-start', 1, 0 ],
-				[ 'left-end', 1, 1 ],
-			] )(
-				'for the `%s` placement computes an animation origin of (%d, %d)',
-				( inputPlacement, expectedOriginX, expectedOriginY ) => {
-					expect(
-						placementToMotionAnimationProps( inputPlacement )
-					).toEqual(
-						expect.objectContaining( {
-							style: expect.objectContaining( {
-								originX: expectedOriginX,
-								originY: expectedOriginY,
-							} ),
-						} )
-					);
-				}
-			);
-		} );
-		describe( 'initial translation', () => {
-			it.each( [
-				[ 'top', 'translateY', '2em' ],
-				[ 'top-start', 'translateY', '2em' ],
-				[ 'top-end', 'translateY', '2em' ],
-				[ 'right', 'translateX', '-2em' ],
-				[ 'right-start', 'translateX', '-2em' ],
-				[ 'right-end', 'translateX', '-2em' ],
-				[ 'bottom', 'translateY', '-2em' ],
-				[ 'bottom-start', 'translateY', '-2em' ],
-				[ 'bottom-end', 'translateY', '-2em' ],
-				[ 'left', 'translateX', '2em' ],
-				[ 'left-start', 'translateX', '2em' ],
-				[ 'left-end', 'translateX', '2em' ],
-			] )(
-				'for the `%s` placement computes an initial `%s` of `%s',
-				(
-					inputPlacement,
-					expectedTranslationProp,
-					expectedTranslationValue
-				) => {
-					expect(
-						placementToMotionAnimationProps( inputPlacement )
-					).toEqual(
-						expect.objectContaining( {
-							initial: expect.objectContaining( {
-								[ expectedTranslationProp ]:
-									expectedTranslationValue,
-							} ),
-						} )
-					);
-				}
-			);
-		} );
-	} );
-} );