@atlaskit/eslint-plugin-design-system 13.24.2 → 13.26.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 (36) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +71 -71
  3. package/dist/cjs/presets/all-flat.codegen.js +2 -2
  4. package/dist/cjs/presets/all.codegen.js +2 -2
  5. package/dist/cjs/presets/recommended-flat.codegen.js +2 -2
  6. package/dist/cjs/presets/recommended.codegen.js +2 -2
  7. package/dist/cjs/rules/index.codegen.js +3 -3
  8. package/dist/cjs/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +115 -19
  9. package/dist/cjs/rules/use-tokens-shape/transformers/style-map.js +4 -1
  10. package/dist/es2019/presets/all-flat.codegen.js +2 -2
  11. package/dist/es2019/presets/all.codegen.js +2 -2
  12. package/dist/es2019/presets/recommended-flat.codegen.js +2 -2
  13. package/dist/es2019/presets/recommended.codegen.js +2 -2
  14. package/dist/es2019/rules/index.codegen.js +3 -3
  15. package/dist/es2019/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +109 -15
  16. package/dist/es2019/rules/use-tokens-shape/transformers/style-map.js +4 -1
  17. package/dist/esm/presets/all-flat.codegen.js +2 -2
  18. package/dist/esm/presets/all.codegen.js +2 -2
  19. package/dist/esm/presets/recommended-flat.codegen.js +2 -2
  20. package/dist/esm/presets/recommended.codegen.js +2 -2
  21. package/dist/esm/rules/index.codegen.js +3 -3
  22. package/dist/esm/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +115 -19
  23. package/dist/esm/rules/use-tokens-shape/transformers/style-map.js +4 -1
  24. package/dist/types/presets/all-flat.codegen.d.ts +1 -1
  25. package/dist/types/presets/all.codegen.d.ts +1 -1
  26. package/dist/types/presets/recommended-flat.codegen.d.ts +1 -1
  27. package/dist/types/presets/recommended.codegen.d.ts +1 -1
  28. package/dist/types/rules/index.codegen.d.ts +1 -1
  29. package/dist/types-ts4.5/presets/all-flat.codegen.d.ts +1 -1
  30. package/dist/types-ts4.5/presets/all.codegen.d.ts +1 -1
  31. package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts +1 -1
  32. package/dist/types-ts4.5/presets/recommended.codegen.d.ts +1 -1
  33. package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -1
  34. package/package.json +3 -3
  35. /package/dist/types/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.d.ts +0 -0
  36. /package/dist/types-ts4.5/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.d.ts +0 -0
@@ -8,18 +8,20 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
8
8
  var _createRule = require("../utils/create-rule");
9
9
  var rule = (0, _createRule.createLintRule)({
10
10
  meta: {
11
- name: 'lozenge-appearance-and-isbold-migration',
11
+ name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
12
12
  fixable: 'code',
13
13
  type: 'suggestion',
14
14
  docs: {
15
- description: 'Helps migrate deprecated Lozenge usages to the new API or Tag component as part of the Labelling System Phase 1 migration.',
15
+ description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
16
16
  recommended: true,
17
17
  severity: 'warn'
18
18
  },
19
19
  messages: {
20
20
  updateAppearance: 'Update appearance value to new semantic value.',
21
21
  migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
22
- manualReview: "Dynamic 'isBold' props require manual review before migration."
22
+ manualReview: "Dynamic 'isBold' props require manual review before migration.",
23
+ updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
24
+ dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
23
25
  }
24
26
  },
25
27
  create: function create(context) {
@@ -28,6 +30,11 @@ var rule = (0, _createRule.createLintRule)({
28
30
  */
29
31
  var lozengeImports = {}; // local name -> import source
30
32
 
33
+ /**
34
+ * Contains a map of imported Badge components.
35
+ */
36
+ var badgeImports = {}; // local name -> import source
37
+
31
38
  /**
32
39
  * Check if a JSX attribute value is a literal false
33
40
  */
@@ -36,14 +43,25 @@ var rule = (0, _createRule.createLintRule)({
36
43
  }
37
44
 
38
45
  /**
39
- * Check if a JSX attribute value is dynamic (not a literal boolean)
46
+ * Check if a JSX attribute value is dynamic (not a static literal value)
47
+ * Can be used for any prop type (boolean, string, etc.)
40
48
  */
41
49
  function isDynamicExpression(node) {
42
- if (!node || node.type !== 'JSXExpressionContainer') {
50
+ if (!node) {
51
+ return false;
52
+ }
53
+
54
+ // If it's a plain literal (e.g., appearance="value"), it's not dynamic
55
+ if (node.type === 'Literal') {
43
56
  return false;
44
57
  }
45
- var expr = node.expression;
46
- return expr && !(expr.type === 'Literal' && typeof expr.value === 'boolean');
58
+
59
+ // If it's an expression container with a non-literal expression, it's dynamic
60
+ if (node.type === 'JSXExpressionContainer') {
61
+ var expr = node.expression;
62
+ return expr && expr.type !== 'Literal';
63
+ }
64
+ return false;
47
65
  }
48
66
 
49
67
  /**
@@ -76,6 +94,21 @@ var rule = (0, _createRule.createLintRule)({
76
94
  return mapping[oldValue] || oldValue;
77
95
  }
78
96
 
97
+ /**
98
+ * Map Badge old appearance values to new semantic appearance values
99
+ */
100
+ function mapBadgeToNewAppearanceValue(oldValue) {
101
+ var mapping = {
102
+ added: 'success',
103
+ removed: 'danger',
104
+ default: 'neutral',
105
+ primary: 'information',
106
+ primaryInverted: 'inverse',
107
+ important: 'danger'
108
+ };
109
+ return mapping[oldValue] || oldValue;
110
+ }
111
+
79
112
  /**
80
113
  * Extract the string value from a JSX attribute value
81
114
  */
@@ -92,6 +125,25 @@ var rule = (0, _createRule.createLintRule)({
92
125
  return null;
93
126
  }
94
127
 
128
+ /**
129
+ * Create a fixer function to replace an appearance prop value
130
+ * Handles both Literal and JSXExpressionContainer with Literal
131
+ */
132
+ function createAppearanceFixer(attrValue, newValue) {
133
+ return function (fixer) {
134
+ if (!attrValue) {
135
+ return null;
136
+ }
137
+ if (attrValue.type === 'Literal') {
138
+ return fixer.replaceText(attrValue, "\"".concat(newValue, "\""));
139
+ }
140
+ if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
141
+ return fixer.replaceText(attrValue.expression, "\"".concat(newValue, "\""));
142
+ }
143
+ return null;
144
+ };
145
+ }
146
+
95
147
  /**
96
148
  * Generate the replacement JSX element text
97
149
  */
@@ -153,6 +205,18 @@ var rule = (0, _createRule.createLintRule)({
153
205
  }
154
206
  });
155
207
  }
208
+ // Track Badge imports
209
+ if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
210
+ node.specifiers.forEach(function (spec) {
211
+ if (spec.type === 'ImportDefaultSpecifier') {
212
+ badgeImports[spec.local.name] = moduleSource;
213
+ } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
214
+ if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
215
+ badgeImports[spec.local.name] = moduleSource;
216
+ }
217
+ }
218
+ });
219
+ }
156
220
  }
157
221
  },
158
222
  JSXElement: function JSXElement(node) {
@@ -164,6 +228,45 @@ var rule = (0, _createRule.createLintRule)({
164
228
  }
165
229
  var elementName = node.openingElement.name.name;
166
230
 
231
+ // Handle Badge components
232
+ if (badgeImports[elementName]) {
233
+ // Find the appearance prop
234
+ var _appearanceProp = node.openingElement.attributes.find(function (attr) {
235
+ return attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance';
236
+ });
237
+ if (!_appearanceProp || _appearanceProp.type !== 'JSXAttribute') {
238
+ // No appearance prop or it's a spread attribute, nothing to migrate
239
+ return;
240
+ }
241
+
242
+ // Check if it's a dynamic expression
243
+ if (isDynamicExpression(_appearanceProp.value)) {
244
+ context.report({
245
+ node: _appearanceProp,
246
+ messageId: 'dynamicBadgeAppearance'
247
+ });
248
+ return;
249
+ }
250
+
251
+ // Extract the string value
252
+ var stringValue = extractStringValue(_appearanceProp.value);
253
+ if (stringValue && typeof stringValue === 'string') {
254
+ var mappedValue = mapBadgeToNewAppearanceValue(stringValue);
255
+ if (mappedValue !== stringValue) {
256
+ context.report({
257
+ node: _appearanceProp,
258
+ messageId: 'updateBadgeAppearance',
259
+ data: {
260
+ oldValue: stringValue,
261
+ newValue: mappedValue
262
+ },
263
+ fix: createAppearanceFixer(_appearanceProp.value, mappedValue)
264
+ });
265
+ }
266
+ }
267
+ return;
268
+ }
269
+
167
270
  // Only process if this is a Lozenge component we've imported
168
271
  if (!lozengeImports[elementName]) {
169
272
  return;
@@ -177,21 +280,14 @@ var rule = (0, _createRule.createLintRule)({
177
280
  var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
178
281
  if (!shouldMigrateToTag) {
179
282
  // Only update appearance values for Lozenge components that stay as Lozenge
180
- var stringValue = extractStringValue(appearanceProp.value);
181
- if (stringValue && typeof stringValue === 'string') {
182
- var mappedValue = mapToNewAppearanceValue(stringValue);
183
- if (mappedValue !== stringValue) {
283
+ var _stringValue = extractStringValue(appearanceProp.value);
284
+ if (_stringValue && typeof _stringValue === 'string') {
285
+ var _mappedValue = mapToNewAppearanceValue(_stringValue);
286
+ if (_mappedValue !== _stringValue) {
184
287
  context.report({
185
288
  node: appearanceProp,
186
289
  messageId: 'updateAppearance',
187
- fix: function fix(fixer) {
188
- if (appearanceProp.value.type === 'Literal') {
189
- return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
190
- } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
191
- return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
192
- }
193
- return null;
194
- }
290
+ fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
195
291
  });
196
292
  }
197
293
  }
@@ -11,6 +11,7 @@ var radiusTokenMap = {
11
11
  '6px': 'radius.medium',
12
12
  '8px': 'radius.large',
13
13
  '12px': 'radius.xlarge',
14
+ '16px': 'radius.xxlarge',
14
15
  '50%': 'radius.full',
15
16
  '100%': 'radius.full',
16
17
  2: 'radius.xsmall',
@@ -19,11 +20,13 @@ var radiusTokenMap = {
19
20
  6: 'radius.medium',
20
21
  8: 'radius.large',
21
22
  12: 'radius.xlarge',
23
+ 16: 'radius.xxlarge',
22
24
  '0.125rem': 'radius.xsmall',
23
25
  '0.25rem': 'radius.small',
24
26
  '0.375rem': 'radius.medium',
25
27
  '0.5rem': 'radius.large',
26
- '0.75rem': 'radius.xlarge'
28
+ '0.75rem': 'radius.xlarge',
29
+ '1rem': 'radius.xxlarge'
27
30
  };
28
31
  var borderWidthTokenMap = {
29
32
  '1px': 'border.width'
@@ -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::7fae089db9d7d7153fea58c673bd56af>>
3
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -15,7 +15,7 @@ const rules = {
15
15
  '@atlaskit/design-system/ensure-icon-color': 'error',
16
16
  '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
17
17
  '@atlaskit/design-system/icon-label': 'warn',
18
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
18
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
19
19
  '@atlaskit/design-system/no-banned-imports': 'error',
20
20
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
21
21
  '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
@@ -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::655d7f24171da0dff60003d0f235e48a>>
3
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -14,7 +14,7 @@ const rules = {
14
14
  '@atlaskit/design-system/ensure-icon-color': 'error',
15
15
  '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
16
16
  '@atlaskit/design-system/icon-label': 'warn',
17
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
17
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
18
18
  '@atlaskit/design-system/no-banned-imports': 'error',
19
19
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
20
20
  '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
3
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -11,7 +11,7 @@ const rules = {
11
11
  '@atlaskit/design-system/consistent-css-prop-usage': 'error',
12
12
  '@atlaskit/design-system/ensure-design-token-usage': 'error',
13
13
  '@atlaskit/design-system/icon-label': 'warn',
14
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
14
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
15
15
  '@atlaskit/design-system/no-banned-imports': 'error',
16
16
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
17
17
  '@atlaskit/design-system/no-deprecated-apis': 'error',
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
3
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -10,7 +10,7 @@ const rules = {
10
10
  '@atlaskit/design-system/consistent-css-prop-usage': 'error',
11
11
  '@atlaskit/design-system/ensure-design-token-usage': 'error',
12
12
  '@atlaskit/design-system/icon-label': 'warn',
13
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
13
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
14
14
  '@atlaskit/design-system/no-banned-imports': 'error',
15
15
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
16
16
  '@atlaskit/design-system/no-deprecated-apis': 'error',
@@ -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::75f94fc6b6fa998eed54b610e41bb9b1>>
3
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -11,7 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
11
11
  import ensureIconColor from './ensure-icon-color';
12
12
  import ensureProperXcssUsage from './ensure-proper-xcss-usage';
13
13
  import iconLabel from './icon-label';
14
- import lozengeAppearanceAndIsboldMigration from './lozenge-appearance-and-isbold-migration';
14
+ import lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
15
15
  import noBannedImports from './no-banned-imports';
16
16
  import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
17
17
  import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -81,7 +81,7 @@ export const rules = {
81
81
  'ensure-icon-color': ensureIconColor,
82
82
  'ensure-proper-xcss-usage': ensureProperXcssUsage,
83
83
  'icon-label': iconLabel,
84
- 'lozenge-appearance-and-isbold-migration': lozengeAppearanceAndIsboldMigration,
84
+ 'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
85
85
  'no-banned-imports': noBannedImports,
86
86
  'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
87
87
  'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
@@ -2,18 +2,20 @@ import { isNodeOfType } from 'eslint-codemod-utils';
2
2
  import { createLintRule } from '../utils/create-rule';
3
3
  const rule = createLintRule({
4
4
  meta: {
5
- name: 'lozenge-appearance-and-isbold-migration',
5
+ name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
6
6
  fixable: 'code',
7
7
  type: 'suggestion',
8
8
  docs: {
9
- description: 'Helps migrate deprecated Lozenge usages to the new API or Tag component as part of the Labelling System Phase 1 migration.',
9
+ description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
10
10
  recommended: true,
11
11
  severity: 'warn'
12
12
  },
13
13
  messages: {
14
14
  updateAppearance: 'Update appearance value to new semantic value.',
15
15
  migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
16
- manualReview: "Dynamic 'isBold' props require manual review before migration."
16
+ manualReview: "Dynamic 'isBold' props require manual review before migration.",
17
+ updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
18
+ dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
17
19
  }
18
20
  },
19
21
  create(context) {
@@ -22,6 +24,11 @@ const rule = createLintRule({
22
24
  */
23
25
  const lozengeImports = {}; // local name -> import source
24
26
 
27
+ /**
28
+ * Contains a map of imported Badge components.
29
+ */
30
+ const badgeImports = {}; // local name -> import source
31
+
25
32
  /**
26
33
  * Check if a JSX attribute value is a literal false
27
34
  */
@@ -30,14 +37,25 @@ const rule = createLintRule({
30
37
  }
31
38
 
32
39
  /**
33
- * Check if a JSX attribute value is dynamic (not a literal boolean)
40
+ * Check if a JSX attribute value is dynamic (not a static literal value)
41
+ * Can be used for any prop type (boolean, string, etc.)
34
42
  */
35
43
  function isDynamicExpression(node) {
36
- if (!node || node.type !== 'JSXExpressionContainer') {
44
+ if (!node) {
45
+ return false;
46
+ }
47
+
48
+ // If it's a plain literal (e.g., appearance="value"), it's not dynamic
49
+ if (node.type === 'Literal') {
37
50
  return false;
38
51
  }
39
- const expr = node.expression;
40
- return expr && !(expr.type === 'Literal' && typeof expr.value === 'boolean');
52
+
53
+ // If it's an expression container with a non-literal expression, it's dynamic
54
+ if (node.type === 'JSXExpressionContainer') {
55
+ const expr = node.expression;
56
+ return expr && expr.type !== 'Literal';
57
+ }
58
+ return false;
41
59
  }
42
60
 
43
61
  /**
@@ -70,6 +88,21 @@ const rule = createLintRule({
70
88
  return mapping[oldValue] || oldValue;
71
89
  }
72
90
 
91
+ /**
92
+ * Map Badge old appearance values to new semantic appearance values
93
+ */
94
+ function mapBadgeToNewAppearanceValue(oldValue) {
95
+ const mapping = {
96
+ added: 'success',
97
+ removed: 'danger',
98
+ default: 'neutral',
99
+ primary: 'information',
100
+ primaryInverted: 'inverse',
101
+ important: 'danger'
102
+ };
103
+ return mapping[oldValue] || oldValue;
104
+ }
105
+
73
106
  /**
74
107
  * Extract the string value from a JSX attribute value
75
108
  */
@@ -86,6 +119,25 @@ const rule = createLintRule({
86
119
  return null;
87
120
  }
88
121
 
122
+ /**
123
+ * Create a fixer function to replace an appearance prop value
124
+ * Handles both Literal and JSXExpressionContainer with Literal
125
+ */
126
+ function createAppearanceFixer(attrValue, newValue) {
127
+ return fixer => {
128
+ if (!attrValue) {
129
+ return null;
130
+ }
131
+ if (attrValue.type === 'Literal') {
132
+ return fixer.replaceText(attrValue, `"${newValue}"`);
133
+ }
134
+ if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
135
+ return fixer.replaceText(attrValue.expression, `"${newValue}"`);
136
+ }
137
+ return null;
138
+ };
139
+ }
140
+
89
141
  /**
90
142
  * Generate the replacement JSX element text
91
143
  */
@@ -147,6 +199,18 @@ const rule = createLintRule({
147
199
  }
148
200
  });
149
201
  }
202
+ // Track Badge imports
203
+ if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
204
+ node.specifiers.forEach(spec => {
205
+ if (spec.type === 'ImportDefaultSpecifier') {
206
+ badgeImports[spec.local.name] = moduleSource;
207
+ } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
208
+ if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
209
+ badgeImports[spec.local.name] = moduleSource;
210
+ }
211
+ }
212
+ });
213
+ }
150
214
  }
151
215
  },
152
216
  JSXElement(node) {
@@ -158,6 +222,43 @@ const rule = createLintRule({
158
222
  }
159
223
  const elementName = node.openingElement.name.name;
160
224
 
225
+ // Handle Badge components
226
+ if (badgeImports[elementName]) {
227
+ // Find the appearance prop
228
+ const appearanceProp = node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance');
229
+ if (!appearanceProp || appearanceProp.type !== 'JSXAttribute') {
230
+ // No appearance prop or it's a spread attribute, nothing to migrate
231
+ return;
232
+ }
233
+
234
+ // Check if it's a dynamic expression
235
+ if (isDynamicExpression(appearanceProp.value)) {
236
+ context.report({
237
+ node: appearanceProp,
238
+ messageId: 'dynamicBadgeAppearance'
239
+ });
240
+ return;
241
+ }
242
+
243
+ // Extract the string value
244
+ const stringValue = extractStringValue(appearanceProp.value);
245
+ if (stringValue && typeof stringValue === 'string') {
246
+ const mappedValue = mapBadgeToNewAppearanceValue(stringValue);
247
+ if (mappedValue !== stringValue) {
248
+ context.report({
249
+ node: appearanceProp,
250
+ messageId: 'updateBadgeAppearance',
251
+ data: {
252
+ oldValue: stringValue,
253
+ newValue: mappedValue
254
+ },
255
+ fix: createAppearanceFixer(appearanceProp.value, mappedValue)
256
+ });
257
+ }
258
+ }
259
+ return;
260
+ }
261
+
161
262
  // Only process if this is a Lozenge component we've imported
162
263
  if (!lozengeImports[elementName]) {
163
264
  return;
@@ -178,14 +279,7 @@ const rule = createLintRule({
178
279
  context.report({
179
280
  node: appearanceProp,
180
281
  messageId: 'updateAppearance',
181
- fix: fixer => {
182
- if (appearanceProp.value.type === 'Literal') {
183
- return fixer.replaceText(appearanceProp.value, `"${mappedValue}"`);
184
- } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
185
- return fixer.replaceText(appearanceProp.value.expression, `"${mappedValue}"`);
186
- }
187
- return null;
188
- }
282
+ fix: createAppearanceFixer(appearanceProp.value, mappedValue)
189
283
  });
190
284
  }
191
285
  }
@@ -5,6 +5,7 @@ const radiusTokenMap = {
5
5
  '6px': 'radius.medium',
6
6
  '8px': 'radius.large',
7
7
  '12px': 'radius.xlarge',
8
+ '16px': 'radius.xxlarge',
8
9
  '50%': 'radius.full',
9
10
  '100%': 'radius.full',
10
11
  2: 'radius.xsmall',
@@ -13,11 +14,13 @@ const radiusTokenMap = {
13
14
  6: 'radius.medium',
14
15
  8: 'radius.large',
15
16
  12: 'radius.xlarge',
17
+ 16: 'radius.xxlarge',
16
18
  '0.125rem': 'radius.xsmall',
17
19
  '0.25rem': 'radius.small',
18
20
  '0.375rem': 'radius.medium',
19
21
  '0.5rem': 'radius.large',
20
- '0.75rem': 'radius.xlarge'
22
+ '0.75rem': 'radius.xlarge',
23
+ '1rem': 'radius.xxlarge'
21
24
  };
22
25
  const borderWidthTokenMap = {
23
26
  '1px': 'border.width'
@@ -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::7fae089db9d7d7153fea58c673bd56af>>
3
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -15,7 +15,7 @@ var rules = {
15
15
  '@atlaskit/design-system/ensure-icon-color': 'error',
16
16
  '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
17
17
  '@atlaskit/design-system/icon-label': 'warn',
18
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
18
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
19
19
  '@atlaskit/design-system/no-banned-imports': 'error',
20
20
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
21
21
  '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
@@ -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::655d7f24171da0dff60003d0f235e48a>>
3
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -14,7 +14,7 @@ var rules = {
14
14
  '@atlaskit/design-system/ensure-icon-color': 'error',
15
15
  '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
16
16
  '@atlaskit/design-system/icon-label': 'warn',
17
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
17
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
18
18
  '@atlaskit/design-system/no-banned-imports': 'error',
19
19
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
20
20
  '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
3
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -11,7 +11,7 @@ var rules = {
11
11
  '@atlaskit/design-system/consistent-css-prop-usage': 'error',
12
12
  '@atlaskit/design-system/ensure-design-token-usage': 'error',
13
13
  '@atlaskit/design-system/icon-label': 'warn',
14
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
14
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
15
15
  '@atlaskit/design-system/no-banned-imports': 'error',
16
16
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
17
17
  '@atlaskit/design-system/no-deprecated-apis': 'error',
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
3
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -10,7 +10,7 @@ var rules = {
10
10
  '@atlaskit/design-system/consistent-css-prop-usage': 'error',
11
11
  '@atlaskit/design-system/ensure-design-token-usage': 'error',
12
12
  '@atlaskit/design-system/icon-label': 'warn',
13
- '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
13
+ '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
14
14
  '@atlaskit/design-system/no-banned-imports': 'error',
15
15
  '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
16
16
  '@atlaskit/design-system/no-deprecated-apis': 'error',
@@ -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::75f94fc6b6fa998eed54b610e41bb9b1>>
3
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
4
4
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
5
5
  */
6
6
 
@@ -11,7 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
11
11
  import ensureIconColor from './ensure-icon-color';
12
12
  import ensureProperXcssUsage from './ensure-proper-xcss-usage';
13
13
  import iconLabel from './icon-label';
14
- import lozengeAppearanceAndIsboldMigration from './lozenge-appearance-and-isbold-migration';
14
+ import lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
15
15
  import noBannedImports from './no-banned-imports';
16
16
  import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
17
17
  import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -81,7 +81,7 @@ export var rules = {
81
81
  'ensure-icon-color': ensureIconColor,
82
82
  'ensure-proper-xcss-usage': ensureProperXcssUsage,
83
83
  'icon-label': iconLabel,
84
- 'lozenge-appearance-and-isbold-migration': lozengeAppearanceAndIsboldMigration,
84
+ 'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
85
85
  'no-banned-imports': noBannedImports,
86
86
  'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
87
87
  'no-css-tagged-template-expression': noCssTaggedTemplateExpression,