openproject-primer_view_components 0.11.0 → 0.13.0

data/app/components/primer/focus_group.ts

@@ -1,12 +1,15 @@
 import '@oddbird/popover-polyfill'
 
-const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ')
 
 const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()
 
 const printable = /^\S$/
 
 export default class FocusGroupElement extends HTMLElement {
+  #retainSignal: AbortController | null = null
+
   get nowrap(): boolean {
     return this.hasAttribute('nowrap')
   }
@@ -59,8 +62,32 @@ export default class FocusGroupElement extends HTMLElement {
     const {direction, nowrap} = this
     if (event.type === 'focusin') {
       if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+        this.#retainSignal?.abort()
+        const {signal} = (this.#retainSignal = new AbortController())
         for (const item of this.#items) {
           item.setAttribute('tabindex', item === event.target ? '0' : '-1')
+          const popover = event.target.closest<HTMLElement>('[popover]')
+          if (item === event.target && popover?.popover === 'auto' && popover.closest('focus-group') === this) {
+            popover.addEventListener(
+              'toggle',
+              (toggleEvent: Event) => {
+                if (!(toggleEvent.target instanceof Element)) return
+                if ((toggleEvent as ToggleEvent).newState === 'closed') {
+                  this.#retainSignal?.abort()
+                  item.setAttribute('tabindex', '-1')
+                  if (popover.id) {
+                    const invoker = this.querySelector(`[popovertarget="${popover.id}"]`)
+                    if (invoker) {
+                      invoker.setAttribute('tabindex', '0')
+                    } else {
+                      this.#items[0]?.setAttribute('tabindex', '0')
+                    }
+                  }
+                }
+              },
+              {signal}
+            )
+          }
         }
       }
     } else if (event instanceof KeyboardEvent) {
@@ -110,7 +137,7 @@ export default class FocusGroupElement extends HTMLElement {
         let el: HTMLElement | null = focusEl
         do {
           el = el.closest(`[popover]:not(:popover-open)`)
-          if (el?.popover === 'auto') {
+          if (el?.popover === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
             el.showPopover()
           }
           el = el?.parentElement || null

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

@@ -0,0 +1,23 @@
+<% if rows.any? %>
+  <%= render(Primer::Box.new(**@system_arguments.merge(direction: :column))) do %>
+    <% rows.each do |row| %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if columns.any? %>
+  <%= render(Primer::Box.new(**@system_arguments.merge(direction: :row))) do %>
+    <% columns.each do |column| %>
+      <%= column %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if boxes.any? %>
+  <%= render(Primer::Box.new(**@system_arguments)) do %>
+    <% boxes.each do |box| %>
+      <%= box %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A layouting component used to arrange multiple components next / below each other
+    class FlexLayout < Primer::Component
+      status :open_project
+
+      renders_many :rows, lambda { |**system_arguments, &block|
+        child_component(system_arguments, &block)
+      }
+      renders_many :columns, lambda { |**system_arguments, &block|
+        child_component(system_arguments, &block)
+      }
+      # boxes are used when direction is set to row or column based on responsive breakpoints
+      renders_many :boxes, lambda { |**system_arguments, &block|
+        child_component(system_arguments, &block)
+      }
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        super
+
+        @system_arguments = deny_tag_argument(**system_arguments) || {}
+        @system_arguments[:display] = :flex
+      end
+
+      private
+
+      def render?
+        # no slot provided
+        raise ArgumentError, "You have to provide either rows, columns or boxes as a slot" if rows.empty? && columns.empty? && boxes.empty?
+
+        if [rows, columns, boxes].count { |arr| !arr.empty? } == 1
+          # only rows or columns or boxes are used
+          true
+        elsif [rows, columns, boxes].count { |arr| !arr.empty? } > 1
+          # rows, columns and boxes are used together, which is not allowed
+          raise ArgumentError, "You can't mix row, column and box slots"
+        end
+      end
+
+      def child_component(system_arguments, &block)
+        if system_arguments[:flex_layout] == true
+          Primer::OpenProject::FlexLayout.new(**system_arguments.except(:flex_layout), &block)
+        else
+          Primer::Box.new(**system_arguments || {})
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/grid_layout/area.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class GridLayout
+      # GridLayout::Area is an internal component that wraps the items in a div with the given new class and responding "grid-area"
+      class Area < Primer::Component
+        status :open_project
+
+        DEFAULT_TAG = :div
+        TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+        # @param css_class [String] The basic css class applied on the grid-container
+        # @param area_name [Symbol] The specific area name, used for creating the element class and the "grid-area" style
+        # @param component [ViewComponent::Base] The instance of the component to be rendered.
+        # @param tag [Symbol] <%= one_of(Primer::OpenProject::GridLayout::Area::TAG_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(css_class, area_name, component = ::Primer::BaseComponent, tag: DEFAULT_TAG, **system_arguments)
+          @component = component
+          @system_arguments = system_arguments
+          @styles = [
+            "grid-area: #{area_name}"
+          ]
+          @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+          @system_arguments[:style] = join_style_arguments(@system_arguments[:style], *@styles)
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "#{css_class}--#{area_name}"
+          )
+        end
+
+        def call
+          render(@component.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<% if @system_arguments[:tag] %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <% areas.each do |row| %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% else %>
+  <% areas.each do |row| %>
+    <%= row %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A layouting component used to arrange multiple components in a CSS Grid
+    # Note that this component only provides helpers (as the class names and grid-area styles).
+    # However, it does not define the actual Grid which should be done in a separate CSS-file.
+    class GridLayout < Primer::Component
+      status :open_project
+      attr_reader :css_class
+
+      renders_many :areas, lambda { |area_name, component = ::Primer::BaseComponent, **system_arguments, &block|
+        render(Primer::OpenProject::GridLayout::Area.new(@css_class, area_name, component, **system_arguments), &block)
+      }
+
+      # @param css_class [String] The basic css class applied on the grid-container
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(css_class:, **system_arguments)
+        super
+
+        @system_arguments = system_arguments
+        @css_class = css_class
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          css_class
+        )
+      end
+
+      def render?
+        areas.any?
+      end
+    end
+  end
+end

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.PageHeader-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDASF,CAHE,4BARF,YASI,eAEJ,CADE,CAGF,kBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,oBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,4CACE,oCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

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

@@ -7,6 +7,10 @@
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
+
+  @media (max-width: 767.98px) {
+    border-bottom: 0;
+  }
 }
 
 .PageHeader-title {

data/app/components/primer/primer.d.ts

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.ts

@@ -6,7 +6,7 @@ import './anchored_position'
 import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
-import './alpha/nav_list'
+import './beta/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/helpers/primer/form_helper.rb

@@ -19,5 +19,15 @@ module Primer
         &block
       )
     end
+
+    def inline_form(*args, &block)
+      Primer::Forms.inline_form(*args, &block)
+    end
+
+    def render_inline_form(*args, &block)
+      # rubocop:disable GitHub/RailsViewRenderLiteral
+      render(inline_form(*args, &block))
+      # rubocop:enable GitHub/RailsViewRenderLiteral
+    end
   end
 end

data/lib/primer/accessibility.rb

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

data/lib/primer/deprecations.yml

@@ -5,6 +5,26 @@
 # See 'docs/contributors/deprecations.md' for information on configuration options.
 
 deprecations:
+  - component: "Primer::Alpha::NavList::Divider"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Divider"
+
+  - component: "Primer::Alpha::NavList::Item"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Item"
+
+  - component: "Primer::Alpha::NavList::Heading"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Heading"
+
+  - component: "Primer::Alpha::NavList::Group"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Group"
+
+  - component: "Primer::Alpha::NavList"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList"
+
   - component: "Primer::Alpha::AutoComplete"
     autocorrect: true
     replacement: "Primer::Beta::AutoComplete"

data/lib/primer/forms/check_box_group.html.erb

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/dsl/check_box_group_input.rb

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class CheckBoxGroupInput < Input
-        attr_reader :label, :check_boxes
+        attr_reader :name, :label, :check_boxes
 
         def initialize(name: nil, label: nil, **system_arguments)
           @name = name
@@ -21,10 +21,6 @@ module Primer
           CheckBoxGroup.new(input: self)
         end
 
-        def name
-          nil
-        end
-
         def type
           :check_box_group
         end

data/lib/primer/forms/dsl/check_box_input.rb

@@ -26,6 +26,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # check boxes cannot be invalid, as both checked and unchecked are valid states
+        def valid?
+          true
+        end
+
         def to_component
           CheckBox.new(input: self)
         end

data/lib/primer/forms/dsl/radio_button_input.rb

@@ -17,6 +17,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # radio buttons cannot be invalid, as both selected and unselected are valid states
+        def valid?
+          true
+        end
+
         def to_component
           RadioButton.new(input: self)
         end

data/lib/primer/forms/form_control.html.erb

@@ -9,10 +9,7 @@
       <% end %>
     <% end %>
     <%= content %>
-    <%= content_tag(:div, **@input.validation_arguments) do %>
-      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
-      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
-    <% end %>
+    <%= render(ValidationMessage.new(input: @input)) %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>
 <% else %>

data/lib/primer/forms/radio_button_group.html.erb

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/utils.rb

@@ -15,6 +15,8 @@ module Primer
       # conventions, so it should work ok. Zeitwerk also has this information but lacks a
       # public API to map constants to source files.
       def const_source_location(class_name)
+        return nil unless class_name
+
         # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
         class_path = "#{class_name.underscore}.rb"
 

data/lib/primer/forms/validation_message.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag(:div, **@input.validation_arguments) do %>
+  <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+  <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+<% end %>

data/lib/primer/forms/validation_message.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ValidationMessage < BaseComponent
+      attr_reader :input
+
+      def initialize(input:)
+        @input = input
+      end
+    end
+  end
+end

data/lib/primer/forms.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module Forms
+    def self.inline_form(builder, base = nil, &block)
+      base ||= defined?(ApplicationForm) ? ApplicationForm : Primer::Forms::Base
+
+      klass = Class.new(base) do
+        form(&block)
+      end
+
+      klass.new(builder)
+    end
+  end
+end

data/lib/primer/static/generate_info_arch.rb

@@ -3,6 +3,7 @@
 # :nocov:
 
 require "json"
+require "kramdown"
 
 module Primer
   module Static
@@ -35,7 +36,7 @@ module Primer
                 # rubocop:disable Style/IfUnlessModifier
                 "description" =>
                   if slot_method.base_docstring.to_s.present?
-                    view_context.render(inline: slot_method.base_docstring)
+                    render_erb_ignoring_markdown_code_fences(slot_method.base_docstring)
                   end,
                 # rubocop:enable Style/IfUnlessModifier
                 "parameters" => serialize_params(param_tags, component)
@@ -57,7 +58,7 @@ module Primer
 
               {
                 "name" => mtd.name,
-                "description" => view_context.render(inline: mtd.base_docstring),
+                "description" => render_erb_ignoring_markdown_code_fences(mtd.base_docstring),
                 "parameters" => serialize_params(param_tags, component)
               }
             end
@@ -66,7 +67,7 @@ module Primer
               if component == Primer::BaseComponent
                 docs.base_docstring
               else
-                view_context.render(inline: docs.base_docstring)
+                render_erb_ignoring_markdown_code_fences(docs.base_docstring)
               end
 
             memo[component] = {
@@ -119,7 +120,7 @@ module Primer
             component: "BaseComponent",
             fully_qualified_name: "Primer::BaseComponent",
             description_md: docs.base_docstring,
-            args_md: view_context.render(inline: docs.constructor.base_docstring)
+            args_md: render_erb_ignoring_markdown_code_fences(docs.constructor.base_docstring)
           }
         end
 
@@ -131,7 +132,7 @@ module Primer
               "name" => tag.name,
               "type" => tag.types&.join(", ") || "",
               "default" => default_value,
-              "description" => view_context.render(inline: tag.text.squish)
+              "description" => render_erb_ignoring_markdown_code_fences(tag.text.squish)
             }
           end
         end
@@ -151,6 +152,86 @@ module Primer
           end
         end
 
+        # Renders ERB code to a string, ignoring markdown code fences. For example, consider the
+        # following ERB code inside a markdown document:
+        #
+        # ### Heading
+        # ```erb
+        # <%= render(SomeComponent.new) %>
+        # ```
+        #
+        # <%= some_func(a, b) %>
+        #
+        # The ERB renderer does not understand that the fenced code, i.e. the part inside the triple
+        # backticks, should not be rendered. It sees the ERB tags both inside and outside the fence
+        # and renders them both.
+        #
+        # This method renders ERB tags in a markdown string, ignoring any fenced code blocks, so as
+        # to prevent rendering fenced ERB code.
+        #
+        def render_erb_ignoring_markdown_code_fences(markdown_str)
+          return view_context.render(inline: markdown_str) unless markdown_str.include?("```")
+
+          # identify all fenced code blocks in markdown string
+          code_ranges = find_fenced_code_ranges_in(markdown_str)
+
+          # replace code fences with placeholders
+          de_fenced_markdown_str = markdown_str.dup.tap do |memo|
+            code_ranges.reverse_each.with_index do |code_range, idx|
+              memo[code_range] = "<!--codefence#{idx}-->"
+            end
+          end
+
+          # Render ERB tags. The only ones left will explicitly exist _outside_ markdown code fences.
+          rendered_str = view_context.render(inline: de_fenced_markdown_str)
+
+          # replace placeholders with original code fences
+          code_ranges.reverse_each.with_index do |code_range, idx|
+            rendered_str.sub!("<!--codefence#{idx}-->", markdown_str[code_range])
+          end
+
+          rendered_str
+        end
+
+        def find_fenced_code_ranges_in(str)
+          doc = Kramdown::Document.new(str)
+          line_starts = find_line_starts_in(str)
+
+          [].tap do |code_ranges|
+            each_codespan_in(doc.root) do |node|
+              options = node.options
+              delimiter = options[:codespan_delimiter]
+              next unless delimiter.start_with?("```")
+
+              start_pos = line_starts[options[:location]]
+              end_pos = start_pos + node.value.size + delimiter.size
+              end_pos = str.index("```", end_pos) + 3
+
+              code_ranges << (start_pos...end_pos)
+            end
+          end
+        end
+
+        def find_line_starts_in(str)
+          line_counter = 2
+
+          { 1 => 0 }.tap do |memo|
+            str.scan(/\r?\n/) do
+              memo[line_counter] = Regexp.last_match.end(0)
+              line_counter += 1
+            end
+          end
+        end
+
+        def each_codespan_in(node, &block)
+          return unless node.respond_to?(:children)
+
+          node.children.each do |child|
+            yield child if child.type == :codespan
+            each_codespan_in(child, &block)
+          end
+        end
+
         def registry
           @registry ||= Primer::Yard::Registry.make
         end

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -73,6 +73,10 @@ module Primer
         Primer::Alpha::NavList::Item => { js: true, examples: false },
         Primer::Alpha::NavList::Group => { js: true, examples: false },
 
+        Primer::Beta::NavList => { js: true },
+        Primer::Beta::NavList::Item => { js: true, examples: false },
+        Primer::Beta::NavList::Group => { js: true, examples: false },
+
         # ActionList is a base component that should not be used by itself, and thus
         # does not have examples of its own
         Primer::Alpha::ActionList => { js: true, examples: false },

data/previews/primer/alpha/action_menu_preview/single_select_form_items.html.erb

@@ -0,0 +1,31 @@
+<%= render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu| %>
+  <% menu.with_show_button { "Group By" } %>
+  <% menu.with_item(
+    label: "Repository",
+    href: action_menu_form_action_path(format: route_format),
+    form_arguments: {
+      method: :post,
+      inputs: [{
+        name: "query",
+        value: "query"
+      }, {
+        name: "foo", # use "foo" here because that's what the controller expects
+        value: "group-by-repository",
+      }],
+    }
+  ) %>
+  <% menu.with_item(
+    label: "Date",
+    href: action_menu_form_action_path(format: route_format),
+    form_arguments: {
+      method: :post,
+      inputs: [{
+        name: "query",
+        value: "query"
+      }, {
+        name: "foo", # use "foo" here because that's what the controller expects
+        value: "sort-by-date"
+      }]
+    }
+  ) %>
+<% end %>