Merge upstream

primer · Oct 16, 2024 · 39daa31 · 39daa31
2 parents 0d7d733 + 3611f9c
commit 39daa31
Show file tree

Hide file tree

Showing 32 changed files with 1,182 additions and 985 deletions.
diff --git a/.changeset/heavy-camels-hear.md b/.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:`.
diff --git a/.changeset/tough-actors-wait.md b/.changeset/tough-actors-wait.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix bug where checkboxes were broken with prefers-reduced-motion
diff --git a/.github/workflows/demo-preview-cleanup.yml b/.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

diff --git a/.github/workflows/demo-preview-destroy.yml b/.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

diff --git a/.github/workflows/demo-production-deploy.yml b/.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
diff --git a/.github/workflows/lint.yml b/.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
diff --git a/.github/workflows/preview-deploy.yml b/.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}}"

diff --git a/.stylelintrc.json b/.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
+        }
+      }
     ]
   }
 }
diff --git a/app/components/primer/alpha/action_list.pcss b/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;
   }
 

diff --git a/app/components/primer/alpha/button_marketing.pcss b/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;

diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
@@ -26,13 +26,13 @@
   version of @primer/stylelint-config. See: https://github.com/3846masa/stylelint-browser-compat/pull/807
 */
 
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+/* stylelint-disable-next-line plugin/browser-compat */
 body:has(:modal) {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   padding-right: var(--dialog-scrollgutter) !important;
 }
 
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+/* stylelint-disable-next-line plugin/browser-compat */
 body:has(dialog:modal.Overlay--disableScroll) {
   overflow: hidden !important;
 }

diff --git a/app/components/primer/alpha/dropdown.pcss b/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;

diff --git a/app/components/primer/alpha/layout.pcss b/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);
     }
 

diff --git a/app/components/primer/alpha/menu.pcss b/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);
     }
   }

diff --git a/app/components/primer/alpha/segmented_control.pcss b/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);

diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -301,6 +301,7 @@
         width: var(--borderWidth-thin);
         height: var(--base-size-16);
         content: '';
+        /* stylelint-disable-next-line primer/colors */
         background: var(--borderColor-default);
       }
     }
@@ -598,6 +599,7 @@ input[type='checkbox'].FormControl-checkbox {
     height: var(--base-size-16);
     visibility: hidden;
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--control-checked-fgColor-rest);
     transition: visibility 0s linear 230ms;
     clip-path: inset(var(--base-size-16) 0 0 0);
@@ -607,10 +609,7 @@ input[type='checkbox'].FormControl-checkbox {
     mask-size: 75%;
     mask-repeat: no-repeat;
     mask-position: center;
-
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
-    }
+    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
   }
 
   /* extend touch target */
@@ -635,26 +634,25 @@ input[type='checkbox'].FormControl-checkbox {
     &::before {
       visibility: visible;
       transition: visibility 0s linear 0s;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
-      }
+      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
     }
 
     &:disabled {
       cursor: not-allowed;
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--control-fgColor-disabled);
+      /* stylelint-disable-next-line primer/colors */
       border-color: var(--control-fgColor-disabled);
       opacity: 1;
 
       &::before {
+        /* stylelint-disable-next-line primer/colors */
         background-color: var(--control-checked-fgColor-rest);
       }
     }
 
     /* Windows High Contrast mode */
     @media (forced-colors: active) {
-      /* stylelint-disable-next-line primer/colors */
       background-color: canvastext;
       border-color: canvastext;
     }
@@ -706,6 +704,7 @@ input[type='radio'].FormControl-radio {
 
     &[disabled], &:disabled {
       cursor: not-allowed;
+      /* stylelint-disable-next-line primer/colors */
       border-color: var(--control-fgColor-disabled);
 
       & ~ .FormControl-radio-labelWrap {
@@ -723,7 +722,6 @@ input[type='radio'].FormControl-radio {
 
   /* Windows High Contrast mode */
   @media (forced-colors: active) {
-    /* stylelint-disable-next-line primer/colors */
     background-color: canvastext;
     border-color: canvastext;
   }

diff --git a/app/components/primer/alpha/underline_nav.pcss b/app/components/primer/alpha/underline_nav.pcss
@@ -97,6 +97,7 @@
       width: 100%;
       height: 2px;
       content: '';
+      /* stylelint-disable-next-line primer/colors */
       background: var(--underlineNav-borderColor-active);
       border-radius: var(--borderRadius-medium);
       transform: translate(50%, -50%);

diff --git a/app/components/primer/beta/avatar_stack.pcss b/app/components/primer/beta/avatar_stack.pcss
@@ -37,6 +37,7 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -11px;
     background-color: var(--bgColor-default);
+    /* stylelint-disable-next-line primer/colors */
     border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     box-shadow: none;
@@ -141,6 +142,7 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
     border-right: 0;
+    /* stylelint-disable-next-line primer/colors */
     border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 }
diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss
@@ -119,7 +119,6 @@
 
 /* At the time these styles were written,
    `34rem` was our "small" breakpoint width */
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 @container (max-width: 34rem) {
   .blankslate {
     --blankslate-outer-padding-block: var(--base-size-20);

diff --git a/app/components/primer/beta/popover.pcss b/app/components/primer/beta/popover.pcss
@@ -41,6 +41,7 @@
     margin-left: -8px;
     /* stylelint-disable-next-line primer/borders */
     border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-bottom-color: var(--overlay-bgColor);
   }
 }
@@ -70,6 +71,7 @@
 
   &::after {
     bottom: -14px;
+    /* stylelint-disable-next-line primer/colors */
     border-top-color: var(--overlay-bgColor);
   }
 }
@@ -147,6 +149,7 @@
 
   &::after {
     right: -14px;
+    /* stylelint-disable-next-line primer/colors */
     border-left-color: var(--overlay-bgColor);
   }
 }
@@ -162,6 +165,7 @@
 
   &::after {
     left: -14px;
+    /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
 }

diff --git a/app/components/primer/beta/timeline_item.pcss b/app/components/primer/beta/timeline_item.pcss
@@ -17,6 +17,7 @@
     display: block;
     width: var(--borderWidth-thick);
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--borderColor-muted);
   }
 
@@ -40,6 +41,7 @@
   color: var(--fgColor-muted);
   align-items: center;
   background-color: var(--timelineBadge-bgColor);
+  /* stylelint-disable-next-line primer/colors */
   border: var(--borderWidth-thick) solid var(--bgColor-default);
   border-radius: 50%;
   justify-content: center;

diff --git a/app/forms/caption_template_form.rb b/app/forms/caption_template_form.rb
@@ -18,5 +18,11 @@ class CaptionTemplateForm < ApplicationForm
       age_radios.radio_button(value: "young", label: "10-15")
       age_radios.radio_button(value: "middle_aged", label: "16-21")
     end
+
+    name_form.check_box_group(name: "places", label: "Cool places") do |check_group|
+      check_group.check_box(value: "lopez", label: "Lopez Island")
+      check_group.check_box(value: "bellevue", label: "Bellevue")
+      check_group.check_box(value: "seattle", label: "Seattle")
+    end
   end
 end
diff --git a/app/forms/caption_template_form/places_bellevue_caption.html.erb b/app/forms/caption_template_form/places_bellevue_caption.html.erb
@@ -0,0 +1 @@
+<span>Bellevue caption</span>