@wordpress/components 28.9.0 → 28.10.0

package/src/alignment-matrix-control/README.md

@@ -1,12 +1,15 @@
+<!-- This file is generated automatically and cannot be edited directly. -->
+
 # AlignmentMatrixControl
 
-AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-alignmentmatrixcontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
 ```jsx
-import { useState } from 'react';
 import { AlignmentMatrixControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ alignment, setAlignment ] = useState( 'center center' );
@@ -14,63 +17,70 @@ const Example = () => {
 	return (
 		<AlignmentMatrixControl
 			value={ alignment }
-			onChange={ ( newAlignment ) => setAlignment( newAlignment ) }
+			onChange={ setAlignment }
 		/>
 	);
 };
 ```
-
 ## Props
 
-The component accepts the following props:
+### `defaultValue`
 
-### className
+If provided, sets the default alignment value.
 
-The class that will be added to the classes of the underlying `grid` widget.
--   Type: `string`
--   Required: No
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
+ - Default: `'center center'`
 
-### id
+### `label`
 
-Unique ID for the component.
+Accessible label. If provided, sets the `aria-label` attribute of the
+underlying `grid` widget.
 
--  Type: `string`
--  Required: No
+ - Type: `string`
+ - Required: No
+ - Default: `'Alignment Matrix Control'`
 
-### label
+### `onChange`
 
-Accessible label. If provided, sets the `aria-label` attribute of the underlying `grid` widget.
+A function that receives the updated alignment value.
 
--   Type: `string`
--   Required: No
--   Default: `Alignment Matrix Control`
+ - Type: `(newValue: AlignmentMatrixControlValue) => void`
+ - Required: No
 
-### defaultValue
+### `value`
 
-If provided, sets the default alignment value.
+The current alignment value.
 
-- Type: `AlignmentMatrixControlValue`
-- Required: No
-- Default: `center center`
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
 
-### value
+### `width`
 
-The current alignment value.
+If provided, sets the width of the control.
 
-- Type: `AlignmentMatrixControlValue`
-- Required: No
+ - Type: `number`
+ - Required: No
+ - Default: `92`
 
-### onChange
+## Subcomponents
 
-A function that receives the updated alignment value.
+### AlignmentMatrixControl.Icon
 
--   Type: `( newValue: AlignmentMatrixControlValue ) => void`
--   Required: No
+#### Props
 
-### width
+##### `disablePointerEvents`
 
-If provided, sets the width of the control.
+If `true`, disables pointer events on the icon.
 
- - Type: `number`
+ - Type: `boolean`
  - Required: No
- - Default: `92`
+ - Default: `true`
+
+##### `value`
+
+The current alignment value.
+
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
+ - Default: `center`

package/src/alignment-matrix-control/docs-manifest.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "AlignmentMatrixControl",
+	"filePath": "./index.tsx",
+	"subcomponents": [
+		{
+			"displayName": "AlignmentMatrixControlIcon",
+			"preferredDisplayName": "AlignmentMatrixControl.Icon",
+			"filePath": "./icon.tsx"
+		}
+	]
+}

package/src/alignment-matrix-control/types.ts

@@ -54,6 +54,8 @@ export type AlignmentMatrixControlIconProps = Pick<
 	 * component instead_
 	 *
 	 * The size of the icon.
+	 *
+	 * @deprecated
 	 * @ignore
 	 * @default 24
 	 */

package/src/angle-picker-control/README.md

@@ -1,44 +1,57 @@
+<!-- This file is generated automatically and cannot be edited directly. -->
+
 # AnglePickerControl
 
-`AnglePickerControl` is a React component to render a UI that allows users to pick an angle.
-Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field.
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-anglepickercontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+`AnglePickerControl` is a React component to render a UI that allows users to
+pick an angle. Users can choose an angle in a visual UI with the mouse by
+dragging an angle indicator inside a circle or by directly inserting the
+desired angle in a text field.
 
 ```jsx
-import { useState } from 'react';
+import { useState } from '@wordpress/element';
 import { AnglePickerControl } from '@wordpress/components';
 
 function Example() {
-	const [ angle, setAngle ] = useState( 0 );
-	return (
-		<AnglePickerControl
-			value={ angle }
-			onChange={ setAngle }
-		/>
-	);
-};
+  const [ angle, setAngle ] = useState( 0 );
+  return (
+    <AnglePickerControl
+      value={ angle }
+      onChange={ setAngle }
+    </>
+  );
+}
 ```
-
 ## Props
 
-The component accepts the following props.
+### `as`
+
+The HTML element or React component to render the component as.
 
-### `label`: `string`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
+ - Required: No
+
+### `label`
 
 Label to use for the angle picker.
 
--   Required: No
--   Default: `__( 'Angle' )`
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Angle' )`
 
-### `value`: `number | string`
+### `onChange`
 
-The current value of the input. The value represents an angle in degrees and should be a value between 0 and 360.
+A function that receives the new value of the input.
 
--   Required: Yes
+ - Type: `(value: number) => void`
+ - Required: Yes
 
-### `onChange`: `( value: number ) => void`
+### `value`
 
-A function that receives the new value of the input.
+The current value of the input. The value represents an angle in degrees
+and should be a value between 0 and 360.
 
--   Required: Yes
+ - Type: `string | number`
+ - Required: Yes

package/src/angle-picker-control/docs-manifest.json

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

package/src/button/style.scss

@@ -133,7 +133,7 @@
 	 */
 
 	&.is-secondary {
-		box-shadow: inset 0 0 0 $border-width $components-color-accent;
+		box-shadow: inset 0 0 0 $border-width $components-color-accent, 0 0 0 currentColor;
 		outline: 1px solid transparent; // Shown in high contrast mode.
 		white-space: nowrap;
 		color: $components-color-accent;
@@ -148,6 +148,10 @@
 		&[aria-disabled="true"]:hover:not(:focus) {
 			box-shadow: inset 0 0 0 $border-width $gray-300;
 		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		}
 	}
 
 	/**