Merge branch 'main' into users/fvisser/toggle-tip-ixd-spec

.github/ISSUE_TEMPLATE/feature_request.md → .github/ISSUE_TEMPLATE/feature-request.md

@@ -21,7 +21,10 @@ Search open/closed issues before submitting. Someone may have requested the same
 
 <!--- Provide a clear and concise description of the feature you're proposing. -->
 
-<!--- The implementing team may build a list of tasks/sub-issues here:
+<!--- The implementing team may build a list of tasks/sub-issues here: -->
+
 ## 📋 Tasks
-- [ ] This is a subtask of the feature. (It can be converted to an issue.)
+
+<!--
+- [ ] This is a subtask of the feature.
 -->

.github/ISSUE_TEMPLATE/interaction_design_request.md → .github/ISSUE_TEMPLATE/interaction-design-request.md

@@ -1,6 +1,6 @@
 ---
 name:  👈 Interaction Design Request
-about: (PO ONLY) A small chunk of work to be done by an Interaction Designer
+about: A small chunk of work to be done by an Interaction Designer
 title: 'nimble-{name} interaction design request'
 labels: 'interaction design,triage'
 ---
@@ -16,20 +16,19 @@ labels: 'interaction design,triage'
 
 ## 🎯 Core Requirements
 
-<!-- Outline the essential requirements of the component. What does the user need to be able to do with the component? E.g. For a date picker… 
-
+<!-- Outline the essential requirements of the component. What does the user need to be able to do with the component? E.g. For a date picker:
+<!--
 - User must to be able to specify a _specific date_ for use in filter query
 - User should not be able to specify an invalid date
 - User must be able to enter date with keyboard interaction alone
-- … -->
+-->
 
 ## 🍆 Non-requirements
 
-<!-- What ideas are out of scope for this component? E.g. For a date picker… 
-
+<!-- What ideas are out of scope for this component? E.g. For a date picker: -->
+<!--
 - User does not need to pick the date from a calendar widget 
-- … -->
-
+-->
 
 ## 🥅 Acceptance Criteria
 

.github/ISSUE_TEMPLATE/new_component.md → .github/ISSUE_TEMPLATE/new-component.md

@@ -1,8 +1,8 @@
 ---
 name: 💡 New Component
-about: (DEV TEAM ONLY) New Nimble component
+about: New Nimble component
 title: 'nimble-{name} Component'
-labels: 'new component,enhancement'
+labels: 'new component,enhancement,triage'
 ---
 
 # 💡 New Component

.github/ISSUE_TEMPLATE/tech_debt.md → .github/ISSUE_TEMPLATE/tech-debt.md

@@ -1,6 +1,6 @@
 ---
 name: 🧹 Tech Debt
-about: (DEV TEAM ONLY) Non-user-visible improvement to code or development process
+about: Non-user-visible improvement to code or development process
 title: ''
 labels: 'tech debt,triage'
 ---

.github/ISSUE_TEMPLATE/visual_design_request.md → .github/ISSUE_TEMPLATE/visual-design-request.md

@@ -1,6 +1,6 @@
 ---
 name: 🎨 Visual Design Request
-about: (DEV TEAM ONLY) A small chunk of work to be done by Visual Designer
+about: A small chunk of work to be done by Visual Designer
 title: 'nimble-{name} visual design request'
 labels: 'visual design,triage'
 ---
@@ -16,20 +16,19 @@ labels: 'visual design,triage'
 
 ## 🎯 Core Requirements
 
-<!-- Outline the essential requirements of the component visual design. What states, variations, or other constraints are required? E.g. For a date picker… 
-
+<!-- Outline the essential requirements of the component visual design. What states, variations, or other constraints are required? E.g. For a date picker: -->
+<!--
 - Component needs block and outline appearances
 - Component needs to fit in an editable table cell and in a details panel 
 - Reuse the existing calendar icon
-- … -->
+-->
 
 ## 🍆 Non-requirements
 
-<!-- What ideas are out of scope for this component? E.g. For a date picker… 
-
+<!-- What ideas are out of scope for this component? E.g. For a date picker: -->
+<!--
 - Component does not need a ghost appearance
-- … -->
-
+-->
 
 ## 🥅 Acceptance Criteria
 

.github/renovate.json

@@ -17,14 +17,14 @@
       "groupName": "npm dependencies lock update only",
       "matchManagers": ["npm"],
       "rangeStrategy": "in-range-only",
-      "matchDepTypes": ["dependencies", "devDependencies"],
+      "matchDepTypes": ["dependencies", "devDependencies", "peerDependencies"],
       "enabled": true
     },
     {
       "groupName": "npm dependencies update to latest",
       "matchManagers": ["npm"],
       "rangeStrategy": "update-lockfile",
-      "matchDepTypes": ["dependencies", "devDependencies"],
+      "matchDepTypes": ["dependencies", "devDependencies", "peerDependencies"],
       "excludePackagePatterns":[
         "^@angular",
         "@microsoft/fast-foundation",

.github/workflows/dependency-review.yml

@@ -0,0 +1,17 @@
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v4
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v4
+        with:
+          comment-summary-in-pr: on-failure

.github/workflows/main.yml

@@ -58,11 +58,6 @@ jobs:
       # only informational so swallow error codes
       - run: npm outdated || exit 0
 
-      # Audit
-      - run: npm audit --only=prod
-      # https://github.com/ni/nimble/issues/801
-      # - run: npm audit --audit-level=critical
-
       # Build
       - run: npm run build
 
@@ -93,6 +88,7 @@ jobs:
             - '../packages/nimble-tokens/dist/icons/svg/**'
             - '../packages/nimble-tokens/source/styledictionary/properties/**'
           storybookBuildDir: ../../packages/site/dist/storybook
+          storybookBaseDir: ./packages/nimble-components
           exitOnceUploaded: true # Do not wait for test results
           exitZeroOnChanges: true # Option to prevent the workflow from failing
 
@@ -110,7 +106,8 @@ jobs:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 
       # Check Changelog
-      - run: npm run check
+      - if: github.repository_owner == 'ni'
+        run: npm run check
 
       - name: Validate no changes to tracked files
         run: |
@@ -136,7 +133,7 @@ jobs:
 
   pages:
     needs: build
-    if: startsWith(github.ref, 'refs/heads/main')
+    if: github.repository_owner == 'ni' && startsWith(github.ref, 'refs/heads/main')
     runs-on: ubuntu-22.04
     permissions:
       pages: write # to deploy to Pages

CONTRIBUTING.md

@@ -79,9 +79,9 @@ When generating a change file, follow these guidelines:
 2. Write a brief but useful description with Nimble clients in mind. If making a major (breaking) change, explain what clients need to do to adopt it. The description can be plain text or [markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax), with newlines specified via `\n` if needed.
 3. If you prefer not to expose your email address to the world, [configure GitHub to "Keep my email address private"](https://github.com/settings/emails) before generating the change file.
 
-### NPM audit
+### Dependency Review
 
-The repository runs [`npm audit`](https://docs.npmjs.com/cli/v8/commands/npm-audit) to prevent submissions if any dependencies have known vulnerabilities. This can occur during on a PR that introduces a new dependency version or on an unrelated PR if a vulnerability was recently reported on an existing dependency. If this check fails, our options include:
+The repository runs the [Dependency Review](https://github.com/actions/dependency-review-action) action to prevent submissions if any dependencies have known vulnerabilities. This can occur during on a PR that introduces a new dependency version or on an unrelated PR if a vulnerability was recently reported on an existing dependency. If this check fails, our options include:
 
 #### Vulnerabilities with fixes available
 
@@ -93,7 +93,7 @@ The repository runs [`npm audit`](https://docs.npmjs.com/cli/v8/commands/npm-aud
 If a fix for the vulnerability isn't available or if it isn't practical to uptake the fix, our options include:
 
 1. Remove the vulnerable dependency and find a different way to achieve the same functionality.
-2. Temporarily use a more lenient [audit level](https://docs.npmjs.com/cli/v8/commands/npm-audit#audit-level) for this repository (e.g. allowing `low` or `moderate` vulnerabilities). We should ensure there is an issue on the dependency's repository asking them to fix the vulnerability and also file an issue against this repository to track fixing the vulnerability and restoring strict auditing.
+2. Dismiss the alert in the [GitHub Security - Dependabot](https://github.com/ni/nimble/security/dependabot) dashboard, and document your rationale for doing so. We should ensure there is an issue on the dependency's repository asking them to fix the vulnerability and also file an issue against this repository to track fixing the vulnerability and restoring strict auditing.
 
 
 ### Chromatic visual component tests

angular-workspace/package.json

@@ -58,8 +58,8 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "ng-packagr": "^15.2.2",
-    "playwright": "1.40.0",
+    "playwright": "1.42.0",
     "rollup": "^4.12.0",
-    "typescript": "~4.8.2"
+    "typescript": "~4.9.5"
   }
 }

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -151,16 +151,19 @@
         <div class="sub-container">
             <div class="container-label">Select</div>
             <nimble-select filter-mode="standard" appearance="underline">
+                <nimble-list-option hidden selected disabled>Select an option</nimble-list-option>
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>
             </nimble-select>
             <nimble-select appearance="outline">
+                <nimble-list-option hidden selected disabled>Select an option</nimble-list-option>
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>
             </nimble-select>
             <nimble-select appearance="block">
+                <nimble-list-option hidden selected disabled>Select an option</nimble-list-option>
                 <nimble-list-option>Option 1</nimble-list-option>
                 <nimble-list-option>Option 2</nimble-list-option>
                 <nimble-list-option>Option 3</nimble-list-option>

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.ts

@@ -110,14 +110,6 @@ export class CustomAppComponent implements AfterViewInit {
     public constructor(@Inject(ActivatedRoute) public readonly route: ActivatedRoute) {
         this.tableData$ = this.tableDataSubject.asObservable();
         this.addTableRows(10);
-
-        this.comboboxItems = [];
-        for (let i = 0; i < 300; i++) {
-            this.comboboxItems.push({
-                first: i.toString(),
-                last: i.toString()
-            });
-        }
     }
 
     public ngAfterViewInit(): void {