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

package/src/card/test/index.tsx

@@ -14,6 +14,39 @@ import {
 	CardHeader,
 	CardMedia,
 } from '../';
+import { useCx } from '../../utils/hooks/use-cx';
+import * as styles from '../styles';
+
+function EmotionStylePrimer( {
+	styleFragment,
+}: {
+	styleFragment: Parameters< ReturnType< typeof useCx > >[ 0 ];
+} ) {
+	const cx = useCx();
+
+	return <div className={ cx( styleFragment ) } />;
+}
+
+function expectComposedEmotionClassName(
+	element: HTMLElement,
+	styleLabels: string[]
+) {
+	const matchingClassNames = element.className
+		.split( /\s+/ )
+		.filter( ( className ) => className.startsWith( 'css-' ) )
+		.filter( ( className ) =>
+			styleLabels.some( ( styleLabel ) =>
+				className.includes( styleLabel )
+			)
+		);
+
+	expect( matchingClassNames ).toHaveLength( 1 );
+	for ( const styleLabel of styleLabels ) {
+		expect( matchingClassNames[ 0 ] ).toEqual(
+			expect.stringContaining( styleLabel )
+		);
+	}
+}
 
 describe( 'Card', () => {
 	describe( 'Card component', () => {
@@ -57,6 +90,22 @@ describe( 'Card', () => {
 			);
 		} );
 
+		it( 'should remove borders regardless of Emotion insertion order', () => {
+			render(
+				<EmotionStylePrimer styleFragment={ styles.boxShadowless } />
+			);
+			render(
+				<Card data-testid="card-wrapper" isBorderless>
+					Code is Poetry
+				</Card>
+			);
+
+			const card = screen.getByTestId( 'card-wrapper' );
+
+			expectComposedEmotionClassName( card, [ 'Card', 'boxShadowless' ] );
+			expect( window.getComputedStyle( card ).boxShadow ).toBe( 'none' );
+		} );
+
 		it( 'should add rounded border when the isRounded prop is true', () => {
 			render(
 				<Card data-testid="card-rounded" isRounded>
@@ -181,6 +230,30 @@ describe( 'Card', () => {
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
+
+			it( 'should remove borders regardless of Emotion insertion order', () => {
+				expect.hasAssertions();
+
+				render(
+					<EmotionStylePrimer styleFragment={ styles.borderless } />
+				);
+				render(
+					<Card>
+						<CardHeader data-testid="card-header" isBorderless>
+							Header
+						</CardHeader>
+						<CardBody>Body</CardBody>
+					</Card>
+				);
+
+				expectComposedEmotionClassName(
+					screen.getByTestId( 'card-header' ),
+					[ 'Header', 'borderRadius', 'borderColor', 'borderless' ]
+				);
+				expect( screen.getByTestId( 'card-header' ) ).toHaveStyle(
+					'border: none'
+				);
+			} );
 		} );
 
 		describe( 'CardFooter', () => {
@@ -199,6 +272,30 @@ describe( 'Card', () => {
 				);
 				expect( container ).toMatchDiffSnapshot( containerWithFlexEnd );
 			} );
+
+			it( 'should remove borders regardless of Emotion insertion order', () => {
+				expect.hasAssertions();
+
+				render(
+					<EmotionStylePrimer styleFragment={ styles.borderless } />
+				);
+				render(
+					<Card>
+						<CardBody>Body</CardBody>
+						<CardFooter data-testid="card-footer" isBorderless>
+							Footer
+						</CardFooter>
+					</Card>
+				);
+
+				expectComposedEmotionClassName(
+					screen.getByTestId( 'card-footer' ),
+					[ 'Footer', 'borderRadius', 'borderColor', 'borderless' ]
+				);
+				expect( screen.getByTestId( 'card-footer' ) ).toHaveStyle(
+					'border: none'
+				);
+			} );
 		} );
 
 		describe( 'CardBody', () => {

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -13,14 +13,29 @@
+@@ -14,14 +14,29 @@
           <span
             class="components-checkbox-control__input-container"
           >

package/src/circular-option-picker/style.scss

@@ -67,7 +67,6 @@ $color-palette-circle-spacing: 12px;
 	// Sit below the option's color and selected-state UI.
 	z-index: -1;
 	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
-	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 

package/src/color-picker/component.tsx

@@ -247,6 +247,10 @@ const UnconnectedColorPicker = (
 	);
 };
 
+/**
+ * `ColorPicker` lets users select a color from a visual color surface, or by
+ * editing its hex, RGB, or HSL values.
+ */
 export const ColorPicker = contextConnect(
 	UnconnectedColorPicker,
 	'ColorPicker'

package/src/color-picker/input-with-slider.tsx

@@ -48,7 +48,6 @@ export const InputWithSlider = ( {
 				spinControls="none"
 			/>
 			<RangeControl
-				__next40pxDefaultSize
 				label={ label }
 				hideLabelFromVision
 				min={ min }

package/src/color-picker/stories/index.story.tsx

@@ -12,6 +12,11 @@ import { ColorPicker } from '../component';
 const meta: Meta< typeof ColorPicker > = {
 	tags: [ 'manifest' ],
 	component: ColorPicker,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <ColorPicker { ...args } />,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',
 	argTypes: {

package/src/combobox-control/README.md

@@ -34,7 +34,6 @@ function MyComboboxControl() {
 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -133,14 +132,6 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 -   Type: `( args: { item: object } ) => ReactNode`
 -   Required: No
 
-#### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
-- Type: `Boolean`
-- Required: No
-- Default: `false`
-
 ## Related components
 
 -   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.

package/src/combobox-control/index.tsx

@@ -32,9 +32,7 @@ import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 import Spinner from '../spinner';
 
 const noop = () => {};
@@ -94,7 +92,6 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
- * 			__next40pxDefaultSize
  * 			label="Font Size"
  * 			value={ fontSize }
  * 			onChange={ setFontSize }
@@ -115,7 +112,6 @@ const getIndexOfMatchingSuggestion = (
  */
 function ComboboxControl( props: ComboboxControlProps ) {
 	const {
-		__next40pxDefaultSize = false,
 		value: valueProp,
 		label,
 		options,
@@ -132,7 +128,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		__experimentalRenderItem,
 		expandOnFocus = true,
 		placeholder,
-	} = useDeprecated36pxDefaultSizeProp( props );
+	} = props;
 
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,
@@ -315,12 +311,6 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		}
 	}, [ matchingSuggestions, isExpanded ] );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'ComboboxControl',
-		__next40pxDefaultSize,
-		size: undefined,
-	} );
-
 	// Disable reason: There is no appropriate role which describes the
 	// input container intended accessible usability.
 	// TODO: Refactor click detection to use blur to stop propagation.
@@ -339,9 +329,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 					tabIndex={ -1 }
 					onKeyDown={ onKeyDown }
 				>
-					<InputWrapperFlex
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-					>
+					<InputWrapperFlex>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"

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

@@ -75,7 +75,6 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 	return (
 		<>
 			<ComboboxControl
-				__next40pxDefaultSize
 				{ ...args }
 				value={ value }
 				onChange={ ( ...changeArgs ) => {
@@ -88,7 +87,6 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Country',
 	options: countryOptions,
 	help: 'Help text to describe the control.',

package/src/combobox-control/styles.ts

@@ -1,30 +1,9 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
 import { Flex } from '../flex';
 import { space } from '../utils/space';
-import type { ComboboxControlProps } from './types';
-
-const deprecatedDefaultSize = ( {
-	__next40pxDefaultSize,
-}: Pick< ComboboxControlProps, '__next40pxDefaultSize' > ) =>
-	! __next40pxDefaultSize &&
-	css`
-		height: 28px; // 30px - 2px vertical borders on parent container
-		padding-left: ${ space( 1 ) };
-		padding-right: ${ space( 1 ) };
-	`;
 
 export const InputWrapperFlex = styled( Flex )`
 	height: 38px; // 40px - 2px vertical borders on parent container
 	padding-left: ${ space( 2 ) };
 	padding-right: ${ space( 2 ) };
-
-	${ deprecatedDefaultSize }
 `;

package/src/combobox-control/test/index.tsx

@@ -58,7 +58,7 @@ const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
 
 const ComboboxControl = ( props: ComboboxControlProps ) => {
-	return <_ComboboxControl { ...props } __next40pxDefaultSize />;
+	return <_ComboboxControl { ...props } />;
 };
 
 const ControlledComboboxControl = ( {

package/src/combobox-control/types.ts

@@ -37,7 +37,8 @@ export type ComboboxControlProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**

package/src/context/stories/ComponentsProvider.stories.jsx

@@ -6,9 +6,9 @@ import { createContext, useContext, memo, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Card, CardBody } from '../../../card';
-import { View } from '../../../view';
-import { Text } from '../../../text';
+import { Card, CardBody } from '../../card';
+import { View } from '../../view';
+import { Text } from '../../text';
 import { ContextSystemProvider } from '../index';
 
 const SomeContext = createContext();

package/src/custom-gradient-picker/index.tsx

@@ -120,7 +120,6 @@ const GradientTypePicker = ( {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
-			size="__unstable-large"
 			value={ hasGradient ? type : undefined }
 		/>
 	);

package/src/custom-select-control/README.md

@@ -41,7 +41,6 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -53,7 +52,6 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -144,13 +142,6 @@ A handler for `blur` events on the trigger button.
 
 -   Required: No
 
-#### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
-- Required: No
-- Default: `false`
-
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

package/src/custom-select-control/index.tsx

@@ -18,7 +18,6 @@ import CustomSelectItem from '../custom-select-control-v2/item';
 import * as Styled from '../custom-select-control-v2/styles';
 import type { CustomSelectProps, CustomSelectOption } from './types';
 import { VisuallyHidden } from '../visually-hidden';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useDeprecatedProps< T extends CustomSelectOption >( {
 	__experimentalShowSelectedHint,
@@ -52,12 +51,18 @@ function getDescribedBy( currentName: string, describedBy?: string ) {
 	return sprintf( __( 'Currently selected: %s' ), currentName );
 }
 
+/**
+ * `CustomSelectControl` is a dropdown for selecting a single option from a
+ * list, with support for custom styling. Use it instead of the `SelectControl`
+ * when options need richer markup (e.g. per-option styles or hints).
+ */
 function CustomSelectControl< T extends CustomSelectOption >(
 	props: CustomSelectProps< T >
 ) {
 	const {
-		__next40pxDefaultSize = false,
-		__shouldNotWarnDeprecated36pxSize,
+		// Prevent passing legacy props to internal component.
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		describedBy,
 		options,
 		onChange,
@@ -68,13 +73,6 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		...restProps
 	} = useDeprecatedProps( props );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'CustomSelectControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	const descriptionId = useInstanceId(
 		CustomSelectControl,
 		'custom-select-control__description'
@@ -174,25 +172,12 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		);
 	};
 
-	const translatedSize = ( () => {
-		if (
-			( __next40pxDefaultSize && size === 'default' ) ||
-			size === '__unstable-large'
-		) {
-			return 'default';
-		}
-		if ( ! __next40pxDefaultSize && size === 'default' ) {
-			return 'compact';
-		}
-		return size;
-	} )();
-
 	return (
 		<>
 			<CustomSelect
 				aria-describedby={ descriptionId }
 				renderSelectedValue={ renderSelectedValue }
-				size={ translatedSize }
+				size={ size === '__unstable-large' ? 'default' : size }
 				store={ store }
 				className={ clsx(
 					// Keeping the classname for legacy reasons

package/src/custom-select-control/stories/index.story.tsx

@@ -63,7 +63,6 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			{ ...props }
 			onChange={ onChange }
 			value={ value }
@@ -73,7 +72,6 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label',
 	options: [
 		{

package/src/custom-select-control/test/index.tsx

@@ -17,7 +17,7 @@ import _CustomSelectControl from '..';
 
 const UncontrolledCustomSelectControl = (
 	props: React.ComponentProps< typeof _CustomSelectControl >
-) => <_CustomSelectControl __next40pxDefaultSize { ...props } />;
+) => <_CustomSelectControl { ...props } />;
 
 const customClassName = 'amber-skies';
 const customStyles = {

package/src/custom-select-control/types.ts

@@ -117,7 +117,8 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**

package/src/date-time/time-picker/index.tsx

@@ -156,7 +156,6 @@ export function TimePicker( {
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
-				__next40pxDefaultSize
 				value={ month }
 				options={ monthOptions }
 				onChange={ ( value ) => {

package/src/date-time/time-picker/time-input/index.tsx

@@ -167,7 +167,6 @@ export function TimeInput( {
 				</TimeWrapper>
 				{ is12Hour && (
 					<ToggleGroupControl
-						__next40pxDefaultSize
 						isBlock
 						label={ __( 'Select AM or PM' ) }
 						hideLabelFromVision

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

@@ -56,7 +56,6 @@ const Form = () => {
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
-				__next40pxDefaultSize
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [

package/src/divider/style.module.scss

@@ -2,7 +2,9 @@
 	border: 0;
 	margin: 0;
 
-	&[aria-orientation="horizontal"] {
+	// Keep the orientation selectors at the pre-#79444 specificity so existing
+	// border overrides continue to win.
+	&:where([aria-orientation="horizontal"]) {
 		border-block-end: 1px solid currentColor;
 		block-size: 0;
 		inline-size: auto;
@@ -10,7 +12,7 @@
 		margin-block-end: var(--wp-components-divider-margin-end, 0);
 	}
 
-	&[aria-orientation="vertical"] {
+	&:where([aria-orientation="vertical"]) {
 		display: inline;
 		border-inline-end: 1px solid currentColor;
 		block-size: auto;

package/src/elevation/hook.ts

@@ -108,14 +108,15 @@ export function useElevation(
 			`;
 		}
 
-		return cx(
+		const elevationStyles = css(
 			styles.Elevation,
 			sx.Base,
 			sx.hover,
 			sx.focus,
-			sx.active,
-			className
+			sx.active
 		);
+
+		return cx( elevationStyles, className );
 	}, [
 		active,
 		borderRadius,

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

@@ -34,7 +34,7 @@ exports[`props should render active 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -67,7 +67,7 @@ exports[`props should render correctly 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -104,7 +104,7 @@ exports[`props should render hover 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -145,7 +145,7 @@ exports[`props should render isInteractive 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -186,7 +186,7 @@ exports[`props should render offset 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -219,7 +219,7 @@ exports[`props should render value 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"

package/src/elevation/test/index.tsx

@@ -8,6 +8,11 @@ import { render, screen } from '@testing-library/react';
  */
 import { Elevation } from '..';
 
+const getGeneratedEmotionClassNames = ( element: HTMLElement ) =>
+	Array.from( element.classList ).filter( ( className ) =>
+		/^(css|emotion)-/.test( className )
+	);
+
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		render( <Elevation data-testid="elevation" /> );
@@ -61,4 +66,20 @@ describe( 'props', () => {
 
 		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
 	} );
+
+	test( 'should compose interactive styles in a single generated class', () => {
+		render(
+			<Elevation
+				active={ 5 }
+				focus={ 9 }
+				hover={ 14 }
+				value={ 7 }
+				data-testid="elevation"
+			/>
+		);
+
+		expect(
+			getGeneratedEmotionClassNames( screen.getByTestId( 'elevation' ) )
+		).toHaveLength( 1 );
+	} );
 } );

package/src/external-link/index.tsx

@@ -23,12 +23,7 @@ function UnforwardedExternalLink(
 	>,
 	ref: ForwardedRef< HTMLAnchorElement >
 ) {
-	const { href, children, className, rel = '', ...additionalProps } = props;
-	const optimizedRel = [
-		...new Set(
-			[ ...rel.split( ' ' ), 'external', 'noopener' ].filter( Boolean )
-		),
-	].join( ' ' );
+	const { href, children, className, ...additionalProps } = props;
 	const classes = clsx( 'components-external-link', className );
 	/* Anchor links are perceived as external links.
 	This constant helps check for on page anchor links,
@@ -55,7 +50,6 @@ function UnforwardedExternalLink(
 			href={ href }
 			onClick={ onClickHandler }
 			target="_blank"
-			rel={ optimizedRel }
 			ref={ ref }
 		>
 			<span className="components-external-link__contents">