@atlaskit/icon 35.0.0 → 35.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/icon
2
2
 
3
+ ## 35.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`28617d8f348d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28617d8f348d3) -
8
+ This release updates icons in `@atlaskit/icon`.
9
+
10
+ ### Updated:
11
+
12
+ **`@atlaskit/icon/core`**
13
+ - `add`
14
+ - `chart-pie`
15
+ - `cross`
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 35.0.0
4
22
 
5
23
  ### Major Changes
package/core/add.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::16076dcc8358b4ceed39bd4386a6c9a2>>
3
+ * @codegen <<SignedSource::794d861b1db893c5b87be08d5f331345>>
4
4
  * @codegenCommand yarn build:icon-glyphs
5
5
  */
6
6
  "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
22
22
  */
23
23
  const AddIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
24
24
  name: "AddIcon",
25
- dangerouslySetGlyph: `<path fill="currentcolor" fill-rule="evenodd" d="M7.25 8.75V15h1.5V8.75H15v-1.5H8.75V1h-1.5v6.25H1v1.5z" clip-rule="evenodd"/>`
25
+ dangerouslySetGlyph: `<path fill="currentcolor" d="M8.75 1.5v5.75h5.75v1.5H8.75v5.75h-1.5V8.75H1.5v-1.5h5.75V1.5z"/>`
26
26
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
27
27
  }, props));
28
28
  AddIcon.displayName = 'AddIcon';
package/core/chart-pie.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::696e8e582a2b305e33fcb167389e54e1>>
3
+ * @codegen <<SignedSource::822c0b2774957acdae90a33c39ddf170>>
4
4
  * @codegenCommand yarn build:icon-glyphs
5
5
  */
6
6
  "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
22
22
  */
23
23
  const ChartPieIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
24
24
  name: "ChartPieIcon",
25
- 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"/>`
25
+ 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"/>`
26
26
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
27
27
  }, props));
28
28
  ChartPieIcon.displayName = 'ChartPieIcon';
package/core/cross.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::13080645a1b889dca339823c8ecd9929>>
3
+ * @codegen <<SignedSource::a6e34d167858ba514f74d5881b8440fc>>
4
4
  * @codegenCommand yarn build:icon-glyphs
5
5
  */
6
6
  "use strict";
@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
22
22
  */
23
23
  const CrossIcon = props => /*#__PURE__*/_react.default.createElement(_baseNew.default, Object.assign({
24
24
  name: "CrossIcon",
25
- 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"/>`
25
+ 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"/>`
26
26
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
27
27
  }, props));
28
28
  CrossIcon.displayName = 'CrossIcon';
@@ -101,4 +101,6 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
101
101
  className: (0, _runtime.ax)(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
102
102
  }));
103
103
  });
104
+
105
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
104
106
  var _default = exports.default = Icon;
@@ -10,12 +10,16 @@ var sizes = exports.sizes = {
10
10
  large: '32px',
11
11
  xlarge: '48px'
12
12
  };
13
+
14
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
13
15
  var sizeMap = exports.sizeMap = {
14
16
  small: 'small',
15
17
  medium: 'medium',
16
18
  large: 'large',
17
19
  xlarge: 'xlarge'
18
20
  };
21
+
22
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
19
23
  var dimensions = exports.dimensions = {
20
24
  small: {
21
25
  width: sizes.small,
@@ -96,4 +96,6 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
96
96
  className: ax(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
97
97
  }));
98
98
  });
99
+
100
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
99
101
  export default Icon;
@@ -4,12 +4,16 @@ export const sizes = {
4
4
  large: '32px',
5
5
  xlarge: '48px'
6
6
  };
7
+
8
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
7
9
  export const sizeMap = {
8
10
  small: 'small',
9
11
  medium: 'medium',
10
12
  large: 'large',
11
13
  xlarge: 'xlarge'
12
14
  };
15
+
16
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
13
17
  export const dimensions = {
14
18
  small: {
15
19
  width: sizes.small,
@@ -94,4 +94,6 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
94
94
  className: ax(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
95
95
  }));
96
96
  });
97
+
98
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
97
99
  export default Icon;
@@ -4,12 +4,16 @@ export var sizes = {
4
4
  large: '32px',
5
5
  xlarge: '48px'
6
6
  };
7
+
8
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
7
9
  export var sizeMap = {
8
10
  small: 'small',
9
11
  medium: 'medium',
10
12
  large: 'large',
11
13
  xlarge: 'xlarge'
12
14
  };
15
+
16
+ // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
13
17
  export var dimensions = {
14
18
  small: {
15
19
  width: sizes.small,
package/icon.docs.tsx CHANGED
@@ -1,88 +1,91 @@
1
1
  import path from 'path';
2
2
 
3
- import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
3
+ import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
4
4
 
5
- const documentation: ComponentStructuredContentSource[] = [
6
- {
7
- name: 'Icon',
8
- description: 'An icon is a symbol representing a command, device, directory, or common action.',
9
- status: 'general-availability',
10
- import: {
11
- name: 'IconNew',
12
- package: '@atlaskit/icon',
13
- type: 'named',
14
- packagePath: path.resolve(__dirname),
15
- packageJson: require('./package.json'),
16
- },
17
- usageGuidelines: [
18
- 'Use icons to enhance visual communication',
19
- 'Choose icons that clearly represent their function',
20
- 'Maintain consistent icon style and size',
21
- 'Use appropriate icon sizes for different contexts',
22
- 'Consider cultural and contextual icon meanings',
23
- ],
24
- contentGuidelines: [
25
- 'Use clear, recognizable icon symbols',
26
- 'Ensure icons are culturally appropriate',
27
- 'Maintain visual consistency across icon sets',
28
- 'Use appropriate icon labels and descriptions',
29
- ],
30
- accessibilityGuidelines: [
31
- 'Provide appropriate alt text or labels for icons',
32
- 'Use meaningful icon choices that convey clear meaning',
33
- 'Ensure sufficient color contrast for icon visibility',
34
- 'Consider icon size for touch targets',
35
- 'Use consistent iconography across the interface',
36
- ],
37
- examples: [
38
- {
39
- name: 'Icon',
40
- description: 'Icon example',
41
- source: path.resolve(__dirname, './examples/ai/icon.tsx'),
5
+ const documentation: StructuredContentSource = {
6
+ components: [
7
+ {
8
+ name: 'Icon',
9
+ description:
10
+ 'An icon is a symbol representing a command, device, directory, or common action.',
11
+ status: 'general-availability',
12
+ import: {
13
+ name: 'IconNew',
14
+ package: '@atlaskit/icon',
15
+ type: 'named',
16
+ packagePath: path.resolve(__dirname),
17
+ packageJson: require('./package.json'),
42
18
  },
43
- ],
44
- keywords: ['icon', 'symbol', 'command', 'device', 'directory', 'action', 'visual'],
45
- categories: ['images-and-icons'],
46
- },
47
- {
48
- name: 'IconTile',
49
- description:
50
- 'A tile component that displays an icon with customizable background, shape, and appearance.',
51
- status: 'release-candidate',
52
- import: {
53
- name: 'IconTile',
54
- package: '@atlaskit/icon',
55
- type: 'named',
56
- packagePath: path.resolve(__dirname),
57
- packageJson: require('./package.json'),
19
+ usageGuidelines: [
20
+ 'Use icons to enhance visual communication',
21
+ 'Choose icons that clearly represent their function',
22
+ 'Maintain consistent icon style and size',
23
+ 'Use appropriate icon sizes for different contexts',
24
+ 'Consider cultural and contextual icon meanings',
25
+ ],
26
+ contentGuidelines: [
27
+ 'Use clear, recognizable icon symbols',
28
+ 'Ensure icons are culturally appropriate',
29
+ 'Maintain visual consistency across icon sets',
30
+ 'Use appropriate icon labels and descriptions',
31
+ ],
32
+ accessibilityGuidelines: [
33
+ 'Provide appropriate alt text or labels for icons',
34
+ 'Use meaningful icon choices that convey clear meaning',
35
+ 'Ensure sufficient color contrast for icon visibility',
36
+ 'Consider icon size for touch targets',
37
+ 'Use consistent iconography across the interface',
38
+ ],
39
+ examples: [
40
+ {
41
+ name: 'Icon',
42
+ description: 'Icon example',
43
+ source: path.resolve(__dirname, './examples/ai/icon.tsx'),
44
+ },
45
+ ],
46
+ keywords: ['icon', 'symbol', 'command', 'device', 'directory', 'action', 'visual'],
47
+ categories: ['images-and-icons'],
58
48
  },
59
- usageGuidelines: [
60
- 'Use for icon presentation with background styling',
61
- 'Choose appropriate shapes and appearances',
62
- 'Maintain consistent sizing across tiles',
63
- 'Use for visual emphasis or categorization',
64
- ],
65
- contentGuidelines: [
66
- 'Use clear, recognizable icons',
67
- 'Choose appropriate colors and shapes',
68
- 'Ensure visual consistency across tiles',
69
- ],
70
- accessibilityGuidelines: [
71
- 'Provide appropriate labels for icon tiles',
72
- 'Ensure sufficient color contrast',
73
- 'Use meaningful icon choices',
74
- 'Consider touch target sizes',
75
- ],
76
- examples: [
77
- {
78
- name: 'Icon Tile',
79
- description: 'Icon Tile example',
80
- source: path.resolve(__dirname, './examples/ai/icon-tile.tsx'),
49
+ {
50
+ name: 'IconTile',
51
+ description:
52
+ 'A tile component that displays an icon with customizable background, shape, and appearance.',
53
+ status: 'release-candidate',
54
+ import: {
55
+ name: 'IconTile',
56
+ package: '@atlaskit/icon',
57
+ type: 'named',
58
+ packagePath: path.resolve(__dirname),
59
+ packageJson: require('./package.json'),
81
60
  },
82
- ],
83
- keywords: ['icon', 'tile', 'container', 'background', 'shape', 'appearance'],
84
- categories: ['images-and-icons'],
85
- },
86
- ];
61
+ usageGuidelines: [
62
+ 'Use for icon presentation with background styling',
63
+ 'Choose appropriate shapes and appearances',
64
+ 'Maintain consistent sizing across tiles',
65
+ 'Use for visual emphasis or categorization',
66
+ ],
67
+ contentGuidelines: [
68
+ 'Use clear, recognizable icons',
69
+ 'Choose appropriate colors and shapes',
70
+ 'Ensure visual consistency across tiles',
71
+ ],
72
+ accessibilityGuidelines: [
73
+ 'Provide appropriate labels for icon tiles',
74
+ 'Ensure sufficient color contrast',
75
+ 'Use meaningful icon choices',
76
+ 'Consider touch target sizes',
77
+ ],
78
+ examples: [
79
+ {
80
+ name: 'Icon Tile',
81
+ description: 'Icon Tile example',
82
+ source: path.resolve(__dirname, './examples/ai/icon-tile.tsx'),
83
+ },
84
+ ],
85
+ keywords: ['icon', 'tile', 'container', 'background', 'shape', 'appearance'],
86
+ categories: ['images-and-icons'],
87
+ },
88
+ ],
89
+ };
87
90
 
88
91
  export default documentation;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "35.0.0",
3
+ "version": "35.1.0",
4
4
  "description": "An icon is a symbol representing a command, device, directory, or common action.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -65,13 +65,13 @@
65
65
  "@atlaskit/link": "^3.4.0",
66
66
  "@atlaskit/logo": "^20.1.0",
67
67
  "@atlaskit/menu": "^8.5.0",
68
- "@atlaskit/modal-dialog": "^15.0.0",
68
+ "@atlaskit/modal-dialog": "^15.2.0",
69
69
  "@atlaskit/primitives": "^19.0.0",
70
- "@atlaskit/section-message": "^8.12.0",
70
+ "@atlaskit/section-message": "^8.13.0",
71
71
  "@atlaskit/textfield": "^8.3.0",
72
- "@atlaskit/theme": "^23.2.0",
72
+ "@atlaskit/theme": "^25.0.0",
73
73
  "@atlaskit/toggle": "^15.6.0",
74
- "@atlaskit/tooltip": "^22.2.0",
74
+ "@atlaskit/tooltip": "^22.3.0",
75
75
  "@atlassian/feature-flags-test-utils": "^1.1.0",
76
76
  "@atlassian/react-compiler-gating": "workspace:^",
77
77
  "@atlassian/ssr-tests": "workspace:^",
@@ -87,6 +87,7 @@
87
87
  "lodash": "^4.17.21",
88
88
  "nullthrows": "^1.1.1",
89
89
  "pkg-dir": "^4.2.0",
90
+ "react": "^18.2.0",
90
91
  "react-dom": "^18.2.0",
91
92
  "ts-node": "^10.9.1"
92
93
  },
package/svgs/core/add.svg CHANGED
@@ -1 +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>
1
+ <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>
@@ -1 +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>
1
+ <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>
@@ -1 +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>
1
+ <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>