@atlaskit/icon 34.6.0 → 35.1.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlaskit/icon
 
+## 35.1.0
+
+### Minor Changes
+
+- [`28617d8f348d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28617d8f348d3) -
+  This release updates icons in `@atlaskit/icon`.
+
+  ### Updated:
+
+  **`@atlaskit/icon/core`**
+  - `add`
+  - `chart-pie`
+  - `cross`
+
+### Patch Changes
+
+- Updated dependencies
+
+## 35.0.0
+
+### Major Changes
+
+- [`2b84ca637685f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b84ca637685f) -
+  [ux] Cleans up the `IconTile` API following the rollout of `platform_dst_new_icon_tile` and
+  `platform_dst_new_icon_tile_stage2` flags.
+
+  ### Breaking changes
+  - **`size="16"` removed** — Migrate to direct icon glyph usage (e.g. `<MyIcon label="..." />`), or
+    use `size="xsmall"` for the smallest tile (20px).
+  - **Pixel number sizes removed** — `size` values `"24"`, `"32"`, `"40"`, `"48"` have been removed.
+    Migrate to t-shirt sizes:
+    - `"small"` (replaces `"24"`)
+    - `"medium"` (replaces `"32"`)
+    - `"large"` (replaces `"40"`)
+    - `"xlarge"` (replaces `"48"`)
+  - **`LegacyIconTileSize` and `NewIconTileSize` types removed** — Use `IconTileSize` directly.
+  - Icon tile defaults to size `medium` (previously - `small`).
+  - `UNSAFE_circleReplacementComponent` is required if `shape='circle'` is passed in.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 34.6.0
 
 ### Minor Changes

package/core/add.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::16076dcc8358b4ceed39bd4386a6c9a2>>
+ * @codegen <<SignedSource::794d861b1db893c5b87be08d5f331345>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const AddIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "AddIcon",
-  dangerouslySetGlyph: `<path fill="currentcolor" fill-rule="evenodd" d="M7.25 8.75V15h1.5V8.75H15v-1.5H8.75V1h-1.5v6.25H1v1.5z" clip-rule="evenodd"/>`
+  dangerouslySetGlyph: `<path fill="currentcolor" d="M8.75 1.5v5.75h5.75v1.5H8.75v5.75h-1.5V8.75H1.5v-1.5h5.75V1.5z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 AddIcon.displayName = 'AddIcon';

package/core/chart-pie.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::696e8e582a2b305e33fcb167389e54e1>>
+ * @codegen <<SignedSource::822c0b2774957acdae90a33c39ddf170>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const ChartPieIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "ChartPieIcon",
-  dangerouslySetGlyph: `<mask id="mask0_67965_18713" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentcolor" d="M5.106 0C5.04.239 5 .49 5 .75v7.5a2.75 2.75 0 0 0 3.462 2.656l7.246-1.941q.15-.04.292-.098V16H0V0zm5.672 4.59-.278.076v-.29q.143.102.278.215M16 2.17A10.3 10.3 0 0 0 13.831 0H16z"/></mask><g mask="url(#mask0_67965_18713)"><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 8a6.25 6.25 0 1 0 12.5 0 6.25 6.25 0 0 0-12.5 0Z"/></g><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25V.75c3.47 0 6.39 2.357 7.246 5.558z"/>`
+  dangerouslySetGlyph: `<mask id="mask0_68246_66980" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentcolor" d="M5.106 0C5.04.239 5 .49 5 .75v7.5a2.75 2.75 0 0 0 3.462 2.656l7.246-1.941q.15-.04.292-.098V16H0V0zm5.672 4.59-.278.076v-.29q.143.102.278.215M16 2.17A10.3 10.3 0 0 0 13.831 0H16z"/></mask><g mask="url(#mask0_68246_66980)"><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 8a6.25 6.25 0 1 0 12.5 0 6.25 6.25 0 0 0-12.5 0Z"/></g><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25V.75c3.47 0 6.39 2.357 7.246 5.558z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 ChartPieIcon.displayName = 'ChartPieIcon';

package/core/cross.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::13080645a1b889dca339823c8ecd9929>>
+ * @codegen <<SignedSource::a6e34d167858ba514f74d5881b8440fc>>
  * @codegenCommand yarn build:icon-glyphs
  */
 "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const CrossIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
   name: "CrossIcon",
-  dangerouslySetGlyph: `<path fill="currentcolor" d="M14.03 3.03 9.06 8l4.97 4.97-1.06 1.06L8 9.06l-4.97 4.97-1.06-1.06L6.94 8 1.97 3.03l1.06-1.06L8 6.94l4.97-4.97z"/>`
+  dangerouslySetGlyph: `<path fill="currentcolor" d="M13.53 3.53 9.06 8l4.47 4.47-1.06 1.06L8 9.06l-4.47 4.47-1.06-1.06L6.94 8 2.47 3.53l1.06-1.06L8 6.94l4.47-4.47z"/>`
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 CrossIcon.displayName = 'CrossIcon';

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

@@ -101,4 +101,6 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     className: (0, _runtime.ax)(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
   }));
 });
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = Icon;

package/dist/cjs/constants.js

@@ -10,12 +10,16 @@ var sizes = exports.sizes = {
   large: '32px',
   xlarge: '48px'
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var sizeMap = exports.sizeMap = {
   small: 'small',
   medium: 'medium',
   large: 'large',
   xlarge: 'xlarge'
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var dimensions = exports.dimensions = {
   small: {
     width: sizes.small,

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

@@ -96,4 +96,6 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     className: ax(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
   }));
 });
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export default Icon;

package/dist/es2019/constants.js

@@ -4,12 +4,16 @@ export const sizes = {
   large: '32px',
   xlarge: '48px'
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const sizeMap = {
   small: 'small',
   medium: 'medium',
   large: 'large',
   xlarge: 'xlarge'
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const dimensions = {
   small: {
     width: sizes.small,

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

@@ -94,4 +94,6 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     className: ax(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
   }));
 });
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export default Icon;

package/dist/esm/constants.js

@@ -4,12 +4,16 @@ export var sizes = {
   large: '32px',
   xlarge: '48px'
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var sizeMap = {
   small: 'small',
   medium: 'medium',
   large: 'large',
   xlarge: 'xlarge'
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var dimensions = {
   small: {
     width: sizes.small,

package/icon.docs.tsx

@@ -1,88 +1,91 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'Icon',
-		description: 'An icon is a symbol representing a command, device, directory, or common action.',
-		status: 'general-availability',
-		import: {
-			name: 'IconNew',
-			package: '@atlaskit/icon',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use icons to enhance visual communication',
-			'Choose icons that clearly represent their function',
-			'Maintain consistent icon style and size',
-			'Use appropriate icon sizes for different contexts',
-			'Consider cultural and contextual icon meanings',
-		],
-		contentGuidelines: [
-			'Use clear, recognizable icon symbols',
-			'Ensure icons are culturally appropriate',
-			'Maintain visual consistency across icon sets',
-			'Use appropriate icon labels and descriptions',
-		],
-		accessibilityGuidelines: [
-			'Provide appropriate alt text or labels for icons',
-			'Use meaningful icon choices that convey clear meaning',
-			'Ensure sufficient color contrast for icon visibility',
-			'Consider icon size for touch targets',
-			'Use consistent iconography across the interface',
-		],
-		examples: [
-			{
-				name: 'Icon',
-				description: 'Icon example',
-				source: path.resolve(__dirname, './examples/ai/icon.tsx'),
+const documentation: StructuredContentSource = {
+	components: [
+		{
+			name: 'Icon',
+			description:
+				'An icon is a symbol representing a command, device, directory, or common action.',
+			status: 'general-availability',
+			import: {
+				name: 'IconNew',
+				package: '@atlaskit/icon',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['icon', 'symbol', 'command', 'device', 'directory', 'action', 'visual'],
-		categories: ['images-and-icons'],
-	},
-	{
-		name: 'IconTile',
-		description:
-			'A tile component that displays an icon with customizable background, shape, and appearance.',
-		status: 'release-candidate',
-		import: {
-			name: 'IconTile',
-			package: '@atlaskit/icon',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use icons to enhance visual communication',
+				'Choose icons that clearly represent their function',
+				'Maintain consistent icon style and size',
+				'Use appropriate icon sizes for different contexts',
+				'Consider cultural and contextual icon meanings',
+			],
+			contentGuidelines: [
+				'Use clear, recognizable icon symbols',
+				'Ensure icons are culturally appropriate',
+				'Maintain visual consistency across icon sets',
+				'Use appropriate icon labels and descriptions',
+			],
+			accessibilityGuidelines: [
+				'Provide appropriate alt text or labels for icons',
+				'Use meaningful icon choices that convey clear meaning',
+				'Ensure sufficient color contrast for icon visibility',
+				'Consider icon size for touch targets',
+				'Use consistent iconography across the interface',
+			],
+			examples: [
+				{
+					name: 'Icon',
+					description: 'Icon example',
+					source: path.resolve(__dirname, './examples/ai/icon.tsx'),
+				},
+			],
+			keywords: ['icon', 'symbol', 'command', 'device', 'directory', 'action', 'visual'],
+			categories: ['images-and-icons'],
 		},
-		usageGuidelines: [
-			'Use for icon presentation with background styling',
-			'Choose appropriate shapes and appearances',
-			'Maintain consistent sizing across tiles',
-			'Use for visual emphasis or categorization',
-		],
-		contentGuidelines: [
-			'Use clear, recognizable icons',
-			'Choose appropriate colors and shapes',
-			'Ensure visual consistency across tiles',
-		],
-		accessibilityGuidelines: [
-			'Provide appropriate labels for icon tiles',
-			'Ensure sufficient color contrast',
-			'Use meaningful icon choices',
-			'Consider touch target sizes',
-		],
-		examples: [
-			{
-				name: 'Icon Tile',
-				description: 'Icon Tile example',
-				source: path.resolve(__dirname, './examples/ai/icon-tile.tsx'),
+		{
+			name: 'IconTile',
+			description:
+				'A tile component that displays an icon with customizable background, shape, and appearance.',
+			status: 'release-candidate',
+			import: {
+				name: 'IconTile',
+				package: '@atlaskit/icon',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['icon', 'tile', 'container', 'background', 'shape', 'appearance'],
-		categories: ['images-and-icons'],
-	},
-];
+			usageGuidelines: [
+				'Use for icon presentation with background styling',
+				'Choose appropriate shapes and appearances',
+				'Maintain consistent sizing across tiles',
+				'Use for visual emphasis or categorization',
+			],
+			contentGuidelines: [
+				'Use clear, recognizable icons',
+				'Choose appropriate colors and shapes',
+				'Ensure visual consistency across tiles',
+			],
+			accessibilityGuidelines: [
+				'Provide appropriate labels for icon tiles',
+				'Ensure sufficient color contrast',
+				'Use meaningful icon choices',
+				'Consider touch target sizes',
+			],
+			examples: [
+				{
+					name: 'Icon Tile',
+					description: 'Icon Tile example',
+					source: path.resolve(__dirname, './examples/ai/icon-tile.tsx'),
+				},
+			],
+			keywords: ['icon', 'tile', 'container', 'background', 'shape', 'appearance'],
+			categories: ['images-and-icons'],
+		},
+	],
+};
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "34.6.0",
+	"version": "35.1.0",
 	"description": "An icon is a symbol representing a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -65,18 +65,18 @@
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/logo": "^20.1.0",
 		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^15.0.0",
+		"@atlaskit/modal-dialog": "^15.2.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/theme": "^23.2.0",
+		"@atlaskit/theme": "^25.0.0",
 		"@atlaskit/toggle": "^15.6.0",
-		"@atlaskit/tooltip": "^22.2.0",
+		"@atlaskit/tooltip": "^22.3.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
-		"@atlassian/testing-library": "^0.5.0",
+		"@atlassian/testing-library": "^0.6.0",
 		"@babel/core": "7.24.9",
 		"@babel/register": "^7.25.9",
 		"@codeshift/utils": "^0.2.4",
@@ -87,6 +87,7 @@
 		"lodash": "^4.17.21",
 		"nullthrows": "^1.1.1",
 		"pkg-dir": "^4.2.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"ts-node": "^10.9.1"
 	},

package/svgs/core/add.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentcolor" fill-rule="evenodd" d="M7.25 8.75V15h1.5V8.75H15v-1.5H8.75V1h-1.5v6.25H1v1.5z" clip-rule="evenodd"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentcolor" d="M8.75 1.5v5.75h5.75v1.5H8.75v5.75h-1.5V8.75H1.5v-1.5h5.75V1.5z"/></svg>

package/svgs/core/chart-pie.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><mask id="mask0_67965_18713" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentcolor" d="M5.106 0C5.04.239 5 .49 5 .75v7.5a2.75 2.75 0 0 0 3.462 2.656l7.246-1.941q.15-.04.292-.098V16H0V0zm5.672 4.59-.278.076v-.29q.143.102.278.215M16 2.17A10.3 10.3 0 0 0 13.831 0H16z"/></mask><g mask="url(#mask0_67965_18713)"><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 8a6.25 6.25 0 1 0 12.5 0 6.25 6.25 0 0 0-12.5 0Z"/></g><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25V.75c3.47 0 6.39 2.357 7.246 5.558z"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><mask id="mask0_68246_66980" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="currentcolor" d="M5.106 0C5.04.239 5 .49 5 .75v7.5a2.75 2.75 0 0 0 3.462 2.656l7.246-1.941q.15-.04.292-.098V16H0V0zm5.672 4.59-.278.076v-.29q.143.102.278.215M16 2.17A10.3 10.3 0 0 0 13.831 0H16z"/></mask><g mask="url(#mask0_68246_66980)"><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M1.75 8a6.25 6.25 0 1 0 12.5 0 6.25 6.25 0 0 0-12.5 0Z"/></g><path stroke="currentcolor" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25V.75c3.47 0 6.39 2.357 7.246 5.558z"/></svg>

package/svgs/core/cross.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentcolor" d="M14.03 3.03 9.06 8l4.97 4.97-1.06 1.06L8 9.06l-4.97 4.97-1.06-1.06L6.94 8 1.97 3.03l1.06-1.06L8 6.94l4.97-4.97z"/></svg>
+<svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentcolor" d="M13.53 3.53 9.06 8l4.47 4.47-1.06 1.06L8 9.06l-4.47 4.47-1.06-1.06L6.94 8 2.47 3.53l1.06-1.06L8 6.94l4.47-4.47z"/></svg>