@atlaskit/icon 32.0.1 → 32.0.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/icon
 
+## 32.0.2
+
+### Patch Changes
+
+- [`5e06fddfce409`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5e06fddfce409) -
+  Rename codemod to `next-icon-spacing-to-flex-primitive` (now discoverable via
+  `npx @atlaskit/codemod-cli`) and update `no-icon-spacing-prop` ESLint rule to generate `Flex`
+  wrapper instead of `Box`.
+
 ## 32.0.1
 
 ### Patch Changes

package/codemods/{icon-spacing-to-box-primitive → 32.0.2-icon-spacing-to-flex-primitive}/index.tsx

@@ -1,14 +1,14 @@
-import type { API, ASTPath, Collection, default as core, FileInfo, JSXElement } from 'jscodeshift';
+import type { API, ASTPath, Collection, FileInfo, JSXElement, default as core } 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 FLEX_COMPILED_PACKAGE = '@atlaskit/primitives/compiled';
+const FLEX_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.
+ * Spacing → Flex padding token mapping.
  *
  * medium/unspecified:
  *   compact  → space.050 (4px)
@@ -44,8 +44,7 @@ function getIconImportSpecifiers(j: core.JSCodeshift, source: Collection<any>):
 			.find(j.ImportDeclaration)
 			.filter(
 				(path) =>
-					typeof path.node.source.value === 'string' &&
-					path.node.source.value.startsWith(pkg),
+					typeof path.node.source.value === 'string' && path.node.source.value.startsWith(pkg),
 			)
 			.forEach((importDecl) => {
 				for (const specifier of importDecl.value.specifiers || []) {
@@ -68,38 +67,38 @@ function ensureNamedImport(j: core.JSCodeshift, specifiers: any[], name: string)
 }
 
 /**
- * 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`
+ * Ensures `Flex` is imported from `@atlaskit/primitives/compiled`.
+ * - If `/compiled` already exists → add `Flex` if missing
+ * - If `@atlaskit/primitives` (non-compiled) exists → migrate path to `/compiled`, add `Flex`
  * - Otherwise → insert new import
  */
-function insertBoxImport(j: core.JSCodeshift, source: Collection<any>): void {
+function insertFlexImport(j: core.JSCodeshift, source: Collection<any>): void {
 	const compiledImports = source
 		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === BOX_COMPILED_PACKAGE);
+		.filter((path) => path.node.source.value === FLEX_COMPILED_PACKAGE);
 
 	if (compiledImports.length > 0) {
 		compiledImports.forEach((path) => {
-			ensureNamedImport(j, path.node.specifiers || [], 'Box');
+			ensureNamedImport(j, path.node.specifiers || [], 'Flex');
 		});
 		return;
 	}
 
 	const nonCompiledImports = source
 		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === BOX_NON_COMPILED_PACKAGE);
+		.filter((path) => path.node.source.value === FLEX_NON_COMPILED_PACKAGE);
 
 	if (nonCompiledImports.length > 0) {
 		nonCompiledImports.forEach((path) => {
-			path.node.source = j.stringLiteral(BOX_COMPILED_PACKAGE);
-			ensureNamedImport(j, path.node.specifiers || [], 'Box');
+			path.node.source = j.stringLiteral(FLEX_COMPILED_PACKAGE);
+			ensureNamedImport(j, path.node.specifiers || [], 'Flex');
 		});
 		return;
 	}
 
 	const newImport = j.importDeclaration(
-		[j.importSpecifier(j.identifier('Box'))],
-		j.stringLiteral(BOX_COMPILED_PACKAGE),
+		[j.importSpecifier(j.identifier('Flex'))],
+		j.stringLiteral(FLEX_COMPILED_PACKAGE),
 	);
 	source.get().node.program.body.unshift(newImport);
 }
@@ -165,10 +164,7 @@ function insertOrUpdateCssMapVariable(
 	// 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
-		);
+		return decl?.type === 'VariableDeclarator' && (decl.id as any)?.name === CSSMAP_VARIABLE_NAME;
 	});
 
 	if (existing.length > 0) {
@@ -176,14 +172,16 @@ function insertOrUpdateCssMapVariable(
 		existing.forEach((path) => {
 			const decl = path.node.declarations[0] as any;
 			const cssMapCall = decl?.init;
-			if (cssMapCall?.type !== 'CallExpression') return;
+			if (cssMapCall?.type !== 'CallExpression') {
+				return;
+			}
 			const objExpr = cssMapCall.arguments[0];
-			if (objExpr?.type !== 'ObjectExpression') return;
+			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),
+				objExpr.properties.filter((p: any) => p.key).map((p: any) => p.key.name || p.key.value),
 			);
 
 			for (const paddingToken of Array.from(paddingTokens).sort()) {
@@ -195,10 +193,8 @@ function insertOrUpdateCssMapVariable(
 						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()),
+								j.objectProperty(j.identifier('paddingBlock'), tokenCall()),
+								j.objectProperty(j.identifier('paddingInline'), tokenCall()),
 							]),
 						),
 					);
@@ -217,17 +213,13 @@ function insertOrUpdateCssMapVariable(
 			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()),
+					j.objectProperty(j.identifier('paddingBlock'), tokenCall()),
+					j.objectProperty(j.identifier('paddingInline'), tokenCall()),
 				]),
 			);
 		});
 
-	const cssMapCall = j.callExpression(j.identifier('cssMap'), [
-		j.objectExpression(properties),
-	]);
+	const cssMapCall = j.callExpression(j.identifier('cssMap'), [j.objectExpression(properties)]);
 
 	const variableDecl = j.variableDeclaration('const', [
 		j.variableDeclarator(j.identifier(CSSMAP_VARIABLE_NAME), cssMapCall),
@@ -246,28 +238,29 @@ function insertOrUpdateCssMapVariable(
 }
 
 /**
- * Wraps a JSXElement in <Box xcss={iconSpacingStyles.spaceXXX}>...</Box>.
+ * Wraps a JSXElement in <Flex xcss={iconSpacingStyles.spaceXXX}>...</Flex>.
  */
-function wrapWithBox(j: core.JSCodeshift, iconElement: JSXElement, paddingToken: string) {
+function wrapWithFlex(j: core.JSCodeshift, iconElement: JSXElement, paddingToken: string) {
 	const key = getCssMapKey(paddingToken);
 	return j.jsxElement(
-		j.jsxOpeningElement(j.jsxIdentifier('Box'), [
+		j.jsxOpeningElement(j.jsxIdentifier('Flex'), [
 			j.jsxAttribute(
 				j.jsxIdentifier('xcss'),
 				j.jsxExpressionContainer(
-					j.memberExpression(
-						j.identifier(CSSMAP_VARIABLE_NAME),
-						j.identifier(key),
-					),
+					j.memberExpression(j.identifier(CSSMAP_VARIABLE_NAME), j.identifier(key)),
 				),
 			),
 		]),
-		j.jsxClosingElement(j.jsxIdentifier('Box')),
+		j.jsxClosingElement(j.jsxIdentifier('Flex')),
 		[iconElement],
 	);
 }
 
-function addEslintDisableComment(j: core.JSCodeshift, path: ASTPath<JSXElement>, reason: string): void {
+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}`,
 	);
@@ -279,7 +272,9 @@ 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) {
+		return null;
+	}
 	if (prop.value?.type === 'StringLiteral' || prop.value?.type === 'Literal') {
 		return prop.value.value;
 	}
@@ -294,7 +289,9 @@ function isSpacingDynamic(attributes: any[]): boolean {
 	const prop = attributes.find(
 		(attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === 'spacing',
 	);
-	if (!prop) return false;
+	if (!prop) {
+		return false;
+	}
 	return prop.value?.type !== 'StringLiteral' && prop.value?.type !== 'Literal';
 }
 
@@ -364,18 +361,26 @@ export default function transformer(file: FileInfo, api: API): string {
 	}
 
 	const paddingTokensUsed = new Set<string>();
-	let needsBoxImport = false;
+	let needsFlexImport = 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)');
+			addEslintDisableComment(
+				j,
+				path,
+				'Manually migrate spacing prop to Flex primitive (spread props detected)',
+			);
 			return;
 		}
 
 		if (isSpacingDynamic(attrs)) {
-			addEslintDisableComment(j, path, 'Manually migrate spacing prop to Box primitive (dynamic spacing value detected)');
+			addEslintDisableComment(
+				j,
+				path,
+				'Manually migrate spacing prop to Flex primitive (dynamic spacing value detected)',
+			);
 			return;
 		}
 
@@ -391,7 +396,11 @@ export default function transformer(file: FileInfo, api: API): string {
 		const paddingToken = SPACING_TO_PADDING[sizeKey]?.[spacingValue];
 
 		if (!paddingToken) {
-			addEslintDisableComment(j, path, `Manually migrate spacing="${spacingValue}" prop to Box primitive (unknown spacing value)`);
+			addEslintDisableComment(
+				j,
+				path,
+				`Manually migrate spacing="${spacingValue}" prop to Flex primitive (unknown spacing value)`,
+			);
 			return;
 		}
 
@@ -399,18 +408,18 @@ export default function transformer(file: FileInfo, api: API): string {
 			(path.value as any).extra.parenthesized = false;
 		}
 
-		const wrappedElement = wrapWithBox(j, path.value, paddingToken);
+		const wrappedElement = wrapWithFlex(j, path.value, paddingToken);
 		replaceWithWrapped(j, path, wrappedElement);
 
-		needsBoxImport = true;
+		needsFlexImport = true;
 		paddingTokensUsed.add(paddingToken);
 	});
 
-	if (needsBoxImport) {
+	if (needsFlexImport) {
 		// 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);
+		insertFlexImport(j, source);
 		insertCssMapImport(j, source);
 		insertOrUpdateCssMapVariable(j, source, paddingTokensUsed);
 	}

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

@@ -1,35 +1,29 @@
-import transformer from '../icon-spacing-to-box-primitive';
+import transformer from '../32.0';
 
 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")
+    paddingBlock: token("space.050"),
+    paddingInline: 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")
+    paddingBlock: token("space.075"),
+    paddingInline: 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")
+    paddingBlock: token("space.025"),
+    paddingInline: token("space.025")
   }
 });`;
 
-describe('Migrate spacing prop to Box primitive', () => {
+describe('Migrate spacing prop to Flex primitive', () => {
 	defineInlineTest(
 		{ default: transformer, parser: 'tsx' },
 		{},
@@ -37,7 +31,7 @@ describe('Migrate spacing prop to Box primitive', () => {
 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',
+		'should remove spacing="none" with no Flex wrap',
 	);
 
 	defineInlineTest(
@@ -46,14 +40,14 @@ const App = () => <AddIcon label="" />;`,
 		`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 { Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
+		'should wrap medium icon with spacing="spacious" in Flex with space050',
 	);
 
 	defineInlineTest(
@@ -62,14 +56,14 @@ const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></B
 		`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 { Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
+		'should wrap medium icon with spacing="compact" in Flex with space050',
 	);
 
 	defineInlineTest(
@@ -78,14 +72,14 @@ const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></B
 		`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 { Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space075}><ChevronRightIcon label="" size="small" /></Flex>;`,
+		'should wrap small icon with spacing="spacious" in Flex with space075',
 	);
 
 	defineInlineTest(
@@ -94,14 +88,14 @@ const App = () => <Box xcss={iconSpacingStyles.space075}><ChevronRightIcon label
 		`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 { Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space025}><ChevronRightIcon label="" size="small" /></Flex>;`,
+		'should wrap small icon with spacing="compact" in Flex with space025',
 	);
 
 	defineInlineTest(
@@ -110,13 +104,13 @@ const App = () => <Box xcss={iconSpacingStyles.space025}><ChevronRightIcon label
 		`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 { Flex } 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>} />;`,
+const App = () => <Button iconBefore={<Flex xcss={iconSpacingStyles.space050}><MoreIcon label="" /></Flex>} />;`,
 		'should wrap icon with spacing prop inside a component slot',
 	);
 
@@ -126,13 +120,13 @@ const App = () => <Button iconBefore={<Box xcss={iconSpacingStyles.space050}><Mo
 		`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 { Flex } 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>} />;`,
+const App = () => <DropdownMenu iconAfter={<Flex xcss={iconSpacingStyles.space075}><ChevronDownIcon label="" size="small" /></Flex>} />;`,
 		'should wrap small icon with spacing prop inside a component slot',
 	);
 
@@ -142,7 +136,7 @@ const App = () => <DropdownMenu iconAfter={<Box xcss={iconSpacingStyles.space075
 		`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)
+const App = (props: any) => // eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Flex primitive (spread props detected)
 <AddIcon {...props} spacing="spacious" label="" />;`,
 		'should add eslint-disable comment inline and skip when spread props are present',
 	);
@@ -153,7 +147,7 @@ const App = (props: any) => // eslint-disable-next-line @atlaskit/design-system/
 		`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)
+const App = ({ spacing }: any) => // eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Flex primitive (dynamic spacing value detected)
 <AddIcon label="" spacing={spacing} />;`,
 		'should add eslint-disable comment inline and skip when spacing is a dynamic expression',
 	);
@@ -182,31 +176,27 @@ const App = () => (
   </>
 );`,
 		`import { cssMap } from "@atlaskit/css";
-import { Box } from "@atlaskit/primitives/compiled";
+import { Flex } 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")
+    paddingBlock: token("space.050"),
+    paddingInline: token("space.050")
   },
 
   space075: {
-    paddingTop: token("space.075"),
-    paddingRight: token("space.075"),
-    paddingBottom: token("space.075"),
-    paddingLeft: token("space.075")
+    paddingBlock: token("space.075"),
+    paddingInline: token("space.075")
   }
 });
 
 const App = () => (
   <>
-    <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>
-    <Box xcss={iconSpacingStyles.space075}><ChevronRightIcon label="" size="small" /></Box>
+    <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>
+    <Flex xcss={iconSpacingStyles.space075}><ChevronRightIcon label="" size="small" /></Flex>
     <AddIcon label="" />
   </>
 );`,
@@ -221,47 +211,47 @@ 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 { Inline, Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
+		'should add Flex to existing @atlaskit/primitives/compiled import',
 	);
 
 	defineInlineTest(
 		{ default: transformer, parser: 'tsx' },
 		{},
-		`import { Box } from '@atlaskit/primitives';
+		`import { Flex } 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 { Flex } from "@atlaskit/primitives/compiled";
 import AddIcon from '@atlaskit/icon/core/add';
 
 ${space050Block}
 
-const App = () => <Box xcss={iconSpacingStyles.space050}><AddIcon label="" /></Box>;`,
+const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
 		'should update @atlaskit/primitives to @atlaskit/primitives/compiled',
 	);
 
 	defineInlineTest(
 		{ default: transformer, parser: 'tsx' },
 		{},
-		`import { Box } from '@atlaskit/primitives/compiled';
+		`import { Flex } 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 { Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
+		'should keep existing Flex import from compiled unchanged',
 	);
 
 	defineInlineTest(
@@ -272,13 +262,13 @@ 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 { Inline, Flex } 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',
+const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
+		'should add Flex and update @atlaskit/primitives to @atlaskit/primitives/compiled',
 	);
 
 	defineInlineTest(
@@ -290,16 +280,16 @@ const IconBefore = (
   <MoreIcon spacing="spacious" label="More" />
 );`,
 		`import { cssMap } from "@atlaskit/css";
-import { Box } from "@atlaskit/primitives/compiled";
+import { Flex } 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>
+  <Flex xcss={iconSpacingStyles.space050}><MoreIcon label="More" /></Flex>
 );`,
-		'should not produce extra parentheses inside Box when icon is in a parenthesized expression',
+		'should not produce extra parentheses inside Flex when icon is in a parenthesized expression',
 	);
 
 	defineInlineTest(
@@ -308,13 +298,13 @@ const IconBefore = (
 		`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 { Flex } 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>;`,
+const App = () => <Flex xcss={iconSpacingStyles.space050}><BitbucketBranchIcon label="" /></Flex>;`,
 		'should migrate icon-lab icons',
 	);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "32.0.1",
+	"version": "32.0.2",
 	"description": "An icon is a symbol representing a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.6.0",
+		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/icon-file-type": "^7.0.0",