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::STATUSES

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods inherited from Component

status

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean

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:

200|With a header

<div style="margin-bottom: 150px">
  <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
    <% c.slot(:summary) do %>
      Dropdown
    <% end %>

    <% c.slot(: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 %>



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

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