Merge branch 'main' into dependabot/bundler/demo/view_component-3.16.0

.changeset/cuddly-games-prove.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Allow setting custom values on submit buttons.

.changeset/four-steaks-shake.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Add option to Dialog to permit/disable page scrolling

.changeset/heavy-camels-hear.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix problem introduced by #3141 that causes template captions not to render for certain input types if the input is configured with a `value:`.

.changeset/hip-deers-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Allow form groups to accept system arguments

.changeset/lemon-kiwis-learn.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add "action" to the list of data attributes that accept multiple values in the `merge_data` helper

.changeset/tough-actors-wait.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix bug where checkboxes were broken with prefers-reduced-motion

.changeset/wicked-bananas-tie.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Remove dialog-scrollgutter setting from hot-path, for improved performance

.github/release_template.md

@@ -21,4 +21,8 @@ Please ensure these items are checked before merging.
 - [ ] No noticeable regressions have been introduced as a result of changes in this release
 - [ ] Release notes accurately describe the changes made
 
+### 🚢 Post ship reminders
+
+- [ ] Deploy lookbook via chat ops in the #primer-rails-ops channel. `.deploy primer-lookbook to production`
+
 Please also leave any testing notes as a comment on this pull request. In particular, describing any issues encountered during your testing. This is helpful in providing historical context to maintainers.

.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"
@@ -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

@@ -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

.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
+        }
+      }
     ]
   }
 }

app/components/primer/alpha/action_list.pcss

@@ -43,7 +43,8 @@ nav-list {
     width: 100%;
     height: 1px;
     content: '';
-    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
   }
 
   /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
@@ -56,7 +57,8 @@ nav-list {
       width: 100%;
       height: var(--borderWidth-thin);
       content: '';
-      background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+      /* stylelint-disable-next-line primer/colors */
+      background: var(--borderColor-muted);
     }
 
     /* unset the default label pseudo */
@@ -673,7 +675,8 @@ nav-list {
     margin-block-end: var(--base-size-8);
     margin-inline: calc(-1 * var(--base-size-8));
     list-style: none;
-    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
     border: 0;
   }
 

app/components/primer/alpha/button_marketing.pcss

@@ -17,6 +17,7 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
+  /* stylelint-disable-next-line primer/colors */
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;

app/components/primer/alpha/dialog.pcss

@@ -8,9 +8,24 @@
 
 /* Overlay */
 
-/* TODO: One day this can be :has(:modal), when it is better supported */
-body.has-modal {
+/* The --dialog-scrollgutter property is used only on the body element to
+ * simulate scrollbar-gutter:stable. This property is not and should not
+ * be used elsewhere in the DOM. There is a performance penalty to
+ * setting inherited properties which can cause a large style recalc to
+ * occur, so it benefits us to prevent inheritance for this property.
+ * See https://web.dev/blog/at-property-performance
+ */
+@property --dialog-scrollgutter {
+  initial-value: 0;
+  inherits: false;
+  syntax: "<length>";
+}
+
+body:has(:modal) {
   padding-right: var(--dialog-scrollgutter) !important;
+}
+
+body:has(dialog:modal.Overlay--disableScroll) {
   overflow: hidden !important;
 }
 
@@ -350,6 +365,7 @@ dialog.Overlay:not([open]) {
   &:hover,
   &:focus {
     background-color: var(--button-default-bgColor-hover);
+    /* stylelint-disable-next-line primer/colors */
     border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
   }
 

app/components/primer/alpha/dialog.rb

@@ -104,6 +104,7 @@ class Dialog < Primer::Component
       # @param position [Symbol] The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
       # @param position_narrow [Symbol] The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
       # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
+      # @param disable_scroll [Boolean] When true, disables scrolling the page when the dialog is open.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         title:,
@@ -113,6 +114,7 @@ def initialize(
         position_narrow: DEFAULT_POSITION_NARROW,
         visually_hide_title: false,
         id: self.class.generate_id,
+        disable_scroll: true,
         **system_arguments
       )
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -124,6 +126,7 @@ def initialize(
         @position = position
         @position_narrow = position_narrow
         @visually_hide_title = visually_hide_title
+        @disable_scroll = disable_scroll
 
         @system_arguments[:tag] = "dialog"
         @system_arguments[:id] = @id
@@ -143,7 +146,8 @@ def initialize(
           "Overlay--motion-scaleFade",
           POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
           POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)],
-          system_arguments[:classes]
+          system_arguments[:classes],
+          "Overlay--disableScroll" => @disable_scroll
         )
       end
 

app/components/primer/alpha/dropdown.pcss

@@ -56,6 +56,7 @@
   &::after {
     /* stylelint-disable-next-line primer/borders */
     border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-bottom-color: var(--overlay-bgColor);
   }
 
@@ -167,6 +168,7 @@
     right: -14px;
     left: auto;
     border-color: transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-left-color: var(--overlay-bgColor);
   }
 }
@@ -192,6 +194,7 @@
     /* stylelint-disable-next-line primer/spacing */
     left: -14px;
     border-color: transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
 }
@@ -226,7 +229,7 @@
     bottom: -7px;
     /* stylelint-disable-next-line primer/spacing */
     left: 10px;
-    /* stylelint-disable-next-line primer/borders */
+    /* stylelint-disable-next-line primer/borders, primer/colors */
     border-top: 7px solid var(--overlay-bgColor);
     /* stylelint-disable-next-line primer/borders */
     border-right: 7px solid transparent;

app/components/primer/alpha/layout.pcss

@@ -208,6 +208,7 @@
       width: 1px;
       /* stylelint-disable-next-line primer/spacing */
       margin-right: -1px;
+      /* stylelint-disable-next-line primer/colors */
       background: var(--borderColor-default);
     }
 

app/components/primer/alpha/menu.pcss

@@ -61,6 +61,7 @@
       left: 0;
       width: 2px;
       content: '';
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--underlineNav-borderColor-active);
     }
   }

app/components/primer/alpha/segmented_control.pcss

@@ -132,7 +132,6 @@
     /* stylelint-disable-next-line primer/spacing */
     padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
 
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:focus-visible {
       /* stylelint-disable-next-line primer/borders */
       border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);