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

Update from Primer base repo

.changeset/dry-cameras-attend.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Prevent scrolling when activating ActionMenu items via space

.changeset/red-moles-tie.md

@@ -0,0 +1,7 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Revert Tooltip caret removal
+
+<!-- Changed components: Tooltip -->

Gemfile

@@ -50,7 +50,7 @@ group :test do
   # Disallow v5.19 for now since it breaks mocha.
   # See: https://github.com/freerange/mocha/issues/614
   # Remove this line when mocha has fixed the issue
-  gem "minitest", "< 5.19"
+  gem "minitest", "< 5.21"
 end
 
 # development dependencies

Gemfile.lock

@@ -112,7 +112,7 @@ GEM
     method_source (1.0.0)
     mini_mime (1.1.2)
     mini_portile2 (2.8.1)
-    minitest (5.18.1)
+    minitest (5.20.0)
     mocha (2.1.0)
       ruby2_keywords (>= 0.0.5)
     msgpack (1.7.0)
@@ -257,7 +257,7 @@ DEPENDENCIES
   listen (~> 3.0)
   lookbook (~> 2.1.1)
   matrix (~> 0.4.2)
-  minitest (< 5.19)
+  minitest (< 5.21)
   mocha
   openproject-primer_view_components!
   pry

app/components/primer/alpha/action_bar_element.ts

@@ -93,6 +93,8 @@ class ActionBarElement extends HTMLElement {
 
   #isVisible(element: HTMLElement): boolean {
     // Safari doesn't support `checkVisibility` yet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     if (typeof element.checkVisibility === 'function') return element.checkVisibility()
 
     return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)

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

@@ -134,11 +134,24 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #isKeyboardActivation(event: Event): boolean {
+    return this.#isKeyboardActivationViaEnter(event) || this.#isKeyboardActivationViaSpace(event)
+  }
+
+  #isKeyboardActivationViaEnter(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  #isKeyboardActivationViaSpace(event: Event): boolean {
     return (
       event instanceof KeyboardEvent &&
       event.type === 'keydown' &&
       !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-      (event.key === 'Enter' || event.key === ' ')
+      event.key === ' '
     )
   }
 
@@ -202,6 +215,16 @@ export class ActionMenuElement extends HTMLElement {
 
       this.#activateItem(event, item)
       this.#handleItemActivated(event, item)
+
+      // Pressing the space key on a button will cause the page to scroll unless preventDefault()
+      // is called. Unfortunately, calling preventDefault() will also skip form submission. The
+      // code below therefore only calls preventDefault() if the button submits a form and the
+      // button is being activated by the space key.
+      if (item.getAttribute('type') === 'submit' && this.#isKeyboardActivationViaSpace(event)) {
+        event.preventDefault()
+        item.closest('form')?.submit()
+      }
+
       return
     }
 

app/components/primer/alpha/tool_tip.ts

@@ -21,8 +21,9 @@ const isPopoverOpen = (() => {
   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 = 4
+const TOOLTIP_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -91,15 +92,33 @@ class ToolTipElement extends HTMLElement {
         text-wrap: balance;
       }
 
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0;
+      }
+
       @keyframes tooltip-appear {
         from {
           opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: "";
+      }
+
       :host(:popover-open),
       :host(:popover-open):before {
         animation-name: tooltip-appear;
@@ -108,11 +127,65 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
       }
 
-      :host(.\\:popover-open) {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
+        animation-delay: .4s;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%;
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
     `
   }

lib/primer/accessibility.rb

@@ -8,9 +8,7 @@ module Accessibility
     # Do not add to this list for any other reason!
     IGNORED_PREVIEWS = [
       Primer::Beta::MarkdownPreview,
-      Primer::Beta::AutoCompleteItemPreview,
-      Primer::Alpha::RadioButtonPreview,
-      Primer::Alpha::CheckBoxPreview
+      Primer::Beta::AutoCompleteItemPreview
     ].freeze
 
     # Skip `:region` which relates to preview page structure rather than individual component.

previews/primer/alpha/check_box_preview.rb

@@ -7,15 +7,13 @@ class CheckBoxPreview < ViewComponent::Preview
       # @label Playground
       #
       # @param name text
-      # @param id text
       # @param value text
       # @param label text
       # @param caption text
       # @param visually_hide_label toggle
       # @param disabled toggle
       def playground(
         name: "my-check-box",
-        id: nil,
         value: "picard",
         label: "Jean-Luc Picard",
         caption: "Make it so",
@@ -24,7 +22,6 @@ def playground(
       )
         system_arguments = {
           name: name,
-          id: id,
           value: value,
           label: label,
           caption: caption,

previews/primer/alpha/dialog_preview/with_text_input.html.erb

@@ -4,7 +4,8 @@
     <p>Dialog One!</p>
 
     <form>
-      <input type="text" value="Some text goes in here">
+      <label for="dialog-text-input-example">Example input</label>
+      <input id="dialog-text-input-example" type="text" value="Some text goes in here">
     </form>
   <% end %>
 <% end %>

previews/primer/alpha/radio_button_preview.rb

@@ -7,15 +7,13 @@ class RadioButtonPreview < ViewComponent::Preview
       # @label Playground
       #
       # @param name text
-      # @param id text
       # @param value text
       # @param label text
       # @param caption text
       # @param visually_hide_label toggle
       # @param disabled toggle
       def playground(
         name: "my-radio-button",
-        id: nil,
         value: "bsg",
         label: "Battlestar Galactica",
         caption: "A pretty good show",
@@ -24,7 +22,6 @@ def playground(
       )
         system_arguments = {
           name: name,
-          id: id,
           value: value,
           label: label,
           caption: caption,