primer_view_components 0.0.115 → 0.0.117

data/lib/primer/forms/toggle_switch_form.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # Toggle switches are designed to submit an on/off value to the server immediately
+    # upon click. For that reason they are not designed to be used in "regular" forms
+    # that have other fields, etc. Instead they should be used independently via this
+    # class.
+    #
+    # ToggleSwitchForm can be used directly or via inheritance.
+    #
+    # Via inheritance:
+    #
+    # # app/forms/my_toggle_form.rb
+    # class MyToggleForm < Primer::Forms::ToggleSwitchForm
+    #   def initialize(**system_arguments)
+    #     super(name: :foo, label: "Foo", src: "/foo", **system_arguments)
+    #   end
+    # end
+    #
+    # # app/views/some_view.html.erb
+    # <%= render(MyToggleForm.new) %>
+    #
+    # Directly:
+    #
+    # # app/views/some_view.html.erb
+    # <%= render(
+    #   Primer::Forms::ToggleSwitchForm.new(
+    #     name: :foo, label: "Foo", src: "/foo"
+    #   )
+    # ) %>
+    #
+    class ToggleSwitchForm < Primer::Forms::Base
+      # Define the form on subclasses so render(Subclass.new) works as expected.
+      def self.inherited(base)
+        base.form do |toggle_switch_form|
+          input = Dsl::ToggleSwitchInput.new(
+            builder: toggle_switch_form.builder, form: self, **@system_arguments
+          )
+
+          toggle_switch_form.send(:add_input, input)
+        end
+      end
+
+      # Define the form on self so render(ToggleSwitchForm.new) works as expected.
+      inherited(self)
+
+      # Override to avoid accepting a builder argument. We create our own builder
+      # on render. See the implementation of render_in below.
+      def self.new(**options)
+        allocate.tap { |obj| obj.send(:initialize, **options) }
+      end
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+      end
+
+      # Unlike other instances of Base, ToggleSwitchForm defines its own form and
+      # is not given a Rails form builder on instantiation. We do this mostly for
+      # ergonomic reasons; it's much less verbose than if you were required to
+      # call form_with/form_for, etc. That said, the rest of the forms framework
+      # assumes the presence of a builder so we create our own here. A builder
+      # cannot be constructed without a corresponding view context, which is why
+      # we have to override render_in and can't create it in the initializer.
+      def render_in(view_context, &block)
+        @builder = Primer::Forms::Builder.new(
+          nil, nil, view_context, {}
+        )
+
+        super
+      end
+    end
+  end
+end

data/lib/primer/view_components/linters/subhead_component_migration_counter.rb

@@ -6,7 +6,7 @@ module ERBLint
   module Linters
     # Counts the number of times a HTML Subhead is used instead of the component.
     class SubheadComponentMigrationCounter < BaseLinter
-      MESSAGE = "We are migrating Subhead to use [Primer::SubheadComponent](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating Subhead to use [Primer::Beta::Subhead](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
       CLASSES = %w[Subhead].freeze
       TAGS = %w[div].freeze
     end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 115
+      PATCH = 117
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -18,7 +18,8 @@ module RuboCop
         def on_send(node)
           return unless node.method_name == :new && !node.receiver.nil? && ::Primer::Deprecations.deprecated?(node.receiver.const_name)
 
-          add_offense(node.receiver, message: "Don't use deprecated names")
+          message = ::Primer::Deprecations.deprecation_message(node.receiver.const_name)
+          add_offense(node.receiver, message: message)
         end
 
         def autocorrect(node)

data/lib/tasks/docs.rake

@@ -34,7 +34,7 @@ namespace :docs do
       Primer::Beta::Button,
       Primer::Alpha::SegmentedControl,
       Primer::Alpha::Layout,
-      Primer::HellipButton,
+      Primer::Alpha::HellipButton,
       Primer::Alpha::Image,
       Primer::LocalTime,
       Primer::Alpha::OcticonSymbols,
@@ -73,14 +73,14 @@ namespace :docs do
       Primer::Beta::Octicon,
       Primer::Beta::Popover,
       Primer::Beta::ProgressBar,
-      Primer::StateComponent,
+      Primer::Beta::State,
       Primer::Beta::Spinner,
-      Primer::SubheadComponent,
-      Primer::TabContainerComponent,
+      Primer::Beta::Subhead,
+      Primer::Alpha::TabContainer,
       Primer::Beta::Text,
       Primer::Alpha::TextField,
       Primer::TimeAgoComponent,
-      Primer::TimelineItemComponent,
+      Primer::Beta::TimelineItem,
       Primer::Tooltip,
       Primer::Truncate,
       Primer::Beta::Truncate,
@@ -106,7 +106,7 @@ namespace :docs do
       Primer::Beta::AutoComplete,
       Primer::Alpha::Banner,
       Primer::Beta::ClipboardCopy,
-      Primer::TabContainerComponent,
+      Primer::Alpha::TabContainer,
       Primer::TimeAgoComponent,
       Primer::Alpha::UnderlinePanels,
       Primer::Alpha::TabPanels,

data/previews/primer/alpha/action_list_preview.rb

@@ -19,15 +19,15 @@ module Primer
                  scheme: scheme,
                  show_dividers: show_dividers,
                  aria: { label: "Action List" }
-               )) do |c|
-          c.with_heading(title: "Action List")
-          c.with_item(label: "Item one", href: "/") do |item|
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
             item.with_leading_visual_icon(icon: :gear)
           end
-          c.with_item(label: "Item two", href: "/") do |item|
+          component.with_item(label: "Item two", href: "/") do |item|
             item.with_leading_visual_icon(icon: :star)
           end
-          c.with_item(label: "Item three", href: "/") do |item|
+          component.with_item(label: "Item three", href: "/") do |item|
             item.with_leading_visual_icon(icon: :heart)
           end
         end
@@ -48,15 +48,15 @@ module Primer
                  scheme: scheme,
                  show_dividers: show_dividers,
                  aria: { label: "Action List" }
-               )) do |c|
-          c.with_heading(title: "Action List")
-          c.with_item(label: "Item one", href: "/") do |item|
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/") do |item|
             item.with_leading_visual_icon(icon: :gear)
           end
-          c.with_item(label: "Item two", href: "/") do |item|
+          component.with_item(label: "Item two", href: "/") do |item|
             item.with_leading_visual_icon(icon: :star)
           end
-          c.with_item(label: "Item three", href: "/") do |item|
+          component.with_item(label: "Item three", href: "/") do |item|
             item.with_leading_visual_icon(icon: :heart)
           end
         end
@@ -77,14 +77,14 @@ module Primer
                  scheme: scheme,
                  show_dividers: show_dividers,
                  aria: { label: "Action List" }
-               )) do |c|
-          c.with_heading(title: "Action List")
-          c.with_item(label: "Leading SVG visual", href: "/") do |item|
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Leading SVG visual", href: "/") do |item|
             item.with_leading_visual_svg do
               '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe
             end
           end
-          c.with_item(label: "Custom content", href: "/") do |item|
+          component.with_item(label: "Custom content", href: "/") do |item|
             item.with_leading_visual_content do
               '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe
             end
@@ -217,8 +217,8 @@ module Primer
       def item_default
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/")
+               )) do |component|
+          component.with_item(label: "Default item", href: "/")
         end
       end
 
@@ -226,8 +226,8 @@ module Primer
       def item_size_large
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/", size: :large)
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", size: :large)
         end
       end
 
@@ -235,8 +235,8 @@ module Primer
       def item_size_xlarge
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/", size: :xlarge)
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", size: :xlarge)
         end
       end
 
@@ -244,8 +244,8 @@ module Primer
       def item_leading_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Item with leading visual", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Item with leading visual", href: "/") do |item|
             item.with_leading_visual_icon(icon: :star)
           end
         end
@@ -255,8 +255,8 @@ module Primer
       def item_trailing_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Item with trailing visual", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Item with trailing visual", href: "/") do |item|
             item.with_trailing_visual_icon(icon: :star)
           end
         end
@@ -266,8 +266,8 @@ module Primer
       def item_leading_trailing_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Item with trailing visual", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Item with trailing visual", href: "/") do |item|
             item.with_leading_visual_icon(icon: :heart)
             item.with_trailing_visual_icon(icon: :star)
           end
@@ -278,8 +278,8 @@ module Primer
       def item_with_description
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
             item.with_description.with_content("This is a description")
           end
         end
@@ -289,8 +289,8 @@ module Primer
       def item_with_description_inline
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
             item.with_description.with_content("This is a description")
           end
         end
@@ -300,8 +300,8 @@ module Primer
       def item_trailing_action
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
             item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
@@ -311,8 +311,8 @@ module Primer
       def item_trailing_action_hover
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Default item", href: "/") do |item|
+               )) do |component|
+          component.with_item(label: "Default item", href: "/") do |item|
             item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
@@ -322,8 +322,8 @@ module Primer
       def item_danger
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Danger item", href: "/", scheme: :danger)
+               )) do |component|
+          component.with_item(label: "Danger item", href: "/", scheme: :danger)
         end
       end
 
@@ -331,8 +331,8 @@ module Primer
       def item_disabled
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Disabled item", href: "/", disabled: true)
+               )) do |component|
+          component.with_item(label: "Disabled item", href: "/", disabled: true)
         end
       end
 
@@ -340,8 +340,8 @@ module Primer
       def item_wrap_label
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
+               )) do |component|
+          component.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
         end
       end
 
@@ -349,8 +349,8 @@ module Primer
       def item_truncate_label
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
+               )) do |component|
+          component.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
         end
       end
 
@@ -358,8 +358,8 @@ module Primer
       def item_active
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
-               )) do |c|
-          c.with_item(label: "Active item", href: "/", active: true)
+               )) do |component|
+          component.with_item(label: "Active item", href: "/", active: true)
         end
       end
     end

data/previews/primer/alpha/dropdown_preview.rb

@@ -9,15 +9,15 @@ module Primer
       # @param with_caret [Boolean] toggle
       # @param overlay [Symbol] select [none, default, dark]
       def playground(overlay: :default, with_caret: false)
-        render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c|
-          c.with_button { "Dropdown" }
-
-          c.with_menu(header: "Header") do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item(divider: true)
-            m.with_item { "Item 3" }
-            m.with_item { "Item 4" }
+        render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |component|
+          component.with_button { "Dropdown" }
+
+          component.with_menu(header: "Header") do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item(divider: true)
+            menu.with_item { "Item 3" }
+            menu.with_item { "Item 4" }
           end
         end
       end
@@ -25,12 +25,12 @@ module Primer
       # @label Default
       #
       def default
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
@@ -41,12 +41,12 @@ module Primer
       # @param direction [Symbol] select [se, sw, w, e, ne, s]
       # @param scheme [Symbol] select [default, dark]
       def menu(as: :default, direction: :se, scheme: :default)
-        render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |m|
-          m.with_item { "Item 1" }
-          m.with_item { "Item 2" }
-          m.with_item(divider: true)
-          m.with_item { "Item 3" }
-          m.with_item { "Item 4" }
+        render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |menu|
+          menu.with_item { "Item 1" }
+          menu.with_item { "Item 2" }
+          menu.with_item(divider: true)
+          menu.with_item { "Item 3" }
+          menu.with_item { "Item 4" }
         end
       end
 
@@ -54,72 +54,72 @@ module Primer
       #
       # @label Direction e
       def direction_e
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :e) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :e) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction ne
       def direction_ne
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :ne) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :ne) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction s
       def direction_s
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :s) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :s) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction se
       def direction_se
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :se) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :se) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction sw
       def direction_sw
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :sw) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :sw) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Direction w
       def direction_w
-        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(direction: :w) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(direction: :w) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
@@ -130,76 +130,76 @@ module Primer
       #
       # @label With caret
       def options_with_caret
-        render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label With header
       def options_with_header
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(header: "Header") do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(header: "Header") do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label With dividers
       def options_with_dividers
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item(divider: true)
-            m.with_item { "Item 3" }
-            m.with_item { "Item 4" }
-            m.with_item(divider: true)
-            m.with_item { "Item 5" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item(divider: true)
+            menu.with_item { "Item 3" }
+            menu.with_item { "Item 4" }
+            menu.with_item(divider: true)
+            menu.with_item { "Item 5" }
           end
         end
       end
 
       # @label As list
       def options_as_list
-        render(Primer::Alpha::Dropdown.new) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu(as: :list) do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu(as: :list) do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Overlay none
       def options_overlay_none
-        render(Primer::Alpha::Dropdown.new(overlay: :none)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(overlay: :none)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end
 
       # @label Overlay dark
       def options_overlay_dark
-        render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |c|
-          c.with_button { "Dropdown" }
-          c.with_menu do |m|
-            m.with_item { "Item 1" }
-            m.with_item { "Item 2" }
-            m.with_item { "Item 3" }
+        render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |component|
+          component.with_button { "Dropdown" }
+          component.with_menu do |menu|
+            menu.with_item { "Item 1" }
+            menu.with_item { "Item 2" }
+            menu.with_item { "Item 3" }
           end
         end
       end