@atlaskit/eslint-plugin-design-system 15.0.0 → 15.1.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 15.1.1
+
+### Patch Changes
+
+- [`2b3eee14e8063`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b3eee14e8063) -
+  Update lozenge-badge-tag-labelling-system-migration ESLint rule and codemod for the new Lozenge
+  API.
+  - Lozenges no longer migrate to `<Tag>`. The `<Lozenge>` component stays as `<Lozenge>`.
+  - Legacy `appearance` values are now auto-fixed in-place to new semantic values: `default` →
+    `neutral`, `inprogress` → `information`, `moved` → `warning`, `removed` → `danger`, `new` →
+    `discovery`. The value `success` is unchanged.
+  - `isBold` is intentionally not flagged: while the feature flag
+    `platform-dst-lozenge-tag-badge-visual-uplifts` is OFF, users still need `isBold` to render
+    subtle Lozenges. It will be cleaned up in a separate pass after rollout.
+
+## 15.1.0
+
+### Minor Changes
+
+- [`c6fce4a43355c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6fce4a43355c) -
+  Add new `use-tokens-motion` ESLint rule to enforce the use of motion design tokens for durations
+  and easing values. This rule was moved from `@atlaskit/eslint-plugin-platform`
+  (`compiled/use-motion-token-values`) to the design-system plugin as a first-class rule.
+
 ## 15.0.0
 
 ### Major Changes

package/README.md

@@ -123,6 +123,7 @@ module.exports = {
 | <a href="./src/rules/use-spotlight-package/README.md">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |
 | <a href="./src/rules/use-tag-group-label/README.md">use-tag-group-label</a>                                                   | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |
 | <a href="./src/rules/use-textfield-autocomplete/README.md">use-textfield-autocomplete</a>                                     | Enforce that Textfield components with type="email", "tel", or "url" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose).                                                                                                                                              | Yes         | Yes     |             |
+| <a href="./src/rules/use-tokens-motion/README.md">use-tokens-motion</a>                                                       | Enforces usage of motion design tokens rather than hard-coded duration and easing values.                                                                                                                                                                                                                           |             |         | Yes         |
 | <a href="./src/rules/use-tokens-shape/README.md">use-tokens-shape</a>                                                         | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./src/rules/use-tokens-space/README.md">use-tokens-space</a>                                                         | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./src/rules/use-tokens-typography/README.md">use-tokens-typography</a>                                               | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            | Yes         | Yes     | Yes         |

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4cd2dfd73ed3cdd152ee6481087c49ee>>
+ * @codegen <<SignedSource::eb0cc6324a0dfa4a3a11b16ab0a6cd4f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -87,6 +87,7 @@ var rules = {
     '@atlaskit/design-system/use-spotlight-package': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
     '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
+    '@atlaskit/design-system/use-tokens-motion': 'warn',
     '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8efae2c2e169f84381b978b4bc47433d>>
+ * @codegen <<SignedSource::80cbd12c57061c4fb2660da2e808210f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -86,6 +86,7 @@ var rules = {
     '@atlaskit/design-system/use-spotlight-package': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
     '@atlaskit/design-system/use-textfield-autocomplete': 'warn',
+    '@atlaskit/design-system/use-tokens-motion': 'warn',
     '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',

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

@@ -79,13 +79,14 @@ var _useSimpleForm = _interopRequireDefault(require("./use-simple-form"));
 var _useSpotlightPackage = _interopRequireDefault(require("./use-spotlight-package"));
 var _useTagGroupLabel = _interopRequireDefault(require("./use-tag-group-label"));
 var _useTextfieldAutocomplete = _interopRequireDefault(require("./use-textfield-autocomplete"));
+var _useTokensMotion = _interopRequireDefault(require("./use-tokens-motion"));
 var _useTokensShape = _interopRequireDefault(require("./use-tokens-shape"));
 var _useTokensSpace = _interopRequireDefault(require("./use-tokens-space"));
 var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typography"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b90bcf0b2fb6429faae59c7a454e3260>>
+ * @codegen <<SignedSource::d404a0bd62a78d4bad7ee376df0bd475>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -164,6 +165,7 @@ var rules = exports.rules = {
   'use-spotlight-package': _useSpotlightPackage.default,
   'use-tag-group-label': _useTagGroupLabel.default,
   'use-textfield-autocomplete': _useTextfieldAutocomplete.default,
+  'use-tokens-motion': _useTokensMotion.default,
   'use-tokens-shape': _useTokensShape.default,
   'use-tokens-space': _useTokensSpace.default,
   'use-tokens-typography': _useTokensTypography.default,

package/dist/cjs/rules/lozenge-badge-tag-labelling-system-migration/index.js

@@ -22,9 +22,7 @@ var rule = (0, _createLintRule.createLintRule)({
     },
     messages: {
       updateAppearance: 'Update appearance value to new semantic value.',
-      migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component. For safe, staged rollout, use the `migration_fallback="lozenge"` prop which renders as Lozenge when the feature flag is off.',
-      manualReview: "Dynamic 'isBold' props require manual review before migration.",
-      dynamicLozengeAppearance: "Dynamic 'appearance' prop values require manual review before migrating to Tag. Please verify the appearance value and manually convert it to the appropriate color prop value.",
+      migrateTag: '<SimpleTag> and <RemovableTag> components should migrate to the new <Tag> or <AvatarTag> component.',
       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.'
     }
@@ -70,13 +68,6 @@ var rule = (0, _createLintRule.createLintRule)({
      */
     var newTagImports = {};
 
-    /**
-     * Check if a JSX attribute value is a literal false
-     */
-    function isLiteralFalse(node) {
-      return node && node.type === 'JSXExpressionContainer' && node.expression && node.expression.type === 'Literal' && node.expression.value === false;
-    }
-
     /**
      * Check if a JSX attribute value is dynamic (not a static literal value)
      * Can be used for any prop type (boolean, string, etc.)
@@ -113,37 +104,22 @@ var rule = (0, _createLintRule.createLintRule)({
     }
 
     /**
-     * Map old appearance values to new semantic appearance values
-     * Both Lozenge and Tag now use the same appearance prop with new semantic values
+     * Map old Lozenge appearance values to new semantic appearance values.
+     * The new Lozenge no longer uses legacy values — it uses semantic color names
+     * that align with the new labelling system.
      */
     function mapToNewAppearanceValue(oldValue) {
       var mapping = {
-        success: 'success',
-        default: 'default',
-        removed: 'removed',
-        inprogress: 'inprogress',
-        new: 'new',
-        moved: 'moved'
+        default: 'neutral',
+        inprogress: 'information',
+        moved: 'warning',
+        removed: 'danger',
+        new: 'discovery',
+        success: 'success'
       };
       return mapping[oldValue] || oldValue;
     }
 
-    /**
-     * Map Lozenge appearance values to Tag color values
-     * Used when migrating Lozenge to Tag component
-     */
-    function mapLozengeAppearanceToTagColor(appearanceValue) {
-      var mapping = {
-        success: 'lime',
-        default: 'gray',
-        removed: 'red',
-        inprogress: 'blue',
-        new: 'purple',
-        moved: 'yellow'
-      };
-      return mapping[appearanceValue] || appearanceValue;
-    }
-
     /**
      * Map Badge old appearance values to new semantic appearance values
      */
@@ -269,7 +245,7 @@ var rule = (0, _createLintRule.createLintRule)({
 
     /**
      * Generate the replacement JSX element text for Tag migration
-     * Handles both regular Tag and avatarTag migrations
+     * Handles both regular Tag and AvatarTag migrations for SimpleTag/RemovableTag.
      */
     function generateTagReplacement(node) {
       var _context$sourceCode;
@@ -288,20 +264,7 @@ var rule = (0, _createLintRule.createLintRule)({
             return;
           }
           if (attrName === 'appearance') {
-            // For Lozenge migrations, convert appearance to color prop
-            // For SimpleTag/RemovableTag migrations, delete appearance prop
-            if (options.isLozengeMigration) {
-              // Map Lozenge appearance value to Tag color value and change prop name from appearance to color
-              var stringValue = extractStringValue(attr.value);
-              if (stringValue && typeof stringValue === 'string') {
-                var mappedColor = mapLozengeAppearanceToTagColor(stringValue);
-                newAttributes.push("color=\"".concat(mappedColor, "\""));
-              }
-              // If we can't extract the string value (dynamic expression), skip it
-              // Dynamic expressions should be caught earlier and require manual review
-              // This code path shouldn't be reached, but we skip to be safe
-            }
-            // For SimpleTag/RemovableTag migrations, skip appearance prop (delete it)
+            // Delete appearance prop — not used in new Tag/AvatarTag API
             return;
           }
           if (attrName === 'color') {
@@ -310,10 +273,10 @@ var rule = (0, _createLintRule.createLintRule)({
             if (options.isAvatarTag) {
               return;
             }
-            var _stringValue = extractStringValue(attr.value);
-            if (_stringValue && typeof _stringValue === 'string') {
-              var _mappedColor = mapTagColorValue(_stringValue);
-              newAttributes.push("color=\"".concat(_mappedColor, "\""));
+            var stringValue = extractStringValue(attr.value);
+            if (stringValue && typeof stringValue === 'string') {
+              var mappedColor = mapTagColorValue(stringValue);
+              newAttributes.push("color=\"".concat(mappedColor, "\""));
             } else {
               // If we can't extract the string value, keep as-is
               var value = attr.value ? sourceCode.getText(attr.value) : '';
@@ -363,15 +326,10 @@ var rule = (0, _createLintRule.createLintRule)({
         }
       });
 
-      // Add isRemovable={false} for SimpleTag migrations and Lozenge migrations
-      if (options.isSimpleTag || options.isLozengeMigration) {
+      // Add isRemovable={false} for SimpleTag migrations
+      if (options.isSimpleTag) {
         newAttributes.push('isRemovable={false}');
       }
-
-      // Add migration_fallback="lozenge" for Lozenge migrations to enable safe staged rollout
-      if (options.isLozengeMigration) {
-        newAttributes.push('migration_fallback="lozenge"');
-      }
       var attributesText = newAttributes.length > 0 ? " ".concat(newAttributes.join(' ')) : '';
       var children = node.children.length > 0 ? sourceCode.getText().slice(node.openingElement.range[1], node.closingElement ? node.closingElement.range[0] : node.range[1]) : '';
       var componentName = options.preserveComponentName ? node.openingElement.name.name : options.isAvatarTag ? 'AvatarTag' : 'Tag';
@@ -642,77 +600,22 @@ var rule = (0, _createLintRule.createLintRule)({
         }
         var attributesMap = getAttributesMap(node.openingElement.attributes);
         var appearanceProp = attributesMap.appearance;
-        var isBoldProp = attributesMap.isBold;
 
-        // Handle appearance prop value migration
+        // Handle appearance prop value migration — always update to new semantic values.
+        // isBold is intentionally not flagged: users may still need it while the feature flag
+        // platform-dst-lozenge-tag-badge-visual-uplifts is OFF (subtle variant still rendered).
         if (appearanceProp) {
-          var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
-          if (!shouldMigrateToTag) {
-            // Only update appearance values for Lozenge components that stay as Lozenge
-            var _stringValue2 = extractStringValue(appearanceProp.value);
-            if (_stringValue2 && typeof _stringValue2 === 'string') {
-              var _mappedValue = mapToNewAppearanceValue(_stringValue2);
-              if (_mappedValue !== _stringValue2) {
-                context.report({
-                  node: appearanceProp,
-                  messageId: 'updateAppearance',
-                  fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
-                });
-              }
-            }
-          }
-        }
-
-        // Handle isBold prop and Tag migration
-        if (isBoldProp) {
-          if (isLiteralFalse(isBoldProp.value)) {
-            // isBold={false} should migrate to Tag
-            // Check if appearance is dynamic - if so, require manual review
-            if (appearanceProp && isDynamicExpression(appearanceProp.value)) {
+          var _stringValue = extractStringValue(appearanceProp.value);
+          if (_stringValue && typeof _stringValue === 'string') {
+            var _mappedValue = mapToNewAppearanceValue(_stringValue);
+            if (_mappedValue !== _stringValue) {
               context.report({
                 node: appearanceProp,
-                messageId: 'dynamicLozengeAppearance'
+                messageId: 'updateAppearance',
+                fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
               });
-              return;
             }
-            context.report({
-              node: node,
-              messageId: 'migrateTag',
-              fix: function fix(fixer) {
-                var replacement = generateTagReplacement(node, {
-                  isLozengeMigration: true
-                });
-                return fixer.replaceText(node, replacement);
-              }
-            });
-          } else if (isDynamicExpression(isBoldProp.value)) {
-            // Dynamic isBold requires manual review
-            context.report({
-              node: isBoldProp,
-              messageId: 'manualReview'
-            });
           }
-          // isBold={true} or isBold (implicit true) - no action needed
-        } else {
-          // No isBold prop means implicit false, should migrate to Tag
-          // Check if appearance is dynamic - if so, require manual review
-          if (appearanceProp && isDynamicExpression(appearanceProp.value)) {
-            context.report({
-              node: appearanceProp,
-              messageId: 'dynamicLozengeAppearance'
-            });
-            return;
-          }
-          context.report({
-            node: node,
-            messageId: 'migrateTag',
-            fix: function fix(fixer) {
-              var replacement = generateTagReplacement(node, {
-                isLozengeMigration: true
-              });
-              return fixer.replaceText(node, replacement);
-            }
-          });
         }
       }
     };