@salesforce-ux/eslint-plugin-slds 0.0.5 → 0.0.7

package/build/.eslintrc.yml

@@ -0,0 +1,22 @@
+root: true
+env:
+  es2021: true
+  node: true
+parser: "@html-eslint/parser" # ✅ Ensure we are using the correct parser
+parserOptions:
+  ecmaVersion: 2021
+  sourceType: module
+ignorePatterns:
+  - "node_modules/"
+overrides:
+  - files:
+      - "*.html"
+      - "*.cmp"
+    parser: "@html-eslint/parser" # ✅ Enforce HTML parser only for these files
+    plugins:
+      - "@html-eslint"
+      - "@salesforce-ux/slds"
+    rules:
+      "@salesforce-ux/slds/no-bem-class": "error"
+      "@salesforce-ux/slds/no-deprecated-slds-classes": "error"
+      "@salesforce-ux/slds/modal-close-button-issue": "error"

package/build/index.js

@@ -3592,6 +3592,171 @@ function requireNoDeprecatedSldsClasses () {
 	return noDeprecatedSldsClasses;
 }
 
+var modalCloseButtonIssue;
+var hasRequiredModalCloseButtonIssue;
+
+function requireModalCloseButtonIssue () {
+	if (hasRequiredModalCloseButtonIssue) return modalCloseButtonIssue;
+	hasRequiredModalCloseButtonIssue = 1;
+	const { findAttr, isAttributesEmpty } = requireNode();
+
+	// This rule specific to CVS, find more details here https://issues.salesforce.com/issue/a028c00000zh1iqAAA/modal-close-button-is-not-visible-with-the-new-white-background-after-winter-25-release
+	modalCloseButtonIssue = {
+	  meta: {
+	    type: "problem",
+	    docs: {
+	      description:
+	        "Ensure SLDS modal compliance by enforcing correct button and icon attributes.",
+	      category: "Best Practices",
+	      recommended: true,
+	    },
+	    fixable: "code",
+	    schema: [],
+	    messages: {
+	      removeClass:
+	        "Remove the class 'slds-button_icon-inverse' from SLDS Modal blueprints.",
+	      changeVariant:
+	        "Change 'variant' attribute from 'bare-inverse' to 'bare' in <lightning-button-icon> or <lightning-icon>.",
+	      removeVariant:
+	        "Remove 'variant' attribute completely in <lightning-icon> inside <button>.",
+	      ensureButtonClasses:
+	        "Ensure 'slds-button' and 'slds-button_icon' are in the class attribute of <button> or <lightning-button-icon>.",
+	      ensureSizeAttribute:
+	        "Ensure 'size' attribute is set to 'large' in <lightning-icon> or <lightning-button-icon> for correct icon sizing.",
+	    },
+	  },
+
+	  create(context) {
+	    function check(node) {
+	      if (isAttributesEmpty(node)) {
+	        return;
+	      }
+
+	      const tagName = node.name;
+
+	      // ✅ Scenario 1: Remove 'slds-button_icon-inverse' from <button>
+	      if (tagName === "button") {
+	        const classAttr = findAttr(node, "class");
+	        if (classAttr && classAttr.value) {
+	          const classList = classAttr.value.value.split(/\s+/);
+	          if (classList.includes("slds-button_icon-inverse")) {
+	            context.report({
+	              node,
+	              messageId: "removeClass",
+	              fix(fixer) {
+	                const newClassList = classList
+	                  .filter((cls) => cls !== "slds-button_icon-inverse")
+	                  .join(" ");
+	                return fixer.replaceText(
+	                  classAttr, // Replace the full attribute
+	                  `class="${newClassList}"` // Updated class list
+	                );
+	              },
+	            });
+	          }
+	        }
+	      }
+
+	      // ✅ Scenario 2: Fix <lightning-button-icon>
+	      if (tagName === "lightning-button-icon" || tagName === "lightning:buttonIcon") {
+	        const variantAttr = findAttr(node, "variant");
+	        const sizeAttr = findAttr(node, "size");
+	        const classAttr = findAttr(node, "class");
+
+	        // Fix variant="bare-inverse" to "bare"
+	        if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
+	          context.report({
+	            node: variantAttr,
+	            messageId: "changeVariant",
+	            fix(fixer) {
+	              return fixer.replaceText(variantAttr.value, `bare`);
+	            },
+	          });
+	        }
+
+	        // Ensure size="large" exists
+	        if (!sizeAttr) {
+	          context.report({
+	            node,
+	            messageId: "ensureSizeAttribute",
+	            fix(fixer) {
+	              //return fixer.insertTextAfter(node, ' size="large"');
+	              return fixer.insertTextAfterRange([variantAttr.range[1], variantAttr.range[1]], ' size="large"')
+	            },
+	          });
+	        }
+
+	        // Ensure 'slds-button' and 'slds-button_icon' are in the class attribute
+	        if (classAttr && classAttr.value) {
+	          const classList = classAttr.value.value.split(/\s+/);
+	          if (!classList.includes("slds-button") || !classList.includes("slds-button_icon")) {
+	            context.report({
+	              node: classAttr,
+	              messageId: "ensureButtonClasses",
+	              fix(fixer) {
+	                const newClassList = [
+	                  "slds-button",
+	                  "slds-button_icon",
+	                  ...classList.filter(
+	                    (cls) => cls !== "slds-button_icon-inverse"
+	                  ),
+	                ].join(" ");
+	                return fixer.replaceText(classAttr.value, `"${newClassList}"`);
+	              },
+	            });
+	          }
+	        }
+	      }
+
+	      // ✅ Scenario 3: Fix <lightning-icon> inside <button>
+	      if ((tagName === "lightning-icon" || tagName === "lightning:icon") && node.parent?.name === "button") {
+	        const variantAttr = findAttr(node, "variant");
+	        const sizeAttr = findAttr(node, "size");
+
+	        // Fix variant="bare-inverse" to "bare"
+	        if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
+	          context.report({
+	            node: variantAttr,
+	            messageId: "changeVariant",
+	            fix(fixer) {
+	              return fixer.replaceText(variantAttr.value, `"bare"`);
+	            },
+	          });
+	        }
+
+	        // Remove variant attribute completely
+	        if (variantAttr) {
+	          context.report({
+	            node: variantAttr,
+	            messageId: "removeVariant",
+	            fix(fixer) {
+	              return fixer.remove(variantAttr);
+	            },
+	          });
+	        }
+
+	        //Ensure size="large" is set
+	        if (!sizeAttr) {
+	          context.report({
+	            node,
+	            messageId: "ensureSizeAttribute",
+	            fix(fixer) {
+	              //return fixer.insertTextAfter(node, ' size="large"');
+	              return fixer.insertTextAfterRange([variantAttr.range[1], variantAttr.range[1]], ' size="large"')
+	            },
+	          });
+	        }
+	      }
+	    }
+
+	    return {
+	      Tag: check,
+	    };
+	  },
+	};
+	return modalCloseButtonIssue;
+}
+
 var src;
 var hasRequiredSrc;
 
@@ -3601,7 +3766,8 @@ function requireSrc () {
 	src = {
 	    rules: {
 	        "no-bem-class": requireNoBemClass(),
-	        "no-deprecated-slds-classes": requireNoDeprecatedSldsClasses()
+	        "no-deprecated-slds-classes": requireNoDeprecatedSldsClasses(),
+	        "modal-close-button-issue": requireModalCloseButtonIssue()
 	    },
 	    configs: {
 	        recommended: {
@@ -3609,7 +3775,8 @@ function requireSrc () {
 	            plugins: ["slds"],  
 	            rules: {
 	                "slds/no-bem-class": "error", 
-	                "slds/no-deprecated-slds-classes": "error"
+	                "slds/no-deprecated-slds-classes": "error",
+	                "slds/modal-close-button-issue": "error"
 	            },
 	        },
 	    },