Merge upstream

.changeset/friendly-owls-destroy.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Update check box styles for ActionList to match the rest of Primer

.changeset/wild-parrots-train.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix ActionMenu position issue when container is scrollable

.github/workflows/demo-preview-cleanup.yml

@@ -27,9 +27,9 @@ jobs:
         with:
           # excluding a client secret here will cause a login via OpenID Connect (OIDC),
           # which prevents us from having to rotate client credentials, etc
-          client-id: "5ad1a188-b944-40eb-a2f8-cc683a6a65a0"
-          tenant-id: "398a6654-997b-47e9-b12b-9515b896b4de"
-          subscription-id: "550eb99d-d0c7-4651-a337-f53fa6520c4f"
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 
       # Do this before repo checkout to prevent running bundle install
       - uses: ruby/setup-ruby@v1

.github/workflows/demo-preview-destroy.yml

@@ -31,9 +31,9 @@ jobs:
         with:
           # excluding a client secret here will cause a login via OpenID Connect (OIDC),
           # which prevents us from having to rotate client credentials, etc
-          client-id: "5ad1a188-b944-40eb-a2f8-cc683a6a65a0"
-          tenant-id: "398a6654-997b-47e9-b12b-9515b896b4de"
-          subscription-id: "550eb99d-d0c7-4651-a337-f53fa6520c4f"
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 
       - name: Check out repo
         uses: actions/checkout@v4

.github/workflows/demo-production-deploy.yml

@@ -32,9 +32,9 @@ jobs:
       with:
         # excluding a client secret here will cause a login via OpenID Connect (OIDC),
         # which prevents us from having to rotate client credentials, etc
-        client-id: "5ad1a188-b944-40eb-a2f8-cc683a6a65a0"
-        tenant-id: "398a6654-997b-47e9-b12b-9515b896b4de"
-        subscription-id: "550eb99d-d0c7-4651-a337-f53fa6520c4f"
+        client-id: ${{ secrets.AZURE_CLIENT_ID }}
+        tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+        subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
     - name: Purge tags
       run: |
         # only delete tags that aren't "latest" or "latest-assets"
@@ -72,7 +72,7 @@ jobs:
       with:
         ruby-version: '3.3'
         bundler-cache: true
-    - uses: actions/cache@v4.0.2
+    - uses: actions/cache@v4.2.0
       with:
         path: demo/gemfiles/vendor/bundle
         key: gems-build-kuby-main-ruby-3.3.x-${{ hashFiles('demo/gemfiles/kuby.gemfile.lock') }}
@@ -84,13 +84,16 @@ jobs:
       with:
         # excluding a client secret here will cause a login via OpenID Connect (OIDC),
         # which prevents us from having to rotate client credentials, etc
-        client-id: "5ad1a188-b944-40eb-a2f8-cc683a6a65a0"
-        tenant-id: "398a6654-997b-47e9-b12b-9515b896b4de"
-        subscription-id: "550eb99d-d0c7-4651-a337-f53fa6520c4f"
+        client-id: ${{ secrets.AZURE_CLIENT_ID }}
+        tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+        subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
     - name: Deploy
       env:
         RAILS_MASTER_KEY: ${{ secrets.RAILS_MASTER_KEY }}
         AZURE_ACR_PASSWORD: ${{ secrets.AZURE_ACR_PASSWORD }}
+        AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+        AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
+        AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
       run: |
-        export AZURE_ACCESS_TOKEN=$(az account get-access-token --subscription 550eb99d-d0c7-4651-a337-f53fa6520c4f | jq -r .accessToken)
+        export AZURE_ACCESS_TOKEN=$(az account get-access-token --subscription ${{ secrets.AZURE_SUBSCRIPTION_ID }} | jq -r .accessToken)
         bin/kuby -e production deploy

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].5
       with:
         files: |
           docs/**/*.md
@@ -38,7 +38,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].5
       with:
         files: |
           app/**/*.rb
@@ -58,7 +58,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].5
       with:
         files: |
           app/components/**/*.erb
@@ -75,7 +75,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].5
       with:
         files: |
           app/components/**/*.ts
@@ -95,7 +95,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].5
       with:
         files: |
           app/components/**/*.pcss
@@ -108,4 +108,4 @@ jobs:
       if: steps.changed-files.outputs.any_changed == 'true'
       run: |
         npm ci
-        npx stylelint ${{ steps.changed-files.outputs.all_changed_files }} --custom-formatter=stylelint-actions-formatters
+        npx stylelint --rd -q ${{ steps.changed-files.outputs.all_changed_files }} --custom-formatter=stylelint-actions-formatters

.github/workflows/preview-deploy.yml

@@ -62,9 +62,9 @@ jobs:
       with:
         # excluding a client secret here will cause a login via OpenID Connect (OIDC),
         # which prevents us from having to rotate client credentials, etc
-        client-id: "5ad1a188-b944-40eb-a2f8-cc683a6a65a0"
-        tenant-id: "398a6654-997b-47e9-b12b-9515b896b4de"
-        subscription-id: "550eb99d-d0c7-4651-a337-f53fa6520c4f"
+        client-id: ${{ secrets.AZURE_CLIENT_ID }}
+        tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+        subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 
     - name: Get preview app info
       run: ./.github/workflows/demo-preview-app-info.sh
@@ -96,7 +96,7 @@ jobs:
       uses: azure/arm-deploy@a1361c2c2cd398621955b16ca32e01c65ea340f5
       with:
         resourceGroupName: primer
-        subscriptionId: 550eb99d-d0c7-4651-a337-f53fa6520c4f
+        subscriptionId: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
         template: ./.github/workflows/demo-preview-template.json
         deploymentName: ${{env.DEPLOYMENT_NAME}}
         parameters: appName="${{env.APP_NAME}}"

.gitignore

@@ -5,11 +5,11 @@ app/components/**/*.css.json
 app/components/**/*.css.map
 app/components/**/*.d.ts
 app/lib/primer/css/*.css.json
-lib/primer/forms/**/*.js
-lib/primer/forms/**/*.css
-lib/primer/forms/**/*.css.json
-lib/primer/forms/**/*.css.map
-lib/primer/forms/**/*.d.ts
+app/lib/primer/forms/**/*.js
+app/lib/primer/forms/**/*.css
+app/lib/primer/forms/**/*.css.json
+app/lib/primer/forms/**/*.css.map
+app/lib/primer/forms/**/*.d.ts
 app/assets/
 
 # Generated by demo npm post-install

.rubocop.yml

@@ -57,9 +57,6 @@ Primer/NoTagMemoize:
   Include:
     - "app/components/**/*"
 
-Primer/SystemArgumentInsteadOfClass:
-  Enabled: true
-
 Lint/MissingSuper:
   Enabled: false
 

.stylelintrc.json

@@ -16,6 +16,18 @@
       {
         "ignoreAtRules": ["mixin", "define-mixin"]
       }
+    ],
+    "plugin/browser-compat": [
+      true,
+      {
+        "severity": "warning",
+        "allow": {
+          "features": ["properties.scrollbar-width"],
+          "flagged": false,
+          "partialImplementation": true,
+          "prefix": true
+        }
+      }
     ]
   }
 }

CHANGELOG.md

@@ -1,5 +1,92 @@
 # CHANGELOG
 
+## 0.36.1
+
+### Patch Changes
+
+- [#3220](https://github.com/primer/view_components/pull/3220) [`688a4a2`](https://github.com/primer/view_components/commit/688a4a263deb4be70763b9ba39cae854896b44ce) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove SystemArgumentInsteadOfClass linter and fix bug with whitespace in rendered class
+
+## 0.36.0
+
+### Minor Changes
+
+- [#3041](https://github.com/primer/view_components/pull/3041) [`14dd0d3`](https://github.com/primer/view_components/commit/14dd0d3c4cbf2e6ce46f4d80ed94ccc06374299e) Thanks [@HDinger](https://github.com/HDinger)! - Support leading and trailing icons for Links
+
+- [#3219](https://github.com/primer/view_components/pull/3219) [`633bd05`](https://github.com/primer/view_components/commit/633bd05ea6675e2b54b1cd025d86462a810e6e94) Thanks [@camertron](https://github.com/camertron)! - Removing the validate classname check that forces system arguments instead of utility classes
+
+### Patch Changes
+
+- [#3217](https://github.com/primer/view_components/pull/3217) [`0bbb076`](https://github.com/primer/view_components/commit/0bbb076a978f1029d3f1724bda821ee136be408b) Thanks [@camertron](https://github.com/camertron)! - Fix issue causing AutoComplete elements to overflow their container
+
+- [#3205](https://github.com/primer/view_components/pull/3205) [`79ca4f9`](https://github.com/primer/view_components/commit/79ca4f91a67ac79623584a89d4afe5931ae0bbd6) Thanks [@camertron](https://github.com/camertron)! - Ensure `full_width:` option is respected by the auto_complete input
+
+- [#3202](https://github.com/primer/view_components/pull/3202) [`a574b0e`](https://github.com/primer/view_components/commit/a574b0e2becdc057c23aa6e26230851f90976605) Thanks [@camertron](https://github.com/camertron)! - Prevent hidden inputs from taking up space on the page
+
+- [#3216](https://github.com/primer/view_components/pull/3216) [`23dd4fa`](https://github.com/primer/view_components/commit/23dd4fa4308c91abef13e8e23876ab12ea79db2e) Thanks [@keithamus](https://github.com/keithamus)! - Remove redundant code for better performance.
+
+## 0.35.2
+
+### Patch Changes
+
+- [#3204](https://github.com/primer/view_components/pull/3204) [`f24feab`](https://github.com/primer/view_components/commit/f24feab6546fe1ae6be5938fbd42fb1daebf3951) Thanks [@joshblack](https://github.com/joshblack)! - Update caret styles for Popover to correctly position caret in different orientations
+
+- [#3187](https://github.com/primer/view_components/pull/3187) [`a91aa93`](https://github.com/primer/view_components/commit/a91aa93f0c75171e6f469b355c2ef747698d2280) Thanks [@camertron](https://github.com/camertron)! - [SelectPanel] Fix result count in screen reader announcements
+
+## 0.35.1
+
+### Patch Changes
+
+- [#3177](https://github.com/primer/view_components/pull/3177) [`308a56b`](https://github.com/primer/view_components/commit/308a56b3a7fe3e29bb12aec0c3cf05a3bb7e32f4) Thanks [@mathias](https://github.com/mathias)! - Switch Ruby match from Regexps to String's starts_with method
+
+- [#3186](https://github.com/primer/view_components/pull/3186) [`4d46a3a`](https://github.com/primer/view_components/commit/4d46a3a146d8cc1a56d8472f049c329dfb0ac432) Thanks [@camertron](https://github.com/camertron)! - [SelectPanel] Don't clear selection if input field doesn't exist
+
+- [#3179](https://github.com/primer/view_components/pull/3179) [`93297d2`](https://github.com/primer/view_components/commit/93297d249420656b90c968201c6a57505260e2ed) Thanks [@langermank](https://github.com/langermank)! - Update the primer/primitives dependency to be 9.x || 10.x and move it to peer
+
+## 0.35.0
+
+### Minor Changes
+
+- [#3158](https://github.com/primer/view_components/pull/3158) [`683abd2`](https://github.com/primer/view_components/commit/683abd2bc83feed08b80a1e2856ffcbb6cf33408) Thanks [@jonrohan](https://github.com/jonrohan)! - Delete Primer::Alpha::ImageCrop
+
+- [#3074](https://github.com/primer/view_components/pull/3074) [`25109d0`](https://github.com/primer/view_components/commit/25109d0a9686e8dcc8b81a08ba11cd648178aa57) Thanks [@owenniblock](https://github.com/owenniblock)! - [SelectPanel] replace loading label using parameter loading_label
+  [SelectPanel] show additional loading content with loading_description
+
+- [#3072](https://github.com/primer/view_components/pull/3072) [`18b2074`](https://github.com/primer/view_components/commit/18b2074e4a6e77ea47bd0e78c93358aaeefce842) Thanks [@camertron](https://github.com/camertron)! - [Forms] Fix position of caption for checkbox and radio groups
+
+- [#3145](https://github.com/primer/view_components/pull/3145) [`a6bacb5`](https://github.com/primer/view_components/commit/a6bacb59755382b77a0c56cf862d404090fe1af8) Thanks [@camertron](https://github.com/camertron)! - Add option to Dialog to permit/disable page scrolling
+
+- [#3160](https://github.com/primer/view_components/pull/3160) [`3cb826a`](https://github.com/primer/view_components/commit/3cb826a363d159f60089684bb9c4f4adf9481007) Thanks [@camertron](https://github.com/camertron)! - Bump primer/css
+
+- [#3149](https://github.com/primer/view_components/pull/3149) [`b9cce66`](https://github.com/primer/view_components/commit/b9cce66038a01ffa50a8f771f0b7d7312e567f88) Thanks [@camertron](https://github.com/camertron)! - Allow form groups to accept system arguments
+
+- [#3071](https://github.com/primer/view_components/pull/3071) [`e043069`](https://github.com/primer/view_components/commit/e043069782f1a88970c09feb0fe05566e21b18ce) Thanks [@camertron](https://github.com/camertron)! - [SelectPanel] Use checkboxes for multi-select
+
+- [#3126](https://github.com/primer/view_components/pull/3126) [`89052ca`](https://github.com/primer/view_components/commit/89052ca71fd7f54ffe4cda87393475428c196ded) Thanks [@francinelucca](https://github.com/francinelucca)! - Introduce the Stack and StackItem components.
+
+- [#3083](https://github.com/primer/view_components/pull/3083) [`5907105`](https://github.com/primer/view_components/commit/590710582e7c29b3d6bc8b142c1e9b8f95709c68) Thanks [@jamieshark](https://github.com/jamieshark)! - [SelectPanel] Adds banner scheme as param.
+
+### Patch Changes
+
+- [#3103](https://github.com/primer/view_components/pull/3103) [`6033c86`](https://github.com/primer/view_components/commit/6033c865d5448c31f0698bcdc9422a0a9581dda0) Thanks [@owenniblock](https://github.com/owenniblock)! - Moves the loading and "no results" messages on the SelectPanel to the top of the container.
+
+- [#3141](https://github.com/primer/view_components/pull/3141) [`37e78c0`](https://github.com/primer/view_components/commit/37e78c05e5e4ac1c8d482468b77a94b495aef6b3) Thanks [@camertron](https://github.com/camertron)! - Allow setting custom values on submit buttons.
+
+- [#3153](https://github.com/primer/view_components/pull/3153) [`cc1ce7a`](https://github.com/primer/view_components/commit/cc1ce7adcc6f2d984711f8e5b5d2c92201254250) Thanks [@camertron](https://github.com/camertron)! - Fix problem introduced by #3141 that causes template captions not to render for certain input types if the input is configured with a `value:`.
+
+- [#3076](https://github.com/primer/view_components/pull/3076) [`7e7a60f`](https://github.com/primer/view_components/commit/7e7a60f4ba36b835b774c640e64d5de19f68fd61) Thanks [@HDinger](https://github.com/HDinger)! - Add "action" to the list of data attributes that accept multiple values in the `merge_data` helper
+
+- [#3139](https://github.com/primer/view_components/pull/3139) [`b650344`](https://github.com/primer/view_components/commit/b6503447d255dc8d86128e30136ea9e18436760a) Thanks [@jamieshark](https://github.com/jamieshark)! - Adjusts config for DetailsMenuMigration linter to take in an array of strings instead of array of regexp
+
+- [#3168](https://github.com/primer/view_components/pull/3168) [`82c2b0a`](https://github.com/primer/view_components/commit/82c2b0a7c762596e6cafe4e99d93f2faf17e65ac) Thanks [@camertron](https://github.com/camertron)! - [SelectPanel] Fix issue causing no error banner to appear when there are no matches
+
+- [#3095](https://github.com/primer/view_components/pull/3095) [`26f1fbc`](https://github.com/primer/view_components/commit/26f1fbcacade2c05fabb42d8231ac22fbc1e3b52) Thanks [@owenniblock](https://github.com/owenniblock)! - Clear input on SelectPanel when dialog closed
+
+- [#3152](https://github.com/primer/view_components/pull/3152) [`3611f9c`](https://github.com/primer/view_components/commit/3611f9c671c7f3a3bd2922d7c2e30440d02c4677) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Fix bug where checkboxes were broken with prefers-reduced-motion
+
+- [#3159](https://github.com/primer/view_components/pull/3159) [`5bc179d`](https://github.com/primer/view_components/commit/5bc179db314d22d049c42e989d23dacff6cda18c) Thanks [@camertron](https://github.com/camertron)! - Increase space between form elements
+
+- [#3144](https://github.com/primer/view_components/pull/3144) [`978e867`](https://github.com/primer/view_components/commit/978e8678301907dbaf8a61fcc966179c0736493f) Thanks [@keithamus](https://github.com/keithamus)! - Remove dialog-scrollgutter setting from hot-path, for improved performance
+
 ## 0.34.0
 
 ### Minor Changes

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    primer_view_components (0.34.0)
+    primer_view_components (0.36.1)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 18.0.0)
@@ -262,8 +262,8 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.6.0)
-    view_component (3.12.1)
-      activesupport (>= 5.2.0, < 8.0)
+    view_component (3.19.0)
+      activesupport (>= 5.2.0, < 8.1)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     vite_rails (3.0.17)

app/components/primer/alpha/action_bar.rb

@@ -88,9 +88,9 @@ def render_overflow_menu?
       def before_render
         @system_arguments[:tag] = render_overflow_menu? ? :"action-bar" : :div
         @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "overflow-visible": !render_overflow_menu?
+          @system_arguments[:classes]
         )
+        @system_arguments[:overflow] = :visible if render_overflow_menu?
         content
       end
     end

app/components/primer/alpha/action_bar_element.ts

@@ -36,14 +36,6 @@ class ActionBarElement extends HTMLElement {
   #focusZoneAbortController: AbortController | null = null
 
   connectedCallback() {
-    // Calculate the width of all the items before hiding anything
-    for (const item of this.items) {
-      const width = item.getBoundingClientRect().width
-      const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10)
-      const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10)
-      item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`)
-    }
-
     resizeObserver.observe(this)
     instersectionObserver.observe(this)