diff --git a/.changeset/khaki-avocados-notice.md b/.changeset/khaki-avocados-notice.md
new file mode 100644
index 0000000000..6a42bc7cbb
--- /dev/null
+++ b/.changeset/khaki-avocados-notice.md
@@ -0,0 +1,9 @@
+---
+"@primer/view-components": patch
+---
+
+Deprecate components and moving to new namespace:
+
+- Primer::Dropdown moving to Primer::Alpha::Dropdown
+- Primer::Dropdown::Menu moving to Primer::Alpha::Dropdown::Menu
+- Primer::Dropdown::Menu::Item moving to Primer::Alpha::Dropdown::Menu::Item
diff --git a/.playwright/screenshots/previews.test.ts-snapshots/primer/dropdown/default.png b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/dropdown/default.png
similarity index 100%
rename from .playwright/screenshots/previews.test.ts-snapshots/primer/dropdown/default.png
rename to .playwright/screenshots/previews.test.ts-snapshots/primer/alpha/dropdown/default.png
diff --git a/.playwright/screenshots/previews.test.ts-snapshots/primer/dropdown/focused.png b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/dropdown/focused.png
similarity index 100%
rename from .playwright/screenshots/previews.test.ts-snapshots/primer/dropdown/focused.png
rename to .playwright/screenshots/previews.test.ts-snapshots/primer/alpha/dropdown/focused.png
diff --git a/app/components/primer/dropdown.html.erb b/app/components/primer/alpha/dropdown.html.erb
similarity index 100%
rename from app/components/primer/dropdown.html.erb
rename to app/components/primer/alpha/dropdown.html.erb
diff --git a/app/components/primer/dropdown.pcss b/app/components/primer/alpha/dropdown.pcss
similarity index 100%
rename from app/components/primer/dropdown.pcss
rename to app/components/primer/alpha/dropdown.pcss
diff --git a/app/components/primer/alpha/dropdown.rb b/app/components/primer/alpha/dropdown.rb
new file mode 100644
index 0000000000..05c1516771
--- /dev/null
+++ b/app/components/primer/alpha/dropdown.rb
@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Primer
+ module Alpha
+ # `Dropdown` is a lightweight context menu for housing navigation and actions.
+ # They're great for instances where you don't need the full power (and code) of the SelectMenu.
+ class Dropdown < Primer::Component
+ status :alpha
+
+ # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
+ # but it is locked as a `summary` tag.
+ renders_one :button, lambda { |**system_arguments|
+ @button_arguments = system_arguments
+ @button_arguments[:button] = true
+ @button_arguments[:dropdown] = @with_caret
+
+ Primer::Content.new
+ }
+
+ # Required context menu for the dropdown.
+ #
+ # @param as [Symbol] When `as` is `:list`, wraps the menu in a `
` with a `- ` for each item.
+ # @param direction [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>
+ # @param scheme [Symbol] Pass `:dark` for dark mode theming
+ # @param header [String] Optional string to display as the header
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+ renders_one :menu, "Primer::Alpha::Dropdown::Menu"
+
+ # @example Default
+ # <%= render(Primer::Alpha::Dropdown.new) do |c| %>
+ # <% c.with_button do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(header: "Options") do |menu|
+ # menu.item { "Item 1" }
+ # menu.item { "Item 2" }
+ # menu.item { "Item 3" }
+ # end %>
+ # <% end %>
+ #
+ # @example With dividers
+ #
+ # @description
+ # Dividers can be used to separate a group of items. They don't have any content.
+ # @code
+ # <%= render(Primer::Alpha::Dropdown.new) do |c| %>
+ # <% c.with_button do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(header: "Options") do |menu|
+ # menu.item { "Item 1" }
+ # menu.item { "Item 2" }
+ # menu.item(divider: true)
+ # menu.item { "Item 3" }
+ # menu.item { "Item 4" }
+ # menu.item(divider: true)
+ # menu.item { "Item 5" }
+ # menu.item { "Item 6" }
+ # end %>
+ # <% end %>
+ #
+ # @example With direction
+ # <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c| %>
+ # <% c.with_button do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(header: "Options", direction: :s) do |menu|
+ # menu.item { "Item 1" }
+ # menu.item { "Item 2" }
+ # menu.item { "Item 3" }
+ # menu.item { "Item 4" }
+ # end %>
+ # <% end %>
+ #
+ # @example With caret
+ # <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c| %>
+ # <% c.with_button do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(header: "Options") do |menu|
+ # menu.item { "Item 1" }
+ # menu.item { "Item 2" }
+ # menu.item { "Item 3" }
+ # menu.item { "Item 4" }
+ # end %>
+ # <% end %>
+ #
+ # @example Customizing the button
+ # <%= render(Primer::Alpha::Dropdown.new) do |c| %>
+ # <% c.with_button(scheme: :primary, size: :small) do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(header: "Options") do |menu|
+ # menu.item { "Item 1" }
+ # menu.item { "Item 2" }
+ # menu.item { "Item 3" }
+ # menu.item { "Item 4" }
+ # end %>
+ # <% end %>
+ #
+ # @example Menu as list
+ # <%= render(Primer::Alpha::Dropdown.new) do |c| %>
+ # <% c.with_button do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(as: :list, header: "Options") do |menu|
+ # menu.item { "Item 1" }
+ # menu.item { "Item 2" }
+ # menu.item(divider: true)
+ # menu.item { "Item 3" }
+ # menu.item { "Item 4" }
+ # end %>
+ # <% end %>
+ #
+ # @example Customizing menu items
+ # <%= render(Primer::Alpha::Dropdown.new) do |c| %>
+ # <% c.with_button do %>
+ # Dropdown
+ # <% end %>
+ #
+ # <% c.with_menu(header: "Options") do |menu|
+ # menu.item(tag: :button) { "Item 1" }
+ # menu.item(classes: "custom-class") { "Item 2" }
+ # menu.item { "Item 3" }
+ # end %>
+ # <% end %>
+ #
+ # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
+ # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+ def initialize(overlay: :default, with_caret: false, **system_arguments)
+ @with_caret = with_caret
+
+ @system_arguments = system_arguments
+ @system_arguments[:overlay] = overlay
+ @system_arguments[:reset] = true
+ @system_arguments[:classes] = class_names(
+ @system_arguments[:classes],
+ "dropdown"
+ )
+ end
+
+ def render?
+ button.present? && menu.present?
+ end
+ end
+ end
+end
diff --git a/app/components/primer/dropdown.ts b/app/components/primer/alpha/dropdown.ts
similarity index 100%
rename from app/components/primer/dropdown.ts
rename to app/components/primer/alpha/dropdown.ts
diff --git a/app/components/primer/dropdown/menu.html.erb b/app/components/primer/alpha/dropdown/menu.html.erb
similarity index 100%
rename from app/components/primer/dropdown/menu.html.erb
rename to app/components/primer/alpha/dropdown/menu.html.erb
diff --git a/app/components/primer/alpha/dropdown/menu.rb b/app/components/primer/alpha/dropdown/menu.rb
new file mode 100644
index 0000000000..b6bb0bcf09
--- /dev/null
+++ b/app/components/primer/alpha/dropdown/menu.rb
@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+ module Alpha
+ class Dropdown
+ # This component is part of `Dropdown` and should not be
+ # used as a standalone component.
+ class Menu < Primer::Component
+ status :alpha
+
+ AS_DEFAULT = :default
+ AS_OPTIONS = [AS_DEFAULT, :list].freeze
+
+ SCHEME_DEFAULT = :default
+ SCHEME_MAPPINGS = {
+ SCHEME_DEFAULT => "",
+ :dark => "dropdown-menu-dark"
+ }.freeze
+
+ DIRECTION_DEFAULT = :se
+ DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
+
+ # @param tag [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::Item::TAG_OPTIONS) %>.
+ # @param divider [Boolean] Whether the item is a divider without any function.
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+ renders_many :items, lambda { |divider: false, **system_arguments|
+ Primer::Alpha::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
+ }
+
+ # @param as [Symbol] When `as` is `:list`, wraps the menu in a `
` with a `- ` for each item.
+ # @param direction [Symbol] <%= one_of(Primer::Alpha::Dropdown::Menu::DIRECTION_OPTIONS) %>.
+ # @param header [String] Header to be displayed above the menu.
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+ def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
+ @header = header
+ @direction = direction
+ @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
+
+ @system_arguments = deny_tag_argument(**system_arguments)
+ @system_arguments[:tag] = "details-menu"
+ @system_arguments[:role] = "menu"
+
+ @system_arguments[:classes] = class_names(
+ @system_arguments[:classes],
+ "dropdown-menu",
+ "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
+ )
+ end
+
+ private
+
+ def list?
+ @as == :list
+ end
+
+ # Items to be rendered in the `Dropdown` menu.
+ class Item < Primer::Component
+ status :alpha
+
+ TAG_DEFAULT = :a
+ BUTTON_TAGS = [:button, :summary].freeze
+ TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
+
+ def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
+ @divider = divider
+ @as = as
+
+ @system_arguments = system_arguments
+ @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+ @system_arguments[:tag] = :li if list? && divider?
+ @system_arguments[:role] ||= :menuitem
+ @system_arguments[:role] = :separator if divider
+ @system_arguments[:classes] = class_names(
+ @system_arguments[:classes],
+ "dropdown-item" => !divider,
+ "dropdown-divider" => divider
+ )
+ end
+
+ def call
+ component = if BUTTON_TAGS.include?(@system_arguments[:tag])
+ Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
+ else
+ Primer::BaseComponent.new(**@system_arguments)
+ end
+
+ # divider has no content
+ render(component) if divider?
+
+ render(component) { content }
+ end
+
+ def divider?
+ @divider
+ end
+
+ def list?
+ @as == :list
+ end
+ end
+ end
+ end
+ end
+end
diff --git a/app/components/primer/dropdown/menu.ts b/app/components/primer/alpha/dropdown/menu.ts
similarity index 100%
rename from app/components/primer/dropdown/menu.ts
rename to app/components/primer/alpha/dropdown/menu.ts
diff --git a/app/components/primer/dropdown.rb b/app/components/primer/dropdown.rb
index e081b2336a..d54a3e2a3c 100644
--- a/app/components/primer/dropdown.rb
+++ b/app/components/primer/dropdown.rb
@@ -1,150 +1,7 @@
# frozen_string_literal: true
module Primer
- # `Dropdown` is a lightweight context menu for housing navigation and actions.
- # They're great for instances where you don't need the full power (and code) of the SelectMenu.
- class Dropdown < Primer::Component
- # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Primer::ButtonComponent) %>,
- # but it is locked as a `summary` tag.
- renders_one :button, lambda { |**system_arguments|
- @button_arguments = system_arguments
- @button_arguments[:button] = true
- @button_arguments[:dropdown] = @with_caret
-
- Primer::Content.new
- }
-
- # Required context menu for the dropdown.
- #
- # @param as [Symbol] When `as` is `:list`, wraps the menu in a `
` with a `- ` for each item.
- # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>
- # @param scheme [Symbol] Pass `:dark` for dark mode theming
- # @param header [String] Optional string to display as the header
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
- renders_one :menu, "Primer::Dropdown::Menu"
-
- # @example Default
- # <%= render(Primer::Dropdown.new) do |c| %>
- # <% c.with_button do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(header: "Options") do |menu|
- # menu.item { "Item 1" }
- # menu.item { "Item 2" }
- # menu.item { "Item 3" }
- # end %>
- # <% end %>
- #
- # @example With dividers
- #
- # @description
- # Dividers can be used to separate a group of items. They don't have any content.
- # @code
- # <%= render(Primer::Dropdown.new) do |c| %>
- # <% c.with_button do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(header: "Options") do |menu|
- # menu.item { "Item 1" }
- # menu.item { "Item 2" }
- # menu.item(divider: true)
- # menu.item { "Item 3" }
- # menu.item { "Item 4" }
- # menu.item(divider: true)
- # menu.item { "Item 5" }
- # menu.item { "Item 6" }
- # end %>
- # <% end %>
- #
- # @example With direction
- # <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
- # <% c.with_button do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(header: "Options", direction: :s) do |menu|
- # menu.item { "Item 1" }
- # menu.item { "Item 2" }
- # menu.item { "Item 3" }
- # menu.item { "Item 4" }
- # end %>
- # <% end %>
- #
- # @example With caret
- # <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
- # <% c.with_button do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(header: "Options") do |menu|
- # menu.item { "Item 1" }
- # menu.item { "Item 2" }
- # menu.item { "Item 3" }
- # menu.item { "Item 4" }
- # end %>
- # <% end %>
- #
- # @example Customizing the button
- # <%= render(Primer::Dropdown.new) do |c| %>
- # <% c.with_button(scheme: :primary, size: :small) do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(header: "Options") do |menu|
- # menu.item { "Item 1" }
- # menu.item { "Item 2" }
- # menu.item { "Item 3" }
- # menu.item { "Item 4" }
- # end %>
- # <% end %>
- #
- # @example Menu as list
- # <%= render(Primer::Dropdown.new) do |c| %>
- # <% c.with_button do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(as: :list, header: "Options") do |menu|
- # menu.item { "Item 1" }
- # menu.item { "Item 2" }
- # menu.item(divider: true)
- # menu.item { "Item 3" }
- # menu.item { "Item 4" }
- # end %>
- # <% end %>
- #
- # @example Customizing menu items
- # <%= render(Primer::Dropdown.new) do |c| %>
- # <% c.with_button do %>
- # Dropdown
- # <% end %>
- #
- # <% c.with_menu(header: "Options") do |menu|
- # menu.item(tag: :button) { "Item 1" }
- # menu.item(classes: "custom-class") { "Item 2" }
- # menu.item { "Item 3" }
- # end %>
- # <% end %>
- #
- # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
- # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
- def initialize(overlay: :default, with_caret: false, **system_arguments)
- @with_caret = with_caret
-
- @system_arguments = system_arguments
- @system_arguments[:overlay] = overlay
- @system_arguments[:reset] = true
- @system_arguments[:classes] = class_names(
- @system_arguments[:classes],
- "dropdown"
- )
- end
-
- def render?
- button.present? && menu.present?
- end
+ class Dropdown < Primer::Alpha::Dropdown
+ status :deprecated
end
end
diff --git a/app/components/primer/dropdown/menu.rb b/app/components/primer/dropdown/menu.rb
index 4f781d1821..3bd9b815dd 100644
--- a/app/components/primer/dropdown/menu.rb
+++ b/app/components/primer/dropdown/menu.rb
@@ -2,97 +2,12 @@
module Primer
class Dropdown
- # This component is part of `Dropdown` and should not be
- # used as a standalone component.
- class Menu < Primer::Component
- AS_DEFAULT = :default
- AS_OPTIONS = [AS_DEFAULT, :list].freeze
+ # :nodoc:
+ class Menu < Primer::Alpha::Dropdown::Menu
+ status :deprecated
- SCHEME_DEFAULT = :default
- SCHEME_MAPPINGS = {
- SCHEME_DEFAULT => "",
- :dark => "dropdown-menu-dark"
- }.freeze
-
- DIRECTION_DEFAULT = :se
- DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
-
- # @param tag [Symbol] <%= one_of(Primer::Dropdown::Menu::Item::TAG_OPTIONS) %>.
- # @param divider [Boolean] Whether the item is a divider without any function.
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
- renders_many :items, lambda { |divider: false, **system_arguments|
- Primer::Dropdown::Menu::Item.new(as: @as, divider: divider, **system_arguments)
- }
-
- # @param as [Symbol] When `as` is `:list`, wraps the menu in a `
` with a `- ` for each item.
- # @param direction [Symbol] <%= one_of(Primer::Dropdown::Menu::DIRECTION_OPTIONS) %>.
- # @param header [String] Header to be displayed above the menu.
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
- def initialize(as: AS_DEFAULT, direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
- @header = header
- @direction = direction
- @as = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
-
- @system_arguments = deny_tag_argument(**system_arguments)
- @system_arguments[:tag] = "details-menu"
- @system_arguments[:role] = "menu"
-
- @system_arguments[:classes] = class_names(
- @system_arguments[:classes],
- "dropdown-menu",
- "dropdown-menu-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
- SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, SCHEME_DEFAULT)]
- )
- end
-
- private
-
- def list?
- @as == :list
- end
-
- # Items to be rendered in the `Dropdown` menu.
- class Item < Primer::Component
- TAG_DEFAULT = :a
- BUTTON_TAGS = [:button, :summary].freeze
- TAG_OPTIONS = [TAG_DEFAULT, *BUTTON_TAGS].freeze
-
- def initialize(as:, tag: TAG_DEFAULT, divider: false, **system_arguments)
- @divider = divider
- @as = as
-
- @system_arguments = system_arguments
- @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
- @system_arguments[:tag] = :li if list? && divider?
- @system_arguments[:role] ||= :menuitem
- @system_arguments[:role] = :separator if divider
- @system_arguments[:classes] = class_names(
- @system_arguments[:classes],
- "dropdown-item" => !divider,
- "dropdown-divider" => divider
- )
- end
-
- def call
- component = if BUTTON_TAGS.include?(@system_arguments[:tag])
- Primer::ButtonComponent.new(scheme: :link, **@system_arguments)
- else
- Primer::BaseComponent.new(**@system_arguments)
- end
-
- # divider has no content
- render(component) if divider?
-
- render(component) { content }
- end
-
- def divider?
- @divider
- end
-
- def list?
- @as == :list
- end
+ class Item < Primer::Alpha::Dropdown::Menu::Item
+ status :deprecated
end
end
end
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
index 0251ee1234..57df65a260 100644
--- a/app/components/primer/primer.pcss
+++ b/app/components/primer/primer.pcss
@@ -2,6 +2,7 @@
@import "./alpha/action_list.pcss";
@import "./alpha/auto_complete.pcss";
@import "./alpha/banner.pcss";
+@import "./alpha/dropdown.pcss";
@import "./alpha/tab_nav.pcss";
@import "./alpha/button_marketing.pcss";
@import "./alpha/toggle_switch.pcss";
@@ -10,16 +11,15 @@
@import "./beta/avatar.pcss";
@import "./beta/avatar_stack.pcss";
@import "./beta/border_box.pcss";
+@import "./beta/blankslate.pcss";
@import "./beta/breadcrumbs.pcss";
@import "./beta/button.pcss";
@import "./beta/counter.pcss";
@import "./beta/flash.pcss";
@import "./beta/label.pcss";
@import "./beta/link.pcss";
-@import "./beta/blankslate.pcss";
@import "./beta/progress_bar.pcss";
@import "./beta/truncate.pcss";
-@import "./dropdown.pcss";
@import "./menu_component.pcss";
@import "./popover_component.pcss";
@import "./state_component.pcss";
diff --git a/app/components/primer/primer.ts b/app/components/primer/primer.ts
index 9ebaaea299..a190cc278d 100644
--- a/app/components/primer/primer.ts
+++ b/app/components/primer/primer.ts
@@ -1,3 +1,4 @@
+import './alpha/dropdown'
import './alpha/image_crop'
import './alpha/modal_dialog'
import './alpha/nav_list'
@@ -7,7 +8,6 @@ import './alpha/tool_tip'
import './alpha/x_banner'
import './beta/auto_complete/auto_complete'
import './clipboard_copy'
-import './dropdown'
import './local_time'
import './tab_container_component'
import './time_ago_component'
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 693f53c61b..4845b4e024 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -50,7 +50,7 @@
- title: Dialog
url: "/components/alpha/dialog"
- title: Dropdown
- url: "/components/dropdown"
+ url: "/components/alpha/dropdown"
- title: DropdownMenu
url: "/components/dropdownmenu"
- title: Flash
diff --git a/lib/primer/deprecations.rb b/lib/primer/deprecations.rb
index 0cb171c3ef..3ec780a83e 100644
--- a/lib/primer/deprecations.rb
+++ b/lib/primer/deprecations.rb
@@ -12,6 +12,9 @@ module Deprecations
"Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
"Primer::BoxComponent" => "Primer::Box",
"Primer::DropdownMenuComponent" => nil,
+ "Primer::Dropdown" => "Primer::Alpha::Dropdown",
+ "Primer::Dropdown::Menu" => "Primer::Alpha::Dropdown::Menu",
+ "Primer::Dropdown::Menu::Item" => "Primer::Alpha::Dropdown::Menu::Item",
"Primer::IconButton" => "Primer::Beta::IconButton",
"Primer::Tooltip" => "Primer::Alpha::Tooltip"
}.freeze
diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake
index f9b36bc9e0..8e711ada2a 100644
--- a/lib/tasks/docs.rake
+++ b/lib/tasks/docs.rake
@@ -58,7 +58,7 @@ namespace :docs do
Primer::Beta::Counter,
Primer::Beta::Details,
Primer::Alpha::Dialog,
- Primer::Dropdown,
+ Primer::Alpha::Dropdown,
Primer::DropdownMenuComponent,
Primer::Beta::Flash,
Primer::Beta::Heading,
@@ -99,7 +99,7 @@ namespace :docs do
]
js_components = [
- Primer::Dropdown,
+ Primer::Alpha::Dropdown,
Primer::LocalTime,
Primer::Alpha::ImageCrop,
Primer::Beta::AutoComplete,
diff --git a/previews/primer/alpha/dropdown_preview.rb b/previews/primer/alpha/dropdown_preview.rb
new file mode 100644
index 0000000000..617739f53b
--- /dev/null
+++ b/previews/primer/alpha/dropdown_preview.rb
@@ -0,0 +1,210 @@
+# frozen_string_literal: true
+
+module Primer
+ module Alpha
+ # @label Dropdown
+ class DropdownPreview < ViewComponent::Preview
+ # @label Playground
+ #
+ # @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" }
+ end
+ end
+ end
+
+ # @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" }
+ end
+ end
+ end
+
+ # @label Menu
+ #
+ # @param as [Symbol] select [list, default]
+ # @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" }
+ end
+ end
+
+ # @!group Direction
+ #
+ # @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" }
+ 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" }
+ 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" }
+ 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" }
+ 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" }
+ 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" }
+ end
+ end
+ end
+ #
+ # @!endgroup
+
+ # @!group Options
+ #
+ # @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" }
+ 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" }
+ 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" }
+ 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" }
+ 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" }
+ 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" }
+ end
+ end
+ end
+ #
+ # @!endgroup
+ end
+ end
+end
diff --git a/previews/primer/dropdown_preview.rb b/previews/primer/dropdown_preview.rb
deleted file mode 100644
index 7bdd2b3730..0000000000
--- a/previews/primer/dropdown_preview.rb
+++ /dev/null
@@ -1,208 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
- # @label Dropdown
- class DropdownPreview < ViewComponent::Preview
- # @label Playground
- #
- # @param with_caret [Boolean] toggle
- # @param overlay [Symbol] select [none, default, dark]
- def playground(overlay: :default, with_caret: false)
- render(Primer::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" }
- end
- end
- end
-
- # @label Default
- #
- def default
- render(Primer::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" }
- end
- end
- end
-
- # @label Menu
- #
- # @param as [Symbol] select [list, default]
- # @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::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" }
- end
- end
-
- # @!group Direction
- #
- # @label Direction e
- def direction_e
- render(Primer::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" }
- end
- end
- end
-
- # @label Direction ne
- def direction_ne
- render(Primer::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" }
- end
- end
- end
-
- # @label Direction s
- def direction_s
- render(Primer::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" }
- end
- end
- end
-
- # @label Direction se
- def direction_se
- render(Primer::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" }
- end
- end
- end
-
- # @label Direction sw
- def direction_sw
- render(Primer::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" }
- end
- end
- end
-
- # @label Direction w
- def direction_w
- render(Primer::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" }
- end
- end
- end
- #
- # @!endgroup
-
- # @!group Options
- #
- # @label With caret
- def options_with_caret
- render(Primer::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" }
- end
- end
- end
-
- # @label With header
- def options_with_header
- render(Primer::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" }
- end
- end
- end
-
- # @label With dividers
- def options_with_dividers
- render(Primer::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" }
- end
- end
- end
-
- # @label As list
- def options_as_list
- render(Primer::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" }
- end
- end
- end
-
- # @label Overlay none
- def options_overlay_none
- render(Primer::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" }
- end
- end
- end
-
- # @label Overlay dark
- def options_overlay_dark
- render(Primer::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" }
- end
- end
- end
- #
- # @!endgroup
- end
-end
diff --git a/static/audited_at.json b/static/audited_at.json
index 9210677297..f53ed3a374 100644
--- a/static/audited_at.json
+++ b/static/audited_at.json
@@ -11,6 +11,9 @@
"Primer::Alpha::Dialog::Body": "",
"Primer::Alpha::Dialog::Footer": "",
"Primer::Alpha::Dialog::Header": "",
+ "Primer::Alpha::Dropdown": "",
+ "Primer::Alpha::Dropdown::Menu": "",
+ "Primer::Alpha::Dropdown::Menu::Item": "",
"Primer::Alpha::HiddenTextExpander": "",
"Primer::Alpha::Image": "",
"Primer::Alpha::ImageCrop": "",
diff --git a/static/constants.json b/static/constants.json
index 97e1937626..ccf72d3e0a 100644
--- a/static/constants.json
+++ b/static/constants.json
@@ -179,6 +179,43 @@
},
"Primer::Alpha::Dialog::Header": {
},
+ "Primer::Alpha::Dropdown": {
+ "Menu": "Primer::Alpha::Dropdown::Menu"
+ },
+ "Primer::Alpha::Dropdown::Menu": {
+ "AS_DEFAULT": "default",
+ "AS_OPTIONS": [
+ "default",
+ "list"
+ ],
+ "DIRECTION_DEFAULT": "se",
+ "DIRECTION_OPTIONS": [
+ "se",
+ "sw",
+ "w",
+ "e",
+ "ne",
+ "s"
+ ],
+ "Item": "Primer::Alpha::Dropdown::Menu::Item",
+ "SCHEME_DEFAULT": "default",
+ "SCHEME_MAPPINGS": {
+ "default": "",
+ "dark": "dropdown-menu-dark"
+ }
+ },
+ "Primer::Alpha::Dropdown::Menu::Item": {
+ "BUTTON_TAGS": [
+ "button",
+ "summary"
+ ],
+ "TAG_DEFAULT": "a",
+ "TAG_OPTIONS": [
+ "a",
+ "button",
+ "summary"
+ ]
+ },
"Primer::Alpha::HiddenTextExpander": {
},
"Primer::Alpha::Image": {
@@ -736,38 +773,9 @@
"Menu": "Primer::Dropdown::Menu"
},
"Primer::Dropdown::Menu": {
- "AS_DEFAULT": "default",
- "AS_OPTIONS": [
- "default",
- "list"
- ],
- "DIRECTION_DEFAULT": "se",
- "DIRECTION_OPTIONS": [
- "se",
- "sw",
- "w",
- "e",
- "ne",
- "s"
- ],
- "Item": "Primer::Dropdown::Menu::Item",
- "SCHEME_DEFAULT": "default",
- "SCHEME_MAPPINGS": {
- "default": "",
- "dark": "dropdown-menu-dark"
- }
+ "Item": "Primer::Dropdown::Menu::Item"
},
"Primer::Dropdown::Menu::Item": {
- "BUTTON_TAGS": [
- "button",
- "summary"
- ],
- "TAG_DEFAULT": "a",
- "TAG_OPTIONS": [
- "a",
- "button",
- "summary"
- ]
},
"Primer::DropdownMenuComponent": {
"DIRECTION_DEFAULT": "se",
diff --git a/static/statuses.json b/static/statuses.json
index f45289fd3c..23ae1d415d 100644
--- a/static/statuses.json
+++ b/static/statuses.json
@@ -11,6 +11,9 @@
"Primer::Alpha::Dialog::Body": "alpha",
"Primer::Alpha::Dialog::Footer": "alpha",
"Primer::Alpha::Dialog::Header": "alpha",
+ "Primer::Alpha::Dropdown": "alpha",
+ "Primer::Alpha::Dropdown::Menu": "alpha",
+ "Primer::Alpha::Dropdown::Menu::Item": "alpha",
"Primer::Alpha::HiddenTextExpander": "alpha",
"Primer::Alpha::Image": "alpha",
"Primer::Alpha::ImageCrop": "alpha",
@@ -61,9 +64,9 @@
"Primer::ClipboardCopy": "beta",
"Primer::ConditionalWrapper": "alpha",
"Primer::Content": "stable",
- "Primer::Dropdown": "alpha",
- "Primer::Dropdown::Menu": "alpha",
- "Primer::Dropdown::Menu::Item": "alpha",
+ "Primer::Dropdown": "deprecated",
+ "Primer::Dropdown::Menu": "deprecated",
+ "Primer::Dropdown::Menu::Item": "deprecated",
"Primer::DropdownMenuComponent": "deprecated",
"Primer::HellipButton": "alpha",
"Primer::IconButton": "deprecated",
diff --git a/test/components/dropdown/menu_test.rb b/test/components/alpha/dropdown/menu_test.rb
similarity index 71%
rename from test/components/dropdown/menu_test.rb
rename to test/components/alpha/dropdown/menu_test.rb
index ee2d9828c1..39984b8322 100644
--- a/test/components/dropdown/menu_test.rb
+++ b/test/components/alpha/dropdown/menu_test.rb
@@ -2,37 +2,37 @@
require "components/test_helper"
-class Primer::Dropdown::MenuTest < Minitest::Test
+class Primer::Alpha::Dropdown::MenuTest < Minitest::Test
include Primer::ComponentTestHelpers
def test_dropdown_component_renders_dark_scheme
- render_inline(Primer::Dropdown::Menu.new(scheme: :dark)) { "Body" }
+ render_inline(Primer::Alpha::Dropdown::Menu.new(scheme: :dark)) { "Body" }
assert_selector("details-menu.dropdown-menu.dropdown-menu-dark")
end
def test_dropdown_direction_renders
- render_inline(Primer::Dropdown::Menu.new(direction: :w)) { "Body" }
+ render_inline(Primer::Alpha::Dropdown::Menu.new(direction: :w)) { "Body" }
assert_selector("details-menu.dropdown-menu.dropdown-menu-w")
end
def test_falls_back_to_defaults_when_invalid_options_are_passed
without_fetch_or_fallback_raises do
- render_inline(Primer::Dropdown::Menu.new(direction: :circle, scheme: :orange)) { "Body" }
+ render_inline(Primer::Alpha::Dropdown::Menu.new(direction: :circle, scheme: :orange)) { "Body" }
end
assert_selector("details-menu.dropdown-menu")
end
def test_dropdown_header_renders
- render_inline(Primer::Dropdown::Menu.new(header: "Header")) { "Body" }
+ render_inline(Primer::Alpha::Dropdown::Menu.new(header: "Header")) { "Body" }
assert_selector(".dropdown-header")
end
def test_renders_items
- render_inline(Primer::Dropdown::Menu.new(header: "Header")) do |c|
+ render_inline(Primer::Alpha::Dropdown::Menu.new(header: "Header")) do |c|
c.item { "Item 1" }
c.item { "Item 2" }
end
@@ -42,7 +42,7 @@ def test_renders_items
end
def test_renders_items_as_buttons
- render_inline(Primer::Dropdown::Menu.new(header: "Header")) do |c|
+ render_inline(Primer::Alpha::Dropdown::Menu.new(header: "Header")) do |c|
c.item(tag: :button) { "Item 1" }
c.item(tag: :button) { "Item 2" }
end
@@ -52,7 +52,7 @@ def test_renders_items_as_buttons
end
def test_renders_dividers
- render_inline(Primer::Dropdown::Menu.new(header: "Header")) do |c|
+ render_inline(Primer::Alpha::Dropdown::Menu.new(header: "Header")) do |c|
c.item(divider: true)
end
@@ -60,7 +60,7 @@ def test_renders_dividers
end
def test_renders_as_list
- render_inline(Primer::Dropdown::Menu.new(as: :list, header: "Header")) do |c|
+ render_inline(Primer::Alpha::Dropdown::Menu.new(as: :list, header: "Header")) do |c|
c.item { "Item 1" }
c.item(divider: true)
c.item { "Item 2" }
diff --git a/test/components/dropdown_test.rb b/test/components/alpha/dropdown_test.rb
similarity index 82%
rename from test/components/dropdown_test.rb
rename to test/components/alpha/dropdown_test.rb
index 3a4667bfca..67fd2bdf14 100644
--- a/test/components/dropdown_test.rb
+++ b/test/components/alpha/dropdown_test.rb
@@ -2,23 +2,23 @@
require "components/test_helper"
-class PrimerDropdownTest < Minitest::Test
+class PrimerAlphaDropdownTest < Minitest::Test
include Primer::ComponentTestHelpers
def test_does_not_render_without_button
- render_inline(Primer::Dropdown.new) { |c| c.menu { "Menu" } }
+ render_inline(Primer::Alpha::Dropdown.new) { |c| c.menu { "Menu" } }
refute_selector(".dropdown")
end
def test_does_not_render_without_menu
- render_inline(Primer::Dropdown.new) { |c| c.button { "Button" } }
+ render_inline(Primer::Alpha::Dropdown.new) { |c| c.button { "Button" } }
refute_selector(".dropdown")
end
def test_renders_dropdown
- render_inline(Primer::Dropdown.new) do |c|
+ render_inline(Primer::Alpha::Dropdown.new) do |c|
c.button { "Button" }
c.menu do |m|
m.item { "Item" }
@@ -34,7 +34,7 @@ def test_renders_dropdown
end
def test_renders_dropdown_with_header
- render_inline(Primer::Dropdown.new) do |c|
+ render_inline(Primer::Alpha::Dropdown.new) do |c|
c.button { "Button" }
c.menu(header: "Header") do |m|
m.item { "Item" }
@@ -51,7 +51,7 @@ def test_renders_dropdown_with_header
end
def test_renders_dropdown_with_divider
- render_inline(Primer::Dropdown.new) do |c|
+ render_inline(Primer::Alpha::Dropdown.new) do |c|
c.button { "Button" }
c.menu do |m|
m.item { "Item" }
@@ -69,7 +69,7 @@ def test_renders_dropdown_with_divider
end
def test_renders_dropdown_with_direction
- render_inline(Primer::Dropdown.new) do |c|
+ render_inline(Primer::Alpha::Dropdown.new) do |c|
c.button { "Button" }
c.menu(direction: :s) do |m|
m.item { "Item" }
@@ -85,7 +85,7 @@ def test_renders_dropdown_with_direction
end
def test_renders_caret
- render_inline(Primer::Dropdown.new(with_caret: true)) do |c|
+ render_inline(Primer::Alpha::Dropdown.new(with_caret: true)) do |c|
c.button { "Button" }
c.menu do |m|
m.item { "Item" }
diff --git a/test/components/component_test.rb b/test/components/component_test.rb
index f184540037..e28a172a27 100644
--- a/test/components/component_test.rb
+++ b/test/components/component_test.rb
@@ -69,13 +69,13 @@ class PrimerComponentTest < Minitest::Test
[Primer::Alpha::Dialog::Header, { title: "Test", id: "test" }],
[Primer::Alpha::Dialog::Body, {}],
[Primer::Alpha::Dialog::Footer, {}],
- [Primer::Dropdown, {}, lambda do |component|
+ [Primer::Alpha::Dropdown, {}, lambda do |component|
component.button { "Foo" }
component.menu do |m|
m.item { "Baz" }
end
end],
- [Primer::Dropdown::Menu, {}],
+ [Primer::Alpha::Dropdown::Menu, {}],
[Primer::DropdownMenuComponent, {}],
[Primer::Beta::Flash, {}],
[Primer::Beta::Heading, { tag: :h1 }],
@@ -119,6 +119,8 @@ def test_registered_components
"Primer::Component",
"Primer::OcticonsSymbolComponent",
"Primer::Content",
+ "Primer::Dropdown",
+ "Primer::Dropdown::Menu",
"Primer::BoxComponent"
]
diff --git a/test/css/component_selector_use_test.rb b/test/css/component_selector_use_test.rb
index 6083522091..60c98310bb 100644
--- a/test/css/component_selector_use_test.rb
+++ b/test/css/component_selector_use_test.rb
@@ -35,7 +35,7 @@
Primer::Beta::IconButton => ["Button--medium", "octicon", "octicon-x"],
Primer::Beta::Truncate => ["Truncate-text"],
Primer::ClipboardCopy => ["octicon", "octicon-check", "octicon-copy"],
- Primer::Dropdown => ["btn", "details-overlay", "details-reset", "dropdown-menu-se", "octicon", "octicon-triangle-down"],
+ Primer::Alpha::Dropdown => ["btn", "details-overlay", "details-reset", "dropdown-menu-se", "octicon", "octicon-triangle-down"],
Primer::Markdown => ["markdown-body"]
}.freeze
# rubocop:enable Style/WordArray
diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb
index b8e98cfa7b..f0591f341c 100644
--- a/test/css/component_specific_selectors_test.rb
+++ b/test/css/component_specific_selectors_test.rb
@@ -119,7 +119,7 @@ class ComponentSpecificSelectorsTest < Minitest::Test
".flash-banner",
".warning"
],
- Primer::Dropdown => [
+ Primer::Alpha::Dropdown => [
".dropdown-caret",
".dropdown-menu-no-overflow",
".dropdown-menu-no-overflow .dropdown-item",