Class: Primer::FlashComponent

Inherits:
Component
  • Object
show all
Includes:
ViewComponent::SlotableV2
Defined in:
app/components/primer/flash_component.rb

Overview

Use the Flash component to inform users of successful or pending actions.

Constant Summary collapse

DEFAULT_VARIANT = 
:default
VARIANT_MAPPINGS = 
{
  DEFAULT_VARIANT => "",
  :warning => "flash-warn",
  :danger => "flash-error",
  :success => "flash-success"
}.freeze

Constants inherited from Component

Component::STATUSES

Constants included from FetchOrFallbackHelper

Primer::FetchOrFallbackHelper::InvalidValueError

Class Method Summary collapse

Instance Method Summary collapse

Methods included from ViewHelper

#primer

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(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **system_arguments) ⇒ FlashComponent

Returns a new instance of FlashComponent.

Examples:

Variants

<%= render(Primer::FlashComponent.new) { "This is a flash message!" } %>
<%= render(Primer::FlashComponent.new(variant: :warning)) { "This is a warning flash message!" } %>
<%= render(Primer::FlashComponent.new(variant: :danger)) { "This is a danger flash message!" } %>
<%= render(Primer::FlashComponent.new(variant: :success)) { "This is a success flash message!" } %>

Full width

<%= render(Primer::FlashComponent.new(full: true)) { "This is a full width flash message!" } %>

Dismissible

<%= render(Primer::FlashComponent.new(dismissible: true)) { "This is a dismissible flash message!" } %>

Icon

<%= render(Primer::FlashComponent.new(icon: "people")) { "This is a flash message with an icon!" } %>

With actions

<%= render(Primer::FlashComponent.new) do |component| %>
  This is a flash message with actions!
  <% component.action do %>
    <%= render(Primer::ButtonComponent.new(variant: :small)) { "Take action" } %>
  <% end %>
<% end %>

Parameters:

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

    Whether the component should take up the full width of the screen.

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

    Whether to add margin to the bottom of the component.

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

    Whether the component can be dismissed with an X button.

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

    Name of Octicon icon to use.

  • variant (Symbol) (defaults to: DEFAULT_VARIANT) —

    <%= one_of(Primer::FlashComponent::VARIANT_MAPPINGS.keys) %>

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/primer/flash_component.rb', line 54

def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **system_arguments)
  @icon = icon
  @dismissible = dismissible
  @system_arguments = system_arguments
  @system_arguments[:tag] = :div
  @system_arguments[:classes] = class_names(
    @system_arguments[:classes],
    "flash",
    VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
    "flash-full": full
  )
  @system_arguments[:mb] ||= spacious ? 4 : nil
end

Class Method Details

.status ⇒ Object 



68
69
70
 
# File 'app/components/primer/flash_component.rb', line 68

def self.status
  Primer::Component::STATUSES[:beta]
end