@wordpress/components 25.6.1 → 25.8.0

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

@@ -82,7 +82,9 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 		default: css`
 			height: 100%;
 			border: 1px solid transparent;
-			transition: box-shadow 0.1s linear, border 0.1s linear;
+			transition:
+				box-shadow 0.1s linear,
+				border 0.1s linear;
 
 			${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
 

package/src/unit-control/test/utils.ts

@@ -248,7 +248,7 @@ describe( 'UnitControl utils', () => {
 		const cases: [
 			number | string | undefined,
 			number | undefined,
-			string | undefined
+			string | undefined,
 		][] = [
 			// Test undefined.
 			[ undefined, undefined, undefined ],

package/src/utils/colors-values.js

@@ -41,7 +41,7 @@ const UI = {
 	backgroundDisabled: GRAY[ 100 ],
 	border: GRAY[ 600 ],
 	borderHover: GRAY[ 700 ],
-	borderFocus: ADMIN.themeDark10,
+	borderFocus: ADMIN.theme,
 	borderDisabled: GRAY[ 400 ],
 	textDisabled: GRAY[ 600 ],
 	textDark: white,

package/src/utils/hooks/use-cx.ts

@@ -25,7 +25,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  * `cx` normally knows how to handle. It also hooks into the Emotion
  * Cache, allowing `css` calls to work inside iframes.
  *
- * @example
+ * ```jsx
  * import { css } from '@emotion/react';
  *
  * const styles = css`
@@ -39,6 +39,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  *
  * 	return <span className={classes} {...props} />;
  * }
+ * ```
  */
 export const useCx = () => {
 	const cache = useEmotionCache();

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

@@ -7,7 +7,7 @@ export function useDeprecated36pxDefaultSizeProp<
 	P extends Record< string, any > & {
 		__next36pxDefaultSize?: boolean;
 		__next40pxDefaultSize?: boolean;
-	}
+	},
 >(
 	props: P,
 	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */

package/src/v-stack/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { VStack } from '../..';
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof VStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof VStack > = Template.bind( {} );
+export const Default: StoryFn< typeof VStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };

package/src/v-stack/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ const ALIGNMENTS = {
 	stretch: 'stretch',
 };
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 	argTypes: {
@@ -44,7 +44,7 @@ const meta: ComponentMeta< typeof VStack > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }

package/src/view/component.tsx

@@ -14,7 +14,6 @@ import type { ViewProps } from './types';
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
  *
- * @example
  * ```jsx
  * import { View } from `@wordpress/components`;
  *

package/src/view/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { View } from '..';
 
-const meta: ComponentMeta< typeof View > = {
+const meta: Meta< typeof View > = {
 	component: View,
 	title: 'Components (Experimental)/View',
 	argTypes: {
@@ -22,11 +22,11 @@ const meta: ComponentMeta< typeof View > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof View > = ( args ) => {
+const Template: StoryFn< typeof View > = ( args ) => {
 	return <View { ...args } />;
 };
 
-export const Default: ComponentStory< typeof View > = Template.bind( {} );
+export const Default: StoryFn< typeof View > = Template.bind( {} );
 Default.args = {
 	children: 'An example tip',
 };

package/src/visually-hidden/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '..';
 
-const meta: ComponentMeta< typeof VisuallyHidden > = {
+const meta: Meta< typeof VisuallyHidden > = {
 	component: VisuallyHidden,
 	title: 'Components/VisuallyHidden',
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof VisuallyHidden > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
+export const Default: StoryFn< typeof VisuallyHidden > = ( args ) => (
 	<>
 		<VisuallyHidden as="span" { ...args }>
 			This should not show.
@@ -39,7 +39,7 @@ export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
 	</>
 );
 
-export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
+export const WithForwardedProps: StoryFn< typeof VisuallyHidden > = (
 	args
 ) => (
 	<>
@@ -52,9 +52,9 @@ export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
 	</>
 );
 
-export const WithAdditionalClassNames: ComponentStory<
-	typeof VisuallyHidden
-> = ( args ) => (
+export const WithAdditionalClassNames: StoryFn< typeof VisuallyHidden > = (
+	args
+) => (
 	<>
 		Additional class names passed to VisuallyHidden extend the component
 		class name.{ ' ' }

package/src/z-stack/stories/index.story.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import { ZStack } from '..';
 
-const meta: ComponentMeta< typeof ZStack > = {
+const meta: Meta< typeof ZStack > = {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	argTypes: {
@@ -52,7 +52,7 @@ const Avatar = ( {
 	);
 };
 
-const Template: ComponentStory< typeof ZStack > = ( args ) => {
+const Template: StoryFn< typeof ZStack > = ( args ) => {
 	return (
 		<ZStack { ...args }>
 			<Avatar backgroundColor="#444" />
@@ -63,7 +63,7 @@ const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ZStack > = Template.bind( {} );
+export const Default: StoryFn< typeof ZStack > = Template.bind( {} );
 Default.args = {
 	offset: 20,
 };