@wordpress/components 37.0.0 → 38.0.0

package/src/theme/types.ts

@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import type { ReactNode } from 'react';
-
-export type ThemeInputValues = {
-	/**
-	 * The accent color (used by components as the primary color).
-	 *
-	 * If an accent color is not defined, the default fallback value is the original
-	 * WP Admin main theme color. Not all valid CSS color syntaxes are supported —
-	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
-	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
-	 * `var(--my-custom-property)`) are _not_ supported values for this property.
-	 */
-	accent?: string;
-	/**
-	 * The background color.
-	 *
-	 * If a component explicitly has a background, it will be this color.
-	 * Otherwise, this color will simply be used to determine what the foreground colors should be.
-	 * The actual background color will need to be set on the component's container element.
-	 *
-	 * If a background color is not defined, the default fallback value is #fff.
-	 * Not all valid CSS color syntaxes are supported —
-	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
-	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
-	 * `var(--my-custom-property)`) are _not_ supported values for this property.
-	 */
-	background?: string;
-};
-
-export type ThemeOutputValues = {
-	colors: Partial< {
-		accent: string;
-		accentDarker10: string;
-		accentDarker20: string;
-		/** Foreground color to use when accent color is the background. */
-		accentInverted: string;
-		background: string;
-		foreground: string;
-		/** Foreground color to use when foreground color is the background. */
-		foregroundInverted: string;
-		gray: {
-			100: string;
-			200: string;
-			300: string;
-			400: string;
-			600: string;
-			700: string;
-			800: string;
-		};
-	} >;
-};
-
-export type ThemeProps = ThemeInputValues & {
-	/**
-	 * The children elements.
-	 */
-	children?: ReactNode;
-};

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS } from '../../utils';
-import type { ToggleGroupControlProps } from '../types';
-
-export const block = css`
-	display: flex;
-	width: 100%;
-`;
-
-export const toggleGroupControl = ( {
-	isBlock,
-	isDeselectable,
-}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > ) => css`
-	background: ${ COLORS.ui.background };
-	border: 1px solid transparent;
-	border-radius: ${ CONFIG.radiusSmall };
-	display: inline-flex;
-	height: 40px;
-	min-width: 0;
-	position: relative;
-
-	${ ! isDeselectable && enclosingBorders( isBlock ) }
-	${ isBlock && block }
-
-	@media not ( prefers-reduced-motion ) {
-		&[data-indicator-animated]::before {
-			transition-property: transform, border-radius;
-			transition-duration: 0.2s;
-			transition-timing-function: ease-out;
-		}
-	}
-
-	&::before {
-		content: '';
-		position: absolute;
-		pointer-events: none;
-		background: ${ COLORS.theme.gray[ 100 ] };
-		border: 1px solid ${ COLORS.theme.gray[ 700 ] };
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: -3px;
-
-		border-radius: ${ CONFIG.radiusSmall };
-		top: -1px;
-		left: -2px;
-		width: calc( calc( var( --selected-width, 0 ) * 1px ) + 2px );
-		height: calc( calc( var( --selected-height, 0 ) * 1px ) + 2px );
-		transform: translateX( calc( var( --selected-left, 0 ) * 1px ) );
-		/* Hide when dimensions are unset (0) */
-		opacity: min(
-			1,
-			max( 0, var( --selected-width, 0 ), var( --selected-height, 0 ) )
-		);
-	}
-`;
-
-const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
-	const enclosingBorder = css`
-		border-color: ${ COLORS.gray[ 300 ] };
-	`;
-
-	return css`
-		${ isBlock && enclosingBorder }
-
-		&:hover {
-			border-color: ${ COLORS.gray[ 400 ] };
-		}
-
-		&:focus-within {
-			z-index: 1;
-			outline: ${ CONFIG.borderWidthFocus } solid
-				${ COLORS.ui.borderFocus };
-			outline-offset: 1px;
-		}
-	`;
-};

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS } from '../../utils';
-import type {
-	ToggleGroupControlProps,
-	ToggleGroupControlOptionBaseProps,
-} from '../types';
-
-export const LabelView = styled.div`
-	display: inline-flex;
-	max-width: 100%;
-	min-width: 0;
-	position: relative;
-`;
-
-export const labelBlock = css`
-	flex: 1;
-`;
-
-export const buttonView = ( {
-	isDeselectable,
-	isIcon,
-	isPressed,
-}: Pick< ToggleGroupControlProps, 'isDeselectable' > &
-	Pick< ToggleGroupControlOptionBaseProps, 'isIcon' > & {
-		isPressed?: boolean;
-	} ) => css`
-	align-items: center;
-	appearance: none;
-	background: transparent;
-	border: none;
-	border-radius: ${ CONFIG.radiusXSmall };
-	color: ${ COLORS.theme.gray[ 700 ] };
-	fill: currentColor;
-	cursor: pointer;
-	display: flex;
-	font-family: inherit;
-	height: 100%;
-	justify-content: center;
-	line-height: 100%;
-	outline: none;
-	padding: 0 12px;
-	position: relative;
-	text-align: center;
-	@media not ( prefers-reduced-motion ) {
-		transition:
-			color ${ CONFIG.transitionDurationFast } linear,
-			font-weight 60ms linear;
-	}
-	user-select: none;
-	width: 100%;
-	z-index: 2;
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	&[disabled],
-	&[aria-disabled='true'] {
-		opacity: 0.4;
-		cursor: default;
-	}
-
-	&:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-		color: ${ COLORS.theme.foreground };
-	}
-
-	${ isDeselectable && deselectable }
-	${ isIcon && isIconStyles }
-	${ isPressed && pressed }
-`;
-
-const pressed = css`
-	color: ${ COLORS.theme.foreground };
-	font-weight: ${ CONFIG.fontWeightEmphasis };
-`;
-
-const deselectable = css`
-	&:focus {
-		outline: ${ CONFIG.borderWidthFocus } solid ${ COLORS.ui.borderFocus };
-		outline-offset: 2px;
-
-		// Hide overlapping border
-		&[aria-pressed='false'] {
-			background: ${ COLORS.ui.background };
-			box-shadow: 0 0 0 2px ${ COLORS.ui.background };
-		}
-	}
-`;
-
-export const ButtonContentView = styled.div`
-	display: flex;
-	font-size: ${ CONFIG.fontSize };
-	line-height: 1;
-`;
-
-const isIconStyles = css`
-	height: 38px;
-	aspect-ratio: 1;
-	padding-left: 0;
-	padding-right: 0;
-`;

package/src/tools-panel/styles.ts

@@ -1,176 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import {
-	StyledField as BaseControlField,
-	StyledHelp as BaseControlHelp,
-	Wrapper as BaseControlWrapper,
-} from '../base-control/styles/base-control-styles';
-import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../utils/space';
-
-const toolsPanelGrid = {
-	columns: ( columns: number ) => css`
-		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
-	`,
-	spacing: css`
-		column-gap: ${ space( 4 ) };
-		row-gap: ${ space( 4 ) };
-	`,
-	item: {
-		fullWidth: css`
-			grid-column: 1 / -1;
-		`,
-	},
-};
-
-// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
-export const ToolsPanel = ( columns: number ) => css`
-	${ toolsPanelGrid.columns( columns ) }
-	${ toolsPanelGrid.spacing }
-	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
-	margin-top: -1px;
-	padding: ${ space( 4 ) };
-`;
-
-/**
- * Items injected into a ToolsPanel via a virtual bubbling slot will require
- * an inner dom element to be injected. The following rule allows for the
- * CSS grid display to be re-established.
- */
-
-export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
-	return css`
-		> div:not( :first-of-type ) {
-			display: grid;
-			${ toolsPanelGrid.columns( columns ) }
-			${ toolsPanelGrid.spacing }
-			${ toolsPanelGrid.item.fullWidth }
-		}
-	`;
-};
-
-export const ToolsPanelHiddenInnerWrapper = css`
-	> div:not( :first-of-type ) {
-		display: none;
-	}
-`;
-
-export function getToolsPanelStyles( {
-	columns,
-	hasInnerWrapper,
-	areAllOptionalControlsHidden,
-}: {
-	columns: number;
-	hasInnerWrapper: boolean;
-	areAllOptionalControlsHidden: boolean;
-} ) {
-	return css(
-		ToolsPanel( columns ),
-		hasInnerWrapper && ToolsPanelWithInnerWrapper( columns ),
-		areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper
-	);
-}
-
-export const ToolsPanelHeader = css`
-	${ toolsPanelGrid.item.fullWidth }
-	gap: ${ space( 2 ) };
-
-	/**
-	 * The targeting of dropdown menu component classes here is a temporary
-	 * measure only.
-	 *
-	 * The following styles should be replaced once the DropdownMenu has been
-	 * refactored and can be targeted via component interpolation.
-	 */
-	.components-dropdown-menu {
-		margin: ${ space( -1 ) } 0;
-		line-height: 0;
-	}
-	&&&& .components-dropdown-menu__toggle {
-		padding: 0;
-		min-width: ${ space( 6 ) };
-	}
-`;
-
-export const ToolsPanelHeading = css`
-	font-size: inherit;
-	font-weight: ${ CONFIG.fontWeightEmphasis };
-	line-height: normal;
-
-	/* Required to meet specificity requirements to ensure zero margin */
-	&& {
-		margin: 0;
-	}
-`;
-
-export const ToolsPanelItem = css`
-	${ toolsPanelGrid.item.fullWidth }
-
-	/* Clear spacing in and around controls added as panel items. */
-	/* Remove when they can be addressed via context system. */
-	& > div,
-	& > fieldset {
-		padding-bottom: 0;
-		margin-bottom: 0;
-		max-width: 100%;
-	}
-
-	/* Remove BaseControl components margins and leave spacing to grid layout */
-	&& ${ BaseControlWrapper } {
-		margin-bottom: 0;
-
-		/**
-		 * To maintain proper spacing within a base control, the field's bottom
-		 * margin should only be removed when there is no help text included and
-		 * it is therefore the last-child.
-		 */
-		${ BaseControlField }:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	${ BaseControlHelp } {
-		margin-bottom: 0;
-	}
-`;
-
-export const ToolsPanelItemPlaceholder = css`
-	display: none;
-`;
-
-export const DropdownMenu = css`
-	min-width: 200px;
-`;
-
-export const ResetLabel = styled.span`
-	color: ${ COLORS.theme.accentDarker10 };
-	font-size: 11px;
-	font-weight: ${ CONFIG.fontWeightEmphasis };
-	line-height: 1.4;
-	${ rtl( { marginLeft: space( 3 ) } ) }
-	text-transform: uppercase;
-`;
-
-export const DefaultControlsItem = css`
-	color: ${ COLORS.gray[ 900 ] };
-
-	&&[aria-disabled='true'] {
-		color: ${ COLORS.gray[ 700 ] };
-		opacity: 1;
-
-		&:hover {
-			color: ${ COLORS.gray[ 700 ] };
-		}
-
-		${ ResetLabel } {
-			opacity: 0.3;
-		}
-	}
-`;

package/src/utils/use-deprecated-props.ts

@@ -1,14 +0,0 @@
-export function useDeprecated36pxDefaultSizeProp<
-	P extends Record< string, any > & {
-		__next36pxDefaultSize?: boolean;
-		__next40pxDefaultSize?: boolean;
-	},
->( props: P ) {
-	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
-		props;
-
-	return {
-		...otherProps,
-		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
-	};
-}