primer_view_components 0.1.4 → 0.1.6

data/lib/primer/yard.rb

@@ -6,6 +6,7 @@ module Primer
     autoload :ComponentManifest,    "primer/yard/component_manifest"
     autoload :ComponentRef,         "primer/yard/component_ref"
     autoload :DocsHelper,           "primer/yard/docs_helper"
+    autoload :InfoArchDocsHelper,   "primer/yard/info_arch_docs_helper"
     autoload :LegacyGatsbyBackend,  "primer/yard/legacy_gatsby_backend"
     autoload :Registry,             "primer/yard/registry"
     autoload :RendersManyHandler,   "primer/yard/renders_many_handler"

data/lib/tasks/docs.rake

@@ -2,6 +2,14 @@
 
 require "active_support/inflector"
 
+task :init_pvc do
+  ENV["RAILS_ENV"] = "test"
+  ENV["VC_COMPAT_PATCH_ENABLED"] = "true"
+
+  require File.expand_path("./../../demo/config/environment.rb", __dir__)
+  Dir[File.expand_path("../../app/components/primer/**/*.rb", __dir__)].sort.each { |file| require file }
+end
+
 namespace :docs do
   task :livereload do
     require "listen"
@@ -39,7 +47,7 @@ namespace :docs do
 
     manifest = Primer::Yard::ComponentManifest.where(published: true)
     backend = Primer::Yard::LegacyGatsbyBackend.new(registry, manifest)
-    args_for_components, errors = backend.generate
+    errors = backend.generate
 
     unless errors.empty?
       puts "==============================================="
@@ -50,11 +58,7 @@ namespace :docs do
       puts "==============================================="
       puts "==============================================="
 
-    raise
-    end
-
-    File.open("static/arguments.json", "w") do |f|
-      f.puts JSON.pretty_generate(args_for_components)
+      raise
     end
 
     puts "Markdown compiled."
@@ -162,12 +166,6 @@ namespace :docs do
     end
   end
 
-  task :init_pvc do
-    ENV["RAILS_ENV"] = "test"
-    require File.expand_path("./../../demo/config/environment.rb", __dir__)
-    Dir[File.expand_path("../../app/components/primer/**/*.rb", __dir__)].sort.each { |file| require file }
-  end
-
   task build_yard_registry: :init_pvc do
     require "primer/yard"
 

data/lib/tasks/static.rake

@@ -1,37 +1,29 @@
 # frozen_string_literal: true
 
 namespace :static do
-  task :dump do
-    ENV["RAILS_ENV"] = "test"
-    require File.expand_path("./../../demo/config/environment.rb", __dir__)
-    require "primer/view_components"
-    require "lookbook"
-    # Loads all components for `.descendants` to work properly
-    Dir["./app/components/primer/**/*.rb"].sort.each { |file| require file }
+  task dump: [:dump_statuses, :dump_constants, :dump_audited_at, :dump_previews, :dump_arguments, :dump_info_arch]
 
-    Primer::ViewComponents.dump(:statuses)
-    Primer::ViewComponents.dump(:constants)
-    Primer::ViewComponents.dump(:audited_at)
+  task dump_statuses: :init_pvc do
+    Primer::Static.dump(:statuses)
+  end
+
+  task dump_constants: :init_pvc do
+    Primer::Static.dump(:constants)
+  end
 
-    previews = Lookbook.previews.map do |preview|
-      {
-        name: preview.name,
-        lookup_path: preview.lookup_path,
-        examples: preview.examples.map { |example|
-          {
-            inspect_path: example.url_path,
-            preview_path: example.url_path.sub("/inspect/", "/preview/"),
-            name: example.name
-          }
-        }
-      }
-    end
+  task dump_audited_at: :init_pvc do
+    Primer::Static.dump(:audited_at)
+  end
 
-    require "json"
+  task dump_previews: :init_pvc do
+    Primer::Static.dump(:previews)
+  end
+
+  task dump_arguments: ["docs:build_yard_registry", :init_pvc] do
+    Primer::Static.dump(:arguments)
+  end
 
-    File.open(File.join(Primer::ViewComponents::DEFAULT_STATIC_PATH, "previews.json"), "w") do |f|
-      f.write(JSON.pretty_generate(previews))
-      f.write($INPUT_RECORD_SEPARATOR)
-    end
+  task dump_info_arch: ["docs:build_yard_registry", :dump_previews, :dump_arguments] do
+    Primer::Static.dump(:info_arch)
   end
 end

data/previews/primer/alpha/action_list_preview.rb

@@ -344,7 +344,10 @@ module Primer
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
                )) do |component|
-          component.with_item(label: "Disabled item", href: "/", disabled: true)
+          component.with_item(label: "Disabled item", href: "/", disabled: true) do |item|
+            item.with_description { "Item description" }
+            item.with_leading_visual_icon(icon: :gear)
+          end
         end
       end
 

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

@@ -0,0 +1,6 @@
+<div style="display: grid; place-content: center;">
+<%= render(Primer::Alpha::ActionMenu.new(anchor_align: :end)) do |component| %>
+  <% component.with_show_button { "Menu" } %>
+  <% component.with_item(label: "Item", tag: :button, value: "") %>
+<% end %>
+</div>

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

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+  <% menu.with_show_button { "Menu" } %>
+  <% menu.with_item(value: "") do %>
+    <span class="copy-link">Copy link</span>
+  <% end %>
+  <% menu.with_item(value: "") do %>
+    <span class="quote-reply">Quote reply</span>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,21 @@
+<%= 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
+  ) %>
+<% end %>
+
+<%= 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

@@ -0,0 +1,245 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ActionMenu
+    class ActionMenuPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param select_variant [Symbol] select [single, multiple, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      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
+      )
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply")
+          menu.with_item(label: "Reference in new issue")
+          menu.with_divider
+          menu.with_item(label: "Edit")
+          menu.with_item(label: "Delete", scheme: :danger)
+        end
+      end
+
+      # @label Content labels
+      #
+      def content_labels
+      end
+
+      # @label Default
+      #
+      def default
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply")
+          menu.with_item(label: "Reference in new issue")
+          menu.with_divider
+          menu.with_item(label: "Edit") do |item|
+            item.with_description.with_content("Change settings")
+          end
+          menu.with_item(label: "Delete", scheme: :danger) do |item|
+            item.with_description.with_content("Sayonara")
+          end
+        end
+      end
+
+      # @label With icon button
+      #
+      def with_icon_button
+        render(Primer::Alpha::ActionMenu.new) do |menu|
+          menu.with_show_button(icon: :star, "aria-label": "Menu")
+          menu.with_item(label: "Does something")
+        end
+      end
+
+      # @label Single select
+      #
+      def single_select
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Fast forward")
+          menu.with_item(label: "Recursive")
+          menu.with_item(label: "Ours")
+          menu.with_item(label: "Resolve")
+        end
+      end
+
+      # @label Multiple select
+      #
+      def multiple_select
+        render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "langermank", description_scheme: :inline) do |item|
+            item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/18661030?v=4", alt: "Katie Langerman")
+            item.with_description.with_content("Katie Langerman")
+          end
+          menu.with_item(label: "jonrohan", description_scheme: :inline) do |item|
+            item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4", alt: "Jon Rohan")
+            item.with_description.with_content("Jon Rohan")
+          end
+          menu.with_item(label: "broccolinisoup", description_scheme: :inline) do |item|
+            item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/1446503?v=4", alt: "Armağan Ersöz")
+            item.with_description.with_content("Armağan Ersöz")
+          end
+        end
+      end
+
+      # @label Links
+      #
+      def links
+        render(Primer::Alpha::ActionMenu.new) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Settings", href: "/")
+          menu.with_item(label: "Your repositories", href: "/")
+          menu.with_item(label: "Disabled", href: "/", disabled: true)
+        end
+      end
+
+      # @label Single item selected
+      #
+      def single_selected_item
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "Copy link")
+          menu.with_item(label: "Quote reply", active: true)
+          menu.with_item(label: "Reference in new issue")
+        end
+      end
+
+      # @label Single Select with Internal Label
+      #
+      def single_select_with_internal_label
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "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")
+        end
+      end
+
+      # @label Multiple items selected
+      #
+      def multiple_selected_items
+        render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
+          menu.with_show_button { "Menu" }
+          menu.with_item(label: "langermank", description_scheme: :inline, active: true) do |item|
+            item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/18661030?v=4", alt: "Katie Langerman")
+            item.with_description.with_content("Katie Langerman")
+          end
+          menu.with_item(label: "jonrohan", description_scheme: :inline) do |item|
+            item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4", alt: "Jon Rohan")
+            item.with_description.with_content("Jon Rohan")
+          end
+          menu.with_item(label: "broccolinisoup", description_scheme: :inline, active: true) do |item|
+            item.with_leading_visual_avatar(src: "https://avatars.githubusercontent.com/u/1446503?v=4", alt: "Armağan Ersöz")
+            item.with_description.with_content("Armağan Ersöz")
+          end
+        end
+      end
+
+      # @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
+      end
+
+      # @label With deferred preloaded content
+      #
+      def with_deferred_preloaded_content
+        render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-preload", preload: true, src: UrlHelpers.action_menu_deferred_preload_path)) do |menu|
+          menu.with_show_button { "Menu with deferred and preloaded content" }
+        end
+      end
+
+      # @label With actions
+      #
+      def with_actions
+        render(Primer::Alpha::ActionMenu.new) do |component|
+          component.with_show_button { "Trigger" }
+          component.with_item(label: "Alert", tag: :button, content_arguments: { onclick: "alert('Foo')", onkeydown: "if (event.key === 'Enter') { alert(event.key) }" })
+          component.with_item(label: "Navigate", tag: :a, content_arguments: { href: UrlHelpers.action_menu_landing_path })
+          component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" })
+        end
+      end
+
+      # @label With disabled items
+      #
+      def with_disabled_items
+        render(Primer::Alpha::ActionMenu.new) do |component|
+          component.with_show_button { "Trigger" }
+          component.with_item(label: "Does something", tag: :button, disabled: true)
+          component.with_item(label: "Site", tag: :a, href: "/", disabled: true)
+        end
+      end
+
+      # @label Opens a dialog
+      #
+      def opens_dialog(menu_id: "menu-1")
+        render_with_template(locals: {
+                               menu_id: menu_id
+                             })
+      end
+
+      # @label Align end
+      #
+      def align_end(menu_id: "menu-1")
+        render_with_template(locals: {
+                               menu_id: menu_id
+                             })
+      end
+
+      # @label [Item] Block description
+      #
+      def block_description
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
+          menu.with_item(label: "Item label") do |item|
+            item.with_description.with_content("Block description")
+          end
+        end
+      end
+
+      # @label [Item] Inline description
+      #
+      def inline_description
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
+            item.with_description.with_content("Inline description")
+          end
+        end
+      end
+
+      # @label [Item] Leading visual
+      #
+      def leading_visual
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
+            item.with_leading_visual_icon(icon: :gear)
+            item.with_description.with_content("Inline description")
+          end
+        end
+      end
+
+      # @label [Item] Leading visual single select
+      #
+      def leading_visual_single_select
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1", select_variant: :single)) do |menu|
+          menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
+          menu.with_item(label: "Item label", description_scheme: :inline) do |item|
+            item.with_leading_visual_icon(icon: :gear)
+            item.with_description.with_content("Inline description")
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb

@@ -1,8 +1,8 @@
 <div>
   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
   <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
-    <% d.show_button { button_text } %>
-    <% d.body do %>
+    <% d.with_show_button { button_text } %>
+    <% d.with_body do %>
       <p>Dialog</p>
     <% end %>
   <% end %>

data/previews/primer/alpha/dialog_preview/custom_header.html.erb

@@ -1,7 +1,7 @@
 <%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
-  <% d.header(show_divider: show_divider) do %>
+  <% d.with_header(show_divider: show_divider) do %>
     <button class="btn">Custom Header Controls</button>
   <% end %>
-  <% d.show_button { button_text } %>
-  <% d.body { "Hello World" } %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Hello World" } %>
 <% end %>

data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb

@@ -1,12 +1,12 @@
 <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
-  <% d.show_button { button_text } %>
-  <% d.body do %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body do %>
     <p>Dialog One!</p>
 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
     <%= render(Primer::Alpha::Dialog.new(id: "dialog-two", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
-      <% d.show_button { button_text } %>
-      <% d.body do %>
+      <% d.with_show_button { button_text } %>
+      <% d.with_body do %>
         Dialog Two!
       <% end %>
     <% end %>

data/previews/primer/alpha/dialog_preview/test.html.erb

@@ -1,7 +1,7 @@
 <%= render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle)) do |d| %>
-  <% d.show_button { @button_text } %>
-  <% d.body { "Content" } %>
-  <% d.footer do %>
+  <% d.with_show_button { @button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_footer do %>
     render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" }
   <% end %>
 <% end %>

data/previews/primer/alpha/dialog_preview/with_footer.html.erb

@@ -1,7 +1,7 @@
 <%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
-  <% d.show_button { button_text } %>
-  <% d.body { "Content" } %>
-  <% d.footer(show_divider: show_divider) do %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_footer(show_divider: show_divider) do %>
     <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
     <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
   <% end %>

data/previews/primer/alpha/dialog_preview/with_form.html.erb

@@ -1,5 +1,5 @@
 <%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
-  <% d.show_button { button_text } %>
+  <% d.with_show_button { button_text } %>
   <form class="pt-3">
     <%= render(Primer::Alpha::Dialog::Body.new) do %>
       This is a custom dialog with the body and footer wrapped in a form tag.

data/previews/primer/alpha/dialog_preview/with_text_input.html.erb

@@ -1,6 +1,6 @@
 <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
-  <% d.show_button { button_text } %>
-  <% d.body do %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body do %>
     <p>Dialog One!</p>
 
     <form>

data/previews/primer/alpha/dialog_preview.rb

@@ -14,9 +14,14 @@ module Primer
       # @param visually_hide_title [Boolean] toggle
       # @param button_text [String] text
       # @param body_text [String] text
-      def playground(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
+      # @param icon [Symbol] octicon
+      def playground(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false, icon: nil)
         render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
-          d.with_show_button { button_text }
+          if icon.present? && (icon != :none)
+            d.with_show_button(icon: icon, "aria-label": icon.to_s)
+          else
+            d.with_show_button { button_text }
+          end
           d.with_body { body_text }
         end
       end

data/previews/primer/beta/auto_complete_item_preview.rb

@@ -2,6 +2,7 @@
 
 module Primer
   module Beta
+    # @component Primer::Beta::AutoComplete::Item
     # @label AutoCompleteItem
     class AutoCompleteItemPreview < ViewComponent::Preview
       # @label Playground