primer_view_components 0.8.0 → 0.9.0

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

@@ -7,7 +7,7 @@ module Primer
     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: {
@@ -15,10 +15,11 @@ module Primer
             },
             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

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

@@ -23,9 +23,7 @@ module Primer
             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 @@ module Primer
         system_arguments = {
           **system_arguments,
           hidden: true,
-          tag: :button,
-          type: "button",
           "data-for": id,
           "data-action": "click:action-bar#menuItemClick"
         }

data/app/components/primer/alpha/overlay.css

@@ -1 +1 @@
-anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}
+anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}

data/app/components/primer/alpha/overlay.css.json

@@ -3,6 +3,8 @@
   "selectors": [
     "anchored-position[popover]",
     ".Overlay",
-    "anchored-position[popover]:not(.\\:popover-open)"
+    "anchored-position[popover]:not(.\\:popover-open)",
+    "anchored-position.not-anchored::-webkit-backdrop",
+    "anchored-position.not-anchored::backdrop"
   ]
 }

data/app/components/primer/alpha/overlay.css.map

@@ -1 +1 @@
-{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BACE,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAIF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAGA,kCACE,gDACE,cACF,CACF,CAGA,0BACE,gDACI,cACJ,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n\n/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */\n@supports selector(:open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n      display: revert;\n  }\n}\n"]}
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,2BACE,cAAe,CAIf,UAAW,CADX,eAAgB,CAEhB,gBAAiB,CAJjB,SAAU,CACV,iBAIF,CAEA,SACE,YACF,CAEA,gDACE,YACF,CAEA,iDACE,2EACF,CAFA,yCACE,2EACF,CAGA,kCACE,gDACE,cACF,CACF,CAGA,0BACE,gDACI,cACJ,CACF","file":"overlay.css","sourcesContent":["anchored-position[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n  min-width: 192px;\n  inset: auto;\n  overflow: visible;\n}\n\n.Overlay {\n  display: flex;\n}\n\nanchored-position[popover]:not(.\\:popover-open) {\n  display: none;\n}\n\nanchored-position.not-anchored::backdrop {\n  background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));\n}\n\n/* This reverts the declaration above for native popover, where `:popover-open` is supported */\n@supports selector(:popover-open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n    display: revert;\n  }\n}\n\n/* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */\n@supports selector(:open) {\n  anchored-position[popover]:not(.\\:popover-open) {\n      display: revert;\n  }\n}\n"]}

data/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) {

data/app/components/primer/alpha/tool_tip.js

@@ -12,6 +12,26 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
+const isPopoverOpen = (() => {
+    let selector;
+    function setSelector(el) {
+        try {
+            selector = ':popover-open';
+            return el.matches(selector);
+        }
+        catch (_a) {
+            try {
+                selector = ':open';
+                return el.matches(':open');
+            }
+            catch (_b) {
+                selector = '.\\:popover-open';
+                return el.matches('.\\:popover-open');
+            }
+        }
+    }
+    return (el) => (selector ? el.matches(selector) : setSelector(el));
+})();
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
 const TOOLTIP_OFFSET = 10;
@@ -29,7 +49,7 @@ function closeOpenTooltips(except) {
     for (const tooltip of openTooltips) {
         if (tooltip === except)
             continue;
-        if (tooltip.matches(':popover-open')) {
+        if (isPopoverOpen(tooltip)) {
             tooltip.hidePopover();
         }
         else {
@@ -207,16 +227,16 @@ class ToolTipElement extends HTMLElement {
     }
     /* @deprecated */
     set hiddenFromView(value) {
-        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() {
         var _a, _b;
@@ -260,7 +280,7 @@ class ToolTipElement extends HTMLElement {
     async handleEvent(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
         const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
@@ -272,10 +292,10 @@ class ToolTipElement extends HTMLElement {
         const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
         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();
         }
         if (event.type === 'toggle') {
@@ -378,7 +398,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !this.matches(':popover-open'))
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !isPopoverOpen(this))
         return;
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),

data/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,

data/app/components/primer/anchored_position.js

@@ -131,11 +131,20 @@ export default class AnchoredPositionElement extends HTMLElement {
         cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
         __classPrivateFieldSet(this, _AnchoredPositionElement_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';
+            }
         }), "f");
     }
 }

data/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'
+      }
     })
   }
 }

data/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 %>

data/lib/primer/view_components/linters/migrations/iconbutton_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RuboCop
+  module Cop
+    module Migrations
+      # Lint and autocorrect deprecated IconButton
+      class IconButtonComponent < RuboCop::Cop::Cop
+        INVALID_MESSAGE = <<~STR
+          `Primer::IconButton` is deprecated. Please use `Primer::Beta::IconButton` instead.
+        STR
+
+        def_node_matcher :icon_button, <<~PATTERN
+          (send $(const (const nil? :Primer) :IconButton) :new ...)
+        PATTERN
+
+        def_node_matcher :hash_with_box_value?, <<~PATTERN
+          (hash ... (pair (sym :box) (...)) ... )
+        PATTERN
+
+        def on_send(node)
+          return unless icon_button(node)
+
+          add_offense(node, message: INVALID_MESSAGE)
+        end
+
+        def autocorrect(node)
+          return if hash_with_box_value?(node.arguments.first)
+
+          lambda do |corrector|
+            corrector.replace(icon_button(node), "Primer::Beta::IconButton")
+          end
+        end
+      end
+    end
+  end
+  end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 8
+      MINOR = 9
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/overlay_preview/in_an_action_menu.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::Alpha::ActionMenu.new()) do |menu| %>
+  <% menu.with_show_button { "Menu" } %>
+  <% menu.with_item(label: "Open Overlay", content_arguments: { id: "overlay-show-my-overlay", popovertarget: "my-overlay" }) %>
+<% end %>
+<%= render(Primer::Alpha::Overlay.new(
+  id: "my-overlay",
+  title: "An overlay",
+  role: :dialog,
+  popover: "manual",
+)) do |d| %>
+  <% d.with_header(title: "An overlay") %>
+  <% d.with_body { "This is an overlay" } %>
+<% end %>

data/previews/primer/alpha/overlay_preview.rb

@@ -164,6 +164,11 @@ module Primer
                              })
       end
 
+      # @label In an ActionMenu
+      def in_an_action_menu()
+        render_with_template(locals: {})
+      end
+
       # @label Dialog with header and footer
       #
       def dialog_with_header_footer

data/static/info_arch.json

@@ -5910,6 +5910,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/overlay/in_an_action_menu",
+        "name": "in_an_action_menu",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/overlay/dialog_with_header_footer",
         "name": "dialog_with_header_footer",

data/static/previews.json

@@ -4417,6 +4417,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/overlay/in_an_action_menu",
+        "name": "in_an_action_menu",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/overlay/dialog_with_header_footer",
         "name": "dialog_with_header_footer",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-28 00:00:00.000000000 Z
+date: 2023-09-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -935,6 +935,7 @@ files:
 - lib/primer/view_components/linters/helpers/rule_helpers.rb
 - lib/primer/view_components/linters/label_component_migration_counter.rb
 - lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb
+- lib/primer/view_components/linters/migrations/iconbutton_component.rb
 - lib/primer/view_components/linters/migrations/truncate_component.rb
 - lib/primer/view_components/linters/severity_schema.rb
 - lib/primer/view_components/linters/subhead_component_migration_counter.rb
@@ -1021,6 +1022,7 @@ files:
 - previews/primer/alpha/nav_list_preview.rb
 - previews/primer/alpha/nav_list_preview/trailing_action.html.erb
 - previews/primer/alpha/overlay_preview.rb
+- previews/primer/alpha/overlay_preview/in_an_action_menu.html.erb
 - previews/primer/alpha/overlay_preview/middle_of_page.html.erb
 - previews/primer/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb
 - previews/primer/alpha/radio_button_group_preview.rb