fluxbit_view_components 0.2.0 → 0.4.0

data/app/components/fluxbit/popover_component.rb

@@ -16,7 +16,7 @@ class Fluxbit::PopoverComponent < Fluxbit::Component
   # @option props [Boolean] :has_arrow (true) Determines if an arrow should be displayed on the popover.
   # @option props [String] :image (nil) The URL of an image to be displayed in the popover.
   # @option props [Symbol] :image_position (:right) The position of the image relative to the content (:left or :right).
-  # @option props [Hash] :image_props ({}) Additional HTML attributes for the image element.
+  # @option props [Hash] :image_html ({}) Additional HTML attributes for the image element.
   # @option props [Symbol, String] :size (2) The size of the popover (0 to 4).
   # @option props [String] :remove_class ('') Classes to be removed from the default popover class list.
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the popover container.
@@ -27,31 +27,31 @@ class Fluxbit::PopoverComponent < Fluxbit::Component
     @has_arrow = options @props.delete(:has_arrow), default: @@has_arrow
     @image = @props.delete(:image)
     @image_position = options @props.delete(:image_position), default: @@image_position
-    @image_props = options @props.delete(:image_props), default: @@image_props
+    @image_html = options @props.delete(:image_html), default: @@image_html
     @props["data-popover"] = "data-popover"
     @props["role"] = "tooltip"
 
     add(class: [ styles[:base], styles[:size][@props.delete(:size) || @@size] ], to: @props)
-    add(class: styles[:image_content][:image], to: @image_props)
-    @image_props[:src] = @image
+    add(class: styles[:image_content][:image], to: @image_html)
+    @image_html[:src] = @image
 
     @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
-    @image_props[:class] = remove_class(@props.delete(:remove_class) || "", @image_props[:class])
+    @image_html[:class] = remove_class(@props.delete(:remove_class) || "", @image_html[:class])
   end
 
   def call
-    content_tag :div, @props do
+    tag.div(**@props) do
       concat div_title unless @title.blank?
-      concat (content_tag(:div, class: styles[@image.blank? ? :content : :image_base]) do
+      concat (tag.div(class: styles[@image.blank? ? :content : :image_base]) do
         if @image.blank?
           content
         else
           if @image_position == :left
-            concat content_tag(:img, nil, @image_props)
-            concat content_tag(:div, content, class: styles[:image_content][:text])
+            concat tag.img(**@image_html)
+            concat tag.div(content, class: styles[:image_content][:text])
           else
-            concat content_tag(:div, content, class: styles[:image_content][:text])
-            concat content_tag(:img, nil, @image_props)
+            concat tag.div(content, class: styles[:image_content][:text])
+            concat tag.img(**@image_html)
           end
         end
       end)
@@ -60,12 +60,12 @@ class Fluxbit::PopoverComponent < Fluxbit::Component
   end
 
   def popper_arrow
-    content_tag :div, "", "data-popper-arrow" => true
+    tag.div("data-popper-arrow" => true)
   end
 
   def div_title
-    content_tag :div, class: styles[:title][:div] do
-      content_tag :h3, @title, class: styles[:title][:h3]
+    tag.div(class: styles[:title][:div]) do
+      tag.h3(@title, class: styles[:title][:h3])
     end
   end
 end

data/app/components/fluxbit/progress_component.rb

@@ -0,0 +1,196 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::ProgressComponent` is a customizable progress bar component that extends `Fluxbit::Component`.
+# It allows you to create progress indicators with various styles, sizes, colors, and label positioning options
+# to display completion status or loading progress.
+#
+# @example Basic usage
+#   = fx_progress(progress: 45)
+#
+# @example With labels
+#   = fx_progress(progress: 75, text_label: "Loading", label_progress: true)
+#
+# @see docs/02_Components/Progress.md For detailed documentation.
+class Fluxbit::ProgressComponent < Fluxbit::Component
+  include Fluxbit::Config::ProgressComponent
+
+  ##
+  # Initializes the progress component with the given properties.
+  #
+  # @param [Hash] **props The properties to customize the component.
+  # @option props [Integer] :progress (0) The progress percentage (0-100).
+  # @option props [Symbol, String] :color (:default) The color theme of the progress bar.
+  # @option props [Integer] :size (1) The size of the progress bar (0-3).
+  # @option props [String] :text_label (nil) Label text to display with the progress bar.
+  # @option props [Boolean] :label_progress (false) Whether to show the progress percentage.
+  # @option props [Boolean] :label_text (false) Whether to show the text label.
+  # @option props [Symbol] :progress_label_position (:inside) Position of progress label (:inside or :outside).
+  # @option props [Symbol] :text_label_position (:outside) Position of text label (:inside or :outside).
+  # @option props [Hash] :label_html ({}) HTML attributes for label elements. Supports :remove_class.
+  # @option props [Boolean] :stimulus (false) Whether to add Stimulus controller data attributes for JavaScript interactions.
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options as HTML attributes.
+  #
+  # @return [Fluxbit::ProgressComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    # Use options() function with config defaults
+    @progress = options(@props.delete(:progress), default: @@progress)
+    @color = options(@props.delete(:color), collection: styles[:bar][:colors].keys, default: @@color)
+    @size = options(@props.delete(:size), default: @@size)
+    @text_label = options(@props.delete(:text_label), default: @@text_label)
+    @label_progress = options(@props.delete(:label_progress), default: @@label_progress)
+    @label_text = options(@props.delete(:label_text), default: @@label_text)
+    @progress_label_position = options(@props.delete(:progress_label_position),
+                                      collection: [ :inside, :outside ],
+                                      default: @@progress_label_position)
+    @text_label_position = options(@props.delete(:text_label_position),
+                                  collection: [ :inside, :outside ],
+                                  default: @@text_label_position)
+    @label_html = options(@props.delete(:label_html), default: @@label_html)
+    @stimulus = options(@props.delete(:stimulus), default: @@stimulus)
+
+    # Sanitize progress value
+    @progress = [ @progress.to_i, 0 ].max
+    @progress = [ @progress, 100 ].min
+
+    # Apply styling
+    declare_classes
+
+    # Handle class removal
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    content_tag(:div) do
+      safe_join([
+        render_outside_labels,
+        render_progress_container
+      ].compact)
+    end
+  end
+
+  private
+
+  def declare_classes
+    add(class: styles[:base], to: @props, first_element: true)
+    add(class: styles[:sizes][@size], to: @props, first_element: true)
+
+    # Add Stimulus controller attributes if enabled
+    if @stimulus
+      @props["data-controller"] = [ @props["data-controller"], "fx-progress" ].compact.join(" ")
+      @props["data-fx-progress-progress-value"] = @progress
+      @props["data-fx-progress-animate-value"] = true
+    end
+  end
+
+  def render_outside_labels
+    return unless has_outside_labels?
+
+    content_tag(:div, class: styles[:labels][:outside][:base]) do
+      safe_join([
+        render_outside_text_label,
+        render_outside_progress_label
+      ].compact)
+    end
+  end
+
+  def render_outside_text_label
+    return unless @label_text && @text_label.present? && @text_label_position == :outside
+
+    label_props = build_label_props(styles[:labels][:outside][:text], is_progress_label: false)
+    content_tag(:span, @text_label, **label_props)
+  end
+
+  def render_outside_progress_label
+    return unless @label_progress && @progress_label_position == :outside
+
+    label_props = build_label_props(styles[:labels][:outside][:progress], is_progress_label: true)
+    content_tag(:span, "#{@progress}%", **label_props)
+  end
+
+  def render_progress_container
+    content_tag(:div, **@props) do
+      content_tag(:div, progress_bar_content, **progress_bar_props)
+    end
+  end
+
+  def progress_bar_props
+    bar_props = {
+      class: progress_bar_classes,
+      style: "width: #{@progress}%"
+    }
+
+    # Add Stimulus target if enabled
+    if @stimulus
+      bar_props["data-fx-progress-target"] = "bar"
+    end
+
+    bar_props
+  end
+
+  def progress_bar_classes
+    classes = [ styles[:bar][:base] ]
+    classes << styles[:bar][:colors][@color]
+    classes << styles[:bar][:text_sizes][@size] if has_inside_labels?
+    classes.join(" ")
+  end
+
+  def progress_bar_content
+    return "" unless has_inside_labels?
+
+    safe_join([
+      render_inside_text_label,
+      render_inside_progress_label
+    ].compact, " ")
+  end
+
+  def render_inside_text_label
+    return unless @label_text && @text_label.present? && @text_label_position == :inside
+
+    label_props = build_label_props(styles[:labels][:inside][:text], is_progress_label: false)
+    content_tag(:span, @text_label, **label_props)
+  end
+
+  def render_inside_progress_label
+    return unless @label_progress && @progress_label_position == :inside
+
+    label_props = build_label_props(styles[:labels][:inside][:progress], is_progress_label: true)
+    content_tag(:span, "#{@progress}%", **label_props)
+  end
+
+  def has_outside_labels?
+    (@label_text && @text_label.present? && @text_label_position == :outside) ||
+    (@label_progress && @progress_label_position == :outside)
+  end
+
+  def has_inside_labels?
+    (@label_text && @text_label.present? && @text_label_position == :inside) ||
+    (@label_progress && @progress_label_position == :inside)
+  end
+
+  def build_label_props(base_class, is_progress_label: false)
+    label_props = @label_html.dup
+
+    # Start with base class and merge with any custom classes
+    label_props[:class] = base_class
+    add(class: @label_html[:class], to: label_props) if @label_html[:class].present?
+
+    # Add Stimulus target if enabled and this is a progress label
+    if @stimulus && is_progress_label
+      label_props["data-fx-progress-target"] = "progressLabel"
+    elsif @stimulus && !is_progress_label
+      label_props["data-fx-progress-target"] = "textLabel"
+    end
+
+    # Handle remove_class for labels
+    if label_props[:remove_class].present?
+      label_props[:class] = remove_class(label_props.delete(:remove_class), label_props[:class])
+    end
+
+    label_props
+  end
+end

data/app/components/fluxbit/skeleton_component.rb

@@ -0,0 +1,237 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::SkeletonComponent` is a customizable skeleton loading component that extends `Fluxbit::Component`.
+# It provides animated placeholders for content that is loading, supporting various types like text, images, cards,
+# avatars, and more complex layouts.
+#
+# @example Basic usage
+#   = fx_skeleton
+#   = fx_skeleton(variant: :image)
+#   = fx_skeleton(variant: :card)
+#
+# @see docs/02_Components/Skeleton.md For detailed documentation.
+class Fluxbit::SkeletonComponent < Fluxbit::Component
+  include Fluxbit::Config::SkeletonComponent
+
+  ##
+  # Initializes the skeleton component with the given properties.
+  #
+  # @param [Hash] **props The properties to customize the skeleton.
+  # @option props [Symbol] :variant (:default) The type of skeleton (:default, :text, :image, :video, :avatar, :card, :widget, :list, :testimonial, :button).
+  # @option props [Boolean] :animation (true) Whether to show the pulse animation.
+  # @option props [Integer] :rows (3) Number of text rows for default/text variants.
+  # @option props [Symbol] :size (:medium) Size for avatar, image, and video variants (:small, :medium, :large).
+  # @option props [Integer] :lines (nil) Number of lines for text-based variants.
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::SkeletonComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    @variant = options(@props.delete(:variant),
+                       collection: [ :default, :text, :image, :video, :avatar, :card, :widget, :list, :testimonial, :button ],
+                       default: @@variant)
+    @animation = options(@props.delete(:animation), default: @@animation)
+    @rows = options(@props.delete(:rows), default: @@rows).to_i
+    @size = options(@props.delete(:size), collection: [ :small, :medium, :large ], default: :medium)
+    @lines = @props.delete(:lines)&.to_i
+
+    declare_classes
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+    @props[:role] = "status"
+    @props["aria-label"] = "Loading"
+  end
+
+  def call
+    tag.div(**@props) do
+      case @variant
+      when :default, :text
+        render_text_skeleton
+      when :image
+        render_image_skeleton
+      when :video
+        render_video_skeleton
+      when :avatar
+        render_avatar_skeleton
+      when :card
+        render_card_skeleton
+      when :widget
+        render_widget_skeleton
+      when :list
+        render_list_skeleton
+      when :testimonial
+        render_testimonial_skeleton
+      when :button
+        render_button_skeleton
+      end
+    end
+  end
+
+  private
+
+  def declare_classes
+    base_classes = []
+    base_classes << styles[:base] if @animation
+    base_classes << styles[:container]
+
+    add(class: base_classes.join(" "), to: @props, first_element: true)
+  end
+
+  def render_text_skeleton
+    lines_count = @lines || @rows
+    content = []
+
+    lines_count.times do |index|
+      width_class = case index
+      when 0 then styles[:widths][:first_line]
+      when lines_count - 1 then styles[:widths][:last_line]
+      else styles[:widths][:full]
+      end
+
+      content << tag.div(class: "#{styles[:text][:line]} #{width_class} #{styles[:spacing][:small]}")
+    end
+
+    content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+    safe_join(content)
+  end
+
+  def render_image_skeleton
+    content = []
+    content << tag.div(class: "#{styles[:image][:container]} #{styles[:image][@size]}") do
+      concat(
+        tag.svg(class: styles[:image][:icon],
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "currentColor",
+                viewBox: "0 0 20 18") do
+          concat(
+            tag.path(d: "M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z")
+          )
+        end
+      )
+    end
+    content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+    safe_join(content)
+  end
+
+  def render_video_skeleton
+    content = []
+    content << tag.div(class: "#{styles[:video][:container]} #{styles[:video][@size]}") do
+      concat(
+        tag.svg(class: styles[:video][:icon],
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "currentColor",
+                viewBox: "0 0 16 20") do
+          concat(
+            tag.path(d: "M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z")
+          )
+          concat(
+            tag.path(d: "M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM9 13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Zm4 .382a1 1 0 0 1-1.447.894L10 13v-2l1.553-1.276a1 1 0 0 1 1.447.894v2.764Z")
+          )
+        end
+      )
+    end
+    content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+    safe_join(content)
+  end
+
+  def render_avatar_skeleton
+    content = []
+    content << tag.div(class: styles[:avatar][@size])
+    content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+    safe_join(content)
+  end
+
+  def render_card_skeleton
+    tag.div(class: styles[:card][:container]) do
+      content = []
+      content << tag.div(class: "#{styles[:card][:header]} #{styles[:spacing][:medium]} #{styles[:widths][:card_header]}")
+
+      lines_count = @lines || @rows
+      lines_count.times do |index|
+        width_class = index == lines_count - 1 ? styles[:widths][:last_line] : styles[:widths][:full]
+        spacing_class = index < lines_count - 1 ? styles[:spacing][:small] : ""
+        content << tag.div(class: "#{styles[:card][:body]} #{spacing_class} #{width_class}")
+      end
+
+      content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+      safe_join(content)
+    end
+  end
+
+  def render_widget_skeleton
+    tag.div(class: styles[:widget][:container]) do
+      content = []
+      content << tag.div(class: "#{styles[:widget][:title]} #{styles[:widths][:widget_title]}")
+
+      lines_count = @lines || @rows
+      lines_count.times do |index|
+        width_class = index == lines_count - 1 ? styles[:widths][:last_line] : styles[:widths][:full]
+        spacing_class = index < lines_count - 1 ? styles[:spacing][:small] : ""
+        content << tag.div(class: "#{styles[:widget][:content]} #{spacing_class} #{width_class}")
+      end
+
+      content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+      safe_join(content)
+    end
+  end
+
+  def render_list_skeleton
+    tag.div(class: styles[:list][:container]) do
+      content = []
+
+      lines_count = @lines || @rows
+      lines_count.times do
+        content << tag.div(class: styles[:list][:item]) do
+          concat(tag.div(class: styles[:list][:avatar]))
+          concat(
+            tag.div(class: styles[:list][:content]) do
+              concat(tag.div(class: "#{styles[:text][:line]} #{styles[:widths][:list_name]} #{styles[:spacing][:small]}"))
+              concat(tag.div(class: "#{styles[:text][:small]} #{styles[:widths][:list_content]}"))
+            end
+          )
+        end
+      end
+
+      content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+      safe_join(content)
+    end
+  end
+
+  def render_testimonial_skeleton
+    tag.div(class: styles[:testimonial][:container]) do
+      content = []
+
+      lines_count = @lines || @rows
+      lines_count.times do |index|
+        width = index == lines_count - 1 ? styles[:widths][:testimonial_last] : styles[:widths][:full]
+        spacing_class = index < lines_count - 1 ? styles[:spacing][:small] : ""
+        content << tag.div(class: "#{styles[:testimonial][:quote]} #{width} #{spacing_class}")
+      end
+
+      content << tag.div(class: styles[:testimonial][:author]) do
+        concat(tag.div(class: styles[:testimonial][:avatar]))
+        concat(
+          tag.div do
+            concat(tag.div(class: "#{styles[:text][:line]} #{styles[:widths][:testimonial_name]} #{styles[:spacing][:small]}"))
+            concat(tag.div(class: "#{styles[:text][:small]} #{styles[:widths][:testimonial_title]}"))
+          end
+        )
+      end
+
+      content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+      safe_join(content)
+    end
+  end
+
+  def render_button_skeleton
+    content = []
+    content << tag.div(class: styles[:button])
+    content << tag.span(t("fluxbit.skeleton.loading"), class: styles[:screen_reader])
+    safe_join(content)
+  end
+end

data/app/components/fluxbit/speed_dial_action_component.html.erb

@@ -0,0 +1,30 @@
+<% if @text_outside && @text %>
+  <div class="<%= styles[:action][:text][:base] %>">
+    <span class="<%= text_classes %>"><%= @text %></span>
+    <% if @href %>
+      <%= link_to(@href, **@props) do %>
+        <%= icon @icon, class: icon_classes if @icon %>
+        <%= content if content.present? %>
+      <% end %>
+    <% else %>
+      <%= tag.button(**@props) do %>
+        <%= icon @icon, class: icon_classes if @icon %>
+        <%= content if content.present? %>
+      <% end %>
+    <% end %>
+  </div>
+<% else %>
+  <% if @href %>
+    <%= link_to(@href, **@props) do %>
+      <%= icon @icon, class: icon_classes if @icon %>
+      <%= content if content.present? %>
+    <% end %>
+  <% else %>
+    <%= tag.button(**@props) do %>
+      <%= icon @icon, class: icon_classes if @icon %>
+      <%= content if content.present? %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render_popover_or_tooltip %>

data/app/components/fluxbit/speed_dial_action_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::SpeedDialActionComponent` is a component for rendering individual action items in a Speed Dial.
+class Fluxbit::SpeedDialActionComponent < Fluxbit::Component
+  include Fluxbit::Config::SpeedDialComponent
+
+  # Initializes the SpeedDialAction component.
+  #
+  # @param [Hash] **props The properties to customize the speed dial action.
+  # @option props [String, Symbol] :icon (nil) The icon to display in the action button.
+  # @option props [String] :text (nil) The text label for the action.
+  # @option props [String] :tooltip (nil) The tooltip text (defaults to text if not provided).
+  # @option props [String] :href (nil) The URL to link to (creates an anchor tag instead of button).
+  # @option props [Boolean] :text_outside (false) Whether to display text outside the button.
+  # @option props [Boolean] :square (false) Whether to use square shape instead of rounded.
+  # @option props [Symbol] :tooltip_placement (:left) Tooltip placement.
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::SpeedDialActionComponent]
+  def initialize(**props)
+    super(**props.slice(:tooltip_text, :tooltip_placement, :tooltip_trigger))
+    @props = props
+
+    @icon = @props.delete(:icon)
+    @text = @props.delete(:text)
+    @tooltip = @props.delete(:tooltip) || @text
+    @href = @props.delete(:href)
+    @text_outside = options @props.delete(:text_outside), default: false
+    @square = options @props.delete(:square), default: false
+    @tooltip_placement = options @props.delete(:tooltip_placement), default: :left
+    @props[:id] ||= "speed-dial-action-#{random_id}"
+
+    # Set tooltip via parent component if provided
+    @tooltip_text = @tooltip if @tooltip.present?
+
+    add class: [
+      styles[:action][:base],
+      @square ? styles[:action][:shapes][:square] : styles[:action][:shapes][:rounded]
+    ], to: @props
+    @props[:type] ||= "button" unless @href
+
+    remove_class_from_props(@props)
+  end
+
+  def before_render
+    add_popover_or_tooltip
+  end
+
+  private
+
+  def icon_classes
+    styles[:action][:icon]
+  end
+
+  def text_classes
+    styles[:action][:text][:outside]
+  end
+end

data/app/components/fluxbit/speed_dial_component.html.erb

@@ -0,0 +1,33 @@
+<div <%= tag.attributes(**@props) %> data-dial-init>
+  <% if top_position? %>
+    <button type="button" data-dial-toggle="<%= menu_id %>" aria-controls="<%= menu_id %>" aria-expanded="false" class="<%= classes trigger_classes %>">
+      <% if @trigger_icon.nil? %>
+        <%= plus_icon(class: styles[:trigger][:icon]) %>
+      <% else %>
+        <%= icon @trigger_icon, class: styles[:trigger][:icon] %>
+      <% end %>
+      <span class="<%= styles[:screen_reader] %>"><%= t("fluxbit.speed_dial.open_actions_menu") %></span>
+    </button>
+
+    <div id="<%= menu_id %>" class="<%= classes menu_classes %>">
+      <% actions.each do |action| %>
+        <%= action %>
+      <% end %>
+    </div>
+  <% else %>
+    <div id="<%= menu_id %>" class="<%= classes menu_classes %>">
+      <% actions.each do |action| %>
+        <%= action %>
+      <% end %>
+    </div>
+
+    <button type="button" data-dial-toggle="<%= menu_id %>" aria-controls="<%= menu_id %>" aria-expanded="false" class="<%= classes trigger_classes %>">
+      <% if @trigger_icon.nil? %>
+        <%= plus_icon(class: styles[:trigger][:icon]) %>
+      <% else %>
+        <%= icon @trigger_icon, class: styles[:trigger][:icon] %>
+      <% end %>
+      <span class="<%= styles[:screen_reader] %>"><%= t("fluxbit.speed_dial.open_actions_menu") %></span>
+    </button>
+  <% end %>
+</div>