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
SCHEME_MAPPINGS = 
{
  DEFAULT_SCHEME => "",
  :primary => "Button--primary",
  :secondary => "Button--secondary",
  :default => "Button--secondary",
  :danger => "Button--danger",
  :invisible => "Button--invisible",
  :link => "Button--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

Constants included from AttributesHelper

AttributesHelper::PLURAL_ARIA_ATTRIBUTES, AttributesHelper::PLURAL_DATA_ATTRIBUTES

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

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

Methods included from AttributesHelper

#aria, #data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes

Constructor Details

#initialize(scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, block: false, align_content: DEFAULT_ALIGN_CONTENT, disabled: false, **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: :invisible)) { "Invisible" } %>

Sizes

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

Full width

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

With leading visual

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

With trailing visual

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

With leading and trailing visuals

<%= render(Primer::Beta::Button.new) do |component| %>
  <% component.with_leading_visual_icon(icon: :star) %>
  <% component.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 |component| %>
    <% component.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) %>

  • block (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) %>

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

    Whether or not the button is disabled. If true, this option forces tag: to :button.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>

Raises:

  • (ArgumentError) 


140
141
142
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
170
171
 
# File 'app/components/primer/beta/button.rb', line 140

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

  @system_arguments = system_arguments
  @system_arguments[:disabled] = disabled

  @id = @system_arguments[:id]

  raise ArgumentError, "The `variant:` argument is no longer supported on Primer::Beta::Button. Consider `scheme:` or `size:`." if !Rails.env.production? && @system_arguments[:variant].present?
  raise ArgumentError, "The `dropdown:` argument is no longer supported on Primer::Beta::Button. Use the `trailing_action` slot instead." if !Rails.env.production? && @system_arguments[:dropdown].present?

  @align_content_classes = class_names(
    "Button-content",
    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",
    "Button--fullWidth" => @block
  )
end