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

Bump/primer upstream

.changeset/dirty-parents-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Explicitly convert params to integers where needed for several previews

.changeset/flat-bags-remain.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Remove old primitives color themes imports and only use V8 on the demo lookbook

.changeset/great-flies-clean.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Tooltip: Update the threshold value to match with the offset

.changeset/healthy-colts-jog.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Fixes a bug where a tooltip was being shown in the navlist even when the text wasn't truncated for certain items.

.changeset/seven-pillows-explode.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Add a slot to `Overlay::Header` called `filter` for a filter input.

Gemfile.lock

@@ -52,7 +52,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (3.1.6)
+    bigdecimal (3.1.7)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
     builder (3.2.4)
@@ -130,7 +130,7 @@ GEM
     method_source (1.0.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.5)
-    minitest (5.22.2)
+    minitest (5.22.3)
     mocha (2.1.0)
       ruby2_keywords (>= 0.0.5)
     msgpack (1.7.2)
@@ -155,7 +155,7 @@ GEM
     puma (6.4.2)
       nio4r (~> 2.0)
     racc (1.7.3)
-    rack (3.0.9.1)
+    rack (3.0.10)
     rack-cors (2.0.2)
       rack (>= 2.0.0)
     rack-proxy (0.7.7)
@@ -187,7 +187,7 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rdoc (6.6.2)
+    rdoc (6.6.3.1)
       psych (>= 4.0.0)
     redcarpet (3.6.0)
     regexp_parser (2.9.0)
@@ -215,7 +215,7 @@ GEM
     rubocop-performance (1.20.2)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.30.0, < 2.0)
-    rubocop-rails (2.24.0)
+    rubocop-rails (2.24.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)

app/components/primer/alpha/action_list.ts

@@ -21,18 +21,21 @@ export class ActionListTruncationObserver {
   }
 
   update(el: HTMLElement) {
-    const label = el.querySelector('.ActionListItem-label')
-    if (!label) return
+    const items = el.querySelectorAll('li')
 
-    const tooltip = el.querySelector('.ActionListItem-truncationTooltip') as HTMLElement | null
-    if (!tooltip) return
+    for (const item of items) {
+      const label = item.querySelector('.ActionListItem-label') as HTMLElement
+      if (!label) continue
+      const tooltip = item.querySelector('.ActionListItem-truncationTooltip') as HTMLElement
+      if (!tooltip) continue
 
-    const isTruncated = label.scrollWidth > label.clientWidth
+      const isTruncated = label.scrollWidth > label.clientWidth
 
-    if (isTruncated) {
-      tooltip.style.display = ''
-    } else {
-      tooltip.style.display = 'none'
+      if (isTruncated) {
+        tooltip.style.display = ''
+      } else {
+        tooltip.style.display = 'none'
+      }
     }
   }
 }

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

@@ -303,7 +303,7 @@ def before_render
           )
 
           if @truncate_label == :show_tooltip && !tooltip?
-            with_tooltip(text: @label)
+            with_tooltip(text: @label, direction: :ne)
           end
 
           return unless leading_visual

app/components/primer/alpha/dialog.pcss

@@ -265,6 +265,10 @@ dialog.Overlay:not([open]) {
   }
 }
 
+.Overlay-headerFilter {
+  padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
+}
+
 /* generic body content slot */
 .Overlay-body {
   padding: var(--stack-padding-normal);

app/components/primer/alpha/overlay/header.html.erb

@@ -14,4 +14,5 @@
       </div>
     <% end %>
   </div>
+  <%= filter %>
 <% end %>

app/components/primer/alpha/overlay/header.rb

@@ -13,6 +13,18 @@ class Header < Primer::Component
         }.freeze
         SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
+        # Optional filter slot for adding a filter input to the header.
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :filter, lambda { |**system_arguments|
+          system_arguments[:tag] = :div
+          system_arguments[:classes] = class_names(
+            "Overlay-headerFilter",
+            system_arguments[:classes]
+          )
+          Primer::BaseComponent.new(**system_arguments)
+        }
+
         # @param title [String] Describes the content of the Overlay.
         # @param subtitle [String] Provides additional context for the Overlay, also setting the `aria-describedby` attribute.
         # @param overlay_id [String] Provides the id of the overlay element so the close button can close it

app/components/primer/alpha/tool_tip.ts

@@ -117,7 +117,7 @@ class ToolTipElement extends HTMLElement {
         display: block;
         right: 0;
         left: 0;
-        height: 12px;
+        height: var(--overlay-offset, 0.25rem);
         content: "";
       }
 

demo/app/assets/stylesheets/application.css

@@ -10,10 +10,64 @@
  *= require @primer/primitives/tokens-next-private/css/functional/size/size.css
  *= require @primer/primitives/tokens-next-private/css/functional/size/viewport.css
  *= require @primer/primitives/tokens-next-private/css/functional/typography/typography.css
- *= require @primer/css/dist/color-modes.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light.css
  *= require @primer/css/dist/base.css
  *= require @primer/css/dist/buttons.css
  *= require @primer/css/dist/layout.css
  *= require @primer/css/dist/utilities.css
  *= require @primer/css/dist/markdown.css
 */
+
+:root,[data-color-mode="light"][data-light-theme*="light"],[data-color-mode="dark"][data-dark-theme*="light"] {
+  color-scheme: light
+}
+
+@media(prefers-color-scheme: light) {
+  [data-color-mode="auto"][data-light-theme*="light"] {
+      color-scheme:light
+  }
+}
+
+@media(prefers-color-scheme: dark) {
+  [data-color-mode="auto"][data-dark-theme*="light"] {
+      color-scheme:light
+  }
+}
+
+[data-color-mode="light"][data-light-theme*="dark"],[data-color-mode="dark"][data-dark-theme*="dark"] {
+  color-scheme: dark
+}
+
+@media(prefers-color-scheme: light) {
+  [data-color-mode="auto"][data-light-theme*="dark"] {
+      color-scheme:dark
+  }
+}
+
+@media(prefers-color-scheme: dark) {
+  [data-color-mode="auto"][data-dark-theme*="dark"] {
+      color-scheme:dark
+  }
+}
+
+[data-color-mode] {
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default))
+}
+
+@media(forced-colors: active) {
+  body {
+      --color-accent-emphasis: Highlight;
+      --color-fg-on-emphasis: LinkText;
+      --fgColor-onEmphasis: LinkText;
+      --fgColor-accent: Highlight
+  }
+}

demo/app/assets/stylesheets/component_preview.css

@@ -32,7 +32,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted);
   padding: var(--base-size-4) var(--base-size-8);
   font: var(--primer-text-caption-shorthand);
 }

demo/app/views/layouts/component_preview.html.erb

@@ -6,9 +6,6 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <% if params.dig(:primitives) || params.dig(:lookbook, :display, :primitives) == "next_major_v8" %>
-      <%= stylesheet_link_tag "primitives_v8", "data-turbo-track": "reload" %>
-    <% end %>
     <%= stylesheet_link_tag "primer_view_components", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "primer_view_components", type: "module", "data-turbo-track": "reload" %>
     <% if Rails.env.development? %>

demo/config/application.rb

@@ -90,10 +90,6 @@ class Application < Rails::Application
           ["Dark high contrast", "dark_high_contrast"],
           ["Dark colorblind", "dark_colorblind"],
           ["All themes", "all"]
-        ],
-        primitives: [
-          ["Next Major v8", "next_major_v8"],
-          ["Default", "default"]
         ]
       }