@wordpress/components 29.0.1-next.a9f418477.0 → 29.1.1

package/src/box-control/utils.ts

@@ -6,12 +6,14 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import type {
+	BoxControlInputControlProps,
 	BoxControlProps,
 	BoxControlValue,
 	CustomValueUnits,
+	Preset,
 } from './types';
+import deprecated from '@wordpress/deprecated';
 
 export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
 	px: { max: 300, step: 1 },
@@ -50,7 +52,6 @@ export const LABELS = {
 	bottom: __( 'Bottom side' ),
 	left: __( 'Left side' ),
 	right: __( 'Right side' ),
-	mixed: __( 'Mixed' ),
 	vertical: __( 'Top and bottom sides' ),
 	horizontal: __( 'Left and right sides' ),
 };
@@ -82,56 +83,46 @@ function mode< T >( arr: T[] ) {
 }
 
 /**
- * Gets the 'all' input value and unit from values data.
+ * Gets the merged input value and unit from values data.
  *
  * @param values         Box values.
- * @param selectedUnits  Box units.
  * @param availableSides Available box sides to evaluate.
  *
  * @return A value + unit for the 'all' input.
  */
-export function getAllValue(
+export function getMergedValue(
 	values: BoxControlValue = {},
-	selectedUnits?: BoxControlValue,
 	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
 ) {
 	const sides = normalizeSides( availableSides );
-	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
-		parseQuantityAndUnitFromRawValue( values[ side ] )
-	);
-	const allParsedQuantities = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 0 ] ?? ''
-	);
-	const allParsedUnits = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 1 ]
-	);
-
-	const commonQuantity = allParsedQuantities.every(
-		( v ) => v === allParsedQuantities[ 0 ]
-	)
-		? allParsedQuantities[ 0 ]
-		: '';
-
-	/**
-	 * The typeof === 'number' check is important. On reset actions, the incoming value
-	 * may be null or an empty string.
-	 *
-	 * Also, the value may also be zero (0), which is considered a valid unit value.
-	 *
-	 * typeof === 'number' is more specific for these cases, rather than relying on a
-	 * simple truthy check.
-	 */
-	let commonUnit;
-	if ( typeof commonQuantity === 'number' ) {
-		commonUnit = mode( allParsedUnits );
-	} else {
-		// Set meaningful unit selection if no commonQuantity and user has previously
-		// selected units without assigning values while controls were unlinked.
-		commonUnit =
-			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	if (
+		sides.every(
+			( side: keyof BoxControlValue ) =>
+				values[ side ] === values[ sides[ 0 ] ]
+		)
+	) {
+		return values[ sides[ 0 ] ];
 	}
 
-	return [ commonQuantity, commonUnit ].join( '' );
+	return undefined;
+}
+
+/**
+ * Checks if the values are mixed.
+ *
+ * @param values         Box values.
+ * @param availableSides Available box sides to evaluate.
+ * @return Whether the values are mixed.
+ */
+export function isValueMixed(
+	values: BoxControlValue = {},
+	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
+) {
+	const sides = normalizeSides( availableSides );
+	return sides.some(
+		( side: keyof BoxControlValue ) =>
+			values[ side ] !== values[ sides[ 0 ] ]
+	);
 }
 
 /**
@@ -150,26 +141,6 @@ export function getAllUnitFallback( selectedUnits?: BoxControlValue ) {
 	return mode( filteredUnits );
 }
 
-/**
- * Checks to determine if values are mixed.
- *
- * @param values        Box values.
- * @param selectedUnits Box units.
- * @param sides         Available box sides to evaluate.
- *
- * @return Whether values are mixed.
- */
-export function isValuesMixed(
-	values: BoxControlValue = {},
-	selectedUnits?: BoxControlValue,
-	sides: BoxControlProps[ 'sides' ] = ALL_SIDES
-) {
-	const allValue = getAllValue( values, selectedUnits, sides );
-	const isMixed = isNaN( parseFloat( allValue ) );
-
-	return isMixed;
-}
-
 /**
  * Checks to determine if values are defined.
  *
@@ -239,6 +210,8 @@ export function normalizeSides( sides: BoxControlProps[ 'sides' ] ) {
  * Applies a value to an object representing top, right, bottom and left sides
  * while taking into account any custom side configuration.
  *
+ * @deprecated
+ *
  * @param currentValues The current values for each side.
  * @param newValue      The value to apply to the sides object.
  * @param sides         Array defining valid sides.
@@ -250,6 +223,10 @@ export function applyValueToSides(
 	newValue?: string,
 	sides?: BoxControlProps[ 'sides' ]
 ): BoxControlValue {
+	deprecated( 'applyValueToSides', {
+		since: '6.8',
+		version: '7.0',
+	} );
 	const newValues = { ...currentValues };
 
 	if ( sides?.length ) {
@@ -270,3 +247,88 @@ export function applyValueToSides(
 
 	return newValues;
 }
+
+/**
+ * Return the allowed sides based on the sides configuration.
+ *
+ * @param sides Sides configuration.
+ * @return Allowed sides.
+ */
+export function getAllowedSides(
+	sides: BoxControlInputControlProps[ 'sides' ]
+) {
+	const allowedSides: Set< keyof BoxControlValue > = new Set(
+		! sides ? ALL_SIDES : []
+	);
+	sides?.forEach( ( allowedSide ) => {
+		if ( allowedSide === 'vertical' ) {
+			allowedSides.add( 'top' );
+			allowedSides.add( 'bottom' );
+		} else if ( allowedSide === 'horizontal' ) {
+			allowedSides.add( 'right' );
+			allowedSides.add( 'left' );
+		} else {
+			allowedSides.add( allowedSide );
+		}
+	} );
+	return allowedSides;
+}
+
+/**
+ * Checks if a value is a preset value.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @return Whether the value is a preset value.
+ */
+export function isValuePreset( value: string, presetKey: string ) {
+	return value.startsWith( `var:preset|${ presetKey }|` );
+}
+
+/**
+ * Returns the index of the preset value in the presets array.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The index of the preset value in the presets array.
+ */
+export function getPresetIndexFromValue(
+	value: string,
+	presetKey: string,
+	presets: Preset[]
+) {
+	if ( ! isValuePreset( value, presetKey ) ) {
+		return undefined;
+	}
+
+	const match = value.match(
+		new RegExp( `^var:preset\\|${ presetKey }\\|(.+)$` )
+	);
+	if ( ! match ) {
+		return undefined;
+	}
+	const slug = match[ 1 ];
+	const index = presets.findIndex( ( preset ) => {
+		return preset.slug === slug;
+	} );
+
+	return index !== -1 ? index : undefined;
+}
+
+/**
+ * Returns the preset value from the index.
+ *
+ * @param index     The index of the preset value in the presets array.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The preset value from the index.
+ */
+export function getPresetValueFromIndex(
+	index: number,
+	presetKey: string,
+	presets: Preset[]
+) {
+	const preset = presets[ index ];
+	return `var:preset|${ presetKey }|${ preset.slug }`;
+}

package/src/button/README.md

@@ -1,304 +1,194 @@
 # Button
 
-Buttons let users take actions and make choices with a single click or tap.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-![Button components](https://make.wordpress.org/design/files/2019/03/button.png)
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-button--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-## Design guidelines
-
-### Usage
-
-Buttons tell users what actions they can take and give them a way to interact with the interface. You’ll find them throughout a UI, particularly in places like:
-
--   Modals
--   Forms
--   Toolbars
-
-### Best practices
-
-Buttons should:
-
--   **Be clearly and accurately labeled.**
--   **Clearly communicate that clicking or tapping will trigger an action.**
--   **Use established colors appropriately.** For example, only use red buttons for actions that are difficult or impossible to undo.
--   **Prioritize the most important actions.** This helps users focus. Too many calls to action on one screen can be confusing, making users unsure what to do next.
--   **Have consistent locations in the interface.**
-
-### Content guidelines
-
-Buttons should be clear and predictable—users should be able to anticipate what will happen when they click a button. Never deceive a user by mislabeling a button.
-
-Buttons text should lead with a strong verb that encourages action, and add a noun that clarifies what will actually change. The only exceptions are common actions like Save, Close, Cancel, or OK. Otherwise, use the {verb}+{noun} format to ensure that your button gives the user enough information.
-
-Button text should also be quickly scannable — avoid unnecessary words and articles like the, an, or a.
-
-### Types
-
-#### Link button
-
-Link buttons have low emphasis. They don’t stand out much on the page, so they’re used for less-important actions. What’s less important can vary based on context, but it’s usually a supplementary action to the main action we want someone to take. Link buttons are also useful when you don’t want to distract from the content.
-
-![Link button](https://make.wordpress.org/design/files/2019/03/link-button.png)
-
-#### Default button
-
-Default buttons have medium emphasis. The button appearance helps differentiate them from the page background, so they’re useful when you want more emphasis than a link button offers.
-
-![Default button](https://make.wordpress.org/design/files/2019/03/default-button.png)
-
-#### Primary button
-
-Primary buttons have high emphasis. Their color fill and shadow means they pop off the background.
-
-Since a high-emphasis button commands the most attention, a layout should contain a single primary button. This makes it clear that other buttons have less importance and helps users understand when an action requires their attention.
-
-![Primary button](https://make.wordpress.org/design/files/2019/03/primary-button.png)
-
-#### Text label
-
-All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there needs to be a [label](#label) added and an icon to signify what the button does.
-
-![](https://make.wordpress.org/design/files/2019/03/do-link-button.png)
-
-**Do**
-Use color to distinguish link button labels from other text.
-
-![](https://make.wordpress.org/design/files/2019/03/dont-wrap-button-text.png)
-
-**Don’t**
-Don’t wrap button text. For maximum legibility, keep text labels on a single line.
-
-### Hierarchy
-
-![A layout with a single prominent button](https://make.wordpress.org/design/files/2019/03/button.png)
-
-A layout should contain a single prominently-located button. If multiple buttons are required, a single high-emphasis button can be joined by medium- and low-emphasis buttons mapped to less-important actions. When using multiple buttons, make sure the available state of one button doesn’t look like the disabled state of another.
-
-![A diagram showing high emphasis at the top, medium emphasis in the middle, and low emphasis at the bottom](https://make.wordpress.org/design/files/2019/03/button-hierarchy.png)
-
-A button’s level of emphasis helps determine its appearance, typography, and placement.
-
-#### Placement
-
-Use button types to express different emphasis levels for all the actions a user can perform.
-
-![A link, default, and primary button](https://make.wordpress.org/design/files/2019/03/button-layout.png)
-
-This screen layout uses:
-
-1. A primary button for high emphasis.
-2. A default button for medium emphasis.
-3. A link button for low emphasis.
-
-Placement best practices:
-
--   **Do**: When using multiple buttons in a row, show users which action is more important by placing it next to a button with a lower emphasis (e.g. a primary button next to a default button, or a default button next to a link button).
--   **Don’t**: Don’t place two primary buttons next to one another — they compete for focus. Only use one primary button per view.
--   **Don’t**: Don’t place a button below another button if there is space to place them side by side.
--   **Caution**: Avoid using too many buttons on a single page. When designing pages in the app or website, think about the most important actions for users to take. Too many calls to action can cause confusion and make users unsure what to do next — we always want users to feel confident and capable.
-
-## Development guidelines
-
-### Usage
-
-Renders a button with default style.
+Lets users take actions and make choices with a single click or tap.
 
 ```jsx
 import { Button } from '@wordpress/components';
-
-const MyButton = () => <Button variant="secondary">Click me!</Button>;
+const Mybutton = () => (
+  <Button
+    variant="primary"
+    onClick={ handleClick }
+  >
+    Click here
+  </Button>
+);
 ```
 
-### Props
+## Props
 
-The presence of a `href` prop determines whether an `anchor` element is rendered instead of a `button`.
+### `__next40pxDefaultSize`
 
-Props not included in this set will be applied to the `a` or `button` element.
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-#### `accessibleWhenDisabled`: `boolean`
-
-Whether to keep the button focusable when disabled.
+Start opting into the larger default height that will become the
+default size in a future version.
 
-In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or by preventing focus from returning to a trigger element.
+### `accessibleWhenDisabled`
 
-Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) in the WAI-ARIA Authoring Practices Guide.
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
--   Required: No
--   Default: `false`
+Whether to keep the button focusable when disabled.
 
-#### `children`: `ReactNode`
+In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability
+can cause accessibility issues, by hiding their presence from screen reader users,
+or by preventing focus from returning to a trigger element.
 
-The button's children.
+Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)
+in the WAI-ARIA Authoring Practices Guide.
 
--   Required: No
+### `children`
 
-#### `className`: `string`
+ - Type: `ReactNode`
+ - Required: No
 
-An optional additional class name to apply to the rendered button.
+The button's children.
 
--   Required: No
+### `description`
 
-#### `description`: `string`
+ - Type: `string`
+ - Required: No
 
-An accessible description for the button.
+A visually hidden accessible description for the button.
 
--   Required: No
+### `disabled`
 
-#### `disabled`: `boolean`
+ - Type: `boolean`
+ - Required: No
 
-Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given.
+Whether the button is disabled. If `true`, this will force a `button` element
+to be rendered, even when an `href` is given.
 
 In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
 
--   Required: No
+### `href`
 
-#### `href`: `string`
+ - Type: `string`
+ - Required: Yes
 
 If provided, renders `a` instead of `button`.
 
--   Required: No
+### `icon`
 
-#### `icon`: `IconProps< unknown >[ 'icon' ]`
+ - Type: `IconType`
+ - Required: No
 
-If provided, renders an [Icon](/packages/components/src/icon/README.md) component inside the button.
+If provided, renders an Icon component inside the button.
 
--   Required: No
+### `iconPosition`
 
-#### `iconPosition`: `'left' | 'right'`
+ - Type: `"left" | "right"`
+ - Required: No
+ - Default: `'left'`
 
-If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.
+If provided with `icon`, sets the position of icon relative to the `text`.
 
--   Required: No
--   Default: `left`
+### `iconSize`
 
-#### `iconSize`: `IconProps< unknown >[ 'size' ]`
+ - Type: `number`
+ - Required: No
 
-If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop.
+If provided with `icon`, sets the icon size.
+Please refer to the Icon component for more details regarding
+the default value of its `size` prop.
 
--   Required: No
+### `isBusy`
 
-#### `isBusy`: `boolean`
+ - Type: `boolean`
+ - Required: No
 
 Indicates activity while a action is being performed.
 
--   Required: No
+### `isDestructive`
 
-#### `isDestructive`: `boolean`
+ - Type: `boolean`
+ - Required: No
 
 Renders a red text-based button style to indicate destructive behavior.
 
--   Required: No
-
-#### `isLink`: `boolean`
-
-Deprecated: Renders a button with an anchor style.
-Use `variant` prop with `link` value instead.
+### `isPressed`
 
--   Required: No
--   Default: `false`
-
-#### `isPressed`: `boolean`
+ - Type: `boolean`
+ - Required: No
 
 Renders a pressed button style.
 
-If the native `aria-pressed` attribute is also set, it will take precedence.
-
--   Required: No
-
-#### `isPrimary`: `boolean`
-
-Deprecated: Renders a primary button style.
-Use `variant` prop with `primary` value instead.
+### `label`
 
--   Required: No
--   Default: `false`
+ - Type: `string`
+ - Required: No
 
-#### `isSecondary`: `boolean`
+Sets the `aria-label` of the component, if none is provided.
+Sets the Tooltip content if `showTooltip` is provided.
 
-Deprecated: Renders a default button style.
-Use `variant` prop with `secondary` value instead.
+### `shortcut`
 
--   Required: No
--   Default: `false`
+ - Type: `string | { display: string; ariaLabel: string; }`
+ - Required: No
 
-#### `isSmall`: `boolean`
+If provided with `showTooltip`, appends the Shortcut label to the tooltip content.
+If an object is provided, it should contain `display` and `ariaLabel` keys.
 
-Decreases the size of the button.
+### `showTooltip`
 
-Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
+ - Type: `boolean`
+ - Required: No
 
--   Required: No
+If provided, renders a Tooltip component for the button.
 
-#### `isTertiary`: `boolean`
+### `size`
 
-Deprecated: Renders a text-based button style.
-Use `variant` prop with `tertiary` value instead.
-
--   Required: No
--   Default: `false`
-
-#### `label`: `string`
-
-Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.
-
--   Required: No
-
-#### `shortcut`: `string | { display: string; ariaLabel: string; }`
-
-If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an object is provided, it should contain `display` and `ariaLabel` keys.
-
--   Required: No
-
-#### `showTooltip`: `boolean`
-
-If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) component for the button.
-
--   Required: No
-
-#### `size`: `'default'` | `'compact'` | `'small'`
+ - Type: `"small" | "default" | "compact"`
+ - Required: No
+ - Default: `'default'`
 
 The size of the button.
 
--   `'default'`: For normal text-label buttons, unless it is a toggle button.
--   `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
--   `'small'`: For icon buttons associated with more advanced or auxiliary features.
+- `'default'`: For normal text-label buttons, unless it is a toggle button.
+- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+- `'small'`: For icon buttons associated with more advanced or auxiliary features.
 
 If the deprecated `isSmall` prop is also defined, this prop will take precedence.
 
--   Required: No
--   Default: `'default'`
-
-#### `target`: `string`
-
-If provided with `href`, sets the `target` attribute to the `a`.
-
--   Required: No
+### `text`
 
-#### `text`: `string`
+ - Type: `string`
+ - Required: No
 
 If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
 
--   Required: No
+### `tooltipPosition`
 
-#### `tooltipPosition`: `PopoverProps[ 'position' ]`
+ - Type: `"top" | "middle" | "bottom" | "top center" | "top left" | "top right" | "middle center" | "middle left" | "middle right" | "bottom center" | ...`
+ - Required: No
 
-If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults.
+If provided with `showTooltip`, sets the position of the tooltip.
+Please refer to the Tooltip component for more details regarding the defaults.
 
--   Required: No
+### `target`
 
-#### `variant`: `'primary' | 'secondary' | 'tertiary' | 'link'`
+ - Type: `string`
+ - Required: No
 
-Specifies the button's style. The accepted values are `'primary'` (the primary button styles), `'secondary'` (the default button styles), `'tertiary'` (the text-based button styles), and `'link'` (the link button styles).
-
--   Required: No
+If provided with `href`, sets the `target` attribute to the `a`.
 
-#### `__next40pxDefaultSize`: `boolean`
+### `variant`
 
-Start opting into the larger default height that will become the default size in a future version.
+ - Type: `"link" | "primary" | "secondary" | "tertiary"`
+ - Required: No
 
-- Required: No
-- Default: `false`
+Specifies the button's style.
 
-## Related components
+The accepted values are:
 
--   To group buttons together, use the [ButtonGroup](/packages/components/src/button-group/README.md) component.
+1. `'primary'` (the primary button styles)
+2. `'secondary'` (the default button styles)
+3. `'tertiary'` (the text-based button styles)
+4. `'link'` (the link button styles)

package/src/button/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "Button",
+	"filePath": "./index.tsx"
+}