Update @angular-eslint/template/i18n to ignore common nimble and sl-lib attributes

Change files

Author: rbell517

CONTRIBUTING.md

@@ -42,7 +42,7 @@ The goal of the smoke tests is basic validation that the eslint configurations c
 1. Create a fork of the repository.
 2. (optional, but recommended) On the Actions tab of your repository enable actions for the repo. This allows the tests to run in the branches of your fork.
 3. Create and edit a branch in your fork.
-4. Open a pull request to Nimble for the branch.
+4. Open a pull request to @ni/javascript-styleguide for the branch.
    - (optional, but recommended) While creating the pull request enable the "Allow edits and access to secrets by maintainers" option. This will allow maintainers to push small changes to the branch to resolve needed changes quicker.
 5. Create a beachball change file for your project by doing one of the following:
    1. Follow the [Beachball change file](#beachball-change-file) instructions below to create a change file and push to your branch.

change/@ni-eslint-config-angular-ff70c9b2-14ea-4eb3-9c0e-0de3cdb388ec.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update @angular-eslint/template/i18n to ignore common nimble and sl-lib attributes",
+  "packageName": "@ni/eslint-config-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/eslint-config-angular/i18n-attributes-ignore.js

@@ -0,0 +1,50 @@
+module.exports = {
+    nimble: [
+        'action-menu-slot',
+        'appearance',
+        'appearance-variant',
+        'column-id',
+        'field-name',
+        'format',
+        'icon',
+        'id-field-name',
+        'key',
+        'key-type',
+        'orientation',
+        'severity',
+        'slot',
+        'theme'
+    ],
+    'systemlink-lib-angular': [
+        // sl-workspace-selector
+        'action',
+
+        // sl-table
+        'columnId',
+        'fieldName',
+        'idFieldName',
+        'selectionMode',
+        'slTableColumnId',
+
+        // sl-grid
+        'dataRowId',
+        'loadColumnStateBehavior',
+        'parentDataField'
+    ],
+    jqx: [
+        // smart-table
+        'sortMode',
+
+        // smart-query-builder
+        'applyMode',
+        'fieldsMode'
+    ],
+    material: [
+        'cdkDragPreviewContainer',
+        'floatLabel',
+        'fontIcon',
+        'fontSet',
+        'matColumnDef',
+        'matTooltipClass',
+    ]
+};

packages/eslint-config-angular/template.js

@@ -1,3 +1,5 @@
+const ignoreAttributes = require('./i18n-attributes-ignore');
+
 module.exports = {
     extends: [
         'plugin:@angular-eslint/template/recommended'
@@ -68,7 +70,13 @@ module.exports = {
             and new applications in the chance that they'll need to be localized in the future. Disable this rule
             if an application will never be localized.
         */
-        '@angular-eslint/template/i18n': ['error', { checkId: false }],
+        '@angular-eslint/template/i18n': [
+            'error',
+            {
+                checkId: false,
+                ignoreAttributes: [...ignoreAttributes.nimble, ...ignoreAttributes['systemlink-lib-angular'], ...ignoreAttributes.jqx, ...ignoreAttributes.material]
+            }
+        ],
 
         '@angular-eslint/template/no-any': 'error',
 

tests/angular/index.html

@@ -1,2 +1,2 @@
 <!-- Angular Template Smoke Test -->
-<span i18n [(id)]="name">Hello {{ name }}</span>!
+<span i18n [(id)]="name" theme="non-localized-theme-id" title="This title should be localized." i18n-title>Hello {{name}}</span>

tests/angular/index.ts

@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    template: '<span i18n [(id)]="name">Hello {{name}}</span>!',
+    template: '<span i18n [(id)]="name" theme="non-localized-theme-id" title="This title should be localized." i18n-title>Hello {{name}}</span>!',
     styles: [`
         span {
             font-weight: bold;