@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/spacer/test/index.tsx

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 
-/**
- * Internal dependencies
- */
 import { Spacer } from '../index';
+import styles from '../style.module.scss';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
@@ -16,192 +11,193 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render margin', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer margin={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer margin={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginX', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginX={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginX={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-inline-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-inline-end': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginY', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginY={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginY={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginTop', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginTop={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginTop={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginBottom', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginBottom={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginBottom={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render marginLeft', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginLeft={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginLeft={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-inline-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginRight', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginRight={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginRight={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-inline-end': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should override margin props from less to more specific', () => {
-		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				margin={ 10 }
 				marginX={ 3 }
 				marginRight={ 5 }
 				marginBottom={ 1 }
-				data-testid="customized-spacer"
+				data-testid="spacer"
 			/>
 		);
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
-	} );
-
-	test( 'should preserve explicit margin props regardless of Emotion insertion order', () => {
-		render( <Spacer marginRight={ 5 } data-testid="primer" /> );
-		render(
-			<Spacer margin={ 10 } marginRight={ 5 } data-testid="target" />
-		);
-
-		const styles = window.getComputedStyle(
-			screen.getByTestId( 'target' )
-		);
-
-		expect( styles.marginRight ).toBe( 'calc(20px)' );
-		expect( styles.marginTop ).toBe( 'calc(40px)' );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin': 'calc(4px * 10)',
+			'--wp-components-spacer-margin-inline-start': 'calc(4px * 3)',
+			'--wp-components-spacer-margin-inline-end': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 1)',
+		} );
 	} );
 
 	test( 'should render padding', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer padding={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer padding={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingX', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingX={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingX={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-start': 'calc(4px * 5)',
+			'--wp-components-spacer-padding-inline-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingY', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingY={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingY={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-padding-block-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingTop', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingTop={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingTop={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-block-start': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingBottom', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render(
-			<Spacer paddingBottom={ 5 } data-testid="customized-spacer" />
-		);
+		render( <Spacer paddingBottom={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-block-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingLeft', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingLeft={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingLeft={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-start': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingRight', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingRight={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingRight={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should override padding props from less to more specific', () => {
-		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				padding={ 10 }
 				paddingY={ 2 }
 				paddingTop={ 5 }
 				paddingLeft={ 3 }
-				data-testid="customized-spacer"
+				data-testid="spacer"
 			/>
 		);
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding': 'calc(4px * 10)',
+			'--wp-components-spacer-padding-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-padding-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-start': 'calc(4px * 3)',
+		} );
 	} );
 
-	test( 'should preserve explicit padding props regardless of Emotion insertion order', () => {
-		render( <Spacer paddingRight={ 5 } data-testid="primer" /> );
+	test( 'should render nested instances without passing spacing variables to children', () => {
 		render(
-			<Spacer padding={ 10 } paddingRight={ 5 } data-testid="target" />
+			<Spacer padding={ 4 } data-testid="outer-spacer">
+				<Spacer data-testid="inner-spacer" />
+			</Spacer>
 		);
 
-		const styles = window.getComputedStyle(
-			screen.getByTestId( 'target' )
-		);
+		const outerSpacer = screen.getByTestId( 'outer-spacer' );
+		const innerSpacer = screen.getByTestId( 'inner-spacer' );
 
-		expect( styles.paddingRight ).toBe( 'calc(20px)' );
-		expect( styles.paddingTop ).toBe( 'calc(40px)' );
+		expect( outerSpacer ).toHaveClass( styles.spacer );
+		expect( innerSpacer ).toHaveClass( styles.spacer );
+		expect(
+			outerSpacer.style.getPropertyValue(
+				'--wp-components-spacer-padding'
+			)
+		).toBe( 'calc(4px * 4)' );
+		expect(
+			innerSpacer.style.getPropertyValue(
+				'--wp-components-spacer-padding'
+			)
+		).toBe( '' );
 	} );
 } );

package/src/tab-panel/stories/index.story.tsx

@@ -13,7 +13,7 @@ const meta: Meta< typeof TabPanel > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Tabs` from `@wordpress/ui` instead.',
+			notes: 'Use [`Tabs`](?path=/docs/design-system-components-tabs--docs) from `@wordpress/ui` instead.',
 		},
 	},
 	args: {

package/src/tab-panel/style.scss

@@ -20,7 +20,7 @@
 	cursor: var(--wpds-cursor-control);
 	padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
-	font-weight: var(--wpds-typography-font-weight-regular);
+	font-weight: var(--wpds-typography-font-weight-default);
 	color: var(--wpds-color-foreground-interactive-neutral);
 
 	&:disabled,

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

@@ -26,7 +26,7 @@ const meta: Meta< typeof Tabs > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Tabs` from `@wordpress/ui` instead.',
+			notes: 'Use [`Tabs`](?path=/docs/design-system-components-tabs--docs) from `@wordpress/ui` instead.',
 		},
 	},
 	args: {

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

@@ -33,7 +33,7 @@ const meta: Meta< typeof Text > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Text` from `@wordpress/ui` instead.',
+			notes: 'Use [`Text`](?path=/docs/design-system-components-text--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/text/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Text should render align 1`] = `
 Snapshot Diff:

package/src/text/types.ts

@@ -1,14 +1,14 @@
-/**
- * Internal dependencies
- */
-import type { TruncateProps } from '../truncate/types';
-
 /**
  * External dependencies
  */
 import type { CSSProperties } from 'react';
 import type { FindAllArgs } from 'highlight-words-core';
 
+/**
+ * Internal dependencies
+ */
+import type { TruncateProps } from '../truncate/types';
+
 export type TextSize =
 	| 'body'
 	| 'caption'

package/src/text-control/style.scss

@@ -23,7 +23,7 @@
 	margin: 0;
 	background: $components-color-background;
 	color: $components-color-foreground;
-	@include input-control( $components-color-accent );
+	@include input-control;
 	border-color: $components-color-border;
 
 	// Subtract 1px to account for the border, which isn't included on the element

package/src/textarea-control/stories/index.story.tsx

@@ -35,7 +35,7 @@ const meta: Meta< typeof TextareaControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `TextareaControl` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`TextareaControl`](?path=/docs/design-system-components-form-primitives-textarea--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 };