@atlaskit/icon-object 6.3.9 → 6.5.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 +197 -71
- package/__tests__/visual-regression/icon-object-snapshots.test.tsx +7 -12
- package/afm-jira/tsconfig.json +24 -0
- package/afm-post-office/tsconfig.json +24 -0
- package/build/index.tsx +28 -28
- package/codemods/6.1.0-metadata-entry.tsx +90 -97
- package/codemods/__tests__/6.1.0-metadata-entry.tsx +63 -63
- package/constellation/index/examples.mdx +2 -1
- package/constellation/index/icon-explorer.mdx +2 -1
- package/constellation/index/usage.mdx +10 -5
- package/docs/0-intro.tsx +5 -6
- package/metadata/package.json +1 -1
- package/package.json +81 -79
- package/report.api.md +3 -2
package/build/index.tsx
CHANGED
|
@@ -7,39 +7,39 @@ import fs from 'fs-extra';
|
|
|
7
7
|
const root = pkgDir.sync();
|
|
8
8
|
|
|
9
9
|
const config16: IconBuildConfig = {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
srcDir: path.resolve(root!, 'svgs_raw'),
|
|
11
|
+
processedDir: path.resolve(root!, 'svgs'),
|
|
12
|
+
destDir: path.resolve(root!, 'glyph'),
|
|
13
|
+
maxWidth: 16,
|
|
14
|
+
maxHeight: 16,
|
|
15
|
+
glob: '**/16.svg',
|
|
16
|
+
size: 'small',
|
|
17
|
+
baseIconEntryPoint: '@atlaskit/icon/base',
|
|
18
|
+
isColorsDisabled: true,
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
const config24: IconBuildConfig = {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
srcDir: path.resolve(root!, 'svgs_raw'),
|
|
23
|
+
processedDir: path.resolve(root!, 'svgs'),
|
|
24
|
+
destDir: path.resolve(root!, 'glyph'),
|
|
25
|
+
maxWidth: 24,
|
|
26
|
+
maxHeight: 24,
|
|
27
|
+
glob: '**/24.svg',
|
|
28
|
+
size: 'medium',
|
|
29
|
+
baseIconEntryPoint: '@atlaskit/icon/base',
|
|
30
|
+
isColorsDisabled: true,
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
tidy(config16)
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
.then(() => Promise.all([build(config16), build(config24)]))
|
|
35
|
+
.then(([sixteen, twentyfour]) => {
|
|
36
|
+
const allIcons = [...sixteen, ...twentyfour];
|
|
37
|
+
const iconDocs = createIconDocs(allIcons, '@atlaskit/icon-object', {}, [
|
|
38
|
+
'object',
|
|
39
|
+
'icon-object',
|
|
40
|
+
]);
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
console.log('@atlaskit-icon-object built');
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
return fs.outputFile(path.resolve(root!, 'src/metadata.tsx'), iconDocs);
|
|
45
|
+
});
|
|
@@ -1,118 +1,111 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import type {
|
|
2
|
+
API,
|
|
3
|
+
default as core,
|
|
4
|
+
FileInfo,
|
|
5
|
+
ImportSpecifier,
|
|
6
|
+
ASTPath,
|
|
7
|
+
ImportDefaultSpecifier,
|
|
8
|
+
Options,
|
|
8
9
|
} from 'jscodeshift';
|
|
9
|
-
import { Collection } from 'jscodeshift/src/Collection';
|
|
10
|
+
import { type Collection } from 'jscodeshift/src/Collection';
|
|
10
11
|
|
|
11
12
|
export const packageName = '@atlaskit/icon-object';
|
|
12
13
|
|
|
13
|
-
export default function transformer(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
p.replace();
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
return root.toSource(options.printOptions || { quote: 'single' });
|
|
50
|
-
}
|
|
51
|
-
return file.source;
|
|
14
|
+
export default function transformer(file: FileInfo, api: API, options: Options) {
|
|
15
|
+
const j = api.jscodeshift;
|
|
16
|
+
const root = j(file.source, { quote: 'auto' });
|
|
17
|
+
if (hasImportDeclaration(j, root, packageName)) {
|
|
18
|
+
const imports = root.find(j.ImportSpecifier, {
|
|
19
|
+
imported: { name: 'metadata' },
|
|
20
|
+
});
|
|
21
|
+
imports.forEach((p: ASTPath<ImportSpecifier | ImportDefaultSpecifier>) => {
|
|
22
|
+
if (p.parentPath.parentPath.node.source.value !== packageName) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (p.parentPath.node.specifiers.length === 1) {
|
|
26
|
+
p.node.type = 'ImportDefaultSpecifier';
|
|
27
|
+
p.parentPath.node.source.value = `${packageName}/metadata`;
|
|
28
|
+
} else if (p.node.local) {
|
|
29
|
+
tryCreateImport({
|
|
30
|
+
j,
|
|
31
|
+
base: root,
|
|
32
|
+
packageName: `${packageName}/metadata`,
|
|
33
|
+
relativeToPackage: packageName,
|
|
34
|
+
});
|
|
35
|
+
addToImport({
|
|
36
|
+
j,
|
|
37
|
+
base: root,
|
|
38
|
+
packageName: `${packageName}/metadata`,
|
|
39
|
+
importSpecifier: j.importDefaultSpecifier(j.identifier(p.node.local.name)),
|
|
40
|
+
});
|
|
41
|
+
p.replace();
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
return root.toSource(options.printOptions || { quote: 'single' });
|
|
45
|
+
}
|
|
46
|
+
return file.source;
|
|
52
47
|
}
|
|
53
48
|
|
|
54
49
|
function hasImportDeclaration(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
j: core.JSCodeshift,
|
|
51
|
+
source: ReturnType<typeof j>,
|
|
52
|
+
importPath: string,
|
|
58
53
|
) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
.filter((path) => path.node.source.value === importPath).length;
|
|
54
|
+
return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
|
|
55
|
+
.length;
|
|
62
56
|
}
|
|
63
57
|
|
|
64
58
|
function tryCreateImport({
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
59
|
+
j,
|
|
60
|
+
base,
|
|
61
|
+
relativeToPackage,
|
|
62
|
+
packageName,
|
|
69
63
|
}: {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
64
|
+
j: core.JSCodeshift;
|
|
65
|
+
base: Collection<any>;
|
|
66
|
+
relativeToPackage: string;
|
|
67
|
+
packageName: string;
|
|
74
68
|
}) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
.filter((path) => path.value.source.value === packageName).length > 0;
|
|
69
|
+
const exists: boolean =
|
|
70
|
+
base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
|
|
71
|
+
.length > 0;
|
|
79
72
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
73
|
+
if (exists) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
83
76
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
77
|
+
base
|
|
78
|
+
.find(j.ImportDeclaration)
|
|
79
|
+
.filter((path) => path.value.source.value === relativeToPackage)
|
|
80
|
+
.insertBefore(j.importDeclaration([], j.literal(packageName)));
|
|
88
81
|
}
|
|
89
82
|
|
|
90
83
|
function addToImport({
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
84
|
+
j,
|
|
85
|
+
base,
|
|
86
|
+
importSpecifier,
|
|
87
|
+
packageName,
|
|
95
88
|
}: {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
89
|
+
j: core.JSCodeshift;
|
|
90
|
+
base: Collection<any>;
|
|
91
|
+
importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
|
|
92
|
+
packageName: string;
|
|
100
93
|
}) {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
94
|
+
base
|
|
95
|
+
.find(j.ImportDeclaration)
|
|
96
|
+
.filter((path) => path.value.source.value === packageName)
|
|
97
|
+
.replaceWith((declaration) => {
|
|
98
|
+
return j.importDeclaration(
|
|
99
|
+
[
|
|
100
|
+
// we are appending to the existing specifiers
|
|
101
|
+
// We are doing a filter hear because sometimes specifiers can be removed
|
|
102
|
+
// but they hand around in the declaration
|
|
103
|
+
...(declaration.value.specifiers || []).filter(
|
|
104
|
+
(item) => item.type === 'ImportSpecifier' && item.imported != null,
|
|
105
|
+
),
|
|
106
|
+
importSpecifier,
|
|
107
|
+
],
|
|
108
|
+
j.literal(packageName),
|
|
109
|
+
);
|
|
110
|
+
});
|
|
118
111
|
}
|
|
@@ -5,122 +5,122 @@ import transformer, { packageName } from '../6.1.0-metadata-entry';
|
|
|
5
5
|
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
|
|
6
6
|
|
|
7
7
|
describe('Update imports', () => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
defineInlineTest(
|
|
9
|
+
{ default: transformer, parser: 'tsx' },
|
|
10
|
+
{},
|
|
11
|
+
`
|
|
12
12
|
import { metadata } from '${packageName}';
|
|
13
13
|
console.log(metadata);
|
|
14
14
|
`,
|
|
15
|
-
|
|
15
|
+
`
|
|
16
16
|
import metadata from '${packageName}/metadata';
|
|
17
17
|
console.log(metadata);
|
|
18
18
|
`,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
'should replace named metadata import from main entry point with default import from dedicated entry point',
|
|
20
|
+
);
|
|
21
|
+
defineInlineTest(
|
|
22
|
+
{ default: transformer, parser: 'tsx' },
|
|
23
|
+
{},
|
|
24
|
+
`
|
|
25
25
|
import { metadata as data } from '${packageName}';
|
|
26
26
|
console.log(data);
|
|
27
27
|
`,
|
|
28
|
-
|
|
28
|
+
`
|
|
29
29
|
import data from '${packageName}/metadata';
|
|
30
30
|
console.log(data);
|
|
31
31
|
`,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
'should preserve renaming when converting from named import to default import',
|
|
33
|
+
);
|
|
34
|
+
defineInlineTest(
|
|
35
|
+
{ default: transformer, parser: 'tsx' },
|
|
36
|
+
{},
|
|
37
|
+
`
|
|
38
38
|
import { a, metadata, b } from '${packageName}';
|
|
39
39
|
console.log(metadata);
|
|
40
40
|
`,
|
|
41
|
-
|
|
41
|
+
`
|
|
42
42
|
import metadata from '${packageName}/metadata';
|
|
43
43
|
import { a, b } from '${packageName}';
|
|
44
44
|
console.log(metadata);
|
|
45
45
|
`,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
'should preserve other named imports',
|
|
47
|
+
);
|
|
48
|
+
defineInlineTest(
|
|
49
|
+
{ default: transformer, parser: 'tsx' },
|
|
50
|
+
{},
|
|
51
|
+
`
|
|
52
52
|
import { a, metadata as data, b } from '${packageName}';
|
|
53
53
|
console.log(data);
|
|
54
54
|
`,
|
|
55
|
-
|
|
55
|
+
`
|
|
56
56
|
import data from '${packageName}/metadata';
|
|
57
57
|
import { a, b } from '${packageName}';
|
|
58
58
|
console.log(data);
|
|
59
59
|
`,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
60
|
+
'should preserve other named imports, as well as metadata renaming',
|
|
61
|
+
);
|
|
62
|
+
defineInlineTest(
|
|
63
|
+
{ default: transformer, parser: 'tsx' },
|
|
64
|
+
{},
|
|
65
|
+
`
|
|
66
66
|
import Icon, { a, metadata as data, b } from '${packageName}';
|
|
67
67
|
console.log(a, data, b);
|
|
68
68
|
`,
|
|
69
|
-
|
|
69
|
+
`
|
|
70
70
|
import data from '${packageName}/metadata';
|
|
71
71
|
import Icon, { a, b } from '${packageName}';
|
|
72
72
|
console.log(a, data, b);
|
|
73
73
|
`,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
74
|
+
'should preserve other named imports and default import, as well as metadata renaming',
|
|
75
|
+
);
|
|
76
|
+
defineInlineTest(
|
|
77
|
+
{ default: transformer, parser: 'tsx' },
|
|
78
|
+
{},
|
|
79
|
+
`
|
|
80
80
|
import metadata from '${packageName}/metadata';
|
|
81
81
|
console.log(metadata);
|
|
82
82
|
`,
|
|
83
|
-
|
|
83
|
+
`
|
|
84
84
|
import metadata from '${packageName}/metadata';
|
|
85
85
|
console.log(metadata);
|
|
86
86
|
`,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
'should not affect existing good imports',
|
|
88
|
+
);
|
|
89
|
+
defineInlineTest(
|
|
90
|
+
{ default: transformer, parser: 'tsx' },
|
|
91
|
+
{},
|
|
92
|
+
`
|
|
93
93
|
import { metadata } from 'not-${packageName}';
|
|
94
94
|
`,
|
|
95
|
-
|
|
95
|
+
`
|
|
96
96
|
import { metadata } from 'not-${packageName}';
|
|
97
97
|
`,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
98
|
+
'should not affect other packages',
|
|
99
|
+
);
|
|
100
|
+
defineInlineTest(
|
|
101
|
+
{ default: transformer, parser: 'tsx' },
|
|
102
|
+
{},
|
|
103
|
+
`
|
|
104
104
|
import { metadata } from '${packageName}/foo';
|
|
105
105
|
`,
|
|
106
|
-
|
|
106
|
+
`
|
|
107
107
|
import { metadata } from '${packageName}/foo';
|
|
108
108
|
`,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
109
|
+
'should not affect other entrypoints',
|
|
110
|
+
);
|
|
111
|
+
defineInlineTest(
|
|
112
|
+
{ default: transformer, parser: 'tsx' },
|
|
113
|
+
{},
|
|
114
|
+
`
|
|
115
115
|
import { metadata } from '@atlaskit/icon';
|
|
116
116
|
import { metadata as objectIconMetadata } from '@atlaskit/icon-object';
|
|
117
117
|
import { metadata as fileTypeIconMetadata } from '@atlaskit/icon-file-type';
|
|
118
118
|
`,
|
|
119
|
-
|
|
119
|
+
`
|
|
120
120
|
import { metadata } from '@atlaskit/icon';
|
|
121
121
|
import objectIconMetadata from '@atlaskit/icon-object/metadata';
|
|
122
122
|
import { metadata as fileTypeIconMetadata } from '@atlaskit/icon-file-type';
|
|
123
123
|
`,
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
'should work as expected on a real-world case',
|
|
125
|
+
);
|
|
126
126
|
});
|
|
@@ -11,7 +11,8 @@ import IconObject24 from '../../examples/constellation/icon-object-24.tsx';
|
|
|
11
11
|
|
|
12
12
|
Use the small size when space is at a premium.
|
|
13
13
|
|
|
14
|
-
Elements in this icon are simplified, rearranged or filled in because there is significantly less
|
|
14
|
+
Elements in this icon are simplified, rearranged or filled in because there is significantly less
|
|
15
|
+
space.
|
|
15
16
|
|
|
16
17
|
This icon is designed on a 16px grid and uses 1px strokes.
|
|
17
18
|
|
|
@@ -6,6 +6,7 @@ import IconExplorer from '@af/icon-explorer';
|
|
|
6
6
|
|
|
7
7
|
## Icon explorer
|
|
8
8
|
|
|
9
|
-
Search and copy icon import paths from the `@atlaskit/icon-object` package. Select an icon to copy
|
|
9
|
+
Search and copy icon import paths from the `@atlaskit/icon-object` package. Select an icon to copy
|
|
10
|
+
import to clipboard.
|
|
10
11
|
|
|
11
12
|
<IconExplorer iconType="object" />
|
|
@@ -4,9 +4,11 @@ order: 3
|
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
|
-
Object icons represent an Atlassian-specific content type. They can trigger actions such as opening
|
|
7
|
+
Object icons represent an Atlassian-specific content type. They can trigger actions such as opening
|
|
8
|
+
a page in Confluence, an issue in Jira, or a pull request in Bitbucket.
|
|
8
9
|
|
|
9
|
-
Unlike a standard icon, object icons help people identify the content type fast. This reduces
|
|
10
|
+
Unlike a standard icon, object icons help people identify the content type fast. This reduces
|
|
11
|
+
cognitive load for people across products and platforms.
|
|
10
12
|
|
|
11
13
|
Object icons can be in:
|
|
12
14
|
|
|
@@ -25,14 +27,17 @@ Object icons can be in:
|
|
|
25
27
|
|
|
26
28
|
### Color
|
|
27
29
|
|
|
28
|
-
Object icons are assigned specific colors. For cross-product and platform consistency, don’t change
|
|
30
|
+
Object icons are assigned specific colors. For cross-product and platform consistency, don’t change
|
|
31
|
+
the color of the object icon.
|
|
29
32
|
|
|
30
33
|
## Accessibility
|
|
31
34
|
|
|
32
35
|

|
|
33
36
|
|
|
34
|
-
- Use object icons in combination with a title and meta-information, such as author, creation date,
|
|
35
|
-
-
|
|
37
|
+
- Use object icons in combination with a title and meta-information, such as author, creation date,
|
|
38
|
+
or sub-heading.
|
|
39
|
+
- Pair object icons with [tooltips](/components/tooltip). On hover, the tooltip reveals the specific
|
|
40
|
+
content type of the icon.
|
|
36
41
|
|
|
37
42
|
## Related
|
|
38
43
|
|
package/docs/0-intro.tsx
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import { md } from '@atlaskit/docs';
|
|
4
|
+
import Link from '@atlaskit/link';
|
|
4
5
|
import SectionMessage from '@atlaskit/section-message';
|
|
5
6
|
|
|
6
7
|
export default md`
|
|
7
8
|
${(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</a>
|
|
13
|
-
</SectionMessage>
|
|
9
|
+
<SectionMessage appearance="information">
|
|
10
|
+
This component is now documented on{' '}
|
|
11
|
+
<Link href="https://atlassian.design/components/icon-object">atlassian.design</Link>
|
|
12
|
+
</SectionMessage>
|
|
14
13
|
)}
|
|
15
14
|
`;
|