openproject-primer_view_components 0.9.1 → 0.11.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/app/components/primer/open_project/border_grid/cell.html.erb

@@ -0,0 +1,3 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= content %>
+<% end %>

data/app/components/primer/open_project/border_grid/cell.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class BorderGrid
+      # A single cell inside the BorderGrid
+      # A cell can contain for example an action list or a status badge
+      class Cell < Primer::Component
+        status :open_project
+
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = "div"
+
+          @system_arguments[:classes] =
+            class_names(
+              @system_arguments[:classes],
+              "BorderGrid-cell"
+            )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/border_grid.css

@@ -0,0 +1 @@
+.BorderGrid{border-collapse:collapse;border-style:hidden;display:table;margin-bottom:-16px;margin-top:-16px;table-layout:fixed;width:100%}.BorderGrid .BorderGrid-cell{padding-bottom:16px;padding-top:16px}.BorderGrid--spacious{margin-bottom:-24px;margin-top:-24px}.BorderGrid--spacious .BorderGrid-cell{padding-bottom:24px;padding-top:24px}.BorderGrid-row{display:table-row}.BorderGrid-cell{border:1px solid var(--borderColor-muted,var(--color-border-muted));display:table-cell}

data/app/components/primer/open_project/border_grid.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/border_grid",
+  "selectors": [
+    ".BorderGrid",
+    ".BorderGrid .BorderGrid-cell",
+    ".BorderGrid--spacious",
+    ".BorderGrid--spacious .BorderGrid-cell",
+    ".BorderGrid-row",
+    ".BorderGrid-cell"
+  ]
+}

data/app/components/primer/open_project/border_grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YAMI,wBAAyB,CACzB,mBAAmB,CANnB,aAAc,CAGd,mBAAoB,CADpB,gBAAiB,CAEjB,kBAAmB,CAHnB,UAMJ,CAEA,6BAEI,mBAAmB,CADnB,gBAEJ,CAEA,sBAEI,mBAAmB,CADnB,gBAEJ,CAEA,uCAEI,mBAAmB,CADnB,gBAEJ,CAEA,gBACI,iBACJ,CAEA,iBAEI,mEAAyC,CADzC,kBAEJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: -16px;\n    margin-bottom: -16px;\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: 16px;\n    padding-bottom: 16px\n}\n\n.BorderGrid--spacious {\n    margin-top: -24px;\n    margin-bottom: -24px\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: 24px;\n    padding-bottom: 24px\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: 1px solid var(--borderColor-muted)\n}\n"]}

data/app/components/primer/open_project/border_grid.html.erb

@@ -0,0 +1,7 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% rows.each do |row| %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "BorderGrid-row") do %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/border_grid.pcss

@@ -0,0 +1,35 @@
+/* CSS for BorderGrid  */
+
+.BorderGrid {
+    display: table;
+    width: 100%;
+    margin-top: -16px;
+    margin-bottom: -16px;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-style: hidden
+}
+
+.BorderGrid .BorderGrid-cell {
+    padding-top: 16px;
+    padding-bottom: 16px
+}
+
+.BorderGrid--spacious {
+    margin-top: -24px;
+    margin-bottom: -24px
+}
+
+.BorderGrid--spacious .BorderGrid-cell {
+    padding-top: 24px;
+    padding-bottom: 24px
+}
+
+.BorderGrid-row {
+    display: table-row
+}
+
+.BorderGrid-cell {
+    display: table-cell;
+    border: 1px solid var(--borderColor-muted)
+}

data/app/components/primer/open_project/border_grid.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A set of blocks that are shown below each other with separator lines in between
+    class BorderGrid < Primer::Component
+      status :open_project
+
+      # Use to render a block inside the grid
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |**system_arguments|
+        Primer::OpenProject::BorderGrid::Cell.new(**system_arguments)
+      }
+
+      # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(spacious: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @spacious = spacious
+
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "BorderGrid",
+            "BorderGrid--spacious" => @spacious
+          )
+      end
+
+      def render?
+        rows.any?
+      end
+    end
+  end
+end

data/app/components/primer/open_project/drag_handle.css

@@ -0,0 +1 @@
+.DragHandle{color:var(--fgColor-muted,var(--color-fg-muted));cursor:move}

data/app/components/primer/open_project/drag_handle.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/drag_handle",
+  "selectors": [
+    ".DragHandle"
+  ]
+}

data/app/components/primer/open_project/drag_handle.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["drag_handle.pcss"],"names":[],"mappings":"AAEA,YAEI,gDAA2B,CAD3B,WAEJ","file":"drag_handle.css","sourcesContent":["/* CSS for DragHandle  */\n\n.DragHandle {\n    cursor: move;\n    color: var(--fgColor-muted);\n}\n"]}

data/app/components/primer/open_project/drag_handle.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= render(Primer::Beta::Octicon.new(
+    icon: :grabber,
+    size: @size
+    )) %>
+<% end %>

data/app/components/primer/open_project/drag_handle.pcss

@@ -0,0 +1,6 @@
+/* CSS for DragHandle  */
+
+.DragHandle {
+    cursor: move;
+    color: var(--fgColor-muted);
+}

data/app/components/primer/open_project/drag_handle.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class DragHandle < Primer::Component
+      status :open_project
+
+      DEFAULT_SIZE = Primer::Beta::Octicon::SIZE_DEFAULT
+      SIZE_OPTIONS = Primer::Beta::Octicon::SIZE_OPTIONS
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: Primer::OpenProject::DragHandle::DEFAULT_SIZE, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "DragHandle"
+          )
+
+        @size = fetch_or_fallback(Primer::OpenProject::DragHandle::SIZE_OPTIONS, size, Primer::OpenProject::DragHandle::DEFAULT_SIZE)
+      end
+    end
+  end
+end

data/app/components/primer/primer.pcss

@@ -43,3 +43,5 @@
 
 /* OP specifics */
 @import "./open_project/page_header.pcss";
+@import "./open_project/drag_handle.pcss";
+@import "./open_project/border_grid.pcss";

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,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 9
-      PATCH = 1
+      MINOR = 11
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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/previews/primer/open_project/border_grid_preview.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label BorderGrid
+    class BorderGridPreview < ViewComponent::Preview
+
+      # @label Playground
+      # @param spacious [Boolean] toggle
+      def playground(spacious: false)
+        render(Primer::OpenProject::BorderGrid.new(spacious: spacious)) do |grid|
+          grid.with_row { "Block 1" }
+          grid.with_row { "Block 2" }
+          grid.with_row { "Block 3" }
+        end
+      end
+
+      # @label Default Options
+      #
+      # @snapshot
+      def default()
+        render(Primer::OpenProject::BorderGrid.new) do |grid|
+          grid.with_row { "Block 1" }
+          grid.with_row { "Block 2" }
+          grid.with_row { "Block 3" }
+        end
+      end
+
+      # @label Spacious
+      def spacious()
+        render(Primer::OpenProject::BorderGrid.new(spacious: true)) do |grid|
+          grid.with_row { "Block 1" }
+          grid.with_row { "Block 2" }
+          grid.with_row { "Block 3" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/drag_handle_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label DragHandle
+    class DragHandlePreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default(size: :small)
+        render(Primer::OpenProject::DragHandle.new(size: size))
+      end
+
+      # @label Playground
+      # @param size [Symbol] select [xsmall, small, medium]
+      def playground(size: :small)
+        render(Primer::OpenProject::DragHandle.new(size: size))
+      end
+    end
+  end
+end