Merge branch 'main' into inline_forms

primer · Sep 13, 2023 · d45fd7e · d45fd7e
2 parents 3f7b23a + a7366c3
commit d45fd7e
Show file tree

Hide file tree

Showing 25 changed files with 257 additions and 157 deletions.
diff --git a/.changeset/clever-balloons-tell.md b/.changeset/clever-balloons-tell.md
diff --git a/.changeset/cool-items-stare.md b/.changeset/cool-items-stare.md
diff --git a/.changeset/sour-parrots-fetch.md b/.changeset/sour-parrots-fetch.md
diff --git a/.devcontainer/devcontainer.json b/.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"

diff --git a/.devcontainer/welcome-message.txt b/.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!
diff --git a/.github/release_template.md b/.github/release_template.md
@@ -7,8 +7,8 @@ Please ensure these items are checked before merging.
 - [ ] All CI checks pass
 - [ ] Lookbook opens in a browser
 - [ ] Successful integration test with GitHub.com as a primary consumer of Primer View Components
-  - [ ] Install the npm release candidate in `npm-workspaces/primer/`
-  - [ ] Use `bin/vendor-gem` to update `primer_view_components` gem
+  - [ ] Install the npm release candidate: `npm i -w ./npm-workspaces/primer/ @primer/view-components@next`
+  - [ ] Update `primer_view_components` gem: `script/vendor-gem https://github.com/primer/view_components.git -r changeset-release/main`
   - [ ] Verify no new build errors appear
   - [ ] Verify no new linting errors appear
   - [ ] Manually test critical paths

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,33 @@
 # CHANGELOG
 
+## 0.9.0
+
+### Minor Changes
+
+- [#2205](https://github.com/primer/view_components/pull/2205) [`88ac3095`](https://github.com/primer/view_components/commit/88ac309577b5b735af5067ee6ab2c8c30f48aefc) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add rubocop linter for `IconButton` component
+
+  <!-- Changed components: Primer::IconButton -->
+
+- [#2223](https://github.com/primer/view_components/pull/2223) [`00b7d5d7`](https://github.com/primer/view_components/commit/00b7d5d78e2f52dc6bc6c54689e50da976289203) Thanks [@jonrohan](https://github.com/jonrohan)! - Moving the render for the ActionBar::Item from the slot initializer to the call method.
+
+  <!-- Changed components: _none_ -->
+
+### Patch Changes
+
+- [#2227](https://github.com/primer/view_components/pull/2227) [`bb336bb6`](https://github.com/primer/view_components/commit/bb336bb6f034e20778b4834edae3540c365b9d9f) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug] Don't fill in the spinner circle svg path
+
+- [#2237](https://github.com/primer/view_components/pull/2237) [`70a8336f`](https://github.com/primer/view_components/commit/70a8336fda45b144f81c1ece54b17a26037126e4) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixing ActionBar more menu items including buttons with no type
+
+  <!-- Changed components: Primer::Alpha::ActionBar -->
+
+- [#2204](https://github.com/primer/view_components/pull/2204) [`ed1644a2`](https://github.com/primer/view_components/commit/ed1644a2fa5b701611a13513cb903774f3f74152) Thanks [@keithamus](https://github.com/keithamus)! - Fix errors in older browsers with :popover-open
+
+  <!-- Changed components: Primer::Alpha::Tooltip -->
+
+- [#2236](https://github.com/primer/view_components/pull/2236) [`d663e450`](https://github.com/primer/view_components/commit/d663e4508341f5b9ef1788b8a2231782ce3ed44d) Thanks [@keithamus](https://github.com/keithamus)! - Centre anchored-position elements when their anchor is not present
+
+  <!-- Changed components: Primer::Alpha::Overlay -->
+
 ## 0.8.0
 
 ### Minor Changes

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    primer_view_components (0.8.0)
+    primer_view_components (0.9.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 18.0.0)
@@ -120,7 +120,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.14.0-x86_64-linux)
       racc (~> 1.4)
-    octicons (19.6.0)
+    octicons (19.7.0)
     parallel (1.22.1)
     parser (3.2.0.0)
       ast (~> 2.4.1)

diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb
@@ -66,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"
         }

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

diff --git a/app/components/primer/alpha/tool_tip.ts b/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,

diff --git a/app/components/primer/anchored_position.ts b/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'
+      }
     })
   }
 }

diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    primer_view_components (0.8.0)
+    primer_view_components (0.9.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
       octicons (>= 18.0.0)
@@ -271,7 +271,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
-    octicons (19.5.0)
+    octicons (19.7.0)
     oj (3.16.0)
     os (1.1.4)
     pry (0.14.1)