@wordpress/components 39.0.0 → 40.0.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/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/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/progress-bar/styles.ts

@@ -1,84 +0,0 @@
-import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/react';
-import { isRTL } from '@wordpress/i18n';
-import { COLORS, CONFIG } from '../utils';
-
-function animateProgressBar( isRtl = false ) {
-	const animationDirection = isRtl ? 'right' : 'left';
-
-	return keyframes( {
-		'0%': {
-			[ animationDirection ]: '-50%',
-		},
-		'100%': {
-			[ animationDirection ]: '100%',
-		},
-	} );
-}
-
-// Width of the indicator for the indeterminate progress bar
-export const INDETERMINATE_TRACK_WIDTH = 50;
-
-export const Track = styled.div`
-	position: relative;
-	overflow: hidden;
-	height: ${ CONFIG.borderWidthFocus };
-	/* Text color at 10% opacity */
-	background-color: color-mix(
-		in srgb,
-		${ COLORS.theme.foreground },
-		transparent 90%
-	);
-	border-radius: ${ CONFIG.radiusFull };
-
-	// Windows high contrast mode.
-	outline: 2px solid transparent;
-	outline-offset: 2px;
-
-	:where( & ) {
-		width: 160px;
-	}
-`;
-
-export const Indicator = styled.div< {
-	isIndeterminate: boolean;
-} >`
-	display: inline-block;
-	position: absolute;
-	top: 0;
-	height: 100%;
-	border-radius: ${ CONFIG.radiusFull };
-	/* Text color at 90% opacity */
-	background-color: color-mix(
-		in srgb,
-		${ COLORS.theme.foreground },
-		transparent 10%
-	);
-
-	// Windows high contrast mode.
-	outline: 2px solid transparent;
-	outline-offset: -2px;
-
-	${ ( { isIndeterminate } ) =>
-		isIndeterminate
-			? css( {
-					animationDuration: '1.5s',
-					animationTimingFunction: 'ease-in-out',
-					animationIterationCount: 'infinite',
-					animationName: animateProgressBar( isRTL() ),
-					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
-			  } )
-			: css( {
-					width: 'var(--indicator-width)',
-					transition: 'width 0.4s ease-in-out',
-			  } ) };
-`;
-
-export const ProgressElement = styled.progress`
-	position: absolute;
-	top: 0;
-	left: 0;
-	opacity: 0;
-	width: 100%;
-	height: 100%;
-`;

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

@@ -1,47 +0,0 @@
-import styled from '@emotion/styled';
-import { Text } from '../../../text';
-import { font, COLORS, CONFIG } from '../../../utils';
-
-export const Root = styled.div`
-	bottom: 0;
-	box-sizing: border-box;
-	left: 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-`;
-
-export const TooltipWrapper = styled.div`
-	align-items: center;
-	box-sizing: border-box;
-	display: inline-flex;
-	justify-content: center;
-	opacity: 0;
-	pointer-events: none;
-	transition: opacity 120ms linear;
-`;
-
-export const Tooltip = styled.div`
-	background: ${ COLORS.theme.foreground };
-	border-radius: ${ CONFIG.radiusSmall };
-	box-sizing: border-box;
-	font-family: ${ font( 'default.fontFamily' ) };
-	font-size: 12px;
-	color: ${ COLORS.theme.foregroundInverted };
-	padding: 4px 8px;
-	position: relative;
-`;
-
-// TODO: Resolve need to use &&& to increase specificity
-// https://github.com/WordPress/gutenberg/issues/18483
-
-export const LabelText = styled( Text )`
-	&&& {
-		color: ${ COLORS.theme.foregroundInverted };
-		display: block;
-		font-size: 13px;
-		line-height: 1.4;
-		white-space: nowrap;
-	}
-`;

package/src/scrollable/styles.ts

@@ -1,57 +0,0 @@
-import { css } from '@emotion/react';
-import { CONFIG } from '../utils';
-
-export const scrollableScrollbar = css`
-	@media only screen and ( min-device-width: 40em ) {
-		&::-webkit-scrollbar {
-			height: 12px;
-			width: 12px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background-color: transparent;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: ${ CONFIG.colorScrollbarTrack };
-			border-radius: 8px;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-clip: padding-box;
-			background-color: ${ CONFIG.colorScrollbarThumb };
-			border: 2px solid rgba( 0, 0, 0, 0 );
-			border-radius: 7px;
-		}
-
-		&:hover::-webkit-scrollbar-thumb {
-			background-color: ${ CONFIG.colorScrollbarThumbHover };
-		}
-	}
-`;
-
-export const Scrollable = css`
-	height: 100%;
-`;
-
-export const Content = css`
-	position: relative;
-`;
-
-export const smoothScroll = css`
-	scroll-behavior: smooth;
-`;
-
-export const scrollX = css`
-	overflow-x: auto;
-	overflow-y: hidden;
-`;
-
-export const scrollY = css`
-	overflow-x: hidden;
-	overflow-y: auto;
-`;
-
-export const scrollAuto = css`
-	overflow-y: auto;
-`;

package/src/scrollable/test/__snapshots__/index.tsx.snap

@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  height: 100%;
-}
-
-@media only screen and ( min-device-width: 40em ) {
-  .emotion-1::-webkit-scrollbar {
-    height: 12px;
-    width: 12px;
-  }
-
-  .emotion-1::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  .emotion-1::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.04);
-    border-radius: 8px;
-  }
-
-  .emotion-1::-webkit-scrollbar-thumb {
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-    background-color: rgba(0, 0, 0, 0.2);
-    border: 2px solid rgba( 0, 0, 0, 0 );
-    border-radius: 7px;
-  }
-
-  .emotion-1:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.emotion-2 {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-<div
-  class="emotion-0 emotion-1 emotion-2 components-scrollable"
-  data-testid="scrollable"
-  data-wp-c16t="true"
-  data-wp-component="Scrollable"
->
-  WordPress.org - Code is Poetry
-</div>
-`;
-
-exports[`props should render smoothScroll 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -4,9 +4,6 @@
-    },
-    Object {
-      "overflow-x": "hidden",
-      "overflow-y": "auto",
-    },
--   Object {
--     "scroll-behavior": "smooth",
--   },
-  ]
-`;

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

@@ -1,90 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { font } from '../../utils/font';
-import { COLORS } from '../../utils/colors-values';
-import { CONFIG } from '../../utils';
-import { breakpoint } from '../../utils/breakpoint';
-
-const inputStyleNeutral = css`
-	box-shadow: 0 0 0 transparent;
-	border-radius: ${ CONFIG.radiusSmall };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-
-	@media not ( prefers-reduced-motion ) {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
-const inputStyleFocus = css`
-	border-color: ${ COLORS.theme.accent };
-	box-shadow: 0 0 0
-		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.theme.accent };
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-`;
-
-export const StyledTextarea = styled.textarea`
-	width: 100%;
-	display: block;
-	font-family: ${ font( 'default.fontFamily' ) };
-	line-height: 20px;
-	background: ${ COLORS.theme.background };
-	color: ${ COLORS.theme.foreground };
-	resize: vertical;
-
-	// Vertical padding is to match the standard 40px control height when rows=1,
-	// in conjunction with the 20px line-height.
-	// "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width.
-	padding: 9px 11px;
-
-	// Matching the 20px line-height + the 9px top and bottom padding.
-	min-height: 38px;
-
-	${ inputStyleNeutral };
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: ${ font( 'mobileTextMinFontSize' ) };
-
-	${ breakpoint( 'small' ) } {
-		font-size: ${ font( 'default.fontSize' ) };
-	}
-
-	&:focus {
-		${ inputStyleFocus }
-	}
-
-	&:disabled {
-		background: ${ COLORS.ui.backgroundDisabled };
-		border-color: ${ COLORS.ui.borderDisabled };
-		color: ${ COLORS.ui.textDisabled };
-	}
-
-	// Use opacity to work in various editor styles.
-	&::-webkit-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&::-moz-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&:-ms-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&::-moz-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&:-ms-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-	}
-`;

package/src/validated-form-controls/components/combobox-control.tsx

@@ -1,56 +0,0 @@
-import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useEffect, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
-import type { ValidatedControlProps } from './types';
-import ComboboxControl from '../../combobox-control';
-
-const UnforwardedValidatedComboboxControl = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: Omit<
-		React.ComponentProps< typeof ComboboxControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLInputElement >
-) => {
-	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-
-	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
-	// so we need to set it manually.
-	useEffect( () => {
-		const input =
-			validityTargetRef.current?.querySelector< HTMLInputElement >(
-				'input[role="combobox"]'
-			);
-		if ( input ) {
-			input.required = required ?? false;
-		}
-	}, [ required ] );
-
-	return (
-		// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
-		<ControlWithError
-			required={ required }
-			markWhenOptional={ markWhenOptional }
-			ref={ mergedRefs }
-			customValidity={ customValidity }
-			getValidityTarget={ () =>
-				validityTargetRef.current?.querySelector< HTMLInputElement >(
-					'input[role="combobox"]'
-				)
-			}
-		>
-			<ComboboxControl { ...restProps } />
-		</ControlWithError>
-	);
-};
-
-export const ValidatedComboboxControl = forwardRef(
-	UnforwardedValidatedComboboxControl
-);
-ValidatedComboboxControl.displayName = 'ValidatedComboboxControl';

package/src/validated-form-controls/components/form-token-field.tsx

@@ -1,57 +0,0 @@
-import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
-import type { ValidatedControlProps } from './types';
-import { FormTokenField } from '../../form-token-field';
-
-const UnforwardedValidatedFormTokenField = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: React.ComponentProps< typeof FormTokenField > & ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLDivElement >
-) => {
-	const validityTargetRef = useRef< HTMLInputElement >( null );
-
-	return (
-		<div
-			className="components-validated-control__wrapper-with-error-delegate"
-			ref={ forwardedRef }
-		>
-			<ControlWithError
-				required={ required }
-				markWhenOptional={ markWhenOptional }
-				customValidity={ customValidity }
-				getValidityTarget={ () => validityTargetRef.current }
-			>
-				<FormTokenField { ...restProps } />
-			</ControlWithError>
-			<input
-				className="components-validated-control__error-delegate"
-				type="text"
-				ref={ validityTargetRef }
-				required={ required }
-				value={
-					restProps.value && restProps.value.length > 0
-						? 'hasvalue'
-						: ''
-				}
-				tabIndex={ -1 }
-				onChange={ () => {} }
-				onFocus={ ( e ) => {
-					e.target.previousElementSibling
-						?.querySelector< HTMLInputElement >(
-							'input[type="text"]'
-						)
-						?.focus();
-				} }
-			/>
-		</div>
-	);
-};
-
-export const ValidatedFormTokenField = forwardRef(
-	UnforwardedValidatedFormTokenField
-);
-ValidatedFormTokenField.displayName = 'ValidatedFormTokenField';