@wordpress/components 39.0.0 → 40.1.0

package/src/border-control/styles.ts

@@ -1,151 +0,0 @@
-import { css } from '@emotion/react';
-import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
-import { space } from '../utils/space';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
-import {
-	ValueInput as UnitControlWrapper,
-	UnitSelect,
-} from '../unit-control/styles/unit-control-styles';
-import type { Border } from './types';
-
-const focusBoxShadow = css`
-	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
-`;
-
-export const borderControl = css`
-	border: 0;
-	padding: 0;
-	margin: 0;
-	${ boxSizingReset }
-`;
-
-export const innerWrapper = () => css`
-	${ UnitControlWrapper } {
-		flex: 1 1 40%;
-	}
-	&& ${ UnitSelect } {
-		/* Prevent unit select forcing min height larger than its UnitControl */
-		min-height: 0;
-	}
-`;
-
-/*
- * This style is only applied to the UnitControl wrapper when the border width
- * field should be a set width. Omitting this allows the UnitControl &
- * RangeControl to share the available width in a 40/60 split respectively.
- */
-export const wrapperWidth = css`
-	${ UnitControlWrapper } {
-		/* Force the UnitControl's set width. */
-		flex: 0 0 auto;
-	}
-`;
-
-export const wrapperHeight = css`
-	height: 40px;
-`;
-
-export function getInnerWrapperStyles( { hasWidth }: { hasWidth: boolean } ) {
-	return css( innerWrapper(), hasWidth && wrapperWidth, wrapperHeight );
-}
-
-export const borderControlDropdown = css`
-	background: #fff;
-
-	&& > button {
-		aspect-ratio: 1;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		${ rtl(
-			{ borderRadius: `2px 0 0 2px` },
-			{ borderRadius: `0 2px 2px 0` }
-		)() }
-		border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-
-		&:focus,
-		&:hover:not( :disabled ) {
-			${ focusBoxShadow }
-			border-color: ${ COLORS.ui.borderFocus };
-			z-index: 1;
-			position: relative;
-		}
-	}
-`;
-
-export const colorIndicatorBorder = ( border?: Border ) => {
-	const { color, style } = border || {};
-
-	const fallbackColor =
-		// TODO: should use the `stroke-interactive-neutral` WPDS token when refactored to SCSS modules
-		!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;
-
-	return css`
-		border-style: ${ style === 'none' ? 'solid' : style };
-		border-color: ${ color || fallbackColor };
-	`;
-};
-
-export const colorIndicatorWrapper = ( border?: Border ) => {
-	const { style } = border || {};
-
-	return css`
-		border-radius: ${ CONFIG.radiusFull };
-		border: 2px solid transparent;
-		${ style ? colorIndicatorBorder( border ) : undefined }
-		width: 24px;
-		height: 24px;
-		padding: 2px;
-
-		/*
-		 * ColorIndicator
-		 *
-		 * The transparent colors used here ensure visibility of the indicator
-		 * over the active state of the border control dropdown's toggle button.
-		 */
-		& > span {
-			height: ${ space( 4 ) };
-			width: ${ space( 4 ) };
-			background: linear-gradient(
-				-45deg,
-				transparent 48%,
-				rgb( 0 0 0 / 20% ) 48%,
-				rgb( 0 0 0 / 20% ) 52%,
-				transparent 52%
-			);
-		}
-	`;
-};
-
-// Must equal $color-palette-circle-size from:
-// @wordpress/components/src/circular-option-picker/style.scss
-const swatchSize = 28;
-const swatchGap = 12;
-
-export const borderControlPopoverControls = css`
-	width: ${ swatchSize * 6 + swatchGap * 5 }px;
-
-	> div:first-of-type > ${ StyledLabel } {
-		margin-bottom: 0;
-	}
-
-	&& ${ StyledLabel } + button:not( .has-text ) {
-		min-width: 24px;
-		padding: 0;
-	}
-`;
-
-export const borderControlPopoverContent = css``;
-export const borderColorIndicator = css``;
-
-export const resetButtonWrapper = css`
-	display: flex;
-	justify-content: flex-end;
-	margin-top: 12px;
-`;
-
-export const borderSlider = () => css`
-	flex: 1 1 60%;
-	${ rtl( { marginRight: space( 3 ) } )() }
-`;

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

@@ -1,34 +0,0 @@
-import styled from '@emotion/styled';
-import BoxControlIcon from '../icon';
-import Button from '../../button';
-import { HStack } from '../../h-stack';
-import RangeControl from '../../range-control';
-import UnitControl from '../../unit-control';
-import { space } from '../../utils/space';
-
-export const StyledUnitControl = styled( UnitControl )`
-	max-width: 90px;
-`;
-
-export const InputWrapper = styled( HStack )`
-	grid-column: 1 / span 3;
-`;
-
-export const ResetButton = styled( Button )`
-	grid-area: 1 / 2;
-	justify-self: end;
-`;
-
-export const LinkedButtonWrapper = styled.div`
-	grid-area: 1 / 3;
-	justify-self: end;
-`;
-
-export const FlexedBoxControlIcon = styled( BoxControlIcon )`
-	flex: 0 0 auto;
-`;
-
-export const FlexedRangeControl = styled( RangeControl )`
-	width: 100%;
-	margin-inline-end: ${ space( 2 ) };
-`;

package/src/circular-option-picker/test/index.tsx

@@ -1,113 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { press } from '@ariakit/test';
-import CircularOptionPicker from '..';
-
-const SINGLE_OPTION = [ <CircularOptionPicker.Option key="option" /> ];
-
-const MULTIPLE_OPTIONS = [
-	<CircularOptionPicker.Option key="option-1" aria-label="Option One" />,
-	<CircularOptionPicker.Option key="option-2" aria-label="Option Two" />,
-];
-
-const DEFAULT_PROPS = {
-	'aria-label': 'Circular Option Picker',
-	options: SINGLE_OPTION,
-};
-
-function getOption( name: string ) {
-	return screen.getByRole( 'option', { name } );
-}
-
-describe( 'CircularOptionPicker', () => {
-	describe( 'when `asButtons` is not set', () => {
-		it( 'should render as a listbox', async () => {
-			render( <CircularOptionPicker { ...DEFAULT_PROPS } /> );
-
-			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
-			expect( screen.getByRole( 'option' ) ).toBeInTheDocument();
-			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'when `asButtons` is false', () => {
-		it( 'should render as a listbox', async () => {
-			render(
-				<CircularOptionPicker
-					{ ...DEFAULT_PROPS }
-					asButtons={ false }
-				/>
-			);
-
-			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
-			expect( screen.getByRole( 'option' ) ).toBeInTheDocument();
-			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'when `asButtons` is true', () => {
-		it( 'should render as buttons', async () => {
-			render( <CircularOptionPicker { ...DEFAULT_PROPS } asButtons /> );
-
-			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
-			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
-			expect( screen.getByRole( 'group' ) ).toBeInTheDocument();
-			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'when `loop` is not set', () => {
-		it( 'should loop', async () => {
-			render(
-				<CircularOptionPicker
-					{ ...DEFAULT_PROPS }
-					options={ MULTIPLE_OPTIONS }
-				/>
-			);
-
-			await press.Tab();
-			expect( getOption( 'Option One' ) ).toHaveFocus();
-			await press.ArrowRight();
-			expect( getOption( 'Option Two' ) ).toHaveFocus();
-			await press.ArrowRight();
-			expect( getOption( 'Option One' ) ).toHaveFocus();
-		} );
-	} );
-
-	describe( 'when `loop` is true', () => {
-		it( 'should loop', async () => {
-			render(
-				<CircularOptionPicker
-					{ ...DEFAULT_PROPS }
-					options={ MULTIPLE_OPTIONS }
-					loop
-				/>
-			);
-
-			await press.Tab();
-			expect( getOption( 'Option One' ) ).toHaveFocus();
-			await press.ArrowRight();
-			expect( getOption( 'Option Two' ) ).toHaveFocus();
-			await press.ArrowRight();
-			expect( getOption( 'Option One' ) ).toHaveFocus();
-		} );
-	} );
-
-	describe( 'when `loop` is false', () => {
-		it( 'should not loop', async () => {
-			render(
-				<CircularOptionPicker
-					{ ...DEFAULT_PROPS }
-					loop={ false }
-					options={ MULTIPLE_OPTIONS }
-				/>
-			);
-
-			await press.Tab();
-			expect( getOption( 'Option One' ) ).toHaveFocus();
-			await press.ArrowRight();
-			expect( getOption( 'Option Two' ) ).toHaveFocus();
-			await press.ArrowRight();
-			expect( getOption( 'Option Two' ) ).toHaveFocus();
-		} );
-	} );
-} );

package/src/color-palette/styles.ts

@@ -1,13 +0,0 @@
-import styled from '@emotion/styled';
-import { Heading } from '../heading';
-import { CONFIG } from '../utils';
-
-export const ColorHeading = styled( Heading )`
-	text-transform: uppercase;
-	line-height: 24px;
-	font-weight: ${ CONFIG.fontWeightEmphasis };
-	&&& {
-		font-size: 11px;
-		margin-bottom: 0;
-	}
-`;

package/src/combobox-control/styles.ts

@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-import { Flex } from '../flex';
-import { space } from '../utils/space';
-
-export const InputWrapperFlex = styled( Flex )`
-	height: 38px; // 40px - 2px vertical borders on parent container
-	padding-left: ${ space( 2 ) };
-	padding-right: ${ space( 2 ) };
-`;

package/src/context/test/__snapshots__/context-system-provider.js.snap

@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`props should render _override props 1`] = `
-<div>
-  <div
-    class="components-component test-component css-16wk7jz-View emotion-0"
-    data-wp-c16t="true"
-    data-wp-component="Component"
-  >
-    Code is Poetry
-  </div>
-</div>
-`;
-
-exports[`props should render context props 1`] = `
-<div>
-  <div
-    class="components-component css-16wk7jz-View emotion-0"
-    data-wp-c16t="true"
-    data-wp-component="Component"
-  >
-    Code is Poetry
-  </div>
-</div>
-`;
-
-exports[`props should render correctly 1`] = `
-<div>
-  <div
-    class="components-component css-16wk7jz-View emotion-0"
-    data-wp-c16t="true"
-    data-wp-component="Component"
-  />
-</div>
-`;

package/src/dropdown/styles.ts

@@ -1,33 +0,0 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { space } from '../utils/space';
-import type { DropdownContentWrapperProps } from './types';
-
-const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {
-	if ( paddingSize === 'none' ) {
-		return;
-	}
-
-	const paddingValues = {
-		small: space( 2 ),
-		medium: space( 4 ),
-	};
-
-	return css`
-		padding: ${ paddingValues[ paddingSize ] || paddingValues.small };
-	`;
-};
-
-export const DropdownContentWrapperDiv = styled.div< DropdownContentWrapperProps >`
-	// Negative margin to reset (offset) the default padding on .components-popover__content
-	margin-left: ${ space( -2 ) };
-	margin-right: ${ space( -2 ) };
-	&:first-of-type {
-		margin-top: ${ space( -2 ) };
-	}
-	&:last-of-type {
-		margin-bottom: ${ space( -2 ) };
-	}
-
-	${ padding };
-`;

package/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`withFilters should display a component overridden by the filter 1`] = `
-<div>
-  <div>
-    Overridden component
-  </div>
-</div>
-`;
-
-exports[`withFilters should display original component when no filters applied 1`] = `
-<div>
-  <div>
-    My component
-  </div>
-</div>
-`;
-
-exports[`withFilters should display two components composed by the filter 1`] = `
-<div>
-  <div>
-    <div>
-      My component
-    </div>
-    <div>
-      Composed component
-    </div>
-  </div>
-</div>
-`;
-
-exports[`withFilters should not re-render component when new filter added before component was mounted 1`] = `
-<div>
-  <blockquote>
-    <div>
-      Spied component
-    </div>
-  </blockquote>
-</div>
-`;
-
-exports[`withFilters should re-render both components once each when one filter added 1`] = `
-<div>
-  <section>
-    <blockquote>
-      <div>
-        Spied component
-      </div>
-    </blockquote>
-    <blockquote>
-      <div>
-        Spied component
-      </div>
-    </blockquote>
-  </section>
-</div>
-`;
-
-exports[`withFilters should re-render component once when new filter added after component was mounted 1`] = `
-<div>
-  <blockquote>
-    <div>
-      Spied component
-    </div>
-  </blockquote>
-</div>
-`;
-
-exports[`withFilters should re-render component once when two filters added in the same animation frame 1`] = `
-<div>
-  <section>
-    <blockquote>
-      <div>
-        Spied component
-      </div>
-    </blockquote>
-  </section>
-</div>
-`;
-
-exports[`withFilters should re-render component twice when new filter added and removed in two different animation frames 1`] = `
-<div>
-  <div>
-    Spied component
-  </div>
-</div>
-`;