Handle error states in all input fields

app/components/flowbite/input/checkbox.rb

@@ -22,8 +22,8 @@ def styles
           {
             default: Flowbite::Style.new(
               default: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
-              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"]
-              # TODO: error: ["bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "dark:bg-gray-700", "focus:border-red-500", "block", "w-full", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
+              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              error: ["text-red-600", "bg-red-50", "border-red-500", "rounded-sm", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
             )
           }.freeze
         end

app/components/flowbite/input/radio_button.rb

@@ -20,8 +20,8 @@ def styles
           {
             default: Flowbite::Style.new(
               default: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
-              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"]
-              # TODO: error: ["bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "dark:bg-gray-700", "focus:border-red-500", "block", "w-full", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
+              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              error: ["text-red-600", "bg-red-50", "border-red-500", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
             )
           }.freeze
         end

test/components/input_field/checkbox_test.rb

@@ -73,4 +73,20 @@ def test_renders_enabled_checkbox_by_default
 
     assert_no_selector("input[disabled]")
   end
+
+  def test_renders_error_messages_when_in_error_state
+    @user.errors.add(:subscribed, "must be accepted")
+    @user.errors.add(:subscribed, "is required for notifications")
+
+    render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed))
+
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Must be accepted")
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Is required for notifications")
+  end
+
+  def test_does_not_render_error_messages_when_no_errors
+    render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed))
+
+    assert_no_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500")
+  end
 end

test/components/input_field/file_test.rb

@@ -66,4 +66,20 @@ def test_renders_enabled_file_by_default
 
     assert_no_selector("input[disabled]")
   end
+
+  def test_renders_error_messages_when_in_error_state
+    @user.errors.add(:avatar, "file is too large")
+    @user.errors.add(:avatar, "must be an image")
+
+    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar))
+
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "File is too large")
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Must be an image")
+  end
+
+  def test_does_not_render_error_messages_when_no_errors
+    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar))
+
+    assert_no_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500")
+  end
 end

test/components/input_field/password_test.rb

@@ -72,4 +72,20 @@ def test_renders_enabled_password_by_default
 
     assert_no_selector("input[disabled]")
   end
+
+  def test_renders_error_messages_when_in_error_state
+    @user.errors.add(:password, "is too short")
+    @user.errors.add(:password, "must contain special characters")
+
+    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password))
+
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Is too short")
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Must contain special characters")
+  end
+
+  def test_does_not_render_error_messages_when_no_errors
+    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password))
+
+    assert_no_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500")
+  end
 end

test/components/input_field/radio_button_test.rb

@@ -80,4 +80,20 @@ def test_renders_enabled_radio_by_default
 
     assert_no_selector("input[disabled]")
   end
+
+  def test_renders_error_messages_when_in_error_state
+    @article.errors.add(:state, "is not a valid option")
+    @article.errors.add(:state, "must be selected")
+
+    render_inline(Flowbite::InputField::RadioButton.new(form: @form, attribute: :state, value: "visible"))
+
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Is not a valid option")
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Must be selected")
+  end
+
+  def test_does_not_render_error_messages_when_no_errors
+    render_inline(Flowbite::InputField::RadioButton.new(form: @form, attribute: :state, value: "visible"))
+
+    assert_no_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500")
+  end
 end

test/components/input_field/url_test.rb

@@ -66,4 +66,20 @@ def test_renders_enabled_url_by_default
 
     assert_no_selector("input[disabled]")
   end
+
+  def test_renders_error_messages_when_in_error_state
+    @user.errors.add(:website_url, "is not a valid URL")
+    @user.errors.add(:website_url, "must start with http or https")
+
+    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url))
+
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Is not a valid URL")
+    assert_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500", text: "Must start with http or https")
+  end
+
+  def test_does_not_render_error_messages_when_no_errors
+    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url))
+
+    assert_no_selector("p.mt-2.text-sm.text-red-600.dark\\:text-red-500")
+  end
 end