From 1b199bd105d94e8e965b64a416a9c71b11a792d2 Mon Sep 17 00:00:00 2001
From: Jakob Skjerning <jakob@mentalized.net>
Date: Thu, 21 Aug 2025 12:17:16 +0200
Subject: [PATCH] Remove margins from button

In commit c2ff3ed8e9b23d704163657bc4be20c2f91c40e9 we added a "missing"
margin to the purple style button. We did so for consistencys sake, but
the fact that the me-2 class was missing from one button seems to
indicate that the margin is not an innate part of the button, and the
other buttons solely have the margin classes because they need to look
pretty in the documentation.

The purple button example at
https://flowbite.com/docs/components/buttons/#default-button does not
have an end margin, whereas the other buttons do, probably because it is
the last button of the group - which means it is entirely coincidental
and specific to that example.

Generally speaking, margins shouldn't be a part of each component. Leave
it up to the consumer to add the whitespace around your components that
you need them to.
---
 app/components/flowbite/button.rb               | 16 ++++++++--------
 app/components/flowbite/button/pill.rb          | 16 ++++++++--------
 demo/app/views/pages/index.html.erb             |  2 +-
 demo/test/components/previews/button_preview.rb |  4 ++--
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/components/flowbite/button.rb b/app/components/flowbite/button.rb
index 64fc269..3f151bf 100644
--- a/app/components/flowbite/button.rb
+++ b/app/components/flowbite/button.rb
@@ -33,28 +33,28 @@ def sizes
       def styles
         {
           alternative: Flowbite::Style.new(
-            default: ["me-2", "mb-2", "font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-lg", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
+            default: ["font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-lg", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
           ),
           dark: Flowbite::Style.new(
-            default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+            default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-lg", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
           ),
           default: Flowbite::Style.new(
-            default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-blue-600", "dark:hover:bg-blue-700", "focus:outline-none", "dark:focus:ring-blue-800"]
+            default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-lg", "dark:bg-blue-600", "dark:hover:bg-blue-700", "focus:outline-none", "dark:focus:ring-blue-800"]
           ),
           green: Flowbite::Style.new(
-            default: ["focus:outline-none", "text-white", "bg-green-700", "hover:bg-green-800", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+            default: ["focus:outline-none", "text-white", "bg-green-700", "hover:bg-green-800", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-lg", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
           ),
           light: Flowbite::Style.new(
-            default: ["text-gray-900", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+            default: ["text-gray-900", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-lg", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
           ),
           purple: Flowbite::Style.new(
-            default: ["focus:outline-none", "text-white", "bg-purple-700", "hover:bg-purple-800", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+            default: ["focus:outline-none", "text-white", "bg-purple-700", "hover:bg-purple-800", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-lg", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
           ),
           red: Flowbite::Style.new(
-            default: ["focus:outline-none", "text-white", "bg-red-700", "hover:bg-red-800", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+            default: ["focus:outline-none", "text-white", "bg-red-700", "hover:bg-red-800", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-lg", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
           ),
           yellow: Flowbite::Style.new(
-            default: ["focus:outline-none", "text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-lg", "me-2", "mb-2", "dark:focus:ring-yellow-900"]
+            default: ["focus:outline-none", "text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-lg", "dark:focus:ring-yellow-900"]
           )
         }.freeze
       end
diff --git a/app/components/flowbite/button/pill.rb b/app/components/flowbite/button/pill.rb
index 5fd7370..7aa1130 100644
--- a/app/components/flowbite/button/pill.rb
+++ b/app/components/flowbite/button/pill.rb
@@ -8,28 +8,28 @@ class << self
         def styles
           {
             alternative: Flowbite::Style.new(
-              default: ["me-2", "mb-2", "text-sm", "font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-full", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
+              default: ["text-sm", "font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-full", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
             ),
             dark: Flowbite::Style.new(
-              default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:outline-none", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-full", "me-2", "mb-2", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+              default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:outline-none", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-full", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
             ),
             default: Flowbite::Style.new(
-              default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-center", "me-2", "mb-2", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800"]
+              default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-center", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800"]
             ),
             green: Flowbite::Style.new(
-              default: ["text-white", "bg-green-700", "hover:bg-green-800", "focus:outline-none", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-full", "text-center", "me-2", "mb-2", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+              default: ["text-white", "bg-green-700", "hover:bg-green-800", "focus:outline-none", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-full", "text-center", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
             ),
             light: Flowbite::Style.new(
-              default: ["text-gray-900", "bg-white", "border", "border-gray-300", "focus:outline-none", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-full", "me-2", "mb-2", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+              default: ["text-gray-900", "bg-white", "border", "border-gray-300", "focus:outline-none", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-full", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
             ),
             purple: Flowbite::Style.new(
-              default: ["text-white", "bg-purple-700", "hover:bg-purple-800", "focus:outline-none", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-full", "text-center", "mb-2", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+              default: ["text-white", "bg-purple-700", "hover:bg-purple-800", "focus:outline-none", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-full", "text-center", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
             ),
             red: Flowbite::Style.new(
-              default: ["text-white", "bg-red-700", "hover:bg-red-800", "focus:outline-none", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-full", "text-center", "me-2", "mb-2", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+              default: ["text-white", "bg-red-700", "hover:bg-red-800", "focus:outline-none", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-full", "text-center", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
             ),
             yellow: Flowbite::Style.new(
-              default: ["text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:outline-none", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-full", "text-center", "me-2", "mb-2", "dark:focus:ring-yellow-900"]
+              default: ["text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:outline-none", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-full", "text-center", "dark:focus:ring-yellow-900"]
             )
           }
         end
diff --git a/demo/app/views/pages/index.html.erb b/demo/app/views/pages/index.html.erb
index 4e10e60..9c77fc3 100644
--- a/demo/app/views/pages/index.html.erb
+++ b/demo/app/views/pages/index.html.erb
@@ -2,7 +2,7 @@
   <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
     <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Rails meets Flowbite</h1>
     <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS.</p>
-    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0">
       <%= link_to("https://github.com/substancelab/flowbite-components?tab=readme-ov-file#installation", class: Flowbite::Button.classes(size: :lg) + ["inline-flex", "justify-center", "items-center"]) do %>
           Get started
         <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
diff --git a/demo/test/components/previews/button_preview.rb b/demo/test/components/previews/button_preview.rb
index fb6a9f1..6529138 100644
--- a/demo/test/components/previews/button_preview.rb
+++ b/demo/test/components/previews/button_preview.rb
@@ -6,7 +6,7 @@ class ButtonPreview < Lookbook::Preview
   # Use these default button styles with multiple colors to indicate an action
   # or link within your website.
   #
-  # @display classes flex flex-wrap
+  # @display classes flex flex-wrap space-x-2
 
   def default
     render(Flowbite::Button.new(label: "Default"))
@@ -46,7 +46,7 @@ def purple
   #
   # The button pills can be used as an alternative style by using fully rounded edges.
   #
-  # @display classes flex
+  # @display classes flex flex-wrap space-x-2
   def pill_default
     render(Flowbite::Button::Pill.new(label: "Default", style: :default))
   end