Class: BetterUi::ActionMessagesComponent

Inherits:
ApplicationComponent show all
Defined in:
app/components/better_ui/action_messages_component.rb

Overview

ActionMessagesComponent displays a list of messages with customizable styles and variants.

This component is designed for displaying form validation errors, flash notifications, success messages, warnings, and other user feedback. It supports multiple visual styles (solid, soft, outline, ghost), all semantic color variants, optional titles, dismissible functionality, and auto-dismiss timers.

Features:

  • 9 color variants (primary, secondary, accent, success, danger, warning, info, light, dark)
  • 4 visual styles (solid, soft, outline, ghost)
  • Optional title/heading
  • Dismissible with close button
  • Auto-dismiss after N seconds
  • Stimulus controller integration for interactivity
  • Icon slot for custom icons (via ViewComponent slots)

Examples:

Basic usage

<%= render BetterUi::ActionMessagesComponent.new(messages: ["This is a message"]) %>

Form validation errors

<%= render BetterUi::ActionMessagesComponent.new(
  variant: :danger,
  title: "Please correct the following errors:",
  messages: @user.errors.full_messages
) %>

Success notification with auto-dismiss

<%= render BetterUi::ActionMessagesComponent.new(
  variant: :success,
  style: :solid,
  dismissible: true,
  auto_dismiss: 5,
  messages: ["Your changes have been saved."]
) %>

With custom styling

<%= render BetterUi::ActionMessagesComponent.new(
  variant: :warning,
  style: :outline,
  title: "Warning",
  messages: ["This action cannot be undone"],
  container_classes: "shadow-lg"
) %>

See Also:

Constant Summary

Constants inherited from ApplicationComponent

BetterUi::ApplicationComponent::SHADOWS, BetterUi::ApplicationComponent::VARIANTS, BetterUi::ApplicationComponent::VARIANT_BODY_DIVIDE, BetterUi::ApplicationComponent::VARIANT_DIVIDE, BetterUi::ApplicationComponent::VARIANT_HEADER_BG, BetterUi::ApplicationComponent::VARIANT_HEADER_TEXT, BetterUi::ApplicationComponent::VARIANT_HIGHLIGHTED, BetterUi::ApplicationComponent::VARIANT_HOVERABLE, BetterUi::ApplicationComponent::VARIANT_RING, BetterUi::ApplicationComponent::VARIANT_SORT_ICON, BetterUi::ApplicationComponent::VARIANT_STRIPED

Instance Attribute Summary collapse

Instance Method Summary collapse

  • #title_classes ⇒ String

    CSS classes for the title element.

    • Constructor Details

    #initialize(messages: [], variant: :info, style: :soft, dismissible: false, auto_dismiss: nil, title: nil, container_classes: nil, **options) ⇒ ActionMessagesComponent

    Initialize the ActionMessages component

    Parameters:

    • messages (Array<String>) (defaults to: []) —

      List of messages to display

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

      Color variant (:primary, :secondary, :accent, :success, :danger, :warning, :info, :light, :dark)

    • style (Symbol) (defaults to: :soft) —

      Visual style (:solid, :soft, :outline, :ghost)

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

      Whether to show a dismiss button

    • auto_dismiss (Integer, Float, nil) (defaults to: nil) —

      Auto-dismiss after N seconds (nil to disable)

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

      Optional title/heading above messages

    • container_classes (String, nil) (defaults to: nil) —

      Custom CSS classes to merge with container

    • options (Hash) —

      Additional HTML attributes (id, data, aria, etc.)

    

62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 62

def initialize(
  messages: [],
  variant: :info,
  style: :soft,
  dismissible: false,
  auto_dismiss: nil,
  title: nil,
  container_classes: nil,
  **options
)
  # Convert messages to array (handles nil and single strings)
  @messages = Array(messages)
  @variant = variant.to_sym
  @style = style.to_sym
  @dismissible = dismissible
  @auto_dismiss = auto_dismiss
  @title = title
  @container_classes = container_classes
  @options = options

  # Validate parameters on initialization
  validate_variant!
  validate_style!
end

    Instance Attribute Details

    #auto_dismiss ⇒ Object (readonly)

    Returns the value of attribute auto_dismiss.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def auto_dismiss
  @auto_dismiss
end

    #container_classes ⇒ Object (readonly)

    Returns the value of attribute container_classes.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def container_classes
  @container_classes
end

    #dismissible ⇒ Object (readonly)

    Returns the value of attribute dismissible.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def dismissible
  @dismissible
end

    #messages ⇒ Object (readonly)

    Returns the value of attribute messages.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def messages
  @messages
end

    #style ⇒ Object (readonly)

    Returns the value of attribute style.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def style
  @style
end

    #title ⇒ Object (readonly)

    Returns the value of attribute title.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def title
  @title
end

    #variant ⇒ Object (readonly)

    Returns the value of attribute variant.

    

50
51
52
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 50

def variant
  @variant
end

    Instance Method Details

    #component_attributes ⇒ Hash

    Build HTML attributes for the component Adds Stimulus controller and auto-dismiss data attribute if configured

    Returns:

    • (Hash) —

      HTML attributes hash

    

101
102
103
104
105
106
107
108
109
110
111
112
113
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 101

def component_attributes
  attrs = @options.dup
  attrs[:data] ||= {}
  # Register Stimulus controller for dismiss/auto-dismiss functionality
  attrs[:data][:controller] = "better-ui--action-messages"

  # Add auto-dismiss value if configured (Stimulus will read this)
  if @auto_dismiss.present? && @auto_dismiss.to_f > 0
    attrs[:data][:"better-ui--action-messages-auto-dismiss-value"] = @auto_dismiss.to_f
  end

  attrs
end

    #component_classes ⇒ String

    Build CSS classes for the main container Combines base classes (rounded, padding) with style-specific classes and custom classes

    Returns:

    • (String) —

      Merged CSS class string

    

90
91
92
93
94
95
96
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 90

def component_classes
  base_classes = [ "rounded-lg", "p-4", "relative" ]
  style_classes = send("#{@style}_classes") # Dynamically call solid_classes, soft_classes, etc.

  # Use TailwindMerge to intelligently merge classes (handles conflicts)
  css_classes(base_classes, style_classes, @container_classes)
end

    #content_wrapper_classes ⇒ String

    CSS classes for the content wrapper (contains icon slot and message list)

    Returns:

    • (String) —

      Merged CSS class string

    

123
124
125
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 123

def content_wrapper_classes
  css_classes("flex", "gap-3")
end

    #dismiss_button_classes ⇒ String

    CSS classes for the dismiss button

    Returns:

    • (String) —

      Merged CSS class string

    

141
142
143
144
145
146
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 141

def dismiss_button_classes
  button_base = [ "absolute", "top-3", "right-3", "p-1", "rounded", "transition-colors" ]
  button_colors = dismiss_button_color_classes

  css_classes(button_base, button_colors)
end

    #list_classes ⇒ String

    CSS classes for the message list (

      )

    Returns:

    • (String) —

      Merged CSS class string

    

129
130
131
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 129

def list_classes
  css_classes("list-none", "list-inside", "space-y-1", "flex-1")
end

    #list_item_classes ⇒ String

    CSS classes for individual message list items (

  • )

    • Returns:

    • (String) —

      Merged CSS class string

    

135
136
137
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 135

def list_item_classes
  css_classes("text-sm")
end

    #title_classes ⇒ String

    CSS classes for the title element

    Returns:

    • (String) —

      Merged CSS class string

    

117
118
119
    		 
    # File 'app/components/better_ui/action_messages_component.rb', line 117

def title_classes
  css_classes("font-semibold", "mb-2", title_color_classes)
end