components: Fix Shortcut polymorphism (#31555)

* components: Fix View polymorphism * components: Fix shortcut polymorphism * Update snapshot tests * Fix selector and update `selector` type to enforce class selector pattern * Fix view paths after it was moved * Add more documentation around selector
WordPress · May 21, 2021 · 2667ceb · 2667ceb
1 parent 7d5fa9d
commit 2667ceb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/packages/components/src/ui/context/polymorphic-component.ts b/packages/components/src/ui/context/polymorphic-component.ts
@@ -29,7 +29,15 @@ export type PolymorphicComponent< T extends As, O > = {
 	): JSX.Element | null;
 	( props: PolymorphicComponentProps< O, T > ): JSX.Element | null;
 	displayName?: string;
-	selector: string;
+	/**
+	 * A CSS selector used to fake component interpolation in styled components
+	 * for components not generated by `styled`. Anything passed to `contextConnect`
+	 * will get this property.
+	 *
+	 * We restrict it to a class to align with the already existing class names that
+	 * are generated by the context system.
+	 */
+	selector: `.${ string }`;
 };
 
 export type CreatePolymorphicComponent< T extends As, P > = (

diff --git a/packages/components/src/ui/shortcut/component.tsx b/packages/components/src/ui/shortcut/component.tsx
@@ -10,6 +10,7 @@ import type { Ref } from 'react';
 import { useContextSystem, contextConnect } from '../context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../context';
+import { View } from '../../view';
 
 export interface ShortcutDescription {
 	display: string;
@@ -25,10 +26,12 @@ function Shortcut(
 	props: PolymorphicComponentProps< Props, 'span' >,
 	forwardedRef: Ref< any >
 ): JSX.Element | null {
-	const { shortcut, className, ...otherProps } = useContextSystem(
-		props,
-		'Shortcut'
-	);
+	const {
+		as: asProp = 'span',
+		shortcut,
+		className,
+		...otherProps
+	} = useContextSystem( props, 'Shortcut' );
 	if ( ! shortcut ) {
 		return null;
 	}
@@ -44,14 +47,15 @@ function Shortcut(
 	}
 
 	return (
-		<span
+		<View
+			as={ asProp }
 			className={ className }
 			aria-label={ ariaLabel }
 			ref={ forwardedRef }
 			{ ...otherProps }
 		>
 			{ displayText }
-		</span>
+		</View>
 	);
 }
 

diff --git a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Shortcut should render a span with the shortcut text 1`] = `
 <span
-  class="components-shortcut"
+  class="components-shortcut css-1mm2cvy-View emotion-0"
   data-wp-c16t="true"
   data-wp-component="Shortcut"
 >

diff --git a/packages/components/src/view/component.js b/packages/components/src/view/component.js
@@ -19,8 +19,12 @@ import styled from '@emotion/styled';
  * 	);
  * }
  * ```
+ *
+ * @type {import('../ui/context').PolymorphicComponent<'div', {}>}
  */
+// @ts-ignore
 const View = styled.div``;
+View.selector = '.components-view';
 View.displayName = 'View';
 
 export default View;