openproject-primer_view_components 0.68.0 → 0.69.1

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

@@ -171,143 +171,69 @@ module Primer
     class ActionMenu < Primer::Component
       status :alpha
 
-      DEFAULT_PRELOAD = false
+      delegate :preload, :preload?, :list, to: :@primary_menu
+      delegate :with_show_button, :with_item, :items, :with_divider, :with_avatar_item, :with_group, :with_sub_menu_item, to: :@primary_menu
 
-      DEFAULT_SELECT_VARIANT = :none
-      SELECT_VARIANT_OPTIONS = [
-        :single,
-        :multiple,
-        DEFAULT_SELECT_VARIANT
-      ].freeze
-
-      attr_reader :list, :preload
-
-      alias preload? preload
-
-      # @param menu_id [String] Id of the menu.
-      # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
-      # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.
-      # @param size [Symbol] <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %>.
-      # @param src [String] Used with an `include-fragment` element to load menu content from the given source URL.
-      # @param preload [Boolean] When true, and src is present, loads the `include-fragment` on trigger hover.
-      # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button.
-      # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button.
-      # @param select_variant [Symbol] <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>
-      # @param form_arguments [Hash] Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
-      # @param overlay_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::Overlay) %>
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
-      def initialize(
-        menu_id: self.class.generate_id,
-        anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
-        anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
-        size: Primer::Alpha::Overlay::DEFAULT_SIZE,
-        src: nil,
-        preload: DEFAULT_PRELOAD,
-        dynamic_label: false,
-        dynamic_label_prefix: nil,
-        select_variant: DEFAULT_SELECT_VARIANT,
-        form_arguments: {},
-        overlay_arguments: {},
-        **system_arguments
-      )
-        @menu_id = menu_id
-        @src = src
-        @preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD)
-        @system_arguments = deny_tag_argument(**system_arguments)
-
-        @system_arguments[:preload] = true if @src.present? && preload?
+      # @!parse
+      #   # Adds an item to the menu.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+      #   def with_item(**system_arguments)
+      #   end
+      #
+      #   # Adds an avatar item to the menu.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `item` slot.
+      #   def with_avatar_item(**system_arguments)
+      #   end
+      #
+      #   # Adds a divider to the list. Dividers visually separate items.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
+      #   def with_divider(**system_arguments)
+      #   end
+      #
+      #   # Adds a group to the menu. Groups are a logical set of items with a header.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Group) %>.
+      #   def with_group(**system_arguments)
+      #   end
+      #
+      #   # Gets the list of configured menu items, which includes regular items, avatar items, groups, and dividers.
+      #   #
+      #   # @return [Array<ViewComponent::Slot>]
+      #   def items
+      #   end
 
-        @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::PrimaryMenu) %>.
+      def initialize(**system_arguments)
+        @primary_menu = PrimaryMenu.allocate
+        @system_arguments = @primary_menu.send(:initialize, **system_arguments)
 
         @system_arguments[:tag] = :"action-menu"
-        @system_arguments[:"data-select-variant"] = select_variant
-        @system_arguments[:"data-dynamic-label"] = "" if dynamic_label
-        @system_arguments[:"data-dynamic-label-prefix"] = dynamic_label_prefix if dynamic_label_prefix.present?
+        @system_arguments[:preload] = true if @primary_menu.preload?
 
-        overlay_arguments[:data] = merge_data(
-          overlay_arguments, data: {
-            target: "action-menu.overlay"
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: { "select-variant": @primary_menu.select_variant }
           }
         )
 
-        @overlay = Primer::Alpha::Overlay.new(
-          id: "#{@menu_id}-overlay",
-          title: "Menu",
-          visually_hide_title: true,
-          anchor_align: anchor_align,
-          anchor_side: anchor_side,
-          size: size,
-          **overlay_arguments
-        )
+        @system_arguments[:"data-dynamic-label"] = "" if @primary_menu.dynamic_label
 
-        @list = Primer::Alpha::ActionMenu::List.new(
-          menu_id: @menu_id,
-          select_variant: select_variant,
-          form_arguments: form_arguments
-        )
-      end
-
-      # @!parse
-      #   # Button to activate the menu.
-      #   #
-      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
-      #   renders_one(:show_button)
-
-      # Button to activate the menu.
-      #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
-      def with_show_button(**system_arguments, &block)
-        @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list") do |button|
-          evaluate_block(button, &block)
+        if @primary_menu.dynamic_label_prefix.present?
+          @system_arguments[:"data-dynamic-label-prefix"] = @primary_menu.dynamic_label_prefix
         end
       end
 
-      # @!parse
-      #   # Adds a new item to the list.
-      #   #
-      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
-      #   renders_many(:items)
-
-      # Adds a new item to the list.
-      #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
-      def with_item(**system_arguments, &block)
-        @list.with_item(**system_arguments, &block)
-      end
-
-      # Adds a divider to the list.
-      #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>'s `divider` slot.
-      def with_divider(**system_arguments, &block)
-        @list.with_divider(**system_arguments, &block)
-      end
-
-      # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
-      #
-      # @param src [String] The source url of the avatar image.
-      # @param username [String] The username associated with the avatar.
-      # @param full_name [String] Optional. The user's full name.
-      # @param full_name_scheme [Symbol] Optional. How to display the user's full name.
-      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
-      def with_avatar_item(**system_arguments, &block)
-        @list.with_avatar_item(**system_arguments, &block)
-      end
-
-      def with_group(**system_arguments, &block)
-        @list.with_group(**system_arguments, &block)
-      end
-
       private
 
       def before_render
         content
-
-        raise ArgumentError, "`items` cannot be set when `src` is specified" if @src.present? && @list.items.any?
       end
 
       def render?
-        @list.items.any? || @src.present?
+        @primary_menu.items.any? || @primary_menu.src.present?
       end
     end
   end

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

@@ -312,7 +312,7 @@ module Primer
       # @return [String]
       attr_reader :body_id
 
-      # <%= one_of(Primer::Alpha::ActionMenu::SELECT_VARIANT_OPTIONS) %>
+      # <%= one_of(Primer::Alpha::ActionMenu::Menu::SELECT_VARIANT_OPTIONS) %>
       #
       # @return [Symbol]
       attr_reader :select_variant
@@ -461,7 +461,7 @@ module Primer
 
         @list = Primer::Alpha::SelectPanel::ItemList.new(
           **list_arguments,
-          form_arguments: @list_form_arguments, 
+          form_arguments: @list_form_arguments,
           id: "#{@panel_id}-list",
           select_variant: @select_variant,
           aria: {
@@ -546,4 +546,4 @@ module Primer
       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 = 68
-      PATCH = 0
+      MINOR = 69
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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

@@ -1,10 +1,19 @@
 <%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+  <% content = -> (base) do %>
+    <% base.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+    <% base.with_item(label: "Recursive", data: { value: "recursive" }) %>
+    <% base.with_item(label: "Ours", data: { value: "ours" }, active: true) %>
+    <% base.with_item(label: "Resolve") %>
+  <% end %>
   <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
     <% menu.with_show_button { "Strategy" } %>
-    <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
-    <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
-    <% menu.with_item(label: "Ours", data: { value: "ours" }, active: true) %>
-    <% menu.with_item(label: "Resolve") %>
+    <% if nest_in_sub_menu %>
+      <% menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu| %>
+        <% content.call(sub_menu) %>
+      <% end %>
+    <% else %>
+      <% content.call(menu) %>
+    <% end %>
   <% end %>
   <hr>
   <div>

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

@@ -1,20 +1,29 @@
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Menu" } %>
-  <% component.with_item(label: "Item", tag: :button, value: "") %>
-  <% component.with_item(
-    label: "Show dialog",
-    tag: :button,
-    content_arguments: { "data-show-dialog-id": "my-dialog" },
-    value: "",
-    scheme: :danger
-  ) %>
+  <% contents = -> (base) do %>
+    <% base.with_item(label: "Item", tag: :button, value: "") %>
+    <% base.with_item(
+      label: "Show dialog",
+      tag: :button,
+      content_arguments: { "data-show-dialog-id": "my-dialog" },
+      value: "",
+      scheme: :danger
+    ) %>
+  <% end %>
+  <% if nest_in_sub_menu %>
+    <% component.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item| %>
+      <% contents.call(sub_menu_item) %>
+    <% end %>
+  <% else %>
+    <% contents.call(component) %>
+  <% end %>
 <% end %>
 
-<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: "Confirm deletion")) do |d| %>
-  <%= render(Primer::Alpha::Dialog::Body.new()) do %>
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: "Confirm deletion")) do |dialog| %>
+  <% dialog.with_body do %>
     Are you sure you want to delete this?
   <% end %>
-  <%= render(Primer::Alpha::Dialog::Footer.new()) do %>
+  <% dialog.with_footer do %>
     <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
     <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Delete" } %>
   <% end %>

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

@@ -1,5 +1,4 @@
-<%= render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu| %>
-  <% menu.with_show_button { "Group By" } %>
+<% contents = -> (menu) do %>
   <% menu.with_item(
     label: "Repository",
     href: action_menu_form_action_path(format: route_format),
@@ -29,3 +28,15 @@
     }
   ) %>
 <% end %>
+
+<%= render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu| %>
+  <% menu.with_show_button { "Group By" } %>
+
+  <% if nest_in_sub_menu %>
+    <% menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item| %>
+      <% contents.call(sub_menu_item) %>
+    <% end %>
+  <% else %>
+    <% contents.call(menu) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+<%# Center the invoker button to give left-appearing sub-menus enough space %>
+<div style="<%= sub_menu_anchor_side.to_s.include?("left") ? "text-align: center" : "" %>">
+  <%= render(Primer::Alpha::ActionMenu.new(anchor_align: anchor_align, anchor_side: anchor_side)) do |menu| %>
+    <% menu.with_show_button { "Edit" } %>
+    <% menu.with_item(label: "Cut") %>
+    <% menu.with_item(label: "Copy") %>
+    <% menu.with_sub_menu_item(label: "Paste special", anchor_align: sub_menu_anchor_align, anchor_side: sub_menu_anchor_side) do |sub_menu| %>
+      <% sub_menu.with_leading_visual_icon(icon: :"sparkle-fill") %>
+      <% sub_menu.with_item(label: "Paste plain text") %>
+      <% sub_menu.with_item(label: "Paste formulas") %>
+      <% sub_menu.with_item(label: "Paste with formatting") %>
+      <% sub_menu.with_sub_menu_item(label: "Paste from") do |sub_menu| %>
+        <% sub_menu.with_item(label: "Current clipboard") %>
+        <% sub_menu.with_item(label: "History") %>
+        <% sub_menu.with_item(label: "Another device") %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -8,15 +8,24 @@
 
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Trigger" } %>
-  <% component.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
-  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }, disabled: disable_items) %>
-  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
-  <% component.with_item(
-    label: "Submit form",
-    href: action_menu_form_action_path(format: route_format),
-    form_arguments: {
-      name: "foo", value: "bar", method: :post
-    },
-    disabled: disable_items
-  ) %>
+  <% contents = -> (base) do %>
+    <% base.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
+    <% base.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }, disabled: disable_items) %>
+    <% base.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
+    <% base.with_item(
+      label: "Submit form",
+      href: action_menu_form_action_path(format: route_format),
+      form_arguments: {
+        name: "foo", value: "bar", method: :post
+      },
+      disabled: disable_items
+    ) %>
+  <% end %>
+  <% if nest_in_sub_menu %>
+    <% component.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item| %>
+      <% contents.call(sub_menu_item) %>
+    <% end %>
+  <% else %>
+    <% contents.call(component) %>
+  <% end %>
 <% end %>

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

@@ -0,0 +1,24 @@
+<% if nest_in_sub_menu %>
+  <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+    <% menu.with_show_button { "Menu with deferred content" } %>
+    <% menu.with_sub_menu_item(label: "Sub-menu", menu_id: "deferred", src: action_menu_deferred_path) %>
+  <% end %>
+<% else %>
+  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred", src: action_menu_deferred_path)) do |menu| %>
+    <% menu.with_show_button { "Menu with deferred content" } %>
+  <% end %>
+<% end %>
+
+<%# This is used by the items rendered by ActionMenuController#deferred. It needs to be rendered %>
+<%# here and not returned alongside async-rendered menu items in case of sub-menu nesting. Any %>
+<%# additional HTML like this will end up being wrapped in a <ul> that's invisible when the menu is %>
+<%# closed, and appear to never open. %>
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: "Confirm deletion")) do |d| %>
+  <%= render(Primer::Alpha::Dialog::Body.new()) do %>
+    Are you sure you want to delete this?
+  <% end %>
+  <%= render(Primer::Alpha::Dialog::Footer.new()) do %>
+    <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Delete" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -11,7 +11,9 @@ module Primer
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
       # @param size [Symbol] select [auto, small, medium, large, xlarge]
       def playground(
-        select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        select_variant: Primer::Alpha::ActionMenu::PrimaryMenu::DEFAULT_SELECT_VARIANT,
+        anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
+        anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
         size: Primer::Alpha::Overlay::DEFAULT_SIZE
       )
         render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
@@ -55,13 +57,9 @@ module Primer
       # @label With groups
       #
       # @snapshot interactive
-      def with_groups
-        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
-          menu.with_show_button do |button|
-            button.with_trailing_action_icon(icon: :"triangle-down")
-            "Favorite character"
-          end
-
+      # @param nest_in_sub_menu toggle
+      def with_groups(nest_in_sub_menu: false)
+        contents = -> (menu) {
           menu.with_group do |group|
             group.with_heading(title: "Battlestar Galactica")
             group.with_item(label: "William Adama")
@@ -85,6 +83,21 @@ module Primer
             group.with_item(label: "Han Solo")
             group.with_item(label: "Chewbacca")
           end
+        }
+
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Favorite character"
+          end
+
+          if nest_in_sub_menu
+            menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item|
+              contents.call(sub_menu_item)
+            end
+          else
+            contents.call(menu)
+          end
         end
       end
 
@@ -159,10 +172,9 @@ module Primer
 
       # @label Multiple select
       #
-      def multiple_select
-        render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
-          menu.with_show_button { "Menu" }
-
+      # @param nest_in_sub_menu toggle
+      def multiple_select(nest_in_sub_menu: false)
+        content = -> (menu) {
           menu.with_avatar_item(
             src: "https://avatars.githubusercontent.com/u/18661030?v=4",
             username: "langermank",
@@ -189,6 +201,18 @@ module Primer
             avatar_arguments: { shape: :square },
             item_id: :armagan
           )
+        }
+
+        render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
+          menu.with_show_button { "Menu" }
+
+          if nest_in_sub_menu
+            menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu|
+              content.call(sub_menu)
+            end
+          else
+            content.call(menu)
+          end
         end
       end
 
@@ -218,17 +242,29 @@ module Primer
       # @label Single Select with Internal Label
       #
       # @snapshot interactive
-      def single_select_with_internal_label
+      # @param nest_in_sub_menu toggle
+      def single_select_with_internal_label(nest_in_sub_menu: false)
+        contents = -> (menu) {
+          menu.with_item(label: "Copy link") do |item|
+            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+          end
+          menu.with_item(label: "Quote reply", active: true)
+          menu.with_item(label: "Reference in new issue")
+        }
+
         render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
           menu.with_show_button do |button|
             button.with_trailing_action_icon(icon: :"triangle-down")
             "Menu"
           end
-          menu.with_item(label: "Copy link") do |item|
-            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+
+          if nest_in_sub_menu
+            menu.with_sub_menu_item(label: "Sub-menu") do |sub_menu_item|
+              contents.call(sub_menu_item)
+            end
+          else
+            contents.call(menu)
           end
-          menu.with_item(label: "Quote reply", active: true)
-          menu.with_item(label: "Reference in new issue")
         end
       end
 
@@ -266,10 +302,9 @@ module Primer
 
       # @label With deferred content
       #
-      def with_deferred_content
-        render(Primer::Alpha::ActionMenu.new(menu_id: "deferred", src: UrlHelpers.action_menu_deferred_path)) do |menu|
-          menu.with_show_button { "Menu with deferred content" }
-        end
+      # @param nest_in_sub_menu toggle
+      def with_deferred_content(nest_in_sub_menu: false)
+        render_with_template(locals: { nest_in_sub_menu: nest_in_sub_menu })
       end
 
       # @label With deferred preloaded content
@@ -283,8 +318,13 @@ module Primer
       # @label With actions
       #
       # @param disable_items toggle
-      def with_actions(disable_items: false, route_format: :html)
-        render_with_template(locals: { disable_items: disable_items, route_format: route_format })
+      # @param nest_in_sub_menu toggle
+      def with_actions(disable_items: false, nest_in_sub_menu: false, route_format: :html)
+        render_with_template(locals: {
+          disable_items: disable_items,
+          nest_in_sub_menu: nest_in_sub_menu,
+          route_format: route_format
+        })
       end
 
       # @label Single select form
@@ -295,14 +335,16 @@ module Primer
 
       # @label Single select form items
       #
-      def single_select_form_items(route_format: :html)
-        render_with_template(locals: { route_format: route_format })
+      # @param nest_in_sub_menu toggle
+      def single_select_form_items(route_format: :html, nest_in_sub_menu: false)
+        render_with_template(locals: { route_format: route_format, nest_in_sub_menu: nest_in_sub_menu })
       end
 
       # @label Multiple select form
       #
-      def multiple_select_form(route_format: :html)
-        render_with_template(locals: { route_format: route_format })
+      # @param nest_in_sub_menu toggle
+      def multiple_select_form(route_format: :html, nest_in_sub_menu: false)
+        render_with_template(locals: { route_format: route_format, nest_in_sub_menu: nest_in_sub_menu })
       end
 
       # @label With disabled items
@@ -317,9 +359,11 @@ module Primer
 
       # @label Opens a dialog
       #
-      def opens_dialog(menu_id: "menu-1")
+      # @param nest_in_sub_menu toggle
+      def opens_dialog(menu_id: "menu-1", nest_in_sub_menu: false)
         render_with_template(locals: {
-                               menu_id: menu_id
+                               menu_id: menu_id,
+                               nest_in_sub_menu: nest_in_sub_menu
                              })
       end
 
@@ -405,6 +449,26 @@ module Primer
       # @label Two menus
       #
       def two_menus; end
+
+      # @label Sub-menus
+      #
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param sub_menu_anchor_align [Symbol] select [start, center, end]
+      # @param sub_menu_anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      def sub_menus(
+        anchor_align: Primer::Alpha::ActionMenu::PrimaryMenu::DEFAULT_ANCHOR_ALIGN,
+        anchor_side: Primer::Alpha::ActionMenu::PrimaryMenu::DEFAULT_ANCHOR_SIDE,
+        sub_menu_anchor_align: Primer::Alpha::ActionMenu::SubMenu::DEFAULT_ANCHOR_ALIGN,
+        sub_menu_anchor_side: Primer::Alpha::ActionMenu::SubMenu::DEFAULT_ANCHOR_SIDE
+      )
+        render_with_template(locals: {
+          anchor_align: anchor_align.to_sym,
+          anchor_side: anchor_side.to_sym,
+          sub_menu_anchor_align: sub_menu_anchor_align,
+          sub_menu_anchor_side: sub_menu_anchor_side
+        })
+      end
     end
   end
 end