Class: Primer::DropdownMenuComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/dropdown_menu_component.rb

Overview

DropdownMenus are lightweight context menus for housing navigation and actions. They’re great for instances where you don’t need the full power (and code) of the select menu.

Constant Summary collapse

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

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments) ⇒ DropdownMenuComponent

Returns a new instance of DropdownMenuComponent.

Examples:

With a header

<div>
  <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
    <% c.summary do %>
      Dropdown
    <% end %>

    <% c.body do %>
      <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
        <ul>
          <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
          <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
          <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
        </ul>
      <% end %>
    <% end %>
  <% end %>
</div>

Parameters:

  • direction (Symbol) (defaults to: DIRECTION_DEFAULT) —

    <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>

  • scheme (Symbol) (defaults to: SCHEME_DEFAULT) —

    Pass ‘:dark` for dark mode theming

  • header (String) (defaults to: nil) —

    Optional string to display as the header

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
# File 'app/components/primer/dropdown_menu_component.rb', line 42

def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
  @header = header
  @direction = direction
  @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