Merge pull request #217 from opf/bump/primer-upstream

Bump/primer upstream 0.36.2

.changeset/friendly-owls-destroy.md

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

.changeset/khaki-seals-battle.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Improve template path detection for forms

.changeset/sharp-jokes-notice.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Adds `role="radiogroup"` on `fieldset` in radio group component

.changeset/wild-parrots-train.md

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

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

@@ -72,7 +72,7 @@ jobs:
       with:
         ruby-version: '3.3'
         bundler-cache: true
-    - uses: actions/cache@v4.1.0
+    - 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') }}

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@v45.0.4
+      uses: tj-actions/changed-files@v45.0.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/changed-files@v45.0.4
+      uses: tj-actions/changed-files@v45.0.5
       with:
         files: |
           app/**/*.rb
@@ -58,7 +58,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v45.0.4
+      uses: tj-actions/changed-files@v45.0.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/changed-files@v45.0.4
+      uses: tj-actions/changed-files@v45.0.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/changed-files@v45.0.4
+      uses: tj-actions/changed-files@v45.0.5
       with:
         files: |
           app/components/**/*.pcss

Gemfile.lock

@@ -4,7 +4,7 @@ PATH
     openproject-primer_view_components (0.50.1)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-      openproject-octicons (>= 19.17.0)
+      openproject-octicons (>= 19.20.0)
       view_component (>= 3.1, < 4.0)
 
 GEM
@@ -147,7 +147,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.16.7-x86_64-linux)
       racc (~> 1.4)
-    openproject-octicons (19.17.0)
+    openproject-octicons (19.20.0)
     parallel (1.26.3)
     parser (3.3.5.0)
       ast (~> 2.4.1)

app/components/primer/alpha/action_list.pcss

@@ -448,64 +448,31 @@ nav-list {
   */
   &[aria-checked='true'],
   &[aria-selected='true'] {
-    /* multiselect checkmark */
-    & .ActionListItem-multiSelectCheckmark {
-      visibility: visible;
-      opacity: 1;
-      transition:
-        visibility 0 linear 0,
-        opacity 50ms;
+    & .FormControl-checkbox {
+      background: var(--control-checked-bgColor-rest);
+      border-color: var(--control-checked-borderColor-rest);
+      transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
+
+      &::before {
+        visibility: visible;
+        transition: visibility 0s linear 0s;
+        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      }
     }
 
     /* singleselect checkmark */
     & .ActionListItem-singleSelectCheckmark {
       visibility: visible;
     }
-
-    /* checkbox */
-    & .ActionListItem-multiSelectIcon {
-      & .ActionListItem-multiSelectIconRect {
-        fill: var(--control-checked-bgColor-rest);
-        stroke: var(--control-checked-bgColor-rest);
-        stroke-width: var(--borderWidth-thin, 1px);
-      }
-
-      & .ActionListItem-multiSelectCheckmark {
-        fill: var(--fgColor-onEmphasis);
-      }
-    }
   }
 
   &[aria-checked='false'],
   &[aria-selected='false'] {
-    /* multiselect checkmark */
-    & .ActionListItem-multiSelectCheckmark {
-      visibility: hidden;
-      opacity: 0;
-      transition:
-        visibility 0 linear 50ms,
-        opacity 50ms;
-    }
-
     /* singleselect checkmark */
     & .ActionListItem-singleSelectCheckmark {
       visibility: hidden;
       transition: visibility 0s linear 200ms;
     }
-
-    /* checkbox */
-    & .ActionListItem-multiSelectIcon {
-      & .ActionListItem-multiSelectIconRect {
-        fill: var(--bgColor-default);
-        stroke: var(--control-borderColor-rest);
-        stroke-width: var(--borderWidth-thin, 1px);
-      }
-    }
-
-    & .ActionListItem-multiSelectIconRect {
-      fill: var(--bgColor-default);
-      border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
-    }
   }
 
   /* sizes */

app/components/primer/alpha/action_list/item.html.erb

@@ -13,10 +13,7 @@
         </span>
       <% elsif list.select_variant == :multiple_checkbox %>
         <span class="ActionListItem-visual ActionListItem-action--leading">
-          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionListItem-multiSelectIcon">
-            <rect x="2" y="2" width="12" height="12" rx="4" class="ActionListItem-multiSelectIconRect"></rect>
-            <path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionListItem-multiSelectCheckmark"></path>
-          </svg>
+          <div class="FormControl-checkbox"></div>
         </span>
       <% end %>
       <% if leading_visual %>

app/components/primer/alpha/action_menu.rb

@@ -224,6 +224,12 @@ def initialize(
         @system_arguments[:"data-dynamic-label"] = "" if dynamic_label
         @system_arguments[:"data-dynamic-label-prefix"] = dynamic_label_prefix if dynamic_label_prefix.present?
 
+        overlay_arguments[:data] = merge_data(
+          overlay_arguments, data: {
+            target: "action-menu.overlay"
+          }
+        )
+
         @overlay = Primer::Alpha::Overlay.new(
           id: "#{@menu_id}-overlay",
           title: "Menu",

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -1,6 +1,8 @@
 import {controller, target} from '@github/catalyst'
 import '@oddbird/popover-polyfill'
 import type {IncludeFragmentElement} from '@github/include-fragment-element'
+import AnchoredPositionElement from '../../anchored_position'
+import {observeMutationsUntilConditionMet} from '../../utils'
 
 type SelectVariant = 'none' | 'single' | 'multiple' | null
 type SelectedItem = {
@@ -17,10 +19,14 @@ export class ActionMenuElement extends HTMLElement {
   @target
   includeFragment: IncludeFragmentElement
 
+  @target
+  overlay: AnchoredPositionElement
+
   #abortController: AbortController
   #originalLabel = ''
   #inputName = ''
   #invokerBeingClicked = false
+  #intersectionObserver: IntersectionObserver
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -106,6 +112,37 @@ export class ActionMenuElement extends HTMLElement {
         signal,
       })
     }
+
+    // The code below updates the menu (i.e. overlay) position whenever the invoker button
+    // changes position within its scroll container.
+    //
+    // See: https://github.com/primer/view_components/issues/3175
+
+    const scrollUpdater = () => {
+      if (this.#isOpen()) {
+        this.overlay?.update()
+      }
+    }
+
+    this.#intersectionObserver = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        const elem = entry.target
+        if (elem === this.invokerElement) {
+          if (entry.isIntersecting) {
+            // eslint-disable-next-line github/prefer-observers
+            window.addEventListener('scroll', scrollUpdater, {capture: true})
+          } else {
+            window.removeEventListener('scroll', scrollUpdater, {capture: true})
+          }
+        }
+      }
+    })
+
+    observeMutationsUntilConditionMet(
+      this,
+      () => Boolean(this.invokerElement),
+      () => this.#intersectionObserver.observe(this.invokerElement!),
+    )
   }
 
   disconnectedCallback() {

app/components/primer/alpha/select_panel_element.ts

@@ -6,6 +6,7 @@ import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import type {LiveRegionElement} from '@primer/live-region-element'
 import '@primer/live-region-element'
 import '@oddbird/popover-polyfill'
+import {observeMutationsUntilConditionMet} from '../utils'
 
 type SelectVariant = 'none' | 'single' | 'multiple' | null
 type SelectedItem = {
@@ -196,15 +197,17 @@ export class SelectPanelElement extends HTMLElement {
     this.#softDisableItems()
     updateWhenVisible(this)
 
-    this.#waitForCondition(
+    observeMutationsUntilConditionMet(
+      this,
       () => Boolean(this.remoteInput),
       () => {
         this.remoteInput.addEventListener('loadstart', this, {signal})
         this.remoteInput.addEventListener('loadend', this, {signal})
       },
     )
 
-    this.#waitForCondition(
+    observeMutationsUntilConditionMet(
+      this,
       () => Boolean(this.includeFragment),
       () => {
         this.includeFragment.addEventListener('include-fragment-replaced', this, {signal})
@@ -237,7 +240,8 @@ export class SelectPanelElement extends HTMLElement {
       }
     })
 
-    this.#waitForCondition(
+    observeMutationsUntilConditionMet(
+      this,
       () => Boolean(this.dialog),
       () => {
         this.#dialogIntersectionObserver.observe(this.dialog)
@@ -250,7 +254,8 @@ export class SelectPanelElement extends HTMLElement {
     )
 
     if (this.#fetchStrategy === FetchStrategy.LOCAL) {
-      this.#waitForCondition(
+      observeMutationsUntilConditionMet(
+        this,
         () => this.items.length > 0,
         () => {
           this.#updateItemVisibility()
@@ -260,23 +265,6 @@ export class SelectPanelElement extends HTMLElement {
     }
   }
 
-  // Waits for condition to return true. If it returns false initially, this function creates a
-  // MutationObserver that calls body() whenever the contents of the component change.
-  #waitForCondition(condition: () => boolean, body: () => void) {
-    if (condition()) {
-      body()
-    } else {
-      const mutationObserver = new MutationObserver(() => {
-        if (condition()) {
-          body()
-          mutationObserver.disconnect()
-        }
-      })
-
-      mutationObserver.observe(this, {childList: true, subtree: true})
-    }
-  }
-
   disconnectedCallback() {
     this.#abortController.abort()
   }

app/components/primer/alpha/text_field.pcss

@@ -1,4 +1,3 @@
-/* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable selector-max-type */
 /* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-max-specificity */
@@ -609,7 +608,7 @@
 
 /* these selectors are temporary to override base.scss
 ** once Field styles are widely adopted, we can adjust this and the global base styles */
-input[type='checkbox'].FormControl-checkbox {
+.FormControl-checkbox {
   @mixin Field;
 
   position: relative;
@@ -701,7 +700,7 @@ input[type='checkbox'].FormControl-checkbox {
   }
 }
 
-input[type='radio'].FormControl-radio {
+.FormControl-radio {
   @mixin Field;
 
   position: relative;

app/components/primer/primer.ts

@@ -8,6 +8,7 @@ import './dialog_helper'
 import './focus_group'
 import './scrollable_region'
 import './shared_events'
+import './utils'
 import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'

app/components/primer/utils.ts

@@ -0,0 +1,16 @@
+// Waits for condition to return true. If it returns false initially, this function creates a
+// MutationObserver that calls body() whenever the contents of the component change.
+export const observeMutationsUntilConditionMet = (element: Element, condition: () => boolean, body: () => void) => {
+  if (condition()) {
+    body()
+  } else {
+    const mutationObserver = new MutationObserver(() => {
+      if (condition()) {
+        body()
+        mutationObserver.disconnect()
+      }
+    })
+
+    mutationObserver.observe(element, {childList: true, subtree: true})
+  }
+}