npm - @wordpress/components - Versions diffs - 39.0.0 → 40.1.0 - Mend

@@ -30,7 +30,7 @@
 		border-radius: var(--wpds-border-radius-sm);
 		top: -1px;
-		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the indicator's physical offset. */
+		/* stylelint-disable-next-line logical-css/require-logical-properties -- Preserve the indicator's physical offset. */
 		left: -2px;
 		width: calc(calc(var(--selected-width, 0) * 1px) + 2px);
 		height: calc(calc(var(--selected-height, 0) * 1px) + 2px);
@@ -38,6 +38,12 @@
 		/* Hide when dimensions are unset (0) */
 		opacity: min(1, max(0, var(--selected-width, 0), var(--selected-height, 0)));
 	}
+	&[aria-disabled="true"] {
+		&::before {
+			opacity: calc(min(1, max(0, var(--selected-width, 0), var(--selected-height, 0))) * 0.4);
+		}
+	}
 }
 .has-border {
@@ -45,15 +51,13 @@
 }
 .has-enclosing-borders {
-	&:hover {
+	&:hover:not([aria-disabled="true"]) {
 		border-color: $components-color-gray-400;
 	}
 	&:focus-within {
 		z-index: 1;
 		@include mixins.outset-ring__focus();
-		// Preserve validated-control accent overrides.
-		outline-color: $components-color-focus;
 	}
 }

@@ -14,11 +14,7 @@ import {
 function Example() {
 	return (
-		<ToggleGroupControl
-			label="my label"
-			value="vertical"
-			isBlock
-		>
+		<ToggleGroupControl label="my label" value="vertical" isBlock>
 			<ToggleGroupControlOption
 				value="horizontal"
 				label="Horizontal"
@@ -49,3 +45,10 @@ The value of the `ToggleGroupControlOption`.
 Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.
 -   Required: No
+### `disabled`: `boolean`
+If true, this option is unselectable.
+-   Required: No
+-   Default: `false`

@@ -3,6 +3,7 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+import { useToggleGroupControlContext } from '../context';
 function UnforwardedToggleGroupControlOption(
 	props: WordPressComponentProps<
@@ -12,6 +13,7 @@ function UnforwardedToggleGroupControlOption(
 	>,
 	ref: ForwardedRef< any >
 ) {
+	useToggleGroupControlContext( 'ToggleGroupControlOption' );
 	const { label, ...restProps } = props;
 	const optionLabel = restProps[ 'aria-label' ] || label;
 	return (

@@ -63,6 +63,9 @@ function ToggleGroupControlOptionBase(
 		...otherButtonProps
 	} = buttonProps;
+	const isOptionDisabled = Boolean(
+		toggleGroupControlContext.disabled || disabled
+	);
 	const isPressed = toggleGroupControlContext.value === value;
 	const labelClasses = clsx(
 		styles.label,
@@ -109,7 +112,7 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...commonProps }
-						disabled={ disabled }
+						disabled={ isOptionDisabled }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }

@@ -59,8 +59,6 @@
 .is-deselectable {
 	&:focus {
 		@include mixins.outset-ring__focus();
-		// Preserve validated-control accent overrides.
-		outline-color: $components-color-focus;
 		// Hide overlapping border.
 		&[aria-pressed="false"] {

@@ -3,6 +3,7 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+import { useToggleGroupControlContext } from '../context';
 import Icon from '../../icon';
 function UnforwardedToggleGroupControlOptionIcon(
@@ -13,6 +14,7 @@ function UnforwardedToggleGroupControlOptionIcon(
 	>,
 	ref: ForwardedRef< any >
 ) {
+	useToggleGroupControlContext( 'ToggleGroupControlOptionIcon' );
 	const { icon, label, ...restProps } = props;
 	return (
 		<ToggleGroupControlOptionBase

@@ -11,6 +11,12 @@ export type ToggleGroupControlOptionBaseProps = {
 	 */
 	isIcon?: boolean;
 	value: string | number;
+	/**
+	 * Whether this option is unselectable.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
 	 * show the aria-label or the label prop text.
@@ -22,7 +28,7 @@ export type ToggleGroupControlOptionBaseProps = {
 export type ToggleGroupControlOptionIconProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'value'
+	'value' | 'disabled'
 > & {
 	/**
 	 * Icon displayed as the content of the option. Usually one of the icons from
@@ -37,7 +43,7 @@ export type ToggleGroupControlOptionIconProps = Pick<
 export type ToggleGroupControlOptionProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'value' | 'showTooltip'
+	'value' | 'showTooltip' | 'disabled'
 > & {
 	/**
 	 * Label for the option. If needed, the `aria-label` prop can be used in addition
@@ -111,6 +117,8 @@ export type ToggleGroupControlProps = Pick<
 	children: ReactNode;
 	/**
 	 * Whether the control is disabled.
+	 *
+	 * @default false
 	 */
 	disabled?: boolean;
 	/**
@@ -137,10 +145,11 @@ export type ToggleGroupControlContextProps = {
 	value: ToggleGroupControlProps[ 'value' ];
 	setValue: ( newValue: string | number | undefined ) => void;
 	setSelectedElement: ( element: HTMLElement | undefined ) => void;
+	disabled: boolean;
 };
 export type ToggleGroupControlMainControlProps = Pick<
 	ToggleGroupControlProps,
-	'children' | 'isAdaptiveWidth' | 'label' | 'onChange' | 'value'
+	'children' | 'isAdaptiveWidth' | 'label' | 'onChange' | 'value' | 'disabled'
 > &
 	Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Toolbar, ToolbarButton } from '..';

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { wordpress } from '@wordpress/icons';
 import { ToolbarGroup } from '..';
@@ -87,7 +88,7 @@ describe( 'ToolbarGroup', () => {
 		} );
 		it( 'should call the clickHandler on click.', () => {
-			const clickHandler = jest.fn();
+			const clickHandler = vi.fn();
 			const controls = [
 				{
 					icon: wordpress,

@wordpress/components 39.0.0 → 40.1.0