Skip to content

Match Button API to the other components #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
koppen merged 2 commits into from
Aug 26, 2025
Merged

Match Button API to the other components #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ccbbcc6
Match Button API to the other components
koppen Aug 22, 2025
ff16101
Add spacing between button sizes
koppen Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions app/components/flowbite/button.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -73,7 +72,7 @@ def initialize(label:, size: :default, style: :default, **button_attributes)
def call
content_tag(
:button,
label,
content,
**options
)
end
Expand Down
44 changes: 22 additions & 22 deletions demo/test/components/previews/button_preview.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
Copy link
Copy Markdown
Contributor

@olepalm olepalm Aug 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency's sake, that is the way to go. I still find it a bit odd that you cannot pass the (label) content to the initializer, like in an options or :label => {:content => "something") hash or similar.

Copy link
Copy Markdown
Member Author

@koppen koppen Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should probably look like Flowbite::Button.new(content: "something"), which I guess could be acceptable for the simplest case. The block style is well suited for the more complex cases as well, though, ie if you want more elements in your button:

<%= render(Flowbite::Button.new) do %>
  <div>
    <%= image_tag("icon") %>
    <%= translate(".submit") %>
  </div>
  <small><%= translate(".submit_details" %></small>
<% end %>

which would be cumbersome to do well in an argument.

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
Expand All @@ -46,26 +46,26 @@ 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(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
Expand All @@ -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
Expand Down
42 changes: 21 additions & 21 deletions test/components/flowbite/button_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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