@atlaskit/eslint-plugin-design-system 13.25.0 → 13.26.0

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -15,7 +15,7 @@ const rules = {
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -14,7 +14,7 @@ const rules = {
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/es2019/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ff76b50abd06b99746997ad4f51a9178>>
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,7 +11,7 @@ const rules = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::07d2533eef1accad3c7ace7be7a8ea24>>
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -10,7 +10,7 @@ const rules = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::75f94fc6b6fa998eed54b610e41bb9b1>>
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,7 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
 import ensureProperXcssUsage from './ensure-proper-xcss-usage';
 import iconLabel from './icon-label';
-import lozengeAppearanceAndIsboldMigration from './lozenge-appearance-and-isbold-migration';
+import lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
 import noBannedImports from './no-banned-imports';
 import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -81,7 +81,7 @@ export const rules = {
   'ensure-icon-color': ensureIconColor,
   'ensure-proper-xcss-usage': ensureProperXcssUsage,
   'icon-label': iconLabel,
-  'lozenge-appearance-and-isbold-migration': lozengeAppearanceAndIsboldMigration,
+  'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
   'no-banned-imports': noBannedImports,
   'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,

package/dist/es2019/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js

@@ -2,18 +2,20 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 const rule = createLintRule({
   meta: {
-    name: 'lozenge-appearance-and-isbold-migration',
+    name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
     fixable: 'code',
     type: 'suggestion',
     docs: {
-      description: 'Helps migrate deprecated Lozenge usages to the new API or Tag component as part of the Labelling System Phase 1 migration.',
+      description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
       recommended: true,
       severity: 'warn'
     },
     messages: {
       updateAppearance: 'Update appearance value to new semantic value.',
       migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
-      manualReview: "Dynamic 'isBold' props require manual review before migration."
+      manualReview: "Dynamic 'isBold' props require manual review before migration.",
+      updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
+      dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
     }
   },
   create(context) {
@@ -22,6 +24,11 @@ const rule = createLintRule({
      */
     const lozengeImports = {}; // local name -> import source
 
+    /**
+     * Contains a map of imported Badge components.
+     */
+    const badgeImports = {}; // local name -> import source
+
     /**
      * Check if a JSX attribute value is a literal false
      */
@@ -30,14 +37,25 @@ const rule = createLintRule({
     }
 
     /**
-     * Check if a JSX attribute value is dynamic (not a literal boolean)
+     * Check if a JSX attribute value is dynamic (not a static literal value)
+     * Can be used for any prop type (boolean, string, etc.)
      */
     function isDynamicExpression(node) {
-      if (!node || node.type !== 'JSXExpressionContainer') {
+      if (!node) {
+        return false;
+      }
+
+      // If it's a plain literal (e.g., appearance="value"), it's not dynamic
+      if (node.type === 'Literal') {
         return false;
       }
-      const expr = node.expression;
-      return expr && !(expr.type === 'Literal' && typeof expr.value === 'boolean');
+
+      // If it's an expression container with a non-literal expression, it's dynamic
+      if (node.type === 'JSXExpressionContainer') {
+        const expr = node.expression;
+        return expr && expr.type !== 'Literal';
+      }
+      return false;
     }
 
     /**
@@ -70,6 +88,21 @@ const rule = createLintRule({
       return mapping[oldValue] || oldValue;
     }
 
+    /**
+     * Map Badge old appearance values to new semantic appearance values
+     */
+    function mapBadgeToNewAppearanceValue(oldValue) {
+      const mapping = {
+        added: 'success',
+        removed: 'danger',
+        default: 'neutral',
+        primary: 'information',
+        primaryInverted: 'inverse',
+        important: 'danger'
+      };
+      return mapping[oldValue] || oldValue;
+    }
+
     /**
      * Extract the string value from a JSX attribute value
      */
@@ -86,6 +119,25 @@ const rule = createLintRule({
       return null;
     }
 
+    /**
+     * Create a fixer function to replace an appearance prop value
+     * Handles both Literal and JSXExpressionContainer with Literal
+     */
+    function createAppearanceFixer(attrValue, newValue) {
+      return fixer => {
+        if (!attrValue) {
+          return null;
+        }
+        if (attrValue.type === 'Literal') {
+          return fixer.replaceText(attrValue, `"${newValue}"`);
+        }
+        if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
+          return fixer.replaceText(attrValue.expression, `"${newValue}"`);
+        }
+        return null;
+      };
+    }
+
     /**
      * Generate the replacement JSX element text
      */
@@ -147,6 +199,18 @@ const rule = createLintRule({
               }
             });
           }
+          // Track Badge imports
+          if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
+            node.specifiers.forEach(spec => {
+              if (spec.type === 'ImportDefaultSpecifier') {
+                badgeImports[spec.local.name] = moduleSource;
+              } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
+                if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
+                  badgeImports[spec.local.name] = moduleSource;
+                }
+              }
+            });
+          }
         }
       },
       JSXElement(node) {
@@ -158,6 +222,43 @@ const rule = createLintRule({
         }
         const elementName = node.openingElement.name.name;
 
+        // Handle Badge components
+        if (badgeImports[elementName]) {
+          // Find the appearance prop
+          const appearanceProp = node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance');
+          if (!appearanceProp || appearanceProp.type !== 'JSXAttribute') {
+            // No appearance prop or it's a spread attribute, nothing to migrate
+            return;
+          }
+
+          // Check if it's a dynamic expression
+          if (isDynamicExpression(appearanceProp.value)) {
+            context.report({
+              node: appearanceProp,
+              messageId: 'dynamicBadgeAppearance'
+            });
+            return;
+          }
+
+          // Extract the string value
+          const stringValue = extractStringValue(appearanceProp.value);
+          if (stringValue && typeof stringValue === 'string') {
+            const mappedValue = mapBadgeToNewAppearanceValue(stringValue);
+            if (mappedValue !== stringValue) {
+              context.report({
+                node: appearanceProp,
+                messageId: 'updateBadgeAppearance',
+                data: {
+                  oldValue: stringValue,
+                  newValue: mappedValue
+                },
+                fix: createAppearanceFixer(appearanceProp.value, mappedValue)
+              });
+            }
+          }
+          return;
+        }
+
         // Only process if this is a Lozenge component we've imported
         if (!lozengeImports[elementName]) {
           return;
@@ -178,14 +279,7 @@ const rule = createLintRule({
                 context.report({
                   node: appearanceProp,
                   messageId: 'updateAppearance',
-                  fix: fixer => {
-                    if (appearanceProp.value.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value, `"${mappedValue}"`);
-                    } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value.expression, `"${mappedValue}"`);
-                    }
-                    return null;
-                  }
+                  fix: createAppearanceFixer(appearanceProp.value, mappedValue)
                 });
               }
             }

package/dist/esm/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -15,7 +15,7 @@ var rules = {
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -14,7 +14,7 @@ var rules = {
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/esm/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ff76b50abd06b99746997ad4f51a9178>>
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,7 +11,7 @@ var rules = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::07d2533eef1accad3c7ace7be7a8ea24>>
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -10,7 +10,7 @@ var rules = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
-    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
+    '@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::75f94fc6b6fa998eed54b610e41bb9b1>>
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,7 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
 import ensureProperXcssUsage from './ensure-proper-xcss-usage';
 import iconLabel from './icon-label';
-import lozengeAppearanceAndIsboldMigration from './lozenge-appearance-and-isbold-migration';
+import lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
 import noBannedImports from './no-banned-imports';
 import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -81,7 +81,7 @@ export var rules = {
   'ensure-icon-color': ensureIconColor,
   'ensure-proper-xcss-usage': ensureProperXcssUsage,
   'icon-label': iconLabel,
-  'lozenge-appearance-and-isbold-migration': lozengeAppearanceAndIsboldMigration,
+  'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
   'no-banned-imports': noBannedImports,
   'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,

package/dist/esm/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js

@@ -2,18 +2,20 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 var rule = createLintRule({
   meta: {
-    name: 'lozenge-appearance-and-isbold-migration',
+    name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
     fixable: 'code',
     type: 'suggestion',
     docs: {
-      description: 'Helps migrate deprecated Lozenge usages to the new API or Tag component as part of the Labelling System Phase 1 migration.',
+      description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
       recommended: true,
       severity: 'warn'
     },
     messages: {
       updateAppearance: 'Update appearance value to new semantic value.',
       migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
-      manualReview: "Dynamic 'isBold' props require manual review before migration."
+      manualReview: "Dynamic 'isBold' props require manual review before migration.",
+      updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
+      dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
     }
   },
   create: function create(context) {
@@ -22,6 +24,11 @@ var rule = createLintRule({
      */
     var lozengeImports = {}; // local name -> import source
 
+    /**
+     * Contains a map of imported Badge components.
+     */
+    var badgeImports = {}; // local name -> import source
+
     /**
      * Check if a JSX attribute value is a literal false
      */
@@ -30,14 +37,25 @@ var rule = createLintRule({
     }
 
     /**
-     * Check if a JSX attribute value is dynamic (not a literal boolean)
+     * Check if a JSX attribute value is dynamic (not a static literal value)
+     * Can be used for any prop type (boolean, string, etc.)
      */
     function isDynamicExpression(node) {
-      if (!node || node.type !== 'JSXExpressionContainer') {
+      if (!node) {
+        return false;
+      }
+
+      // If it's a plain literal (e.g., appearance="value"), it's not dynamic
+      if (node.type === 'Literal') {
         return false;
       }
-      var expr = node.expression;
-      return expr && !(expr.type === 'Literal' && typeof expr.value === 'boolean');
+
+      // If it's an expression container with a non-literal expression, it's dynamic
+      if (node.type === 'JSXExpressionContainer') {
+        var expr = node.expression;
+        return expr && expr.type !== 'Literal';
+      }
+      return false;
     }
 
     /**
@@ -70,6 +88,21 @@ var rule = createLintRule({
       return mapping[oldValue] || oldValue;
     }
 
+    /**
+     * Map Badge old appearance values to new semantic appearance values
+     */
+    function mapBadgeToNewAppearanceValue(oldValue) {
+      var mapping = {
+        added: 'success',
+        removed: 'danger',
+        default: 'neutral',
+        primary: 'information',
+        primaryInverted: 'inverse',
+        important: 'danger'
+      };
+      return mapping[oldValue] || oldValue;
+    }
+
     /**
      * Extract the string value from a JSX attribute value
      */
@@ -86,6 +119,25 @@ var rule = createLintRule({
       return null;
     }
 
+    /**
+     * Create a fixer function to replace an appearance prop value
+     * Handles both Literal and JSXExpressionContainer with Literal
+     */
+    function createAppearanceFixer(attrValue, newValue) {
+      return function (fixer) {
+        if (!attrValue) {
+          return null;
+        }
+        if (attrValue.type === 'Literal') {
+          return fixer.replaceText(attrValue, "\"".concat(newValue, "\""));
+        }
+        if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
+          return fixer.replaceText(attrValue.expression, "\"".concat(newValue, "\""));
+        }
+        return null;
+      };
+    }
+
     /**
      * Generate the replacement JSX element text
      */
@@ -147,6 +199,18 @@ var rule = createLintRule({
               }
             });
           }
+          // Track Badge imports
+          if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
+            node.specifiers.forEach(function (spec) {
+              if (spec.type === 'ImportDefaultSpecifier') {
+                badgeImports[spec.local.name] = moduleSource;
+              } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
+                if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
+                  badgeImports[spec.local.name] = moduleSource;
+                }
+              }
+            });
+          }
         }
       },
       JSXElement: function JSXElement(node) {
@@ -158,6 +222,45 @@ var rule = createLintRule({
         }
         var elementName = node.openingElement.name.name;
 
+        // Handle Badge components
+        if (badgeImports[elementName]) {
+          // Find the appearance prop
+          var _appearanceProp = node.openingElement.attributes.find(function (attr) {
+            return attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance';
+          });
+          if (!_appearanceProp || _appearanceProp.type !== 'JSXAttribute') {
+            // No appearance prop or it's a spread attribute, nothing to migrate
+            return;
+          }
+
+          // Check if it's a dynamic expression
+          if (isDynamicExpression(_appearanceProp.value)) {
+            context.report({
+              node: _appearanceProp,
+              messageId: 'dynamicBadgeAppearance'
+            });
+            return;
+          }
+
+          // Extract the string value
+          var stringValue = extractStringValue(_appearanceProp.value);
+          if (stringValue && typeof stringValue === 'string') {
+            var mappedValue = mapBadgeToNewAppearanceValue(stringValue);
+            if (mappedValue !== stringValue) {
+              context.report({
+                node: _appearanceProp,
+                messageId: 'updateBadgeAppearance',
+                data: {
+                  oldValue: stringValue,
+                  newValue: mappedValue
+                },
+                fix: createAppearanceFixer(_appearanceProp.value, mappedValue)
+              });
+            }
+          }
+          return;
+        }
+
         // Only process if this is a Lozenge component we've imported
         if (!lozengeImports[elementName]) {
           return;
@@ -171,21 +274,14 @@ var rule = createLintRule({
           var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
           if (!shouldMigrateToTag) {
             // Only update appearance values for Lozenge components that stay as Lozenge
-            var stringValue = extractStringValue(appearanceProp.value);
-            if (stringValue && typeof stringValue === 'string') {
-              var mappedValue = mapToNewAppearanceValue(stringValue);
-              if (mappedValue !== stringValue) {
+            var _stringValue = extractStringValue(appearanceProp.value);
+            if (_stringValue && typeof _stringValue === 'string') {
+              var _mappedValue = mapToNewAppearanceValue(_stringValue);
+              if (_mappedValue !== _stringValue) {
                 context.report({
                   node: appearanceProp,
                   messageId: 'updateAppearance',
-                  fix: function fix(fixer) {
-                    if (appearanceProp.value.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
-                    } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
-                    }
-                    return null;
-                  }
+                  fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
                 });
               }
             }

package/dist/types/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/presets/recommended-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ff76b50abd06b99746997ad4f51a9178>>
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::07d2533eef1accad3c7ace7be7a8ea24>>
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/rules/index.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::75f94fc6b6fa998eed54b610e41bb9b1>>
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';