Class: Fluxbit::Form::LabelComponent

Inherits:
Component
  • Object
show all
Includes:
Config::Form::LabelComponent
Defined in:
app/components/fluxbit/form/label_component.rb

Overview

The ‘Fluxbit::Form::LabelComponent` is a flexible and accessible label for form fields. It supports custom content, helper popovers, multiple color styles, sizing options, and displays associated help text when provided. It is fully compatible with Rails form builders.

Examples:

Basic usage

= render Fluxbit::Form::LabelComponent.new(with_content: "Your Name")

See Also:

  • For detailed documentation and examples.

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ LabelComponent

Initializes the label component with the given properties.

Parameters:

  • with_content (String) —

    The label text to display (alternative to block content)

  • help_text (String, Array<String>) —

    One or more help text messages to render below the label

  • helper_popover (String) —

    Popover content shown on icon hover

  • helper_popover_placement (String) —

    Placement of the popover (default: “right”)

  • sizing (Integer) —

    Size index for label text (default: config default)

  • color (Symbol) —

    Label color (:default, :success, :failure, :info, :warning)

  • class (String) —

    Additional CSS classes for the label element

  • ... —

    any other HTML attribute supported by the <label> tag



24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
# File 'app/components/fluxbit/form/label_component.rb', line 24

def initialize(**props)
  super
  @props = props
  @with_content = @props.delete(:with_content)
  @help_text = @props.delete(:help_text)
  @help_text = [ @help_text ] if !@help_text.is_a?(Array)
  @helper_popover = @props.delete(:helper_popover)
  @helper_popover_placement = @props.delete(:helper_popover_placement) || @@helper_popover_placement
  @sizing = @props[:sizing].to_i || @@sizing
  @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
  @color = options(@props.delete(:color), collection: styles[:colors], default: @@color)

  add class: styles[:colors][@color], to: @props, first_element: true
  add class: styles[:base], to: @props, first_element: true
  add class: styles[:sizes][@sizing], to: @props, first_element: true
end

Instance Method Details

#call ⇒ Object 



59
60
61
62
63
64
65
66
67
 
# File 'app/components/fluxbit/form/label_component.rb', line 59

def call
  safe_join(
    [
      content_tag(:label, safe_join([ content || @with_content, span_helper_popover ]), @props),
      help_text,
      render_popover
    ]
  )
end

#render_popover ⇒ Object 



53
54
55
56
57
 
# File 'app/components/fluxbit/form/label_component.rb', line 53

def render_popover
  return "" if @helper_popover.nil?

  Fluxbit::PopoverComponent.new(id: target).with_content(@helper_popover).render_in(view_context)
end

#span_helper_popover ⇒ Object 



41
42
43
44
45
46
47
48
49
50
51
 
# File 'app/components/fluxbit/form/label_component.rb', line 41

def span_helper_popover
  return "" if @helper_popover.nil?

  content_tag :span,
              anyicon(icon: @@helper_popover_icon, class: @@helper_popover_icon_class),
              {
                "data-popover-placement": @helper_popover_placement,
                "data-popover-target": target,
                class: styles[:helper_popover]
              }
end