@atlaskit/icon 23.4.0 → 23.5.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/icon
 
+## 23.5.0
+
+### Minor Changes
+
+- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
+  [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
+  Update `React` from v16 to v18
+
+### Patch Changes
+
+- Updated dependencies
+
+## 23.4.1
+
+### Patch Changes
+
+- [#103999](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103999)
+  [`9f62ecec4d422`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f62ecec4d422) -
+  Update dependencies.
+
 ## 23.4.0
 
 ### Minor Changes

package/build/index.tsx

@@ -8,6 +8,7 @@ import buildIcons, {
 	createDeprecatedIconDocs,
 	createIconDocs,
 	createIconDocsNew,
+	createVRTest,
 	type IconBuildConfig,
 	type NewIconBuildConfig,
 } from '@af/icon-build-process';
@@ -130,6 +131,37 @@ async function main() {
 		);
 
 		fs.outputFile(path.resolve(root, 'src/deprecated-utility.tsx'), deprecatedDocs);
+
+		// Generate VR tests
+		const [vrExampleCore, vrTestCore] = createVRTest(
+			coreIconMetadata,
+			'../../../../..',
+			20,
+			'core',
+		);
+		fs.outputFile(
+			path.resolve(root, 'src/components/__tests__/vr-tests/examples/all-core-icons.tsx'),
+			vrExampleCore,
+		);
+		fs.outputFile(
+			path.resolve(root, 'src/components/__tests__/vr-tests/all-core-icons.test.vr.tsx'),
+			vrTestCore,
+		);
+
+		const [vrExampleUtility, vrTestUtility] = createVRTest(
+			utilityIconMetadata,
+			'../../../../..',
+			20,
+			'utility',
+		);
+		fs.outputFile(
+			path.resolve(root, 'src/components/__tests__/vr-tests/examples/all-utility-icons.tsx'),
+			vrExampleUtility,
+		);
+		fs.outputFile(
+			path.resolve(root, 'src/components/__tests__/vr-tests/all-utility-icons.test.vr.tsx'),
+			vrTestUtility,
+		);
 	});
 }
 

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

@@ -130,6 +130,7 @@ var iconTileStyles = (0, _react.css)({
   boxSizing: 'border-box',
   alignItems: 'center',
   justifyContent: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 0 /* Prevents parent font-size from affecting the container */
 });
 

package/dist/cjs/migration-map.js

@@ -2559,11 +2559,16 @@ var migrationMap = {
     }
   },
   'issue-raise': {
+    newIcon: {
+      name: 'plus-square',
+      type: 'core',
+      package: '@atlaskit/icon'
+    },
     sizeGuidance: {
-      small: 'icon-lab',
-      medium: 'icon-lab',
-      large: 'icon-lab',
-      xlarge: 'icon-lab'
+      small: 'swap',
+      medium: 'swap',
+      large: 'swap',
+      xlarge: 'swap'
     }
   },
   issues: {

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

@@ -123,6 +123,7 @@ const iconTileStyles = css({
   boxSizing: 'border-box',
   alignItems: 'center',
   justifyContent: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 0 /* Prevents parent font-size from affecting the container */
 });
 

package/dist/es2019/migration-map.js

@@ -2553,11 +2553,16 @@ const migrationMap = {
     }
   },
   'issue-raise': {
+    newIcon: {
+      name: 'plus-square',
+      type: 'core',
+      package: '@atlaskit/icon'
+    },
     sizeGuidance: {
-      small: 'icon-lab',
-      medium: 'icon-lab',
-      large: 'icon-lab',
-      xlarge: 'icon-lab'
+      small: 'swap',
+      medium: 'swap',
+      large: 'swap',
+      xlarge: 'swap'
     }
   },
   issues: {

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

@@ -123,6 +123,7 @@ var iconTileStyles = css({
   boxSizing: 'border-box',
   alignItems: 'center',
   justifyContent: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 0 /* Prevents parent font-size from affecting the container */
 });
 

package/dist/esm/migration-map.js

@@ -2553,11 +2553,16 @@ var migrationMap = {
     }
   },
   'issue-raise': {
+    newIcon: {
+      name: 'plus-square',
+      type: 'core',
+      package: '@atlaskit/icon'
+    },
     sizeGuidance: {
-      small: 'icon-lab',
-      medium: 'icon-lab',
-      large: 'icon-lab',
-      xlarge: 'icon-lab'
+      small: 'swap',
+      medium: 'swap',
+      large: 'swap',
+      xlarge: 'swap'
     }
   },
   issues: {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { IconFacadeProps } from '../types';
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
  *
@@ -7,8 +8,5 @@ import React from 'react';
  * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
  * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
  */
-export declare const IconFacade: React.NamedExoticComponent<import("../types").IconProps & {
-    newIcon?: React.ComponentType<import("../types").NewUtilityIconProps> | React.ComponentType<import("../types").NewCoreIconProps> | undefined;
-    iconType?: "core" | "utility" | undefined;
-}>;
+export declare const IconFacade: React.NamedExoticComponent<IconFacadeProps>;
 export default IconFacade;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { IconFacadeProps } from '../types';
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
  *
@@ -7,8 +8,5 @@ import React from 'react';
  * `dangerouslySetGlyph` is a prop specific to the legacy icon component for setting the icon glyph directly.
  * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
  */
-export declare const IconFacade: React.NamedExoticComponent<import("../types").IconProps & {
-    newIcon?: React.ComponentType<import("../types").NewUtilityIconProps> | React.ComponentType<import("../types").NewCoreIconProps> | undefined;
-    iconType?: "core" | "utility" | undefined;
-}>;
+export declare const IconFacade: React.NamedExoticComponent<IconFacadeProps>;
 export default IconFacade;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "23.4.0",
+	"version": "23.5.0",
 	"description": "An icon is a symbol representing a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -80,22 +80,23 @@
 		"@af/icon-build-process": "^2.4.0",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/ds-lib": "^3.3.0",
-		"@atlaskit/heading": "^4.0.0",
-		"@atlaskit/link": "^2.0.0",
-		"@atlaskit/logo": "^15.1.0",
-		"@atlaskit/menu": "^2.13.5",
-		"@atlaskit/primitives": "^13.3.0",
+		"@atlaskit/code": "^15.7.0",
+		"@atlaskit/css": "^0.8.0",
+		"@atlaskit/ds-lib": "^3.5.0",
+		"@atlaskit/heading": "^4.1.0",
+		"@atlaskit/link": "^2.1.0",
+		"@atlaskit/logo": "^15.2.0",
+		"@atlaskit/menu": "^2.14.0",
+		"@atlaskit/primitives": "^13.4.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/textfield": "^6.7.0",
-		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/toggle": "^14.0.0",
-		"@atlaskit/tooltip": "^19.0.0",
+		"@atlaskit/textfield": "^6.8.0",
+		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/toggle": "^14.1.0",
+		"@atlaskit/tooltip": "^19.1.0",
 		"@atlaskit/visual-regression": "*",
 		"@babel/core": "7.24.9",
 		"@emotion/babel-preset-css-prop": "^11.11.0",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/react": "^13.4.0",
 		"classnames": "^2.2.5",
 		"fs-extra": "^4.0.2",
 		"jest-emotion": "^10.0.32",
@@ -103,9 +104,8 @@
 		"lodash": "^4.17.21",
 		"nullthrows": "^1.1.1",
 		"pkg-dir": "^4.2.0",
-		"react-dom": "^16.8.0",
-		"ts-node": "^10.9.1",
-		"wait-for-expect": "^1.2.0"
+		"react-dom": "^18.2.0",
+		"ts-node": "^10.9.1"
 	},
 	"keywords": [
 		"atlaskit",

package/__perf__/default.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import Icon from '../src';
-
-const customGlyph = () => (
-	<svg viewBox="0 0 24 24" focusable="false" role="presentation">
-		<g fill="currentColor" fillRule="evenodd">
-			<path d="M20.402 4.215a.414.414 0 0 0-.33-.166.398.398 0 0 0-.19.049c-2.427 1.328-5.24 2.03-8.134 2.03-2.895 0-5.708-.702-8.134-2.03a.397.397 0 0 0-.19-.049.405.405 0 0 0-.254.727 14.296 14.296 0 0 0 8.577 2.854h.001a14.295 14.295 0 0 0 8.579-2.855.405.405 0 0 0 .075-.56m-2.788 3.783a.326.326 0 0 0-.314-.045 15.86 15.86 0 0 1-2.069.625.407.407 0 0 0-.285.248c-.474 1.301-1.687 2.54-2.96 3.837a.329.329 0 0 1-.238.113c-.116 0-.187-.062-.24-.113-1.271-1.297-2.484-2.531-2.959-3.832a.407.407 0 0 0-.285-.249 16.06 16.06 0 0 1-2.07-.631.328.328 0 0 0-.313.045.325.325 0 0 0-.126.287c.108 1.082.535 2.14 1.307 3.247.725 1.042 1.67 2.007 2.585 2.94 1.685 1.718 3.276 3.34 3.416 5.223.012.17.154.301.324.301h1.98a.326.326 0 0 0 .325-.342c-.062-1.258-.536-2.518-1.448-3.851-.19-.28-.396-.552-.61-.818a.236.236 0 0 1 .016-.311l.199-.203c.914-.933 1.86-1.897 2.585-2.939.771-1.108 1.199-2.16 1.306-3.24a.334.334 0 0 0-.126-.292m-7.99 7.935a.301.301 0 0 0-.231-.099.326.326 0 0 0-.27.153c-.832 1.267-1.262 2.463-1.321 3.664a.33.33 0 0 0 .09.242.33.33 0 0 0 .236.101h1.976c.17 0 .314-.133.326-.303.043-.579.223-1.16.552-1.77a.458.458 0 0 0-.04-.493c-.326-.424-.725-.876-1.318-1.495" />
-			<path d="M11.75 8.968c.62 0 .98-.037 1.106-.037a.302.302 0 0 1 .275.421c-.082.22-.457 1.011-1.155 1.69a.319.319 0 0 1-.228.09.318.318 0 0 1-.229-.09c-.698-.679-1.073-1.47-1.155-1.69a.302.302 0 0 1 .275-.421c.127 0 .486.037 1.106.037h.005" />
-		</g>
-	</svg>
-);
-
-export default () => <Icon glyph={customGlyph} label="Custom icon" size="xlarge" />;