chore: Fixed button visuals

embedded_gems/flowbite/app/lib/flowbite/button_visuals.rb

@@ -24,22 +24,25 @@ def self.visual_types(margin_direction)
       }
     end
 
-    def self.icon_visual(args, margin_direction)
+    def icon_visual(args, margin_direction)
       args[:class] = class_names(args[:class], icon_classes(margin_direction))
       Flowbite::Icon.new(**args)
     end
 
-    def self.svg_visual(args, margin_direction)
+    def svg_visual(args, margin_direction)
       Flowbite::BaseComponent.new(
         tag: :span,
         classes: class_names(icon_classes(margin_direction)),
         **args
       )
     end
 
-    def self.icon_classes(margin_direction)
+    private
+
+    def icon_classes(margin_direction)
       [
-        ICON_SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+        ICON_SIZE_MAPPINGS[fetch_or_fallback(Flowbite::ButtonSizes::SIZE_OPTIONS, @size,
+                                             Flowbite::ButtonSizes::DEFAULT_SIZE)],
         "#{margin_direction}-2",
         ('min-w-4' if margin_direction == :ms)
       ].compact

embedded_gems/flowbite/app/lib/flowbite/fetch_or_fallback_helper.rb

@@ -1,7 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  # :nodoc:
+  # @private
+  # :nocov:
   module FetchOrFallbackHelper
     def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
       return given_value if allowed_values.include?(given_value)

test/components/previews/flowbite_button_preview/button_sizes.html.erb

@@ -1,17 +1,17 @@
 <div class="space-x-2">
-  <%= render Flowbite::Button.new(size: :extra_small) do %>
+  <%= render Flowbite::Button.new(size: :extra_small, test_selector: "extra-small-button") do %>
     Extra Small
   <% end %>
-  <%= render Flowbite::Button.new(size: :small) do %>
+  <%= render Flowbite::Button.new(size: :small, test_selector: "small-button") do %>
     Small
   <% end %>
-  <%= render Flowbite::Button.new do %>
+  <%= render Flowbite::Button.new(test_selector: "base-button") do %>
     Base
   <% end %>
-  <%= render Flowbite::Button.new(size: :large) do %>
+  <%= render Flowbite::Button.new(size: :large, test_selector: "large-button") do %>
     Large
   <% end %>
-  <%= render Flowbite::Button.new(size: :extra_large) do %>
+  <%= render Flowbite::Button.new(size: :extra_large, test_selector: "extra-large-button") do %>
     Extra Large
   <% end %>
 </div>

test/components/previews/flowbite_button_preview/button_sizes_with_icon.html.erb

@@ -1,21 +1,21 @@
 <div class="space-x-1">
-  <%= render Flowbite::Button.new(scheme: :primary, size: :extra_small) do |button| %>
+  <%= render Flowbite::Button.new(scheme: :primary, size: :extra_small, test_selector: "extra-small-button") do |button| %>
     <% button.with_leading_visual_icon icon_name: "envelope" %>
     Extra small
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :primary, size: :small) do |button| %>
+  <%= render Flowbite::Button.new(scheme: :primary, size: :small, test_selector: "small-button") do |button| %>
     <% button.with_leading_visual_icon icon_name: "envelope" %>
     Small
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :primary) do |button| %>
+  <%= render Flowbite::Button.new(scheme: :primary, test_selector: "default-button") do |button| %>
     <% button.with_leading_visual_icon icon_name: "envelope" %>
     Default
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :primary, size: :large) do |button| %>
+  <%= render Flowbite::Button.new(scheme: :primary, size: :large, test_selector: "large-button") do |button| %>
     <% button.with_leading_visual_icon icon_name: "envelope" %>
     Large
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :primary, size: :extra_large) do |button| %>
+  <%= render Flowbite::Button.new(scheme: :primary, size: :extra_large, test_selector: "extra-large-button") do |button| %>
     <% button.with_leading_visual_icon icon_name: "envelope" %>
     Extra large
   <% end %>

test/components/previews/flowbite_button_preview/buttons_with_icons.html.erb

@@ -1,13 +1,13 @@
 <div class="flex flex-row gap-2">
-  <%= render Flowbite::Button.new do |button| %>
+  <%= render Flowbite::Button.new(test_selector: "leading-icon-button") do |button| %>
     <% button.with_leading_visual_icon icon_name: "envelope", type: :solid %>
     Leading icon
   <% end %>
-  <%= render Flowbite::Button.new do |button| %>
+  <%= render Flowbite::Button.new(test_selector: "trailing-icon-button") do |button| %>
     <% button.with_trailing_visual_icon icon_name: "envelope", type: :solid %>
     Trailing icon
   <% end %>
-  <%= render Flowbite::Button.new do |button| %>
+  <%= render Flowbite::Button.new(test_selector: "trailing-svg-button") do |button| %>
     <% button.with_trailing_visual_svg do %>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
         <path

test/components/previews/flowbite_button_preview/default_button.html.erb

@@ -1,62 +1,62 @@
 <div class="space-x-1 space-y-2">
-  <%= render Flowbite::Button.new do %>
+  <%= render Flowbite::Button.new(test_selector: "default-button") do %>
     Default
   <% end %>
-  <%= render Flowbite::Button.new(disabled: true) do %>
+  <%= render Flowbite::Button.new(disabled: true, test_selector: "default-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :primary) do %>
+  <%= render Flowbite::Button.new(scheme: :primary, test_selector: "primary-button") do %>
     Primary
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :primary, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :primary, disabled: true, test_selector: "primary-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :blue) do %>
+  <%= render Flowbite::Button.new(scheme: :blue, test_selector: "blue-button") do %>
     Blue
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :blue, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :blue, disabled: true, test_selector: "blue-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :alternative) do %>
+  <%= render Flowbite::Button.new(scheme: :alternative, test_selector: "alternative-button") do %>
     Alternative
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :alternative, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :alternative, disabled: true, test_selector: "alternative-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :dark) do %>
+  <%= render Flowbite::Button.new(scheme: :dark, test_selector: "dark-button") do %>
     Dark
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :dark, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :dark, disabled: true, test_selector: "dark-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :light) do %>
+  <%= render Flowbite::Button.new(scheme: :light, test_selector: "light-button") do %>
     Light
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :light, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :light, disabled: true, test_selector: "light-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :green) do %>
+  <%= render Flowbite::Button.new(scheme: :green, test_selector: "green-button") do %>
     Green
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :green, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :green, disabled: true, test_selector: "green-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :red) do %>
+  <%= render Flowbite::Button.new(scheme: :red, test_selector: "red-button") do %>
     Red
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :red, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :red, disabled: true, test_selector: "red-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :yellow) do %>
+  <%= render Flowbite::Button.new(scheme: :yellow, test_selector: "yellow-button") do %>
     Yellow
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :yellow, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :yellow, disabled: true, test_selector: "yellow-disabled-button") do %>
     Disabled
   <% end %><br>
-  <%= render Flowbite::Button.new(scheme: :purple) do %>
+  <%= render Flowbite::Button.new(scheme: :purple, test_selector: "purple-button") do %>
     Purple
   <% end %>
-  <%= render Flowbite::Button.new(scheme: :purple, disabled: true) do %>
+  <%= render Flowbite::Button.new(scheme: :purple, disabled: true, test_selector: "purple-disabled-button") do %>
     Disabled
   <% end %>
 </div>