From 20bc6036c622949d1c687dcc296b89055a550b16 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Thu, 5 Feb 2026 12:07:40 -0500
Subject: [PATCH] [CL] fix no-bwi-class-usage eslint rule to allow helper
 classes (#18782)

The eslint rule now distinguishes between icon classes (bwi, bwi-lock, etc.)
and helper utility classes (bwi-fw, bwi-sm, bwi-lg, etc.) defined in the SCSS.
Helper classes like bwi-fw are legitimate utility classes that modify appearance
and can be used with bit-icon or other components without triggering warnings.

Updated the rule to maintain an allowlist of helper classes and only error when
actual icon classes are used directly.

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 libs/eslint/components/no-bwi-class-usage.mjs | 36 +++++++++++++---
 .../components/no-bwi-class-usage.spec.mjs    | 41 ++++++++++++++++++-
 2 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/libs/eslint/components/no-bwi-class-usage.mjs b/libs/eslint/components/no-bwi-class-usage.mjs
index 8260587ce45..6f856646a07 100644
--- a/libs/eslint/components/no-bwi-class-usage.mjs
+++ b/libs/eslint/components/no-bwi-class-usage.mjs
@@ -1,6 +1,21 @@
 export const errorMessage =
   "Use <bit-icon> component instead of applying 'bwi' classes directly. Example: <bit-icon name=\"bwi-lock\"></bit-icon>";
 
+// Helper classes from libs/angular/src/scss/bwicons/styles/style.scss
+// These are utility classes that can be used independently
+const ALLOWED_BWI_HELPER_CLASSES = new Set([
+  "bwi-fw", // Fixed width
+  "bwi-sm", // Small
+  "bwi-lg", // Large
+  "bwi-2x", // 2x size
+  "bwi-3x", // 3x size
+  "bwi-4x", // 4x size
+  "bwi-spin", // Spin animation
+  "bwi-ul", // List
+  "bwi-li", // List item
+  "bwi-rotate-270", // Rotation
+]);
+
 export default {
   meta: {
     type: "suggestion",
@@ -25,12 +40,23 @@ export default {
         for (const classAttr of classAttrs) {
           const classValue = classAttr.value || "";
 
-          // Check if the class value contains 'bwi' or 'bwi-'
-          // This handles both string literals and template expressions
-          const hasBwiClass =
-            typeof classValue === "string" && /\bbwi(?:-[\w-]+)?\b/.test(classValue);
+          if (typeof classValue !== "string") {
+            continue;
+          }
 
-          if (hasBwiClass) {
+          // Extract all bwi classes from the class string
+          const bwiClassMatches = classValue.match(/\bbwi(?:-[\w-]+)?\b/g);
+
+          if (!bwiClassMatches) {
+            continue;
+          }
+
+          // Check if any bwi class is NOT in the allowed helper classes list
+          const hasDisallowedBwiClass = bwiClassMatches.some(
+            (cls) => !ALLOWED_BWI_HELPER_CLASSES.has(cls),
+          );
+
+          if (hasDisallowedBwiClass) {
             context.report({
               node,
               message: errorMessage,
diff --git a/libs/eslint/components/no-bwi-class-usage.spec.mjs b/libs/eslint/components/no-bwi-class-usage.spec.mjs
index abb5ebe3b29..768081ac966 100644
--- a/libs/eslint/components/no-bwi-class-usage.spec.mjs
+++ b/libs/eslint/components/no-bwi-class-usage.spec.mjs
@@ -14,10 +14,42 @@ ruleTester.run("no-bwi-class-usage", rule.default, {
       name: "should allow bit-icon component usage",
       code: `<bit-icon icon="bwi-lock"></bit-icon>`,
     },
+    {
+      name: "should allow bit-icon with bwi-fw helper class",
+      code: `<bit-icon icon="bwi-lock" class="bwi-fw"></bit-icon>`,
+    },
+    {
+      name: "should allow bit-icon with name attribute and bwi-fw helper class",
+      code: `<bit-icon name="bwi-angle-down" class="bwi-fw"/>`,
+    },
     {
       name: "should allow elements without bwi classes",
       code: `<div class="tw-flex tw-p-4"></div>`,
     },
+    {
+      name: "should allow bwi-fw helper class alone",
+      code: `<i class="bwi-fw"></i>`,
+    },
+    {
+      name: "should allow bwi-sm helper class",
+      code: `<i class="bwi-sm"></i>`,
+    },
+    {
+      name: "should allow multiple helper classes together",
+      code: `<i class="bwi-fw bwi-sm"></i>`,
+    },
+    {
+      name: "should allow helper classes with other non-bwi classes",
+      code: `<i class="tw-flex bwi-fw bwi-lg tw-p-2"></i>`,
+    },
+    {
+      name: "should allow bwi-spin helper class",
+      code: `<i class="bwi-spin"></i>`,
+    },
+    {
+      name: "should allow bwi-rotate-270 helper class",
+      code: `<i class="bwi-rotate-270"></i>`,
+    },
   ],
   invalid: [
     {
@@ -31,14 +63,19 @@ ruleTester.run("no-bwi-class-usage", rule.default, {
       errors: [{ message: errorMessage }],
     },
     {
-      name: "should error on single bwi-* class",
+      name: "should error on single bwi-* icon class",
       code: `<i class="bwi-lock"></i>`,
       errors: [{ message: errorMessage }],
     },
     {
-      name: "should error on bwi-fw modifier",
+      name: "should error on icon classes even with helper classes",
       code: `<i class="bwi bwi-lock bwi-fw"></i>`,
       errors: [{ message: errorMessage }],
     },
+    {
+      name: "should error on base bwi class alone",
+      code: `<i class="bwi"></i>`,
+      errors: [{ message: errorMessage }],
+    },
   ],
 });