@atlaskit/icon 31.0.0 → 32.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/icon
 
+## 32.0.1
+
+### Patch Changes
+
+- [`a788a4cabea12`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a788a4cabea12) -
+  Add codemod to migrate icon spacing prop to Box primitive
+
+## 32.0.0
+
+### Major Changes
+
+- [`f3af0f1353dd5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3af0f1353dd5) -
+  Remove legacy icon glyphs and oldName prop support from metadata core.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.0.0
 
 ### Major Changes

package/afm-cc/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"declaration": true,
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__icon",
 		"rootDir": "../",

package/afm-jira/tsconfig.json

@@ -1,17 +1,14 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"declaration": true,
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__icon/app",
 		"rootDir": "../",
 		"composite": true,
-		"noCheck": true
+		"noCheck": true,
+		"isolatedDeclarations": true
 	},
-	"include": [
-		"../src/**/*.ts",
-		"../src/**/*.tsx"
-	],
+	"include": ["../src/**/*.ts", "../src/**/*.tsx"],
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",

package/afm-products/tsconfig.json

@@ -1,7 +1,6 @@
 {
 	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
-		"declaration": true,
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__icon/app",
 		"rootDir": "../",

package/codemods/__tests__/icon-spacing-to-box-primitive.test.tsx

@@ -0,0 +1,320 @@
+import transformer from '../icon-spacing-to-box-primitive';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+const space050Block = `const iconSpacingStyles = cssMap({
+  space050: {
+    paddingTop: token("space.050"),
+    paddingRight: token("space.050"),
+    paddingBottom: token("space.050"),
+    paddingLeft: token("space.050")
+  }
+});`;
+
+const space075Block = `const iconSpacingStyles = cssMap({
+  space075: {
+    paddingTop: token("space.075"),
+    paddingRight: token("space.075"),
+    paddingBottom: token("space.075"),
+    paddingLeft: token("space.075")
+  }
+});`;
+
+const space025Block = `const iconSpacingStyles = cssMap({
+  space025: {
+    paddingTop: token("space.025"),
+    paddingRight: token("space.025"),
+    paddingBottom: token("space.025"),
+    paddingLeft: token("space.025")
+  }
+});`;
+
+describe('Migrate spacing prop to Box primitive', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="none" />;`,
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" />;`,
+		'should remove spacing="none" with no Box wrap',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import AddIcon from '@atlaskit/icon/core/add';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+		'should wrap medium icon with spacing="spacious" in Box with space050',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="compact" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import AddIcon from '@atlaskit/icon/core/add';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+		'should wrap medium icon with spacing="compact" in Box with space050',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+const App = () => <ChevronRightIcon label="" size="small" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+
+${space075Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space075}><ChevronRightIcon label="" size="small" /></Box>;`,
+		'should wrap small icon with spacing="spacious" in Box with space075',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+const App = () => <ChevronRightIcon label="" size="small" spacing="compact" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+
+${space025Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space025}><ChevronRightIcon label="" size="small" /></Box>;`,
+		'should wrap small icon with spacing="compact" in Box with space025',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import MoreIcon from '@atlaskit/icon/core/more';
+const App = () => <Button iconBefore={<MoreIcon label="" spacing="spacious" />} />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import MoreIcon from '@atlaskit/icon/core/more';
+
+${space050Block}
+
+const App = () => <Button iconBefore={<Box xcss={iconSpacingStyles.space050}><MoreIcon label="" /></Box>} />;`,
+		'should wrap icon with spacing prop inside a component slot',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+const App = () => <DropdownMenu iconAfter={<ChevronDownIcon label="" size="small" spacing="spacious" />} />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+
+${space075Block}
+
+const App = () => <DropdownMenu iconAfter={<Box xcss={iconSpacingStyles.space075}><ChevronDownIcon label="" size="small" /></Box>} />;`,
+		'should wrap small icon with spacing prop inside a component slot',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = (props: any) => <AddIcon {...props} spacing="spacious" label="" />;`,
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = (props: any) => // eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Box primitive (spread props detected)
+<AddIcon {...props} spacing="spacious" label="" />;`,
+		'should add eslint-disable comment inline and skip when spread props are present',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = ({ spacing }: any) => <AddIcon label="" spacing={spacing} />;`,
+		`import AddIcon from '@atlaskit/icon/core/add';
+const App = ({ spacing }: any) => // eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Box primitive (dynamic spacing value detected)
+<AddIcon label="" spacing={spacing} />;`,
+		'should add eslint-disable comment inline and skip when spacing is a dynamic expression',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import SomeComponent from 'some-library';
+const App = () => <SomeComponent spacing="spacious" />;`,
+		`import SomeComponent from 'some-library';
+const App = () => <SomeComponent spacing="spacious" />;`,
+		'should not transform non-icon components with spacing prop',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import AddIcon from '@atlaskit/icon/core/add';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+
+const App = () => (
+  <>
+    <AddIcon label="" spacing="spacious" />
+    <ChevronRightIcon label="" size="small" spacing="spacious" />
+    <AddIcon label="" spacing="none" />
+  </>
+);`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import AddIcon from '@atlaskit/icon/core/add';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+
+const iconSpacingStyles = cssMap({
+  space050: {
+    paddingTop: token("space.050"),
+    paddingRight: token("space.050"),
+    paddingBottom: token("space.050"),
+    paddingLeft: token("space.050")
+  },
+
+  space075: {
+    paddingTop: token("space.075"),
+    paddingRight: token("space.075"),
+    paddingBottom: token("space.075"),
+    paddingLeft: token("space.075")
+  }
+});
+
+const App = () => (
+  <>
+    <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>
+    <Box xcss={iconSpacingStyles.space075}><ChevronRightIcon label="" size="small" /></Box>
+    <AddIcon label="" />
+  </>
+);`,
+		'should handle multiple icons in the same file with a single cssMap and deduped keys',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import { Inline } from '@atlaskit/primitives/compiled';
+import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { token } from "@atlaskit/tokens";
+import { Inline, Box } from '@atlaskit/primitives/compiled';
+import AddIcon from '@atlaskit/icon/core/add';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+		'should add Box to existing @atlaskit/primitives/compiled import',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import { Box } from '@atlaskit/primitives';
+import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { token } from "@atlaskit/tokens";
+import { Box } from "@atlaskit/primitives/compiled";
+import AddIcon from '@atlaskit/icon/core/add';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+		'should update @atlaskit/primitives to @atlaskit/primitives/compiled',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import { Box } from '@atlaskit/primitives/compiled';
+import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { token } from "@atlaskit/tokens";
+import { Box } from '@atlaskit/primitives/compiled';
+import AddIcon from '@atlaskit/icon/core/add';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+		'should keep existing Box import from compiled unchanged',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import { Inline } from '@atlaskit/primitives';
+import AddIcon from '@atlaskit/icon/core/add';
+const App = () => <AddIcon label="" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { token } from "@atlaskit/tokens";
+import { Inline, Box } from "@atlaskit/primitives/compiled";
+import AddIcon from '@atlaskit/icon/core/add';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+		'should add Box and update @atlaskit/primitives to @atlaskit/primitives/compiled',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import MoreIcon from '@atlaskit/icon/core/more';
+
+const IconBefore = (
+  <MoreIcon spacing="spacious" label="More" />
+);`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import MoreIcon from '@atlaskit/icon/core/more';
+
+${space050Block}
+
+const IconBefore = (
+  <Box xcss={iconSpacingStyles.space050}><MoreIcon label="More" /></Box>
+);`,
+		'should not produce extra parentheses inside Box when icon is in a parenthesized expression',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`import BitbucketBranchIcon from '@atlaskit/icon-lab/core/bitbucket-branch';
+const App = () => <BitbucketBranchIcon label="" spacing="spacious" />;`,
+		`import { cssMap } from "@atlaskit/css";
+import { Box } from "@atlaskit/primitives/compiled";
+import { token } from "@atlaskit/tokens";
+import BitbucketBranchIcon from '@atlaskit/icon-lab/core/bitbucket-branch';
+
+${space050Block}
+
+const App = () => <Box xcss={iconSpacingStyles.space050}><BitbucketBranchIcon label="" /></Box>;`,
+		'should migrate icon-lab icons',
+	);
+});

package/codemods/icon-spacing-to-box-primitive/index.tsx

@@ -0,0 +1,419 @@
+import type { API, ASTPath, Collection, default as core, FileInfo, JSXElement } from 'jscodeshift';
+
+const ICON_PACKAGES = ['@atlaskit/icon/core', '@atlaskit/icon-lab/core'];
+const BOX_COMPILED_PACKAGE = '@atlaskit/primitives/compiled';
+const BOX_NON_COMPILED_PACKAGE = '@atlaskit/primitives';
+const TOKEN_PACKAGE = '@atlaskit/tokens';
+const CSS_PACKAGE = '@atlaskit/css';
+const CSSMAP_VARIABLE_NAME = 'iconSpacingStyles';
+
+/**
+ * Spacing → Box padding token mapping.
+ *
+ * medium/unspecified:
+ *   compact  → space.050 (4px)
+ *   spacious → space.050 (4px)
+ *
+ * small:
+ *   compact  → space.025 (2px) — NOTE: 2.66px doesn't map cleanly; confirm with designer
+ *   spacious → space.075 (6px)
+ */
+const SPACING_TO_PADDING: Record<string, Record<string, string>> = {
+	medium: {
+		compact: 'space.050',
+		spacious: 'space.050',
+	},
+	small: {
+		compact: 'space.025',
+		spacious: 'space.075',
+	},
+};
+
+/**
+ * Maps a padding token to a cssMap key name.
+ * e.g. 'space.050' → 'space050'
+ */
+function getCssMapKey(paddingToken: string): string {
+	return paddingToken.replace('space.', 'space');
+}
+
+function getIconImportSpecifiers(j: core.JSCodeshift, source: Collection<any>): string[] {
+	const specifiers: string[] = [];
+	for (const pkg of ICON_PACKAGES) {
+		source
+			.find(j.ImportDeclaration)
+			.filter(
+				(path) =>
+					typeof path.node.source.value === 'string' &&
+					path.node.source.value.startsWith(pkg),
+			)
+			.forEach((importDecl) => {
+				for (const specifier of importDecl.value.specifiers || []) {
+					if (specifier.local?.name) {
+						specifiers.push(specifier.local.name);
+					}
+				}
+			});
+	}
+	return specifiers;
+}
+
+function ensureNamedImport(j: core.JSCodeshift, specifiers: any[], name: string): void {
+	const alreadyImported = specifiers.some(
+		(s) => s.type === 'ImportSpecifier' && s.imported?.name === name,
+	);
+	if (!alreadyImported) {
+		specifiers.push(j.importSpecifier(j.identifier(name)));
+	}
+}
+
+/**
+ * Ensures `Box` is imported from `@atlaskit/primitives/compiled`.
+ * - If `/compiled` already exists → add `Box` if missing
+ * - If `@atlaskit/primitives` (non-compiled) exists → migrate path to `/compiled`, add `Box`
+ * - Otherwise → insert new import
+ */
+function insertBoxImport(j: core.JSCodeshift, source: Collection<any>): void {
+	const compiledImports = source
+		.find(j.ImportDeclaration)
+		.filter((path) => path.node.source.value === BOX_COMPILED_PACKAGE);
+
+	if (compiledImports.length > 0) {
+		compiledImports.forEach((path) => {
+			ensureNamedImport(j, path.node.specifiers || [], 'Box');
+		});
+		return;
+	}
+
+	const nonCompiledImports = source
+		.find(j.ImportDeclaration)
+		.filter((path) => path.node.source.value === BOX_NON_COMPILED_PACKAGE);
+
+	if (nonCompiledImports.length > 0) {
+		nonCompiledImports.forEach((path) => {
+			path.node.source = j.stringLiteral(BOX_COMPILED_PACKAGE);
+			ensureNamedImport(j, path.node.specifiers || [], 'Box');
+		});
+		return;
+	}
+
+	const newImport = j.importDeclaration(
+		[j.importSpecifier(j.identifier('Box'))],
+		j.stringLiteral(BOX_COMPILED_PACKAGE),
+	);
+	source.get().node.program.body.unshift(newImport);
+}
+
+/**
+ * Ensures `cssMap` is imported from `@atlaskit/css`.
+ * Note: `jsx` import and JSX pragma are NOT needed for cssMap — only for cx().
+ * - If `@atlaskit/css` already exists → add `cssMap` if missing
+ * - Otherwise → insert new import
+ */
+function insertCssMapImport(j: core.JSCodeshift, source: Collection<any>): void {
+	const cssImports = source
+		.find(j.ImportDeclaration)
+		.filter((path) => path.node.source.value === CSS_PACKAGE);
+
+	if (cssImports.length > 0) {
+		cssImports.forEach((path) => {
+			ensureNamedImport(j, path.node.specifiers || [], 'cssMap');
+		});
+		return;
+	}
+
+	const newImport = j.importDeclaration(
+		[j.importSpecifier(j.identifier('cssMap'))],
+		j.stringLiteral(CSS_PACKAGE),
+	);
+	source.get().node.program.body.unshift(newImport);
+}
+
+/**
+ * Ensures `token` is imported from `@atlaskit/tokens`.
+ */
+function insertTokenImport(j: core.JSCodeshift, source: Collection<any>): void {
+	const tokenImports = source
+		.find(j.ImportDeclaration)
+		.filter((path) => path.node.source.value === TOKEN_PACKAGE);
+
+	if (tokenImports.length > 0) {
+		tokenImports.forEach((path) => {
+			ensureNamedImport(j, path.node.specifiers || [], 'token');
+		});
+		return;
+	}
+
+	const newImport = j.importDeclaration(
+		[j.importSpecifier(j.identifier('token'))],
+		j.stringLiteral(TOKEN_PACKAGE),
+	);
+	source.get().node.program.body.unshift(newImport);
+}
+
+/**
+ * Inserts or updates a single `const iconSpacingStyles = cssMap({...})` declaration
+ * at module level (after the last import), with one key per padding token used.
+ *
+ * If the variable already exists, adds missing keys to the existing cssMap object.
+ */
+function insertOrUpdateCssMapVariable(
+	j: core.JSCodeshift,
+	source: Collection<any>,
+	paddingTokens: Set<string>,
+): void {
+	// Check if iconSpacingStyles already exists
+	const existing = source.find(j.VariableDeclaration).filter((path) => {
+		const decl = path.node.declarations[0];
+		return (
+			decl?.type === 'VariableDeclarator' &&
+			(decl.id as any)?.name === CSSMAP_VARIABLE_NAME
+		);
+	});
+
+	if (existing.length > 0) {
+		// Add missing keys to the existing cssMap object
+		existing.forEach((path) => {
+			const decl = path.node.declarations[0] as any;
+			const cssMapCall = decl?.init;
+			if (cssMapCall?.type !== 'CallExpression') return;
+			const objExpr = cssMapCall.arguments[0];
+			if (objExpr?.type !== 'ObjectExpression') return;
+
+			const existingKeys = new Set(
+				objExpr.properties
+					.filter((p: any) => p.key)
+					.map((p: any) => p.key.name || p.key.value),
+			);
+
+			for (const paddingToken of Array.from(paddingTokens).sort()) {
+				const key = getCssMapKey(paddingToken);
+				if (!existingKeys.has(key)) {
+					const tokenCall = () =>
+						j.callExpression(j.identifier('token'), [j.stringLiteral(paddingToken)]);
+					objExpr.properties.push(
+						j.objectProperty(
+							j.identifier(key),
+							j.objectExpression([
+								j.objectProperty(j.identifier('paddingTop'), tokenCall()),
+								j.objectProperty(j.identifier('paddingRight'), tokenCall()),
+								j.objectProperty(j.identifier('paddingBottom'), tokenCall()),
+								j.objectProperty(j.identifier('paddingLeft'), tokenCall()),
+							]),
+						),
+					);
+				}
+			}
+		});
+		return;
+	}
+
+	// Build new cssMap variable declaration with all keys
+	const properties = Array.from(paddingTokens)
+		.sort()
+		.map((paddingToken) => {
+			const tokenCall = () =>
+				j.callExpression(j.identifier('token'), [j.stringLiteral(paddingToken)]);
+			return j.objectProperty(
+				j.identifier(getCssMapKey(paddingToken)),
+				j.objectExpression([
+					j.objectProperty(j.identifier('paddingTop'), tokenCall()),
+					j.objectProperty(j.identifier('paddingRight'), tokenCall()),
+					j.objectProperty(j.identifier('paddingBottom'), tokenCall()),
+					j.objectProperty(j.identifier('paddingLeft'), tokenCall()),
+				]),
+			);
+		});
+
+	const cssMapCall = j.callExpression(j.identifier('cssMap'), [
+		j.objectExpression(properties),
+	]);
+
+	const variableDecl = j.variableDeclaration('const', [
+		j.variableDeclarator(j.identifier(CSSMAP_VARIABLE_NAME), cssMapCall),
+	]);
+
+	// Insert after the last import
+	const body = source.get().node.program.body;
+	let insertIndex = 0;
+	for (let i = body.length - 1; i >= 0; i--) {
+		if (body[i].type === 'ImportDeclaration') {
+			insertIndex = i + 1;
+			break;
+		}
+	}
+	body.splice(insertIndex, 0, variableDecl);
+}
+
+/**
+ * Wraps a JSXElement in <Box xcss={iconSpacingStyles.spaceXXX}>...</Box>.
+ */
+function wrapWithBox(j: core.JSCodeshift, iconElement: JSXElement, paddingToken: string) {
+	const key = getCssMapKey(paddingToken);
+	return j.jsxElement(
+		j.jsxOpeningElement(j.jsxIdentifier('Box'), [
+			j.jsxAttribute(
+				j.jsxIdentifier('xcss'),
+				j.jsxExpressionContainer(
+					j.memberExpression(
+						j.identifier(CSSMAP_VARIABLE_NAME),
+						j.identifier(key),
+					),
+				),
+			),
+		]),
+		j.jsxClosingElement(j.jsxIdentifier('Box')),
+		[iconElement],
+	);
+}
+
+function addEslintDisableComment(j: core.JSCodeshift, path: ASTPath<JSXElement>, reason: string): void {
+	const comment = j.line(
+		` eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: ${reason}`,
+	);
+	const node = path.value as any;
+	node.comments = [comment, ...(node.comments || [])];
+}
+
+function getStaticPropValue(attributes: any[], propName: string): string | null {
+	const prop = attributes.find(
+		(attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === propName,
+	);
+	if (!prop) return null;
+	if (prop.value?.type === 'StringLiteral' || prop.value?.type === 'Literal') {
+		return prop.value.value;
+	}
+	return null;
+}
+
+function hasSpreadAttributes(attributes: any[]): boolean {
+	return attributes.some((attr: any) => attr.type === 'JSXSpreadAttribute');
+}
+
+function isSpacingDynamic(attributes: any[]): boolean {
+	const prop = attributes.find(
+		(attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === 'spacing',
+	);
+	if (!prop) return false;
+	return prop.value?.type !== 'StringLiteral' && prop.value?.type !== 'Literal';
+}
+
+function removeSpacingProp(attributes: any[]): any[] {
+	return attributes.filter(
+		(attr: any) => !(attr.type === 'JSXAttribute' && attr.name?.name === 'spacing'),
+	);
+}
+
+function replaceWithWrapped(
+	j: core.JSCodeshift,
+	path: ASTPath<JSXElement>,
+	wrappedElement: JSXElement,
+): void {
+	const node = path.value as any;
+
+	const leadingComments = node.comments?.filter((c: any) => c.leading) || [];
+	if (leadingComments.length) {
+		node.comments = node.comments?.filter((c: any) => !c.leading);
+		(wrappedElement as any).comments = [
+			...leadingComments,
+			...((wrappedElement as any).comments || []),
+		];
+	}
+
+	const parentNode = path.parent?.node;
+	const isInsideJSX =
+		parentNode?.type === 'JSXElement' ||
+		parentNode?.type === 'JSXFragment' ||
+		parentNode?.type === 'JSXExpressionContainer';
+
+	const isParenthesized =
+		!isInsideJSX &&
+		parentNode &&
+		(parentNode.type === 'ParenthesizedExpression' || parentNode.extra?.parenthesized);
+
+	if (isParenthesized) {
+		j(path.parent).replaceWith(wrappedElement);
+	} else {
+		j(path).replaceWith(wrappedElement);
+	}
+}
+
+export default function transformer(file: FileInfo, api: API): string {
+	const j = api.jscodeshift;
+	const source = j(file.source);
+
+	const iconSpecifiers = getIconImportSpecifiers(j, source);
+	if (!iconSpecifiers.length) {
+		return file.source;
+	}
+
+	const iconJSXWithSpacing = source
+		.find(j.JSXElement)
+		.filter((path) => {
+			const name = path.value.openingElement.name;
+			return name.type === 'JSXIdentifier' && iconSpecifiers.includes(name.name);
+		})
+		.filter((path) =>
+			(path.value.openingElement.attributes || []).some(
+				(attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === 'spacing',
+			),
+		);
+
+	if (!iconJSXWithSpacing.length) {
+		return file.source;
+	}
+
+	const paddingTokensUsed = new Set<string>();
+	let needsBoxImport = false;
+
+	iconJSXWithSpacing.forEach((path) => {
+		const attrs = path.value.openingElement.attributes || [];
+
+		if (hasSpreadAttributes(attrs)) {
+			addEslintDisableComment(j, path, 'Manually migrate spacing prop to Box primitive (spread props detected)');
+			return;
+		}
+
+		if (isSpacingDynamic(attrs)) {
+			addEslintDisableComment(j, path, 'Manually migrate spacing prop to Box primitive (dynamic spacing value detected)');
+			return;
+		}
+
+		const spacingValue = getStaticPropValue(attrs, 'spacing')!;
+		path.value.openingElement.attributes = removeSpacingProp(attrs);
+
+		if (spacingValue === 'none') {
+			return;
+		}
+
+		const sizeValue = getStaticPropValue(attrs, 'size') ?? 'medium';
+		const sizeKey = sizeValue === 'small' ? 'small' : 'medium';
+		const paddingToken = SPACING_TO_PADDING[sizeKey]?.[spacingValue];
+
+		if (!paddingToken) {
+			addEslintDisableComment(j, path, `Manually migrate spacing="${spacingValue}" prop to Box primitive (unknown spacing value)`);
+			return;
+		}
+
+		if ((path.value as any).extra) {
+			(path.value as any).extra.parenthesized = false;
+		}
+
+		const wrappedElement = wrapWithBox(j, path.value, paddingToken);
+		replaceWithWrapped(j, path, wrappedElement);
+
+		needsBoxImport = true;
+		paddingTokensUsed.add(paddingToken);
+	});
+
+	if (needsBoxImport) {
+		// Insert in reverse order since each unshift prepends — last inserted appears first
+		// Desired order: @atlaskit/css, @atlaskit/primitives/compiled, @atlaskit/tokens
+		insertTokenImport(j, source);
+		insertBoxImport(j, source);
+		insertCssMapImport(j, source);
+		insertOrUpdateCssMapVariable(j, source, paddingTokensUsed);
+	}
+
+	return source.toSource();
+}

package/dist/cjs/components/icon-new.js

@@ -1,4 +1,4 @@
-/* icon-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/icon-tile/icon-tile-new.js

@@ -1,4 +1,4 @@
-/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/icon-tile/icon-tile-old.js

@@ -1,4 +1,4 @@
-/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/icon.js

@@ -1,4 +1,4 @@
-/* icon.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/skeleton.js

@@ -1,4 +1,4 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/svg.js

@@ -1,4 +1,4 @@
-/* svg.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* svg.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/components/icon-new.js

@@ -1,4 +1,4 @@
-/* icon-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./icon-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/icon-tile/icon-tile-new.js

@@ -1,4 +1,4 @@
-/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./icon-tile-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/icon-tile/icon-tile-old.js

@@ -1,4 +1,4 @@
-/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./icon-tile-old.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/icon.js

@@ -1,4 +1,4 @@
-/* icon.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./icon.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/skeleton.js

@@ -1,4 +1,4 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./skeleton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/svg.js

@@ -1,4 +1,4 @@
-/* svg.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* svg.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./svg.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/icon-new.js

@@ -1,4 +1,4 @@
-/* icon-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./icon-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/icon-tile/icon-tile-new.js

@@ -1,4 +1,4 @@
-/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-tile-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./icon-tile-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/icon-tile/icon-tile-old.js

@@ -1,4 +1,4 @@
-/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon-tile-old.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./icon-tile-old.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/icon.js

@@ -1,4 +1,4 @@
-/* icon.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* icon.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./icon.compiled.css";

package/dist/esm/components/skeleton.js

@@ -1,4 +1,4 @@
-/* skeleton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./skeleton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/svg.js

@@ -1,4 +1,4 @@
-/* svg.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* svg.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./svg.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/types/components/icon-new.d.ts

@@ -17,5 +17,5 @@ export type InternalIconPropsNew = UNSAFE_NewGlyphProps & {
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  */
-export declare const Icon: import("react").NamedExoticComponent<import("../types").UNSAFE_NewCoreGlyphProps>;
+export declare const Icon: import('react').NamedExoticComponent<import('../types').UNSAFE_NewCoreGlyphProps>;
 export default Icon;

package/dist/types/components/icon.d.ts

@@ -8,5 +8,5 @@ import type { IconProps } from '../types';
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  */
-export declare const Icon: import("react").NamedExoticComponent<IconProps>;
+export declare const Icon: import('react').NamedExoticComponent<IconProps>;
 export default Icon;

package/dist/types-ts4.5/components/icon-new.d.ts

@@ -17,5 +17,5 @@ export type InternalIconPropsNew = UNSAFE_NewGlyphProps & {
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  */
-export declare const Icon: import("react").NamedExoticComponent<import("../types").UNSAFE_NewCoreGlyphProps>;
+export declare const Icon: import('react').NamedExoticComponent<import('../types').UNSAFE_NewCoreGlyphProps>;
 export default Icon;

package/dist/types-ts4.5/components/icon.d.ts

@@ -8,5 +8,5 @@ import type { IconProps } from '../types';
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
  */
-export declare const Icon: import("react").NamedExoticComponent<IconProps>;
+export declare const Icon: import('react').NamedExoticComponent<IconProps>;
 export default Icon;

package/docs/ai/icon-instructions.md

@@ -79,7 +79,7 @@ in `elemBefore`. This applies to `LinkMenuItem`, `ButtonMenuItem` and `FlyoutMen
 For navigation links to different pages/sections:
 
 ```tsx
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
+import { LinkMenuItem } from '@atlaskit/side-nav-items/link-menu-item';
 
 <LinkMenuItem
 	href="/dashboard"
@@ -95,7 +95,7 @@ import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-me
 For actions that trigger functionality without navigation:
 
 ```tsx
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
+import { ButtonMenuItem } from '@atlaskit/side-nav-items/button-menu-item';
 
 <ButtonMenuItem
 	onClick={handleAction}
@@ -115,7 +115,7 @@ import {
 	FlyoutMenuItem,
 	FlyoutMenuItemContent,
 	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
+} from '@atlaskit/side-nav-items/flyout-menu-item';
 
 <FlyoutMenuItem>
 	<FlyoutMenuItemTrigger elemBefore={<ProjectIcon label="" />}>Projects</FlyoutMenuItemTrigger>
@@ -133,21 +133,27 @@ import {
 Create expandable sections using state with `ButtonMenuItem`:
 
 ```tsx
-const [isExpanded, setIsExpanded] = useState(false);
-
-<ButtonMenuItem
-	onClick={() => setIsExpanded(!isExpanded)}
-	elemBefore={<SettingsIcon label="" />}
-	elemAfter={isExpanded ? <ChevronDownIcon label="" /> : <ChevronRightIcon label="" />}
->
-	Team Settings
-</ButtonMenuItem>;
-{
-	isExpanded && (
-		<LinkMenuItem href="/team/members" elemBefore={<div style={{ width: '24px' }} />}>
-			Members
-		</LinkMenuItem>
-	);
+const styles = cssMap({ spacer: { width: '24px' } });
+
+function Component {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	return <>
+		<ButtonMenuItem
+			onClick={() => setIsExpanded(!isExpanded)}
+			elemBefore={<SettingsIcon label="" />}
+			elemAfter={isExpanded ? <ChevronDownIcon label="" /> : <ChevronRightIcon label="" />}
+		>
+			Team Settings
+		</ButtonMenuItem>
+		{
+			isExpanded && (
+				<LinkMenuItem href="/team/members" elemBefore={<div css={styles.spacer} />}>
+					Members
+				</LinkMenuItem>
+			);
+		}
+	</>
 }
 ```
 
@@ -417,7 +423,7 @@ import COMPONENT_NAME from '@atlaskit/icon/core/ENTRYPOINT';
 | ShapesIcon                       | shapes                           | shapes, icon, core, objects, whiteboard, asset, graphic                                                                                                       |
 | ShareIcon                        | share                            | share, icon, core, share, access                                                                                                                              |
 | ShieldIcon                       | shield                           | shield, icon, core, security, secure, safety, defence, protection, guard                                                                                      |
-| ShieldStrikethroughIcon          | shield-strikethrough             | shield-strikethrough, shieldstrikethrough, icon, core, ️security, secure, safety, defence, protection, guard, strikethrough, classification                   |
+| ShieldStrikethroughIcon          | shield-strikethrough             | shield-strikethrough, shieldstrikethrough, icon, core, ️security, secure, safety, defence, protection, guard, strikethrough, classification                    |
 | ShortcutIcon                     | shortcut                         | shortcut, export, icon, core, addshortcut, square, plus                                                                                                       |
 | ShowMoreHorizontalIcon           | show-more-horizontal             | show-more-horizontal, showmorehorizontal, icon, core, ellipses, three dots, meatball, more actions                                                            |
 | ShowMoreVerticalIcon             | show-more-vertical               | show-more-vertical, showmorevertical, more, menu, options, kebab-menu, ellipsis-vertical, three-dots, vertical-dots, actions, overflow, settings              |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "31.0.0",
+	"version": "32.0.1",
 	"description": "An icon is a symbol representing a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,9 +36,9 @@
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/tile": "^1.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -48,22 +48,22 @@
 		"@af/icon-build-process": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.9.0",
+		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.3.0",
-		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/docs": "^11.6.0",
+		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-object": "^7.4.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/logo": "^19.10.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.10.0",
+		"@atlaskit/modal-dialog": "^14.11.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/theme": "^21.0.0",
+		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
@@ -111,12 +111,6 @@
 	},
 	"homepage": "https://atlassian.design/components/icon/",
 	"platform-feature-flags": {
-		"platform-visual-refresh-icons": {
-			"type": "boolean"
-		},
-		"platform-visual-refresh-icons-facade-button-fix": {
-			"type": "boolean"
-		},
 		"platform_dst_new_icon_tile": {
 			"type": "boolean"
 		},