Apply changes

Author: mirka

packages/components/src/icon/index.stories.tsx

@@ -1,25 +1,12 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
 import { wordpress } from '@wordpress/icons';
 import { SVG, Path } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import Icon from '..';
-import { VStack } from '../../v-stack';
+import { Icon } from '.';
 import type { Meta, StoryFn } from '@storybook/react';
 
 const meta: Meta< typeof Icon > = {
-	title: 'Components/Icon',
+	title: 'Still Internal/Icon',
 	component: Icon,
 	parameters: {
-		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
@@ -120,21 +107,3 @@ WithAnSVG.args = {
 		</SVG>
 	),
 };
-
-/**
- * Although it's preferred to use icons from the `@wordpress/icons` package, [Dashicons](https://developer.wordpress.org/resource/dashicons/) are still supported,
- * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
- * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
- */
-export const WithADashicon: StoryFn< typeof Icon > = ( args ) => {
-	return (
-		<VStack>
-			<Icon { ...args } />
-			<small>This won’t show an icon if the Dashicons stylesheet isn’t loaded.</small>
-		</VStack>
-	);
-};
-WithADashicon.args = {
-	...Default.args,
-	icon: 'wordpress',
-};

packages/components/src/icon/index.tsx

@@ -1,50 +1,36 @@
 /**
- * External dependencies
+ * Forked from `@wordpress/components`
+ *
+ * Only forked for CSS collision safety, in case styles or classnames are added upstream.
+ *
+ * - Removed Gridicons support (non-critical).
  */
 
-/**
- * WordPress dependencies
- */
 import { cloneElement, createElement, isValidElement } from '@wordpress/element';
 import { SVG } from '@wordpress/primitives';
+import type { ComponentType } from 'react';
 
-/**
- * Internal dependencies
- */
-import Dashicon from '../dashicon';
-import type { IconKey as DashiconIconKey } from '../dashicon/types';
-import type { ComponentType, HTMLProps, SVGProps } from 'react';
-
-export type IconType =
-	| DashiconIconKey
+type IconType =
 	| ComponentType< { size?: number } >
 	| ( ( props: { size?: number } ) => JSX.Element )
 	| JSX.Element;
 
-type AdditionalProps< T > = T extends ComponentType< infer U >
-	? U
-	: T extends DashiconIconKey
-	? SVGProps< SVGSVGElement >
-	: {};
+type AdditionalProps< T > = T extends ComponentType< infer U > ? U : Record< string, unknown >;
 
-export type Props = {
+type Props = {
 	/**
 	 * The icon to render. In most cases, you should use an icon from
 	 * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
 	 *
-	 * Other supported values are: component instances, functions,
-	 * [Dashicons](https://developer.wordpress.org/resource/dashicons/)
-	 * (specified as strings), and `null`.
+	 * Other supported values are: component instances, functions, and `null`.
 	 *
 	 * The `size` value, as well as any other additional props, will be passed through.
 	 * @default null
 	 */
 	icon?: IconType | null;
 	/**
 	 * The size (width and height) of the icon.
-	 *
-	 * Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.
-	 * @default `'string' === typeof icon ? 20 : 24`.
+	 * @default 24
 	 */
 	size?: number;
 } & AdditionalProps< IconType >;
@@ -53,32 +39,13 @@ export type Props = {
  * Renders a raw icon without any initial styling or wrappers.
  *
  * ```jsx
+ * import { Icon } from '@automattic/ui';
  * import { wordpress } from '@wordpress/icons';
  *
  * <Icon icon={ wordpress } />
  * ```
  */
-function Icon( {
-	icon = null,
-	size = 'string' === typeof icon ? 20 : 24,
-	...additionalProps
-}: Props ) {
-	if ( 'string' === typeof icon ) {
-		return (
-			<Dashicon
-				icon={ icon }
-				size={ size }
-				{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }
-			/>
-		);
-	}
-
-	if ( isValidElement( icon ) && Dashicon === icon.type ) {
-		return cloneElement( icon, {
-			...additionalProps,
-		} );
-	}
-
+export function Icon( { icon = null, size = 24, ...additionalProps }: Props ) {
 	if ( 'function' === typeof icon ) {
 		return createElement( icon, {
 			size,
@@ -107,5 +74,3 @@ function Icon( {
 
 	return icon;
 }
-
-export default Icon;

packages/components/src/icon/test/index.tsx

@@ -1,17 +1,9 @@
 /**
- * External dependencies
+ * @jest-environment jsdom
  */
 import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { Path, SVG } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import Icon from '..';
+import { Icon } from '..';
 
 describe( 'Icon', () => {
 	const testId = 'icon';
@@ -28,20 +20,6 @@ describe( 'Icon', () => {
 		expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'renders a dashicon by slug', () => {
-		render( <Icon data-testid={ testId } icon="format-image" /> );
-
-		expect( screen.getByTestId( testId ) ).toHaveClass( 'dashicons-format-image' );
-	} );
-
-	it( 'renders a dashicon with custom size', () => {
-		render( <Icon data-testid={ testId } icon="format-image" size={ 10 } /> );
-
-		expect( screen.getByTestId( testId ) ).toHaveStyle( 'width:10px' );
-		expect( screen.getByTestId( testId ) ).toHaveStyle( 'height:10px' );
-		expect( screen.getByTestId( testId ) ).toHaveStyle( 'font-size:10px' );
-	} );
-
 	it( 'renders a function', () => {
 		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );