Class: Daisy::Actions::ButtonComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
LocoMotion::Concerns::IconableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent
Defined in:
app/components/daisy/actions/button_component.rb

Overview

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

Note that we do not use component parts for the icons since we’re calling ‘heroicon` within the component. But we do provide custom CSS & HTML options to allow overriding / customization.

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

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 collapse

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

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.

  • 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).

  • 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_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_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_html (Hash) —

    Right icon HTML (via IconableComponent).



152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
# File 'app/components/daisy/actions/button_component.rb', line 152

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?

  @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.



172
173
174
175
176
177
 
# File 'app/components/daisy/actions/button_component.rb', line 172

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. Also adds `items-center` and `gap-2` CSS classes if an icon is present. Tag name setup (`<a>` vs `<button>`) and tooltip setup are handled by LinkableComponent and TippableComponent concerns via BaseComponent hooks.



185
186
187
188
189
190
191
192
193
194
 
# File 'app/components/daisy/actions/button_component.rb', line 185

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

  # Add data-action if specified
  add_html(:component, { "data-action": @action }) if @action
end