Class: Daisy::Actions::ButtonComponent

Inherits:

LocoMotion::BaseComponent

• Object
• ViewComponent::Base
• LocoMotion::BaseComponent
• Daisy::Actions::ButtonComponent

Includes:

LocoMotion::Concerns::IconableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent

Defined in:

app/components/daisy/actions/button_component.rb

Overview

Note:

We do not use component parts for the icons since we're calling loco_icon within the component. But we do provide custom CSS & HTML options to allow overriding / customization.

Note:

Includes the LocoMotion::Concerns::TippableComponent module to enable easy tooltip addition.

The Button component can be used to render HTML <button> or <a> elements that are styled to look like a clickable element.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary

• #before_render ⇒ Object

  Calls the #setup_component method before rendering the component.

• #initialize(title = nil, action = nil, **kws, &block) ⇒ ButtonComponent constructor

  Instantiate a new Button component.

• #setup_component ⇒ Object

  Performs button-specific setup.

Methods included from LocoMotion::Concerns::IconableComponent

#has_icons?, #left_icon_html, #render_left_icon, #render_right_icon, #right_icon_html

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(title = nil, action = nil, **kws, &block) ⇒ ButtonComponent

Instantiate a new Button component.

Parameters:

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

  The title of the button. Defaults to "Submit" if none of title, left icon, or right icon is provided. Will be considered the action parameter if both the title and a block are provided.

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

  A Stimulus action wired to the button via its data-action attribute, provided positionally as shorthand for the action: keyword (e.g. daisy_button("Say Hello", "greeter#greet")). The keyword wins if both are given.

• kws (Hash) —

  The keyword arguments for the component.

Options Hash (**kws):

• title (String) —

  The title of the button. You can also pass the title, icons, or any other HTML content as a block.

• href (String) —

  A path or URL to which the user will be directed when the button is clicked. Forces the Button to use an <a> tag.

  Note: You should use either the action or the href option, but not both.

• target (String) —

  The HTML target of for the <a> tag (_blank, _parent, or a specific tab / window / iframe, etc).

• action (String) —

  A Stimulus action wired to the button via its data-action attribute. Stimulus infers the click event for buttons, so action: "my-controller#handle" works as a shorthand for action: "click->my-controller#handle".

• tip (String) —

  The tooltip text to display when hovering over the button.

• turbo_frame (String) —

  The Turbo Frame to target, rendered as data-turbo-frame.

• turbo_action (String, Symbol) —

  How Turbo Drive updates the browser history for the visit, rendered as data-turbo-action (e.g. :advance or :replace).

• turbo_method (String, Symbol) —

  The HTTP method Turbo should use for the request, rendered as data-turbo-method (e.g. :delete).

• turbo_confirm (String) —

  A confirmation prompt Turbo shows before submitting, rendered as data-turbo-confirm.

• icon (String) —

  The name of Hero icon to render inside the button. This is an alias of left_icon.

• icon_css (String) —

  The CSS classes to apply to the icon. This is an alias of left_icon_css.

• icon_options (Hash) —

  Additional keyword arguments forwarded to the icon component. This is an alias of left_icon_options.

• icon_html (Hash) —

  Additional HTML attributes to apply to the icon. This is an alias of left_icon_html.

• left_icon (String) —

  The name of Hero icon to render inside the button to the left of the text.

• left_icon_css (String) —

  The CSS classes to apply to the left icon.

• left_icon_options (Hash) —

  Additional keyword arguments forwarded to the left icon component (e.g. tip:).

• left_icon_html (Hash) —

  Additional HTML attributes to apply to the left icon.

• right_icon (String) —

  The name of Hero icon to render inside the button to the right of the text.

• right_icon_css (String) —

  Right icon CSS (via IconableComponent).

• right_icon_options (Hash) —

  Additional keyword arguments forwarded to the right icon component (e.g. tip:).

• right_icon_html (Hash) —

  Right icon HTML (via IconableComponent).

# File 'app/components/daisy/actions/button_component.rb', line 198

def initialize(title = nil, action = nil, **kws, &block)
  super

  # If both a title and a block are provided, assume the title is the action
  action = title if title && block_given?

  # Force the title to be nil if a block is given so we don't accidentally
  # render two titles
  title = nil if block_given?

  # ActionableComponent (via LinkableComponent) already read the `action:`
  # keyword into @action and emits the `data-action` attribute. Re-read it
  # here with the positional `action` arg as the fallback so the
  # button-only `daisy_button("Say Hello", "greeter#greet")` sugar keeps
  # working; the keyword still wins when both are given.
  @action = config_option(:action, action)

  # Initialize concerns -- handled by BaseComponent hook
  default_title = @left_icon || @right_icon ? nil : "Submit"
  @simple_title = config_option(:title, title || default_title)
end

Instance Method Details

#before_render ⇒ Object

Calls the #setup_component method before rendering the component.

# File 'app/components/daisy/actions/button_component.rb', line 223

def before_render
  # Run before the super so LinkableComponent can override our tag name
  setup_component

  super
end

#setup_component ⇒ Object

Performs button-specific setup. Adds the btn CSS class to the component. Tag name setup (<a> vs <button>) and tooltip setup are handled by LinkableComponent and TippableComponent concerns via BaseComponent hooks.

# File 'app/components/daisy/actions/button_component.rb', line 235

def setup_component
  # Ensure tag is button if LinkableComponent didn't set it to <a>
  set_tag_name(:component, :button)

  # Add the btn class
  add_css(:component, "btn") unless @skip_styling

  # `data-action` is emitted by ActionableComponent (pulled in via
  # LinkableComponent); see @action handling in initialize for the
  # positional-arg sugar.
end