From ccbbcc65cbafc7e20ac81c1c80c9ebdec0b95273 Mon Sep 17 00:00:00 2001 From: Jakob Skjerning Date: Fri, 22 Aug 2025 12:55:22 +0200 Subject: [PATCH 1/2] Match Button API to the other components All other components use a block to define their content, Button should as well. --- app/components/flowbite/button.rb | 7 ++-- .../components/previews/button_preview.rb | 42 +++++++++---------- test/components/flowbite/button_test.rb | 42 +++++++++---------- 3 files changed, 45 insertions(+), 46 deletions(-) diff --git a/app/components/flowbite/button.rb b/app/components/flowbite/button.rb index c05836f..9d587cd 100644 --- a/app/components/flowbite/button.rb +++ b/app/components/flowbite/button.rb @@ -61,10 +61,9 @@ def styles # rubocop:enable Layout/LineLength end - attr_reader :button_attributes, :label, :size, :style + attr_reader :button_attributes, :size, :style - def initialize(label:, size: :default, style: :default, **button_attributes) - @label = label + def initialize(size: :default, style: :default, **button_attributes) @size = size @style = style @button_attributes = button_attributes @@ -73,7 +72,7 @@ def initialize(label:, size: :default, style: :default, **button_attributes) def call content_tag( :button, - label, + content, **options ) end diff --git a/demo/test/components/previews/button_preview.rb b/demo/test/components/previews/button_preview.rb index 556532c..cb2f733 100644 --- a/demo/test/components/previews/button_preview.rb +++ b/demo/test/components/previews/button_preview.rb @@ -9,35 +9,35 @@ class ButtonPreview < Lookbook::Preview # @display classes flex flex-wrap space-x-2 def default - render(Flowbite::Button.new(label: "Default")) + render(Flowbite::Button.new) { "Default" } end def alternative - render(Flowbite::Button.new(label: "Alternative", style: :alternative)) + render(Flowbite::Button.new(style: :alternative)) { "Alternative" } end def dark - render(Flowbite::Button.new(label: "Dark", style: :dark)) + render(Flowbite::Button.new(style: :dark)) { "Dark" } end def light - render(Flowbite::Button.new(label: "Light", style: :light)) + render(Flowbite::Button.new(style: :light)) { "Light" } end def green - render(Flowbite::Button.new(label: "Green", style: :green)) + render(Flowbite::Button.new(style: :green)) { "Green" } end def red - render(Flowbite::Button.new(label: "Red", style: :red)) + render(Flowbite::Button.new(style: :red)) { "Red" } end def yellow - render(Flowbite::Button.new(label: "Yellow", style: :yellow)) + render(Flowbite::Button.new(style: :yellow)) { "Yellow" } end def purple - render(Flowbite::Button.new(label: "Purple", style: :purple)) + render(Flowbite::Button.new(style: :purple)) { "Purple" } end # @!endgroup @@ -49,23 +49,23 @@ def purple # @display classes flex flex-wrap def xs_button - render(Flowbite::Button.new(label: "Extra small", size: :xs)) + render(Flowbite::Button.new(size: :xs)) { "Extra small" } end def sm_button - render(Flowbite::Button.new(label: "Small", size: :sm)) + render(Flowbite::Button.new(size: :sm)) { "Small" } end def default_button - render(Flowbite::Button.new(label: "Default", size: :default)) + render(Flowbite::Button.new(size: :default)) { "Default" } end def lg_button - render(Flowbite::Button.new(label: "Large", size: :lg)) + render(Flowbite::Button.new(size: :lg)) { "Large" } end def xl_button - render(Flowbite::Button.new(label: "Extra large", size: :xl)) + render(Flowbite::Button.new(size: :xl)) { "Extra large" } end # @!endgroup @@ -76,35 +76,35 @@ def xl_button # # @display classes flex flex-wrap space-x-2 def pill_default - render(Flowbite::Button::Pill.new(label: "Default", style: :default)) + render(Flowbite::Button::Pill.new(style: :default)) { "Default" } end def pill_alternative - render(Flowbite::Button::Pill.new(label: "Alternative", style: :alternative)) + render(Flowbite::Button::Pill.new(style: :alternative)) { "Alternative" } end def pill_dark - render(Flowbite::Button::Pill.new(label: "Dark", style: :dark)) + render(Flowbite::Button::Pill.new(style: :dark)) { "Dark" } end def pill_light - render(Flowbite::Button::Pill.new(label: "Light", style: :light)) + render(Flowbite::Button::Pill.new(style: :light)) { "Light" } end def pill_green - render(Flowbite::Button::Pill.new(label: "Green", style: :green)) + render(Flowbite::Button::Pill.new(style: :green)) { "Green" } end def pill_purple - render(Flowbite::Button::Pill.new(label: "Purple", style: :purple)) + render(Flowbite::Button::Pill.new(style: :purple)) { "Purple" } end def pill_red - render(Flowbite::Button::Pill.new(label: "Red", style: :red)) + render(Flowbite::Button::Pill.new(style: :red)) { "Red" } end def pill_yellow - render(Flowbite::Button::Pill.new(label: "Yellow", style: :yellow)) + render(Flowbite::Button::Pill.new(style: :yellow)) { "Yellow" } end # @!endgroup diff --git a/test/components/flowbite/button_test.rb b/test/components/flowbite/button_test.rb index 44916c7..42c6ef6 100644 --- a/test/components/flowbite/button_test.rb +++ b/test/components/flowbite/button_test.rb @@ -4,109 +4,109 @@ class Flowbite::ButtonTest < Minitest::Test include ViewComponent::TestHelpers def test_render_component - render_inline(Flowbite::Button.new(label: "Click me")) + render_inline(Flowbite::Button.new) { "Click me" } assert_component_rendered assert_selector("button", text: "Click me") end def test_renders_a_xs_button - render_inline(Flowbite::Button.new(label: "Click me", size: :xs)) + render_inline(Flowbite::Button.new(size: :xs)) { "Click me" } assert_selector("button.text-xs") end def test_renders_a_sm_button - render_inline(Flowbite::Button.new(label: "Click me", size: :sm)) + render_inline(Flowbite::Button.new(size: :sm)) { "Click me" } assert_selector("button.text-sm") end def test_renders_a_lg_button - render_inline(Flowbite::Button.new(label: "Click me", size: :lg)) + render_inline(Flowbite::Button.new(size: :lg)) { "Click me" } assert_selector("button.text-base.px-5") end def test_renders_a_xl_button - render_inline(Flowbite::Button.new(label: "Click me", size: :xl)) + render_inline(Flowbite::Button.new(size: :xl)) { "Click me" } assert_selector("button.text-base.px-6") end def test_renders_pill_button_in_alternative_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :alternative)) + render_inline(Flowbite::Button::Pill.new(style: :alternative)) { "Click me" } assert_selector("button.text-gray-900.bg-white") end def test_renders_pill_button_in_dark_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :dark)) + render_inline(Flowbite::Button::Pill.new(style: :dark)) { "Click me" } assert_selector("button.text-white.bg-gray-800") end def test_renders_pill_button_in_default_style - render_inline(Flowbite::Button::Pill.new(label: "Click me")) + render_inline(Flowbite::Button::Pill.new) { "Click me" } assert_selector("button.text-white.bg-blue-700") end def test_renders_pill_button_in_green_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :green)) + render_inline(Flowbite::Button::Pill.new(style: :green)) { "Click me" } assert_selector("button.text-white.bg-green-700") end def test_renders_pill_button_in_light_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :light)) + render_inline(Flowbite::Button::Pill.new(style: :light)) { "Click me" } assert_selector("button.text-gray-900.bg-white") end def test_renders_pill_button_in_red_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :red)) + render_inline(Flowbite::Button::Pill.new(style: :red)) { "Click me" } assert_selector("button.text-white.bg-red-700") end def test_renders_pill_button_in_purple_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :purple)) + render_inline(Flowbite::Button::Pill.new(style: :purple)) { "Click me" } assert_selector("button.text-white.bg-purple-700") end def test_renders_pill_button_in_yellow_style - render_inline(Flowbite::Button::Pill.new(label: "Click me", style: :yellow)) + render_inline(Flowbite::Button::Pill.new(style: :yellow)) { "Click me" } assert_selector("button.text-white.bg-yellow-400") end def test_renders_pill_button_in_different_sizes - render_inline(Flowbite::Button::Pill.new(label: "Click me", size: :xs)) + render_inline(Flowbite::Button::Pill.new(size: :xs)) { "Click me" } assert_selector("button.text-white.bg-blue-700.text-xs") end def test_renders_outline_button_in_default_style - render_inline(Flowbite::Button::Outline.new(label: "Click me")) + render_inline(Flowbite::Button::Outline.new) { "Click me" } assert_selector("button.text-blue-700.border-blue-700") end def test_renders_outline_button_in_green_style - render_inline(Flowbite::Button::Outline.new(label: "Click me", style: :green)) + render_inline(Flowbite::Button::Outline.new(style: :green)) { "Click me" } assert_selector("button.text-green-700.border-green-700") end def test_renders_outline_button_in_different_sizes - render_inline(Flowbite::Button::Outline.new(label: "Click me", size: :xs, style: :green)) + render_inline(Flowbite::Button::Outline.new(size: :xs, style: :green)) { "Click me" } assert_selector("button.text-green-700.border-green-700.text-xs") end def test_passes_attributes_to_button_tag - render_inline(Flowbite::Button.new(label: "Click me", data: {controller: "button"})) + render_inline(Flowbite::Button.new(data: {controller: "button"})) { "Click me" } assert_selector("button[data-controller='button']") end def test_defaults_to_a_button_with_no_type - render_inline(Flowbite::Button.new(label: "Click me")) + render_inline(Flowbite::Button.new) { "Click me" } assert_selector("button:not([type])") end def test_renders_a_basic_button - render_inline(Flowbite::Button.new(label: "Click me", type: "button")) + render_inline(Flowbite::Button.new(type: "button")) { "Click me" } assert_selector("button[type='button']") end def test_renders_a_submit_button - render_inline(Flowbite::Button.new(label: "Click me", type: "submit")) + render_inline(Flowbite::Button.new(type: "submit")) { "Click me" } assert_selector("button[type='submit']") end end From ff16101fcf61e1b6f8b0ae0be36107f452a2ac06 Mon Sep 17 00:00:00 2001 From: Jakob Skjerning Date: Mon, 25 Aug 2025 14:29:18 +0200 Subject: [PATCH 2/2] Add spacing between button sizes --- demo/test/components/previews/button_preview.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/test/components/previews/button_preview.rb b/demo/test/components/previews/button_preview.rb index cb2f733..f7edcc7 100644 --- a/demo/test/components/previews/button_preview.rb +++ b/demo/test/components/previews/button_preview.rb @@ -46,7 +46,7 @@ def purple # # Use these examples if you want to use smaller or larger buttons. # - # @display classes flex flex-wrap + # @display classes flex flex-wrap space-x-2 def xs_button render(Flowbite::Button.new(size: :xs)) { "Extra small" }