Class: Primer::Beta::Button

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

Overview

Use Button for actions (e.g. in forms). Use links for destinations, or moving from one page to another.

Constant Summary collapse

DEFAULT_SCHEME = 
:default

:link
SCHEME_MAPPINGS = 
{
  DEFAULT_SCHEME => "",
  :primary => "Button--primary",
  :secondary => "Button--secondary",
  :default => "Button--secondary",
  :danger => "Button--danger",
  :outline => "btn-outline",
  :invisible => "Button--invisible",
  LINK_SCHEME => "btn-link"
}.freeze
SCHEME_OPTIONS = 
SCHEME_MAPPINGS.keys
DEFAULT_SIZE = 
:medium
SIZE_MAPPINGS = 
{
  :small => "Button--small",
  :medium => "Button--medium",
  :large => "Button--large",
  DEFAULT_SIZE => "Button--medium"
}.freeze
SIZE_OPTIONS = 
SIZE_MAPPINGS.keys
DEFAULT_ALIGN_CONTENT = 
:center
ALIGN_CONTENT_MAPPINGS = 
{
  :start => "Button-content--alignStart",
  :center => "",
  DEFAULT_ALIGN_CONTENT => ""
}.freeze
ALIGN_CONTENT_OPTIONS = 
ALIGN_CONTENT_MAPPINGS.keys

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(scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, full_width: false, align_content: DEFAULT_ALIGN_CONTENT, **system_arguments) ⇒ Button

Returns a new instance of Button.

Examples:

Schemes

<%= render(Primer::Beta::Button.new) { "Default" } %>
<%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
<%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
<%= render(Primer::Beta::Button.new(scheme: :outline)) { "Outline" } %>
<%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
<%= render(Primer::Beta::Button.new(scheme: :link)) { "Link" } %>

Sizes

<%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
<%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>

Block

<%= render(Primer::Beta::Button.new(block: :true)) { "Block" } %>
<%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary block" } %>

With leading visual

<%= render(Primer::Beta::Button.new) do |c| %>
  <% c.with_leading_visual_icon(icon: :star) %>
  Button
<% end %>

With trailing visual

<%= render(Primer::Beta::Button.new) do |c| %>
  <% c.with_trailing_visual_counter(count: 15) %>
  Button
<% end %>

With leading and trailing visuals

<%= render(Primer::Beta::Button.new) do |c| %>
  <% c.with_leading_visual_icon(icon: :star) %>
  <% c.with_trailing_visual_counter(count: 15) %>
  Button
<% end %>

With tooltip

@description
  Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
@code
  <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c| %>
    <% c.with_tooltip(text: "Tooltip text") %>
    Button
  <% end %>

Parameters:

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

    <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>

  • size (Symbol) (defaults to: DEFAULT_SIZE) —

    <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>

  • full_width (Boolean) (defaults to: false) —

    Whether button is full-width with ‘display: block`.

  • align_content (Symbol) (defaults to: DEFAULT_ALIGN_CONTENT) —

    <%= one_of(Primer::Beta::Button::ALIGN_CONTENT_OPTIONS) %>

  • tag (Symbol) —

    (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>

  • type (Symbol) —

    (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
 
# File 'app/components/primer/beta/button.rb', line 143

def initialize(
  scheme: DEFAULT_SCHEME,
  size: DEFAULT_SIZE,
  full_width: false,
  align_content: DEFAULT_ALIGN_CONTENT,
  **system_arguments
)
  @scheme = scheme

  @system_arguments = system_arguments

  @id = @system_arguments[:id]

  @align_content_classes = class_names(
    "Button-content",
    system_arguments[:classes],
    ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)]
  )

  @system_arguments[:classes] = class_names(
    system_arguments[:classes],
    SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
    SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
    "Button" => !link?,
    "Button--fullWidth" => full_width
  )
end