@atlaskit/icon 28.2.0 → 28.2.1
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 +7 -0
- package/docs/ai/icon-instructions.md +24 -0
- package/docs/ai/icon-tile-instructions.md +27 -0
- package/offerings.json +69 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Prop guidance
|
|
2
|
+
|
|
3
|
+
- **label** - Always provide descriptive text for accessibility
|
|
4
|
+
- **size** - Use default 16px unless design requires different
|
|
5
|
+
- **color** - Use design tokens for consistent theming
|
|
6
|
+
|
|
7
|
+
# Translating from Tailwind
|
|
8
|
+
|
|
9
|
+
An example diff of a migration from Tailwind generated code to ADS generated code.
|
|
10
|
+
|
|
11
|
+
```diff
|
|
12
|
+
+import AddIcon from '@atlaskit/icon/core/add';
|
|
13
|
+
-<div className="w-4 h-4 text-blue-600">
|
|
14
|
+
- <svg>...</svg>
|
|
15
|
+
-</div>
|
|
16
|
+
+<AddIcon label="Add item" />
|
|
17
|
+
|
|
18
|
+
-<span className="inline-flex items-center">
|
|
19
|
+
- <svg className="w-4 h-4 mr-2">...</svg>
|
|
20
|
+
- Text
|
|
21
|
+
-</span>
|
|
22
|
+
+<AddIcon label="Add item" />
|
|
23
|
+
+Text
|
|
24
|
+
```
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Prop guidance
|
|
2
|
+
|
|
3
|
+
- **icon** - The icon component to display
|
|
4
|
+
- **label** - Required descriptive label for accessibility
|
|
5
|
+
- **appearance** - Color appearance (blue, green, red, etc.)
|
|
6
|
+
- **shape** - Circle or square tile shape
|
|
7
|
+
- **size** - Tile size in pixels (16, 24, 32, 40, 48)
|
|
8
|
+
|
|
9
|
+
# Translating from Tailwind
|
|
10
|
+
|
|
11
|
+
An example diff of a migration from Tailwind generated code to ADS generated code.
|
|
12
|
+
|
|
13
|
+
```diff
|
|
14
|
+
+import { IconTile } from '@atlaskit/icon';
|
|
15
|
+
+import AddIcon from '@atlaskit/icon/core/add';
|
|
16
|
+
+import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
|
|
17
|
+
|
|
18
|
+
-<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
|
19
|
+
- <AddIcon className="w-4 h-4 text-white" />
|
|
20
|
+
-</div>
|
|
21
|
+
+<IconTile icon={AddIcon} label="Add icon" appearance="blue" shape="circle" size="24" />
|
|
22
|
+
|
|
23
|
+
-<div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
|
|
24
|
+
- <CheckIcon className="w-5 h-5 text-white" />
|
|
25
|
+
-</div>
|
|
26
|
+
+<IconTile icon={CheckMarkIcon} label="Success icon" appearance="green" shape="square" size="32" />
|
|
27
|
+
```
|
package/offerings.json
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "Icon",
|
|
4
|
+
"package": "@atlaskit/icon",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "Icon",
|
|
7
|
+
"package": "@atlaskit/icon",
|
|
8
|
+
"type": "default"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["icon", "symbol", "command", "device", "directory", "action", "visual"],
|
|
11
|
+
"categories": ["images-and-icons"],
|
|
12
|
+
"shortDescription": "An icon is a symbol representing a command, device, directory, or common action.",
|
|
13
|
+
"status": "general-availability",
|
|
14
|
+
"accessibilityGuidelines": [
|
|
15
|
+
"Provide appropriate alt text or labels for icons",
|
|
16
|
+
"Use meaningful icon choices that convey clear meaning",
|
|
17
|
+
"Ensure sufficient color contrast for icon visibility",
|
|
18
|
+
"Consider icon size for touch targets",
|
|
19
|
+
"Use consistent iconography across the interface"
|
|
20
|
+
],
|
|
21
|
+
"usageGuidelines": [
|
|
22
|
+
"Use icons to enhance visual communication",
|
|
23
|
+
"Choose icons that clearly represent their function",
|
|
24
|
+
"Maintain consistent icon style and size",
|
|
25
|
+
"Use appropriate icon sizes for different contexts",
|
|
26
|
+
"Consider cultural and contextual icon meanings"
|
|
27
|
+
],
|
|
28
|
+
"contentGuidelines": [
|
|
29
|
+
"Use clear, recognizable icon symbols",
|
|
30
|
+
"Ensure icons are culturally appropriate",
|
|
31
|
+
"Maintain visual consistency across icon sets",
|
|
32
|
+
"Use appropriate icon labels and descriptions"
|
|
33
|
+
],
|
|
34
|
+
"generativeInstructions": "./docs/ai/icon-instructions.md",
|
|
35
|
+
"examples": ["./examples/ai/icon.tsx"]
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "IconTile",
|
|
39
|
+
"package": "@atlaskit/icon",
|
|
40
|
+
"import": {
|
|
41
|
+
"name": "IconTile",
|
|
42
|
+
"package": "@atlaskit/icon",
|
|
43
|
+
"type": "named"
|
|
44
|
+
},
|
|
45
|
+
"keywords": ["icon", "tile", "container", "background", "shape", "appearance"],
|
|
46
|
+
"categories": ["images-and-icons"],
|
|
47
|
+
"shortDescription": "A tile component that displays an icon with customizable background, shape, and appearance.",
|
|
48
|
+
"status": "release-candidate",
|
|
49
|
+
"accessibilityGuidelines": [
|
|
50
|
+
"Provide appropriate labels for icon tiles",
|
|
51
|
+
"Ensure sufficient color contrast",
|
|
52
|
+
"Use meaningful icon choices",
|
|
53
|
+
"Consider touch target sizes"
|
|
54
|
+
],
|
|
55
|
+
"usageGuidelines": [
|
|
56
|
+
"Use for icon presentation with background styling",
|
|
57
|
+
"Choose appropriate shapes and appearances",
|
|
58
|
+
"Maintain consistent sizing across tiles",
|
|
59
|
+
"Use for visual emphasis or categorization"
|
|
60
|
+
],
|
|
61
|
+
"contentGuidelines": [
|
|
62
|
+
"Use clear, recognizable icons",
|
|
63
|
+
"Choose appropriate colors and shapes",
|
|
64
|
+
"Ensure visual consistency across tiles"
|
|
65
|
+
],
|
|
66
|
+
"generativeInstructions": "./docs/ai/icon-tile-instructions.md",
|
|
67
|
+
"examples": ["./examples/ai/icon-tile.tsx"]
|
|
68
|
+
}
|
|
69
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/icon",
|
|
3
|
-
"version": "28.2.
|
|
3
|
+
"version": "28.2.1",
|
|
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/"
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"@atlaskit/css": "^0.14.0",
|
|
115
115
|
"@atlaskit/docs": "^11.1.0",
|
|
116
116
|
"@atlaskit/ds-lib": "^5.0.0",
|
|
117
|
-
"@atlaskit/form": "^12.
|
|
117
|
+
"@atlaskit/form": "^12.7.0",
|
|
118
118
|
"@atlaskit/heading": "^5.2.0",
|
|
119
119
|
"@atlaskit/icon-file-type": "^7.0.0",
|
|
120
120
|
"@atlaskit/icon-object": "^7.2.0",
|