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, :danger, :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
40
 
# 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)
  @required = @props.delete(:required) || false

  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 



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

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

#render_popover ⇒ Object 



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

def render_popover
  return "" if @helper_popover.nil?

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

#required ⇒ Object 



70
71
72
73
74
 
# File 'app/components/fluxbit/form/label_component.rb', line 70

def required
  return "" unless @required

  content_tag(:span, "*", class: styles[:required])
end

#span_helper_popover ⇒ Object 



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

def span_helper_popover
  return "" if @helper_popover.nil?

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