@atlaskit/icon 33.1.1 → 34.0.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.
Files changed (37) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/codemods/32.0.2-icon-spacing-to-flex-primitive/index.tsx +232 -7
  3. package/codemods/__tests__/icon-spacing-to-box-primitive.test.tsx +65 -4
  4. package/dist/cjs/index.js +0 -14
  5. package/dist/es2019/index.js +0 -2
  6. package/dist/esm/index.js +0 -2
  7. package/dist/types/index.d.ts +0 -2
  8. package/dist/types-ts4.5/index.d.ts +0 -2
  9. package/package.json +4 -3
  10. package/base/package.json +0 -17
  11. package/dist/cjs/components/icon.compiled.css +0 -30
  12. package/dist/cjs/components/icon.js +0 -91
  13. package/dist/cjs/components/svg.compiled.css +0 -13
  14. package/dist/cjs/components/svg.js +0 -56
  15. package/dist/cjs/entry-points/base.js +0 -20
  16. package/dist/cjs/entry-points/svg.js +0 -13
  17. package/dist/es2019/components/icon.compiled.css +0 -30
  18. package/dist/es2019/components/icon.js +0 -82
  19. package/dist/es2019/components/svg.compiled.css +0 -13
  20. package/dist/es2019/components/svg.js +0 -47
  21. package/dist/es2019/entry-points/base.js +0 -1
  22. package/dist/es2019/entry-points/svg.js +0 -1
  23. package/dist/esm/components/icon.compiled.css +0 -30
  24. package/dist/esm/components/icon.js +0 -83
  25. package/dist/esm/components/svg.compiled.css +0 -13
  26. package/dist/esm/components/svg.js +0 -48
  27. package/dist/esm/entry-points/base.js +0 -1
  28. package/dist/esm/entry-points/svg.js +0 -1
  29. package/dist/types/components/icon.d.ts +0 -12
  30. package/dist/types/components/svg.d.ts +0 -17
  31. package/dist/types/entry-points/base.d.ts +0 -2
  32. package/dist/types/entry-points/svg.d.ts +0 -2
  33. package/dist/types-ts4.5/components/icon.d.ts +0 -12
  34. package/dist/types-ts4.5/components/svg.d.ts +0 -17
  35. package/dist/types-ts4.5/entry-points/base.d.ts +0 -2
  36. package/dist/types-ts4.5/entry-points/svg.d.ts +0 -2
  37. package/svg/package.json +0 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @atlaskit/icon
2
2
 
3
+ ## 34.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`af4d3f68227b4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af4d3f68227b4) -
8
+ Removed the default export (Icon), `./base`, `./svg` entry-points, and SVG named export.
9
+
10
+ ```diff
11
+ - import Icon from `@atlaskit/icon`
12
+ - import Icon from `@atlaskit/icon/base`
13
+ - import SVG from `@atlaskit/icon/svg`
14
+ ```
15
+
16
+ ### Migration Path
17
+
18
+ Creating custom icons using icon base component or SVG component are no longer supported. Please
19
+ migrate to native `<svg />` or choose one of the icons from provided icon set (e.g.
20
+ `import AddIcon from "@atlaskit/icon/core/add"`)
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies
25
+
26
+ ## 33.1.2
27
+
28
+ ### Patch Changes
29
+
30
+ - [`08170da1fbf62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08170da1fbf62) -
31
+ Migrate spacing prop usages on icons to Flex wrapper
32
+ - [`08170da1fbf62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08170da1fbf62) -
33
+ Update codemod and eslint to handle different scenarios to migrate spacing props
34
+ - Updated dependencies
35
+
3
36
  ## 33.1.1
4
37
 
5
38
  ### Patch Changes
@@ -1,5 +1,57 @@
1
+ import * as fs from 'fs';
2
+ import * as path from 'path';
3
+
1
4
  import type { API, ASTPath, Collection, FileInfo, JSXElement, default as core } from 'jscodeshift';
2
5
 
6
+ // Accumulated across all files in this worker — printed as a summary at process exit
7
+ const packagesNeedingCssDep = new Set<string>();
8
+ const emotionSkippedFiles: string[] = [];
9
+ const dynamicSpacingFiles: string[] = [];
10
+ const unresolvableIconFiles: string[] = [];
11
+
12
+ process.on('exit', () => {
13
+ const lines: string[] = [];
14
+
15
+ if (emotionSkippedFiles.length > 0) {
16
+ lines.push('');
17
+ lines.push('━━━ ⏭ FILES SKIPPED — Emotion imports detected (manual migration required) ━━━');
18
+ lines.push(' These files mix Emotion and Compiled. To migrate:');
19
+ lines.push(' Option A: Replace Emotion imports with @compiled/react equivalents first.');
20
+ lines.push(' Option B: Manually wrap icon(s) in <Flex xcss={...}> + cssMap.');
21
+ emotionSkippedFiles.forEach((f) => lines.push(` • ${f}`));
22
+ }
23
+
24
+ if (dynamicSpacingFiles.length > 0) {
25
+ lines.push('');
26
+ lines.push('━━━ ⚠️ DYNAMIC SPACING — manual migration needed ━━━');
27
+ lines.push(' spacing prop has a dynamic/variable value. Manually wrap the icon in');
28
+ lines.push(' <Flex xcss={iconSpacingStyles.spaceXXX}> with the correct token.');
29
+ lines.push(' An eslint-disable comment has been added to suppress the lint error.');
30
+ dynamicSpacingFiles.forEach((f) => lines.push(` • ${f}`));
31
+ }
32
+
33
+ if (unresolvableIconFiles.length > 0) {
34
+ lines.push('');
35
+ lines.push('━━━ ⚠️ UNRESOLVABLE ICON — manual migration needed ━━━');
36
+ lines.push(' Icon component uses a member expression or aliased variable name.');
37
+ lines.push(' The codemod cannot statically resolve these. Manually wrap the icon in');
38
+ lines.push(' <Flex xcss={iconSpacingStyles.spaceXXX}> and remove the spacing prop.');
39
+ unresolvableIconFiles.forEach((f) => lines.push(` • ${f}`));
40
+ }
41
+
42
+ if (packagesNeedingCssDep.size > 0) {
43
+ lines.push('');
44
+ lines.push('━━━ ⚠️ PACKAGES NEEDING package.json UPDATE ━━━');
45
+ lines.push(` Add "@atlaskit/css": "*" to dependencies in each package.json below:`);
46
+ [...packagesNeedingCssDep].sort().forEach((p) => lines.push(` • ${p}`));
47
+ }
48
+
49
+ if (lines.length > 0) {
50
+ // eslint-disable-next-line no-console
51
+ console.warn(lines.join('\n'));
52
+ }
53
+ });
54
+
3
55
  const ICON_PACKAGES = ['@atlaskit/icon/core', '@atlaskit/icon-lab/core'];
4
56
  const FLEX_COMPILED_PACKAGE = '@atlaskit/primitives/compiled';
5
57
  const FLEX_NON_COMPILED_PACKAGE = '@atlaskit/primitives';
@@ -57,12 +109,21 @@ function getIconImportSpecifiers(j: core.JSCodeshift, source: Collection<any>):
57
109
  return specifiers;
58
110
  }
59
111
 
112
+ function sortImportSpecifiers(specifiers: any[]): void {
113
+ specifiers.sort((a, b) => {
114
+ const aName = a.imported?.name ?? '';
115
+ const bName = b.imported?.name ?? '';
116
+ return aName.localeCompare(bName);
117
+ });
118
+ }
119
+
60
120
  function ensureNamedImport(j: core.JSCodeshift, specifiers: any[], name: string): void {
61
121
  const alreadyImported = specifiers.some(
62
122
  (s) => s.type === 'ImportSpecifier' && s.imported?.name === name,
63
123
  );
64
124
  if (!alreadyImported) {
65
125
  specifiers.push(j.importSpecifier(j.identifier(name)));
126
+ sortImportSpecifiers(specifiers);
66
127
  }
67
128
  }
68
129
 
@@ -89,11 +150,22 @@ function insertFlexImport(j: core.JSCodeshift, source: Collection<any>): void {
89
150
  .filter((path) => path.node.source.value === FLEX_NON_COMPILED_PACKAGE);
90
151
 
91
152
  if (nonCompiledImports.length > 0) {
92
- nonCompiledImports.forEach((path) => {
93
- path.node.source = j.stringLiteral(FLEX_COMPILED_PACKAGE);
94
- ensureNamedImport(j, path.node.specifiers || [], 'Flex');
95
- });
96
- return;
153
+ // Only rewrite @atlaskit/primitives → /compiled if the file doesn't use xcss.
154
+ // xcss is NOT exported from /compiled — rewriting would cause type errors.
155
+ const hasXcss = nonCompiledImports.some((path) =>
156
+ (path.node.specifiers || []).some(
157
+ (s: any) => s.type === 'ImportSpecifier' && s.imported?.name === 'xcss',
158
+ ),
159
+ );
160
+
161
+ if (!hasXcss) {
162
+ nonCompiledImports.forEach((path) => {
163
+ path.node.source = j.stringLiteral(FLEX_COMPILED_PACKAGE);
164
+ ensureNamedImport(j, path.node.specifiers || [], 'Flex');
165
+ });
166
+ return;
167
+ }
168
+ // If xcss is used, don't rewrite — add a new /compiled import for Flex instead.
97
169
  }
98
170
 
99
171
  const newImport = j.importDeclaration(
@@ -121,6 +193,19 @@ function insertCssMapImport(j: core.JSCodeshift, source: Collection<any>): void
121
193
  return;
122
194
  }
123
195
 
196
+ // If cssMap is already imported from another package (e.g. @compiled/react), don't add a duplicate
197
+ const cssMapAlreadyImported = source
198
+ .find(j.ImportDeclaration)
199
+ .filter((path) =>
200
+ (path.node.specifiers || []).some(
201
+ (s: any) => s.type === 'ImportSpecifier' && s.imported?.name === 'cssMap',
202
+ ),
203
+ );
204
+
205
+ if (cssMapAlreadyImported.length > 0) {
206
+ return;
207
+ }
208
+
124
209
  const newImport = j.importDeclaration(
125
210
  [j.importSpecifier(j.identifier('cssMap'))],
126
211
  j.stringLiteral(CSS_PACKAGE),
@@ -261,9 +346,33 @@ function addEslintDisableComment(
261
346
  path: ASTPath<JSXElement>,
262
347
  reason: string,
263
348
  ): void {
264
- const comment = j.line(
265
- ` eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: ${reason}`,
349
+ // JSX requires comments inside children to be wrapped in {/* */}.
350
+ // We achieve this by inserting a JSXExpressionContainer with an empty expression
351
+ // and attaching the block comment to it — jscodeshift prints this as {/* ... */}.
352
+ const emptyExpr = j.jsxEmptyExpression();
353
+ (emptyExpr as any).innerComments = [
354
+ {
355
+ type: 'CommentBlock',
356
+ value: ` eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: ${reason} `,
357
+ },
358
+ ];
359
+ const commentContainer = j.jsxExpressionContainer(emptyExpr);
360
+
361
+ // Insert the {/* */} container as a sibling before the icon element in its parent's children
362
+ const parent = path.parent;
363
+ if (parent && parent.value && Array.isArray(parent.value.children)) {
364
+ const idx = parent.value.children.indexOf(path.value);
365
+ if (idx !== -1) {
366
+ parent.value.children.splice(idx, 0, commentContainer);
367
+ return;
368
+ }
369
+ }
370
+
371
+ // Fallback: attach as a leading comment on the node itself
372
+ const comment = j.block(
373
+ ` eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: ${reason} `,
266
374
  );
375
+ comment.leading = true;
267
376
  const node = path.value as any;
268
377
  node.comments = [comment, ...(node.comments || [])];
269
378
  }
@@ -335,6 +444,50 @@ function replaceWithWrapped(
335
444
  }
336
445
  }
337
446
 
447
+ const EMOTION_PACKAGES = ['@emotion/react', '@emotion/styled', '@emotion/core'];
448
+
449
+ /**
450
+ * Check if the file imports from Emotion. If so, it can't be migrated automatically
451
+ * because mixing Emotion and Compiled (used by @atlaskit/primitives/compiled) in the
452
+ * same file causes type-checking and runtime errors. These files need manual migration.
453
+ */
454
+ function hasEmotionImports(j: core.JSCodeshift, source: Collection<any>): boolean {
455
+ return (
456
+ source
457
+ .find(j.ImportDeclaration)
458
+ .filter((p) => EMOTION_PACKAGES.includes(p.node.source.value as string)).length > 0
459
+ );
460
+ }
461
+
462
+ /**
463
+ * Check if @atlaskit/css is listed in the nearest package.json.
464
+ * If not, warn the user that they need to add it.
465
+ */
466
+ function checkCssPackageDependency(filePath: string | undefined): boolean {
467
+ if (!filePath) {
468
+ return true; // In test environments, file.path may be undefined — skip the check
469
+ }
470
+ let dir = path.dirname(filePath);
471
+ while (dir !== path.dirname(dir)) {
472
+ const pkgPath = path.join(dir, 'package.json');
473
+ if (fs.existsSync(pkgPath)) {
474
+ try {
475
+ const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
476
+ const deps = {
477
+ ...(pkg.dependencies || {}),
478
+ ...(pkg.devDependencies || {}),
479
+ ...(pkg.peerDependencies || {}),
480
+ };
481
+ return CSS_PACKAGE in deps;
482
+ } catch {
483
+ return false;
484
+ }
485
+ }
486
+ dir = path.dirname(dir);
487
+ }
488
+ return false;
489
+ }
490
+
338
491
  export default function transformer(file: FileInfo, api: API): string {
339
492
  const j = api.jscodeshift;
340
493
  const source = j(file.source);
@@ -344,6 +497,51 @@ export default function transformer(file: FileInfo, api: API): string {
344
497
  return file.source;
345
498
  }
346
499
 
500
+ // Skip files that import from Emotion — mixing Emotion and Compiled causes
501
+ // type-checking and runtime errors. These files need manual migration.
502
+ if (hasEmotionImports(j, source)) {
503
+ if (file.path) {
504
+ emotionSkippedFiles.push(file.path);
505
+ }
506
+ return file.source;
507
+ }
508
+
509
+ // Detect unresolvable cases: JSX elements with spacing prop that are NOT in iconSpecifiers
510
+ // (member expressions like <appearanceIconStyles.Icon> or aliased variables like <Icon>)
511
+ source
512
+ .find(j.JSXElement)
513
+ .filter((path) => {
514
+ const name = path.value.openingElement.name;
515
+ const attrs = path.value.openingElement.attributes || [];
516
+ const hasSpacing = attrs.some(
517
+ (attr: any) => attr.type === 'JSXAttribute' && attr.name?.name === 'spacing',
518
+ );
519
+ if (!hasSpacing) {
520
+ return false;
521
+ }
522
+ // Member expression: <appearanceIconStyles.Icon spacing="spacious">
523
+ if (name.type === 'JSXMemberExpression') {
524
+ return true;
525
+ }
526
+ // Aliased variable: <Icon spacing="spacious"> where Icon is not a known icon specifier
527
+ // but could be a re-assigned icon (heuristic: PascalCase identifier not in specifiers)
528
+ if (name.type === 'JSXIdentifier' && !iconSpecifiers.includes(name.name)) {
529
+ const n = name.name;
530
+ return n[0] === n[0].toUpperCase() && n !== 'Flex' && n !== 'Box' && n !== 'Inline';
531
+ }
532
+ return false;
533
+ })
534
+ .forEach((path) => {
535
+ if (file.path) {
536
+ const name = path.value.openingElement.name;
537
+ const nameStr =
538
+ name.type === 'JSXMemberExpression'
539
+ ? `<${(name.object as any).name}.${(name.property as any).name}>`
540
+ : `<${(name as any).name}>`;
541
+ unresolvableIconFiles.push(`${file.path} — ${nameStr} (member expression or alias)`);
542
+ }
543
+ });
544
+
347
545
  const iconJSXWithSpacing = source
348
546
  .find(j.JSXElement)
349
547
  .filter((path) => {
@@ -360,6 +558,27 @@ export default function transformer(file: FileInfo, api: API): string {
360
558
  return file.source;
361
559
  }
362
560
 
561
+ // Warn if @atlaskit/css is not in the package's dependencies
562
+ if (!checkCssPackageDependency(file.path)) {
563
+ // Find the nearest package.json and record the package name
564
+ if (file.path) {
565
+ let dir = path.dirname(file.path);
566
+ while (dir !== path.dirname(dir)) {
567
+ const pkgPath = path.join(dir, 'package.json');
568
+ if (fs.existsSync(pkgPath)) {
569
+ try {
570
+ const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
571
+ packagesNeedingCssDep.add(`${pkg.name ?? dir} (${pkgPath})`);
572
+ } catch {
573
+ packagesNeedingCssDep.add(dir);
574
+ }
575
+ break;
576
+ }
577
+ dir = path.dirname(dir);
578
+ }
579
+ }
580
+ }
581
+
363
582
  const paddingTokensUsed = new Set<string>();
364
583
  let needsFlexImport = false;
365
584
 
@@ -372,6 +591,9 @@ export default function transformer(file: FileInfo, api: API): string {
372
591
  path,
373
592
  'Manually migrate spacing prop to Flex primitive (spread props detected)',
374
593
  );
594
+ if (file.path) {
595
+ dynamicSpacingFiles.push(`${file.path} — spread props`);
596
+ }
375
597
  return;
376
598
  }
377
599
 
@@ -381,6 +603,9 @@ export default function transformer(file: FileInfo, api: API): string {
381
603
  path,
382
604
  'Manually migrate spacing prop to Flex primitive (dynamic spacing value detected)',
383
605
  );
606
+ if (file.path) {
607
+ dynamicSpacingFiles.push(`${file.path} — dynamic spacing value`);
608
+ }
384
609
  return;
385
610
  }
386
611
 
@@ -136,7 +136,7 @@ const App = () => <DropdownMenu iconAfter={<Flex xcss={iconSpacingStyles.space07
136
136
  `import AddIcon from '@atlaskit/icon/core/add';
137
137
  const App = (props: any) => <AddIcon {...props} spacing="spacious" label="" />;`,
138
138
  `import AddIcon from '@atlaskit/icon/core/add';
139
- const App = (props: any) => // eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Flex primitive (spread props detected)
139
+ const App = (props: any) => /* eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Flex primitive (spread props detected) */
140
140
  <AddIcon {...props} spacing="spacious" label="" />;`,
141
141
  'should add eslint-disable comment inline and skip when spread props are present',
142
142
  );
@@ -147,11 +147,52 @@ const App = (props: any) => // eslint-disable-next-line @atlaskit/design-system/
147
147
  `import AddIcon from '@atlaskit/icon/core/add';
148
148
  const App = ({ spacing }: any) => <AddIcon label="" spacing={spacing} />;`,
149
149
  `import AddIcon from '@atlaskit/icon/core/add';
150
- const App = ({ spacing }: any) => // eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Flex primitive (dynamic spacing value detected)
150
+ const App = ({ spacing }: any) => /* eslint-disable-next-line @atlaskit/design-system/no-icon-spacing-prop -- TODO: Manually migrate spacing prop to Flex primitive (dynamic spacing value detected) */
151
151
  <AddIcon label="" spacing={spacing} />;`,
152
152
  'should add eslint-disable comment inline and skip when spacing is a dynamic expression',
153
153
  );
154
154
 
155
+ defineInlineTest(
156
+ { default: transformer, parser: 'tsx' },
157
+ {},
158
+ `import { css } from '@emotion/react';
159
+ import AddIcon from '@atlaskit/icon/core/add';
160
+ const App = () => <AddIcon label="" spacing="spacious" />;`,
161
+ `import { css } from '@emotion/react';
162
+ import AddIcon from '@atlaskit/icon/core/add';
163
+ const App = () => <AddIcon label="" spacing="spacious" />;`,
164
+ 'should skip files that import from @emotion/react and leave them unchanged',
165
+ );
166
+
167
+ defineInlineTest(
168
+ { default: transformer, parser: 'tsx' },
169
+ {},
170
+ `import styled from '@emotion/styled';
171
+ import AddIcon from '@atlaskit/icon/core/add';
172
+ const App = () => <AddIcon label="" spacing="spacious" />;`,
173
+ `import styled from '@emotion/styled';
174
+ import AddIcon from '@atlaskit/icon/core/add';
175
+ const App = () => <AddIcon label="" spacing="spacious" />;`,
176
+ 'should skip files that import from @emotion/styled and leave them unchanged',
177
+ );
178
+
179
+ defineInlineTest(
180
+ { default: transformer, parser: 'tsx' },
181
+ {},
182
+ `import { cssMap } from '@compiled/react';
183
+ import AddIcon from '@atlaskit/icon/core/add';
184
+ const App = () => <AddIcon label="" spacing="spacious" />;`,
185
+ `import { Flex } from "@atlaskit/primitives/compiled";
186
+ import { token } from "@atlaskit/tokens";
187
+ import { cssMap } from '@compiled/react';
188
+ import AddIcon from '@atlaskit/icon/core/add';
189
+
190
+ ${space050Block}
191
+
192
+ const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
193
+ 'should not add duplicate cssMap import when cssMap already imported from @compiled/react',
194
+ );
195
+
155
196
  defineInlineTest(
156
197
  { default: transformer, parser: 'tsx' },
157
198
  {},
@@ -211,7 +252,7 @@ import AddIcon from '@atlaskit/icon/core/add';
211
252
  const App = () => <AddIcon label="" spacing="spacious" />;`,
212
253
  `import { cssMap } from "@atlaskit/css";
213
254
  import { token } from "@atlaskit/tokens";
214
- import { Inline, Flex } from '@atlaskit/primitives/compiled';
255
+ import { Flex, Inline } from '@atlaskit/primitives/compiled';
215
256
  import AddIcon from '@atlaskit/icon/core/add';
216
257
 
217
258
  ${space050Block}
@@ -262,7 +303,7 @@ import AddIcon from '@atlaskit/icon/core/add';
262
303
  const App = () => <AddIcon label="" spacing="spacious" />;`,
263
304
  `import { cssMap } from "@atlaskit/css";
264
305
  import { token } from "@atlaskit/tokens";
265
- import { Inline, Flex } from "@atlaskit/primitives/compiled";
306
+ import { Flex, Inline } from "@atlaskit/primitives/compiled";
266
307
  import AddIcon from '@atlaskit/icon/core/add';
267
308
 
268
309
  ${space050Block}
@@ -271,6 +312,26 @@ const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></
271
312
  'should add Flex and update @atlaskit/primitives to @atlaskit/primitives/compiled',
272
313
  );
273
314
 
315
+ defineInlineTest(
316
+ { default: transformer, parser: 'tsx' },
317
+ {},
318
+ `import { Pressable, xcss } from '@atlaskit/primitives';
319
+ import AddIcon from '@atlaskit/icon/core/add';
320
+ const buttonStyles = xcss({ padding: 'space.100' });
321
+ const App = () => <AddIcon label="" spacing="spacious" />;`,
322
+ `import { cssMap } from "@atlaskit/css";
323
+ import { Flex } from "@atlaskit/primitives/compiled";
324
+ import { token } from "@atlaskit/tokens";
325
+ import { Pressable, xcss } from '@atlaskit/primitives';
326
+ import AddIcon from '@atlaskit/icon/core/add';
327
+
328
+ ${space050Block}
329
+
330
+ const buttonStyles = xcss({ padding: 'space.100' });
331
+ const App = () => <Flex xcss={iconSpacingStyles.space050}><AddIcon label="" /></Flex>;`,
332
+ 'should add new /compiled import when @atlaskit/primitives uses xcss (cannot rewrite)',
333
+ );
334
+
274
335
  defineInlineTest(
275
336
  { default: transformer, parser: 'tsx' },
276
337
  {},
package/dist/cjs/index.js CHANGED
@@ -16,24 +16,12 @@ Object.defineProperty(exports, "IconTile", {
16
16
  return _iconTile.default;
17
17
  }
18
18
  });
19
- Object.defineProperty(exports, "SVG", {
20
- enumerable: true,
21
- get: function get() {
22
- return _svg.default;
23
- }
24
- });
25
19
  Object.defineProperty(exports, "Skeleton", {
26
20
  enumerable: true,
27
21
  get: function get() {
28
22
  return _skeleton.default;
29
23
  }
30
24
  });
31
- Object.defineProperty(exports, "default", {
32
- enumerable: true,
33
- get: function get() {
34
- return _icon.default;
35
- }
36
- });
37
25
  Object.defineProperty(exports, "size", {
38
26
  enumerable: true,
39
27
  get: function get() {
@@ -46,9 +34,7 @@ Object.defineProperty(exports, "sizes", {
46
34
  return _constants.sizes;
47
35
  }
48
36
  });
49
- var _icon = _interopRequireDefault(require("./components/icon"));
50
37
  var _iconNew = _interopRequireDefault(require("./components/icon-new"));
51
- var _svg = _interopRequireDefault(require("./components/svg"));
52
38
  var _constants = require("./constants");
53
39
  var _skeleton = _interopRequireDefault(require("./components/skeleton"));
54
40
  var _iconTile = _interopRequireDefault(require("./components/icon-tile"));
@@ -1,6 +1,4 @@
1
- export { default } from './components/icon';
2
1
  export { default as IconNew } from './components/icon-new';
3
- export { default as SVG } from './components/svg';
4
2
  export { sizeMap as size, sizes } from './constants';
5
3
  export { default as Skeleton } from './components/skeleton';
6
4
  export { default as IconTile } from './components/icon-tile';
package/dist/esm/index.js CHANGED
@@ -1,6 +1,4 @@
1
- export { default } from './components/icon';
2
1
  export { default as IconNew } from './components/icon-new';
3
- export { default as SVG } from './components/svg';
4
2
  export { sizeMap as size, sizes } from './constants';
5
3
  export { default as Skeleton } from './components/skeleton';
6
4
  export { default as IconTile } from './components/icon-tile';
@@ -1,6 +1,4 @@
1
- export { default } from './components/icon';
2
1
  export { default as IconNew } from './components/icon-new';
3
- export { default as SVG } from './components/svg';
4
2
  export { sizeMap as size, sizes } from './constants';
5
3
  export { default as Skeleton } from './components/skeleton';
6
4
  export { default as IconTile } from './components/icon-tile';
@@ -1,6 +1,4 @@
1
- export { default } from './components/icon';
2
1
  export { default as IconNew } from './components/icon-new';
3
- export { default as SVG } from './components/svg';
4
2
  export { sizeMap as size, sizes } from './constants';
5
3
  export { default as Skeleton } from './components/skeleton';
6
4
  export { default as IconTile } from './components/icon-tile';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "33.1.1",
3
+ "version": "34.0.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/"
@@ -59,16 +59,17 @@
59
59
  "@atlaskit/link": "^3.3.0",
60
60
  "@atlaskit/logo": "^19.10.0",
61
61
  "@atlaskit/menu": "^8.4.0",
62
- "@atlaskit/modal-dialog": "^14.13.0",
62
+ "@atlaskit/modal-dialog": "^14.14.0",
63
63
  "@atlaskit/primitives": "^18.1.0",
64
64
  "@atlaskit/section-message": "^8.12.0",
65
65
  "@atlaskit/textfield": "^8.2.0",
66
66
  "@atlaskit/theme": "^22.0.0",
67
67
  "@atlaskit/toggle": "^15.2.0",
68
- "@atlaskit/tooltip": "^21.0.0",
68
+ "@atlaskit/tooltip": "^21.1.0",
69
69
  "@atlassian/feature-flags-test-utils": "^1.0.0",
70
70
  "@atlassian/ssr-tests": "workspace:^",
71
71
  "@atlassian/structured-docs-types": "workspace:^",
72
+ "@atlassian/testing-library": "^0.5.0",
72
73
  "@babel/core": "7.24.9",
73
74
  "@babel/register": "^7.25.9",
74
75
  "@codeshift/utils": "^0.2.4",
package/base/package.json DELETED
@@ -1,17 +0,0 @@
1
- {
2
- "name": "@atlaskit/icon/base",
3
- "main": "../dist/cjs/entry-points/base.js",
4
- "module": "../dist/esm/entry-points/base.js",
5
- "module:es2019": "../dist/es2019/entry-points/base.js",
6
- "sideEffects": [
7
- "**/*.compiled.css"
8
- ],
9
- "types": "../dist/types/entry-points/base.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/entry-points/base.d.ts"
14
- ]
15
- }
16
- }
17
- }
@@ -1,30 +0,0 @@
1
- ._17jb1osq >svg{max-height:100%}
2
- ._1bsb1tcg{width:24px}
3
- ._1bsb7vkz{width:1pc}
4
- ._1bsbckbl{width:3pc}
5
- ._1bsbzwfg{width:2pc}
6
- ._1e0c1o8l{display:inline-block}
7
- ._1kg81r31 >svg stop{stop-color:currentColor}
8
- ._1ksvoz0e >svg{color:var(--icon-primary-color)}
9
- ._1o9zidpf{flex-shrink:0}
10
- ._1szv15vq >svg{overflow-x:hidden}
11
- ._1tly15vq >svg{overflow-y:hidden}
12
- ._1veoyfq0 >svg{vertical-align:bottom}
13
- ._3se1x1jp >svg{fill:var(--icon-secondary-color)}
14
- ._4t3i1tcg{height:24px}
15
- ._4t3i7vkz{height:1pc}
16
- ._4t3ickbl{height:3pc}
17
- ._4t3izwfg{height:2pc}
18
- ._5fdi1tcg >svg{width:24px}
19
- ._5fdi7vkz >svg{width:1pc}
20
- ._5fdickbl >svg{width:3pc}
21
- ._5fdizwfg >svg{width:2pc}
22
- ._re2rglyw >svg{pointer-events:none}
23
- ._rzyw1osq >svg{max-width:100%}
24
- ._vwz4kb7n{line-height:1}
25
- ._vyfuvuon{--icon-secondary-color:var(--ds-surface,#fff)}
26
- ._zbji1tcg >svg{height:24px}
27
- ._zbji7vkz >svg{height:1pc}
28
- ._zbjickbl >svg{height:3pc}
29
- ._zbjizwfg >svg{height:2pc}
30
- @media screen and (forced-colors:active){._18hbwc43 >svg{--icon-primary-color:Canvas}._4fyi1j28 >svg{--icon-secondary-color:transparent}._jcxd1r8n{filter:grayscale(1)}._gq0g1onz{--icon-primary-color:CanvasText}._1trkwc43{--icon-secondary-color:Canvas}}
@@ -1,91 +0,0 @@
1
- /* icon.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- "use strict";
3
-
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.default = exports.Icon = void 0;
10
- require("./icon.compiled.css");
11
- var _react = _interopRequireWildcard(require("react"));
12
- var React = _react;
13
- var _runtime = require("@compiled/react/runtime");
14
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
18
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
19
- /**
20
- * We are hiding these props from consumers as they're used to
21
- * hack around icon sizing specifically for icon-file-type.
22
- */
23
-
24
- var iconStyles = null;
25
- var sizeStyles = {
26
- small: "_1bsb7vkz _4t3i7vkz _5fdi7vkz _zbji7vkz",
27
- medium: "_1bsb1tcg _4t3i1tcg _5fdi1tcg _zbji1tcg",
28
- large: "_1bsbzwfg _4t3izwfg _5fdizwfg _zbjizwfg",
29
- xlarge: "_1bsbckbl _4t3ickbl _5fdickbl _zbjickbl"
30
- };
31
-
32
- /**
33
- * For windows high contrast mode
34
- */
35
- var baseHcmStyles = null;
36
- var primaryEqualsSecondaryHcmStyles = null;
37
- var secondaryTransparentHcmStyles = null;
38
-
39
- /**
40
- * __Icon__
41
- *
42
- * @deprecated Custom Icon is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
43
- *
44
- * An icon is used as a visual representation of common actions and commands to provide context.
45
- *
46
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
47
- */
48
- var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
49
- var _ref = props,
50
- Glyph = _ref.glyph,
51
- dangerouslySetGlyph = _ref.dangerouslySetGlyph,
52
- _ref$primaryColor = _ref.primaryColor,
53
- primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
54
- secondaryColor = _ref.secondaryColor,
55
- size = _ref.size,
56
- testId = _ref.testId,
57
- label = _ref.label,
58
- width = _ref.width,
59
- height = _ref.height,
60
- UNSAFE_margin = _ref.UNSAFE_margin;
61
- var glyphProps = dangerouslySetGlyph ? {
62
- dangerouslySetInnerHTML: {
63
- __html: dangerouslySetGlyph
64
- }
65
- } : {
66
- children: Glyph ? /*#__PURE__*/React.createElement(Glyph, {
67
- role: "presentation"
68
- }) : null
69
- };
70
- var customDimensions = width && height ? {
71
- width: width + 'px',
72
- height: height + 'px'
73
- } : null;
74
- return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
75
- "data-testid": testId,
76
- "data-vc": "icon-".concat(testId),
77
- role: label ? 'img' : undefined,
78
- "aria-label": label ? label : undefined,
79
- "aria-hidden": label ? undefined : true,
80
- style: _objectSpread(_objectSpread({}, customDimensions), {}, {
81
- '--icon-primary-color': primaryColor,
82
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
83
- '--icon-secondary-color': secondaryColor,
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
85
- margin: UNSAFE_margin
86
- })
87
- }, glyphProps, {
88
- className: (0, _runtime.ax)(["_1e0c1o8l _1o9zidpf _vyfuvuon _vwz4kb7n _1szv15vq _1tly15vq _rzyw1osq _17jb1osq _1ksvoz0e _3se1x1jp _re2rglyw _1veoyfq0 _1kg81r31", "_jcxd1r8n _gq0g1onz _1trkwc43", primaryColor === secondaryColor && "_18hbwc43", secondaryColor === 'transparent' && "_4fyi1j28", size && sizeStyles[size]])
89
- }));
90
- });
91
- var _default = exports.default = Icon;
@@ -1,13 +0,0 @@
1
- ._18m915vq{overflow-y:hidden}
2
- ._1bsb1tcg{width:24px}
3
- ._1bsb7vkz{width:1pc}
4
- ._1bsbckbl{width:3pc}
5
- ._1bsbzwfg{width:2pc}
6
- ._1reo15vq{overflow-x:hidden}
7
- ._4t3i1tcg{height:24px}
8
- ._4t3i7vkz{height:1pc}
9
- ._4t3ickbl{height:3pc}
10
- ._4t3izwfg{height:2pc}
11
- ._lcxvglyw{pointer-events:none}
12
- ._lswuvuon{fill:var(--ds-surface,#fff)}
13
- ._vc881r31 stop{stop-color:currentColor}
@@ -1,56 +0,0 @@
1
- /* svg.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- "use strict";
3
-
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- require("./svg.compiled.css");
10
- var _react = _interopRequireWildcard(require("react"));
11
- var React = _react;
12
- var _runtime = require("@compiled/react/runtime");
13
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
14
- var sizeStyles = {
15
- small: "_1bsb7vkz _4t3i7vkz",
16
- medium: "_1bsb1tcg _4t3i1tcg",
17
- large: "_1bsbzwfg _4t3izwfg",
18
- xlarge: "_1bsbckbl _4t3ickbl"
19
- };
20
- var svgStyles = null;
21
-
22
- /**
23
- * __SVG__
24
- *
25
- * @deprecated Custom SVG is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
26
- *
27
- * An icon is used as a visual representation of common actions and commands to provide context.
28
- *
29
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
30
- */
31
- var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
32
- var _ref$size = _ref.size,
33
- size = _ref$size === void 0 ? 'medium' : _ref$size,
34
- label = _ref.label,
35
- _ref$primaryColor = _ref.primaryColor,
36
- primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
37
- secondaryColor = _ref.secondaryColor,
38
- testId = _ref.testId,
39
- children = _ref.children;
40
- return /*#__PURE__*/React.createElement("svg", {
41
- viewBox: "0 0 24 24",
42
- style: {
43
- color: primaryColor,
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
45
- fill: secondaryColor
46
- }
47
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
48
- ,
49
-
50
- "data-testid": testId,
51
- "aria-label": label || undefined,
52
- role: label ? 'img' : 'presentation',
53
- className: (0, _runtime.ax)(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw _vc881r31", sizeStyles[size]])
54
- }, children);
55
- });
56
- var _default = exports.default = SVG;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "Icon", {
8
- enumerable: true,
9
- get: function get() {
10
- return _icon.Icon;
11
- }
12
- });
13
- Object.defineProperty(exports, "default", {
14
- enumerable: true,
15
- get: function get() {
16
- return _icon.default;
17
- }
18
- });
19
- var _icon = _interopRequireWildcard(require("../components/icon"));
20
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function get() {
10
- return _svg.default;
11
- }
12
- });
13
- var _svg = _interopRequireDefault(require("../components/svg"));
@@ -1,30 +0,0 @@
1
- ._17jb1osq >svg{max-height:100%}
2
- ._1bsb1tcg{width:24px}
3
- ._1bsb7vkz{width:1pc}
4
- ._1bsbckbl{width:3pc}
5
- ._1bsbzwfg{width:2pc}
6
- ._1e0c1o8l{display:inline-block}
7
- ._1kg81r31 >svg stop{stop-color:currentColor}
8
- ._1ksvoz0e >svg{color:var(--icon-primary-color)}
9
- ._1o9zidpf{flex-shrink:0}
10
- ._1szv15vq >svg{overflow-x:hidden}
11
- ._1tly15vq >svg{overflow-y:hidden}
12
- ._1veoyfq0 >svg{vertical-align:bottom}
13
- ._3se1x1jp >svg{fill:var(--icon-secondary-color)}
14
- ._4t3i1tcg{height:24px}
15
- ._4t3i7vkz{height:1pc}
16
- ._4t3ickbl{height:3pc}
17
- ._4t3izwfg{height:2pc}
18
- ._5fdi1tcg >svg{width:24px}
19
- ._5fdi7vkz >svg{width:1pc}
20
- ._5fdickbl >svg{width:3pc}
21
- ._5fdizwfg >svg{width:2pc}
22
- ._re2rglyw >svg{pointer-events:none}
23
- ._rzyw1osq >svg{max-width:100%}
24
- ._vwz4kb7n{line-height:1}
25
- ._vyfuvuon{--icon-secondary-color:var(--ds-surface,#fff)}
26
- ._zbji1tcg >svg{height:24px}
27
- ._zbji7vkz >svg{height:1pc}
28
- ._zbjickbl >svg{height:3pc}
29
- ._zbjizwfg >svg{height:2pc}
30
- @media screen and (forced-colors:active){._18hbwc43 >svg{--icon-primary-color:Canvas}._4fyi1j28 >svg{--icon-secondary-color:transparent}._jcxd1r8n{filter:grayscale(1)}._gq0g1onz{--icon-primary-color:CanvasText}._1trkwc43{--icon-secondary-color:Canvas}}
@@ -1,82 +0,0 @@
1
- /* icon.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import "./icon.compiled.css";
4
- import * as React from 'react';
5
- import { ax, ix } from "@compiled/react/runtime";
6
- import { memo } from 'react';
7
-
8
- /**
9
- * We are hiding these props from consumers as they're used to
10
- * hack around icon sizing specifically for icon-file-type.
11
- */
12
-
13
- const iconStyles = null;
14
- const sizeStyles = {
15
- small: "_1bsb7vkz _4t3i7vkz _5fdi7vkz _zbji7vkz",
16
- medium: "_1bsb1tcg _4t3i1tcg _5fdi1tcg _zbji1tcg",
17
- large: "_1bsbzwfg _4t3izwfg _5fdizwfg _zbjizwfg",
18
- xlarge: "_1bsbckbl _4t3ickbl _5fdickbl _zbjickbl"
19
- };
20
-
21
- /**
22
- * For windows high contrast mode
23
- */
24
- const baseHcmStyles = null;
25
- const primaryEqualsSecondaryHcmStyles = null;
26
- const secondaryTransparentHcmStyles = null;
27
-
28
- /**
29
- * __Icon__
30
- *
31
- * @deprecated Custom Icon is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
32
- *
33
- * An icon is used as a visual representation of common actions and commands to provide context.
34
- *
35
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
36
- */
37
- export const Icon = /*#__PURE__*/memo(function Icon(props) {
38
- const {
39
- glyph: Glyph,
40
- dangerouslySetGlyph,
41
- primaryColor = 'currentColor',
42
- secondaryColor,
43
- size,
44
- testId,
45
- label,
46
- width,
47
- height,
48
- UNSAFE_margin
49
- } = props;
50
- const glyphProps = dangerouslySetGlyph ? {
51
- dangerouslySetInnerHTML: {
52
- __html: dangerouslySetGlyph
53
- }
54
- } : {
55
- children: Glyph ? /*#__PURE__*/React.createElement(Glyph, {
56
- role: "presentation"
57
- }) : null
58
- };
59
- const customDimensions = width && height ? {
60
- width: width + 'px',
61
- height: height + 'px'
62
- } : null;
63
- return /*#__PURE__*/React.createElement("span", _extends({
64
- "data-testid": testId,
65
- "data-vc": `icon-${testId}`,
66
- role: label ? 'img' : undefined,
67
- "aria-label": label ? label : undefined,
68
- "aria-hidden": label ? undefined : true,
69
- style: {
70
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
71
- ...customDimensions,
72
- '--icon-primary-color': primaryColor,
73
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
74
- '--icon-secondary-color': secondaryColor,
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
76
- margin: UNSAFE_margin
77
- }
78
- }, glyphProps, {
79
- className: ax(["_1e0c1o8l _1o9zidpf _vyfuvuon _vwz4kb7n _1szv15vq _1tly15vq _rzyw1osq _17jb1osq _1ksvoz0e _3se1x1jp _re2rglyw _1veoyfq0 _1kg81r31", "_jcxd1r8n _gq0g1onz _1trkwc43", primaryColor === secondaryColor && "_18hbwc43", secondaryColor === 'transparent' && "_4fyi1j28", size && sizeStyles[size]])
80
- }));
81
- });
82
- export default Icon;
@@ -1,13 +0,0 @@
1
- ._18m915vq{overflow-y:hidden}
2
- ._1bsb1tcg{width:24px}
3
- ._1bsb7vkz{width:1pc}
4
- ._1bsbckbl{width:3pc}
5
- ._1bsbzwfg{width:2pc}
6
- ._1reo15vq{overflow-x:hidden}
7
- ._4t3i1tcg{height:24px}
8
- ._4t3i7vkz{height:1pc}
9
- ._4t3ickbl{height:3pc}
10
- ._4t3izwfg{height:2pc}
11
- ._lcxvglyw{pointer-events:none}
12
- ._lswuvuon{fill:var(--ds-surface,#fff)}
13
- ._vc881r31 stop{stop-color:currentColor}
@@ -1,47 +0,0 @@
1
- /* svg.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import "./svg.compiled.css";
3
- import * as React from 'react';
4
- import { ax, ix } from "@compiled/react/runtime";
5
- import { memo } from 'react';
6
- const sizeStyles = {
7
- small: "_1bsb7vkz _4t3i7vkz",
8
- medium: "_1bsb1tcg _4t3i1tcg",
9
- large: "_1bsbzwfg _4t3izwfg",
10
- xlarge: "_1bsbckbl _4t3ickbl"
11
- };
12
- const svgStyles = null;
13
-
14
- /**
15
- * __SVG__
16
- *
17
- * @deprecated Custom SVG is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
18
- *
19
- * An icon is used as a visual representation of common actions and commands to provide context.
20
- *
21
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
22
- */
23
- const SVG = /*#__PURE__*/memo(function SVG({
24
- size = 'medium',
25
- label,
26
- primaryColor = 'currentColor',
27
- secondaryColor,
28
- testId,
29
- children
30
- }) {
31
- return /*#__PURE__*/React.createElement("svg", {
32
- viewBox: "0 0 24 24",
33
- style: {
34
- color: primaryColor,
35
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
36
- fill: secondaryColor
37
- }
38
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
39
- ,
40
-
41
- "data-testid": testId,
42
- "aria-label": label || undefined,
43
- role: label ? 'img' : 'presentation',
44
- className: ax(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw _vc881r31", sizeStyles[size]])
45
- }, children);
46
- });
47
- export default SVG;
@@ -1 +0,0 @@
1
- export { default, Icon } from '../components/icon';
@@ -1 +0,0 @@
1
- export { default } from '../components/svg';
@@ -1,30 +0,0 @@
1
- ._17jb1osq >svg{max-height:100%}
2
- ._1bsb1tcg{width:24px}
3
- ._1bsb7vkz{width:1pc}
4
- ._1bsbckbl{width:3pc}
5
- ._1bsbzwfg{width:2pc}
6
- ._1e0c1o8l{display:inline-block}
7
- ._1kg81r31 >svg stop{stop-color:currentColor}
8
- ._1ksvoz0e >svg{color:var(--icon-primary-color)}
9
- ._1o9zidpf{flex-shrink:0}
10
- ._1szv15vq >svg{overflow-x:hidden}
11
- ._1tly15vq >svg{overflow-y:hidden}
12
- ._1veoyfq0 >svg{vertical-align:bottom}
13
- ._3se1x1jp >svg{fill:var(--icon-secondary-color)}
14
- ._4t3i1tcg{height:24px}
15
- ._4t3i7vkz{height:1pc}
16
- ._4t3ickbl{height:3pc}
17
- ._4t3izwfg{height:2pc}
18
- ._5fdi1tcg >svg{width:24px}
19
- ._5fdi7vkz >svg{width:1pc}
20
- ._5fdickbl >svg{width:3pc}
21
- ._5fdizwfg >svg{width:2pc}
22
- ._re2rglyw >svg{pointer-events:none}
23
- ._rzyw1osq >svg{max-width:100%}
24
- ._vwz4kb7n{line-height:1}
25
- ._vyfuvuon{--icon-secondary-color:var(--ds-surface,#fff)}
26
- ._zbji1tcg >svg{height:24px}
27
- ._zbji7vkz >svg{height:1pc}
28
- ._zbjickbl >svg{height:3pc}
29
- ._zbjizwfg >svg{height:2pc}
30
- @media screen and (forced-colors:active){._18hbwc43 >svg{--icon-primary-color:Canvas}._4fyi1j28 >svg{--icon-secondary-color:transparent}._jcxd1r8n{filter:grayscale(1)}._gq0g1onz{--icon-primary-color:CanvasText}._1trkwc43{--icon-secondary-color:Canvas}}
@@ -1,83 +0,0 @@
1
- /* icon.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
- import "./icon.compiled.css";
5
- import * as React from 'react';
6
- import { ax, ix } from "@compiled/react/runtime";
7
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
8
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
9
- import { memo } from 'react';
10
-
11
- /**
12
- * We are hiding these props from consumers as they're used to
13
- * hack around icon sizing specifically for icon-file-type.
14
- */
15
-
16
- var iconStyles = null;
17
- var sizeStyles = {
18
- small: "_1bsb7vkz _4t3i7vkz _5fdi7vkz _zbji7vkz",
19
- medium: "_1bsb1tcg _4t3i1tcg _5fdi1tcg _zbji1tcg",
20
- large: "_1bsbzwfg _4t3izwfg _5fdizwfg _zbjizwfg",
21
- xlarge: "_1bsbckbl _4t3ickbl _5fdickbl _zbjickbl"
22
- };
23
-
24
- /**
25
- * For windows high contrast mode
26
- */
27
- var baseHcmStyles = null;
28
- var primaryEqualsSecondaryHcmStyles = null;
29
- var secondaryTransparentHcmStyles = null;
30
-
31
- /**
32
- * __Icon__
33
- *
34
- * @deprecated Custom Icon is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
35
- *
36
- * An icon is used as a visual representation of common actions and commands to provide context.
37
- *
38
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
39
- */
40
- export var Icon = /*#__PURE__*/memo(function Icon(props) {
41
- var _ref = props,
42
- Glyph = _ref.glyph,
43
- dangerouslySetGlyph = _ref.dangerouslySetGlyph,
44
- _ref$primaryColor = _ref.primaryColor,
45
- primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
46
- secondaryColor = _ref.secondaryColor,
47
- size = _ref.size,
48
- testId = _ref.testId,
49
- label = _ref.label,
50
- width = _ref.width,
51
- height = _ref.height,
52
- UNSAFE_margin = _ref.UNSAFE_margin;
53
- var glyphProps = dangerouslySetGlyph ? {
54
- dangerouslySetInnerHTML: {
55
- __html: dangerouslySetGlyph
56
- }
57
- } : {
58
- children: Glyph ? /*#__PURE__*/React.createElement(Glyph, {
59
- role: "presentation"
60
- }) : null
61
- };
62
- var customDimensions = width && height ? {
63
- width: width + 'px',
64
- height: height + 'px'
65
- } : null;
66
- return /*#__PURE__*/React.createElement("span", _extends({
67
- "data-testid": testId,
68
- "data-vc": "icon-".concat(testId),
69
- role: label ? 'img' : undefined,
70
- "aria-label": label ? label : undefined,
71
- "aria-hidden": label ? undefined : true,
72
- style: _objectSpread(_objectSpread({}, customDimensions), {}, {
73
- '--icon-primary-color': primaryColor,
74
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
75
- '--icon-secondary-color': secondaryColor,
76
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
77
- margin: UNSAFE_margin
78
- })
79
- }, glyphProps, {
80
- className: ax(["_1e0c1o8l _1o9zidpf _vyfuvuon _vwz4kb7n _1szv15vq _1tly15vq _rzyw1osq _17jb1osq _1ksvoz0e _3se1x1jp _re2rglyw _1veoyfq0 _1kg81r31", "_jcxd1r8n _gq0g1onz _1trkwc43", primaryColor === secondaryColor && "_18hbwc43", secondaryColor === 'transparent' && "_4fyi1j28", size && sizeStyles[size]])
81
- }));
82
- });
83
- export default Icon;
@@ -1,13 +0,0 @@
1
- ._18m915vq{overflow-y:hidden}
2
- ._1bsb1tcg{width:24px}
3
- ._1bsb7vkz{width:1pc}
4
- ._1bsbckbl{width:3pc}
5
- ._1bsbzwfg{width:2pc}
6
- ._1reo15vq{overflow-x:hidden}
7
- ._4t3i1tcg{height:24px}
8
- ._4t3i7vkz{height:1pc}
9
- ._4t3ickbl{height:3pc}
10
- ._4t3izwfg{height:2pc}
11
- ._lcxvglyw{pointer-events:none}
12
- ._lswuvuon{fill:var(--ds-surface,#fff)}
13
- ._vc881r31 stop{stop-color:currentColor}
@@ -1,48 +0,0 @@
1
- /* svg.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import "./svg.compiled.css";
3
- import * as React from 'react';
4
- import { ax, ix } from "@compiled/react/runtime";
5
- import { memo } from 'react';
6
- var sizeStyles = {
7
- small: "_1bsb7vkz _4t3i7vkz",
8
- medium: "_1bsb1tcg _4t3i1tcg",
9
- large: "_1bsbzwfg _4t3izwfg",
10
- xlarge: "_1bsbckbl _4t3ickbl"
11
- };
12
- var svgStyles = null;
13
-
14
- /**
15
- * __SVG__
16
- *
17
- * @deprecated Custom SVG is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
18
- *
19
- * An icon is used as a visual representation of common actions and commands to provide context.
20
- *
21
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
22
- */
23
- var SVG = /*#__PURE__*/memo(function SVG(_ref) {
24
- var _ref$size = _ref.size,
25
- size = _ref$size === void 0 ? 'medium' : _ref$size,
26
- label = _ref.label,
27
- _ref$primaryColor = _ref.primaryColor,
28
- primaryColor = _ref$primaryColor === void 0 ? 'currentColor' : _ref$primaryColor,
29
- secondaryColor = _ref.secondaryColor,
30
- testId = _ref.testId,
31
- children = _ref.children;
32
- return /*#__PURE__*/React.createElement("svg", {
33
- viewBox: "0 0 24 24",
34
- style: {
35
- color: primaryColor,
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
37
- fill: secondaryColor
38
- }
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
40
- ,
41
-
42
- "data-testid": testId,
43
- "aria-label": label || undefined,
44
- role: label ? 'img' : 'presentation',
45
- className: ax(["_1reo15vq _18m915vq _lswuvuon _lcxvglyw _vc881r31", sizeStyles[size]])
46
- }, children);
47
- });
48
- export default SVG;
@@ -1 +0,0 @@
1
- export { default, Icon } from '../components/icon';
@@ -1 +0,0 @@
1
- export { default } from '../components/svg';
@@ -1,12 +0,0 @@
1
- import type { IconProps } from '../types';
2
- /**
3
- * __Icon__
4
- *
5
- * @deprecated Custom Icon is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
6
- *
7
- * An icon is used as a visual representation of common actions and commands to provide context.
8
- *
9
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
10
- */
11
- export declare const Icon: import('react').NamedExoticComponent<IconProps>;
12
- export default Icon;
@@ -1,17 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type NamedExoticComponent } from 'react';
6
- import type { SVGProps } from '../types';
7
- /**
8
- * __SVG__
9
- *
10
- * @deprecated Custom SVG is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
11
- *
12
- * An icon is used as a visual representation of common actions and commands to provide context.
13
- *
14
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
15
- */
16
- declare const SVG: NamedExoticComponent<SVGProps>;
17
- export default SVG;
@@ -1,2 +0,0 @@
1
- export { default, Icon } from '../components/icon';
2
- export type { IconProps } from '../types';
@@ -1,2 +0,0 @@
1
- export { default } from '../components/svg';
2
- export type { SVGProps } from '../types';
@@ -1,12 +0,0 @@
1
- import type { IconProps } from '../types';
2
- /**
3
- * __Icon__
4
- *
5
- * @deprecated Custom Icon is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
6
- *
7
- * An icon is used as a visual representation of common actions and commands to provide context.
8
- *
9
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
10
- */
11
- export declare const Icon: import('react').NamedExoticComponent<IconProps>;
12
- export default Icon;
@@ -1,17 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type NamedExoticComponent } from 'react';
6
- import type { SVGProps } from '../types';
7
- /**
8
- * __SVG__
9
- *
10
- * @deprecated Custom SVG is deprecated and will be removed from `atlaskit/icon` in an upcoming major release. Please use either an existing icon from @atlaskit/icon or @atlaskit/icon-lab, or contributing to @atlaskit/icon-lab directly. For third party logos, use an SVG element along with a label.
11
- *
12
- * An icon is used as a visual representation of common actions and commands to provide context.
13
- *
14
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
15
- */
16
- declare const SVG: NamedExoticComponent<SVGProps>;
17
- export default SVG;
@@ -1,2 +0,0 @@
1
- export { default, Icon } from '../components/icon';
2
- export type { IconProps } from '../types';
@@ -1,2 +0,0 @@
1
- export { default } from '../components/svg';
2
- export type { SVGProps } from '../types';
package/svg/package.json DELETED
@@ -1,17 +0,0 @@
1
- {
2
- "name": "@atlaskit/icon/svg",
3
- "main": "../dist/cjs/entry-points/svg.js",
4
- "module": "../dist/esm/entry-points/svg.js",
5
- "module:es2019": "../dist/es2019/entry-points/svg.js",
6
- "sideEffects": [
7
- "**/*.compiled.css"
8
- ],
9
- "types": "../dist/types/entry-points/svg.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/entry-points/svg.d.ts"
14
- ]
15
- }
16
- }
17
- }