@atlaskit/icon 22.13.0 → 22.14.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/icon
 
+## 22.14.0
+
+### Minor Changes
+
+- [#131906](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131906)
+  [`9fd3fdb9e3b02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9fd3fdb9e3b02) -
+  Adding 'data-vc' attribute to icon for instrumenting TTVC (go/ttvc).
+
 ## 22.13.0
 
 ### Minor Changes

package/codemods/22.14.0-new-icon-migrate-color-prop.tsx

@@ -0,0 +1,119 @@
+import {
+	hasImportDeclaration,
+	hasJSXAttributes,
+	insertCommentToStartOfFile,
+} from '@codeshift/utils';
+import type { API, Collection, default as core, FileInfo } from 'jscodeshift';
+
+function insertTokenImport(j: core.JSCodeshift, source: Collection<any>) {
+	if (hasImportDeclaration(j, source, '@atlaskit/tokens')) {
+		return;
+	}
+
+	const newImport = j.importDeclaration(
+		[j.importSpecifier(j.identifier('token'))],
+		j.stringLiteral('@atlaskit/tokens'),
+	);
+
+	source.get().node.program.body.unshift(newImport);
+}
+
+export function getPartialImportDeclaration(
+	j: core.JSCodeshift,
+	source: Collection<any>,
+	sourcePath: string,
+): Collection<any> {
+	return source
+		.find(j.ImportDeclaration)
+		.filter(
+			(path) =>
+				typeof path.node.source.value === 'string' && path.node.source.value.includes(sourcePath),
+		);
+}
+
+function buildToken(j: core.JSCodeshift, tokenId: string = '', fallback: string) {
+	const callExpr = j.callExpression(
+		j.identifier('token'),
+		[j.stringLiteral(tokenId), j.stringLiteral(fallback)].filter(Boolean),
+	);
+
+	return callExpr;
+}
+
+export default function transformer(file: FileInfo, api: API) {
+	const j = api.jscodeshift;
+	const source = j(file.source);
+
+	// Find all new icon imports
+	const coreIconImportDeclarations = getPartialImportDeclaration(j, source, '@atlaskit/icon/core');
+	const utilityIconImportDeclarations = getPartialImportDeclaration(
+		j,
+		source,
+		'@atlaskit/icon/utility',
+	);
+	const iconLabIconImportDeclarations = getPartialImportDeclaration(
+		j,
+		source,
+		'@atlassian/icon-lab/core',
+	);
+
+	// Get all the specifier names
+	const newIconSpecifiers: string[] = [];
+	[
+		coreIconImportDeclarations,
+		utilityIconImportDeclarations,
+		iconLabIconImportDeclarations,
+	].forEach((newIconImportDeclaration) => {
+		newIconImportDeclaration.forEach((newIconImport) => {
+			if (!newIconImport.value.specifiers) {
+				return;
+			}
+			newIconImport.value.specifiers.map((specifier: any) => {
+				if (specifier.local && specifier.local.name) {
+					newIconSpecifiers.push(specifier.local.name);
+				}
+			});
+		});
+	});
+
+	// No imports for new button found, exit early
+	if (!newIconSpecifiers.length) {
+		return source.toSource();
+	}
+
+	// Find all new icon JSX elements that don't have a `color` prop set
+	const newIconJSXElements = source
+		.find(j.JSXElement)
+		// is a new icon?
+		.filter(
+			(path) =>
+				path.value.openingElement.name.type === 'JSXIdentifier' &&
+				newIconSpecifiers.includes(path.value.openingElement.name.name),
+		)
+		// has no color prop?
+		.filter((path) => !hasJSXAttributes(j, path, 'color'));
+
+	newIconJSXElements.forEach((newIconJSXElement) => {
+		const newIconJSXElementValue = newIconJSXElement.value;
+		const newIconJSXElementOpeningElement = newIconJSXElementValue.openingElement;
+
+		// If spread props exist, add a comment and skip
+		if (
+			newIconJSXElementOpeningElement.attributes?.some((attr) => attr.type === 'JSXSpreadAttribute')
+		) {
+			insertCommentToStartOfFile(j, source, 'Migrate color prop');
+			return;
+		}
+
+		// Insert the `color` prop
+		newIconJSXElementOpeningElement.attributes?.push(
+			j.jsxAttribute(
+				j.jsxIdentifier('color'),
+				j.jsxExpressionContainer(buildToken(j, 'color.icon', '#44546F')),
+			),
+		);
+		insertTokenImport(j, source);
+	});
+
+	return source.toSource();
+}

package/codemods/__tests__/next-new-icon-migrate-color-prop.test.tsx

@@ -0,0 +1,64 @@
+import transformer from '../22.14.0-new-icon-migrate-color-prop';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Migrate color API', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+        import AddIcon from '@atlaskit/icon/core/add';
+        import ChevronDownIcon from '@atlaskit/icon/utility/add';
+        import BitbucketBranchIcon from '@atlassian/icon-lab/core/bitbucket-branch';
+
+        const App = () => (
+          <>
+            <AddIcon label=""/>
+            <ChevronDownIcon label=""/>
+            <BitbucketBranchIcon label=""/>
+            <Button iconAfter={AddIcon}/>
+          </>
+        );
+      `,
+		`
+        import { token } from "@atlaskit/tokens";
+        import AddIcon from '@atlaskit/icon/core/add';
+        import ChevronDownIcon from '@atlaskit/icon/utility/add';
+        import BitbucketBranchIcon from '@atlassian/icon-lab/core/bitbucket-branch';
+
+        const App = () => (
+          <>
+            <AddIcon label="" color={token("color.icon", "#44546F")} />
+            <ChevronDownIcon label="" color={token("color.icon", "#44546F")} />
+            <BitbucketBranchIcon label="" color={token("color.icon", "#44546F")} />
+            <Button iconAfter={AddIcon}/>
+          </>
+        );
+    `,
+		'should add color prop to icons',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+  	  import AddIcon from '@atlaskit/icon/core/add';
+
+      const App = (props: any) => (
+        <>
+          <AddIcon {...props} label=""/>
+        </>
+      );
+    `,
+		`
+      /* TODO: (@codeshift) Migrate color prop */
+      import AddIcon from '@atlaskit/icon/core/add';
+
+      const App = (props: any) => (
+        <>
+          <AddIcon {...props} label=""/>
+        </>
+      );
+    `,
+		'should handle spread props',
+	);
+});

package/dist/cjs/components/icon.js

@@ -105,6 +105,7 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
   });
   return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": testId,
+    "data-vc": "icon-".concat(testId),
     role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
     "aria-hidden": label ? undefined : true

package/dist/es2019/components/icon.js

@@ -101,6 +101,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
   });
   return jsx("span", _extends({
     "data-testid": testId,
+    "data-vc": `icon-${testId}`,
     role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
     "aria-hidden": label ? undefined : true

package/dist/esm/components/icon.js

@@ -102,6 +102,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
   });
   return jsx("span", _extends({
     "data-testid": testId,
+    "data-vc": "icon-".concat(testId),
     role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
     "aria-hidden": label ? undefined : true

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.13.0",
+	"version": "22.14.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -43,7 +43,7 @@
 		"@af/icon-build-process": "^2.1.0",
 		"@af/visual-regression": "*",
 		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/logo": "^14.2.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/ssr": "*",