Merge pull request #28 from opf/bump/upstream

Update upstream primer/view_components repository

.changeset/clever-balloons-tell.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+[Bug] Don't fill in the spinner circle svg path

.changeset/cool-items-stare.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Add rubocop linter for `IconButton` component
+
+<!-- Changed components: Primer::IconButton -->

.changeset/eleven-pillows-explain.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Fixing ActionBar more menu items including buttons with no type
+
+<!-- Changed components: Primer::Alpha::ActionBar -->

.changeset/odd-pumas-live.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Fix errors in older browsers with :popover-open
+
+<!-- Changed components: Primer::Alpha::Tooltip -->

.changeset/rude-owls-prove.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Centre anchored-position elements when their anchor is not present
+
+<!-- Changed components: Primer::Alpha::Overlay -->

.changeset/sour-parrots-fetch.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Moving the render for the ActionBar::Item from the slot initializer to the call method.
+
+<!-- Changed components: _none_ -->

.devcontainer/devcontainer.json

@@ -32,8 +32,8 @@
     "vunguyentuan.vscode-postcss",
     "DavidAnson.vscode-markdownlint"
   ],
-  "forwardPorts": [4000, 5400],
-  "appPort": [4000, 5400],
+  "forwardPorts": [4000],
+  "appPort": [4000],
   "portsAttributes": {
     "4000": {
       "label": "demo"

.devcontainer/welcome-message.txt

@@ -4,6 +4,6 @@
 👢 Your environment is all set up and bootstrapped.
 
 🚀 To begin, start the server with the VS code task (⇧⌘B) or run
-   script/dev, which will start the Rails server at http://localhost:4000 and documentation at http://localhost:5400.
+   script/dev, which will start the Rails server at http://localhost:4000.
 
 ❔ Having other problems? Open an issue in the repo for support!

.erb-lint.yml

@@ -27,5 +27,7 @@ linters:
         Enabled: false
         Exclude:
           - app/components/primer/layout_component.html.erb
+      Primer/Migrations/IconButtonComponent:
+        Enabled: true
       Primer/Migrations/TruncateComponent:
         Enabled: true

.github/release_template.md

@@ -5,14 +5,14 @@ Please ensure these items are checked before merging.
 ### 🔎 Smoke test
 
 - [ ] All CI checks pass
+- [ ] Lookbook opens in a browser
 - [ ] Successful integration test with OpenProject as a primary consumer
   - [ ] Install the npm package locally
   - [ ] Install the `primer_view_components` gem locally
   - [ ] Verify no new build errors appear
   - [ ] Verify no new linting errors appear
   - [ ] Manually test critical paths
   - [ ] Manually test release-specific bugfixes and/or features work as described
-  - [ ] Lookbook opens in a browser
 
 ### 🤔 Sanity test
 

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v3
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@v37.6.0
+      uses: tj-actions/changed-files@v38.2.0
       with:
         files: |
           **/*.md
@@ -38,7 +38,7 @@ jobs:
     - uses: actions/checkout@v3
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@v37.6.0
+      uses: tj-actions/changed-files@v38.2.0
       with:
         files: |
           app/**/*.rb
@@ -61,7 +61,7 @@ jobs:
     - uses: actions/checkout@v3
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v37.6.0
+      uses: tj-actions/changed-files@v38.2.0
       with:
         files: |
           app/components/**/*.erb
@@ -81,7 +81,7 @@ jobs:
     - uses: actions/checkout@v3
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v37.6.0
+      uses: tj-actions/changed-files@v38.2.0
       with:
         files: |
           app/components/**/*.ts
@@ -102,7 +102,7 @@ jobs:
     - uses: actions/checkout@v3
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v37.6.0
+      uses: tj-actions/changed-files@v38.2.0
       with:
         files: |
           app/components/**/*.pcss

app/components/primer/alpha/action_bar.rb

@@ -23,9 +23,7 @@ class ActionBar < Primer::Component
             c.with_leading_visual_icon(icon: icon)
           end
 
-          render(Item.new) do
-            render(Primer::Beta::IconButton.new(id: item_id, icon: icon, "aria-label": label, size: @size, scheme: :invisible, **system_arguments))
-          end
+          Item.new(Primer::Beta::IconButton.new(id: item_id, icon: icon, "aria-label": label, size: @size, scheme: :invisible, **system_arguments))
         },
         divider: lambda {
           @action_menu.with_divider(hidden: true) if @overflow_menu
@@ -68,8 +66,6 @@ def with_menu_item(id:, **system_arguments, &block)
         system_arguments = {
           **system_arguments,
           hidden: true,
-          tag: :button,
-          type: "button",
           "data-for": id,
           "data-action": "click:action-bar#menuItemClick"
         }

app/components/primer/alpha/action_bar/item.rb

@@ -7,18 +7,19 @@ module Alpha
     class ActionBar
       # ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.
       class Item < Primer::Component
-        def initialize
+        def initialize(item_content)
           @system_arguments = {
             tag: :div,
             data: {
               targets: "action-bar.items"
             },
             classes: "ActionBar-item"
           }
+          @item_content = item_content
         end
 
         def call
-          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+          render(Primer::BaseComponent.new(**@system_arguments)) { render(@item_content) }
         end
       end
     end

app/components/primer/alpha/overlay.pcss

@@ -15,6 +15,10 @@ anchored-position[popover]:not(.\:popover-open) {
   display: none;
 }
 
+anchored-position.not-anchored::backdrop {
+  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
+}
+
 /* This reverts the declaration above for native popover, where `:popover-open` is supported */
 @supports selector(:popover-open) {
   anchored-position[popover]:not(.\:popover-open) {

app/components/primer/alpha/tool_tip.ts

@@ -2,6 +2,25 @@ import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import '@oddbird/popover-polyfill'
 import {getAnchoredPosition} from '@primer/behaviors'
 
+const isPopoverOpen = (() => {
+  let selector: string
+  function setSelector(el: Element) {
+    try {
+      selector = ':popover-open'
+      return el.matches(selector)
+    } catch {
+      try {
+        selector = ':open'
+        return el.matches(':open')
+      } catch {
+        selector = '.\\:popover-open'
+        return el.matches('.\\:popover-open')
+      }
+    }
+  }
+  return (el: Element) => (selector ? el.matches(selector) : setSelector(el))
+})()
+
 const TOOLTIP_ARROW_EDGE_OFFSET = 6
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
 const TOOLTIP_OFFSET = 10
@@ -22,7 +41,7 @@ const DIRECTION_CLASSES = [
 function closeOpenTooltips(except?: Element) {
   for (const tooltip of openTooltips) {
     if (tooltip === except) continue
-    if (tooltip.matches(':popover-open')) {
+    if (isPopoverOpen(tooltip)) {
       tooltip.hidePopover()
     } else {
       openTooltips.delete(tooltip)
@@ -206,16 +225,16 @@ class ToolTipElement extends HTMLElement {
 
   /* @deprecated */
   set hiddenFromView(value: true | false) {
-    if (value && this.matches(':popover-open')) {
+    if (value && isPopoverOpen(this)) {
       this.hidePopover()
-    } else if (!value && this.matches(':not(:popover-open)')) {
+    } else if (!value && !isPopoverOpen(this)) {
       this.showPopover()
     }
   }
 
   /* @deprecated */
   get hiddenFromView() {
-    return !this.matches(':popover-open')
+    return !isPopoverOpen(this)
   }
 
   connectedCallback() {
@@ -262,7 +281,7 @@ class ToolTipElement extends HTMLElement {
 
   async handleEvent(event: Event) {
     if (!this.control) return
-    const showing = this.matches(':popover-open')
+    const showing = isPopoverOpen(this)
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
@@ -277,9 +296,9 @@ class ToolTipElement extends HTMLElement {
     const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
 
     await Promise.resolve()
-    if (!showing && shouldShow && this.matches(':not(:popover-open)')) {
+    if (!showing && shouldShow && !isPopoverOpen(this)) {
       this.showPopover()
-    } else if (showing && shouldHide && this.matches(':popover-open')) {
+    } else if (showing && shouldHide && isPopoverOpen(this)) {
       this.hidePopover()
     }
 
@@ -377,7 +396,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || !this.matches(':popover-open')) return
+    if (!this.#allowUpdatePosition || !isPopoverOpen(this)) return
 
     const position = getAnchoredPosition(this, this.control, {
       side: this.#side,

app/components/primer/anchored_position.ts

@@ -133,10 +133,19 @@ export default class AnchoredPositionElement extends HTMLElement implements Posi
 
     this.#animationFrame = requestAnimationFrame(() => {
       const anchor = this.anchorElement
-      if (!anchor) return
-      const {left, top} = getAnchoredPosition(this, anchor, this)
-      this.style.top = `${top}px`
-      this.style.left = `${left}px`
+      this.classList.toggle('not-anchored', !anchor)
+      if (anchor) {
+        const {left, top} = getAnchoredPosition(this, anchor, this)
+        this.style.top = `${top}px`
+        this.style.left = `${left}px`
+        this.style.bottom = 'auto'
+        this.style.right = 'auto'
+      } else {
+        this.style.top = '0'
+        this.style.left = '0'
+        this.style.bottom = '0'
+        this.style.right = '0'
+      }
     })
   }
 }

app/components/primer/beta/spinner.html.erb

@@ -1,4 +1,4 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
+  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
   <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
 <% end %>

demo/config/application.rb

@@ -10,6 +10,7 @@
 require "primer/view_components"
 require "primer/view_components/engine"
 require "octicons"
+require_relative "../../lib/primer/yard"
 
 # Require the gems listed in Gemfile, including any gems
 # you've limited to :test, :development, or :production.