Render hint as a slot

This changes the behavior and implementation of
Flowbite::InputField#hint to be in line with #label and #input.

Author: koppen

app/components/flowbite/input_field.rb

@@ -62,6 +62,7 @@ module Flowbite
   # To render an input without labels or error messages etc, use
   # `Flowbite::Input::Field` instead.
   class InputField < ViewComponent::Base
+    renders_one :hint
     renders_one :input
     renders_one :label
 
@@ -85,19 +86,38 @@ def input_component
       ::Flowbite::Input::Field
     end
 
+    protected
+
     # Returns the HTML to use for the hint element if any
-    def hint
+    def default_hint
       return unless hint?
 
       component = Flowbite::Input::Hint.new(
         attribute: @attribute,
         form: @form,
-        hint_attributes: {id: id_for_hint_element}
-      ).with_content(@hint)
+        hint_attributes: default_hint_options
+      ).with_content(default_hint_content)
       render(component)
     end
 
-    protected
+    def default_hint_content
+      return nil unless @hint
+
+      @hint[:content]
+    end
+
+    # Returns a Hash with the default attributes to apply to the hint element.
+    #
+    # The default attributes can be overriden by passing the `hint[options]`
+    # argument to the constructor.
+    def default_hint_options
+      hint_options = @hint.dup
+      hint_options.delete(:content)
+
+      {
+        id: id_for_hint_element
+      }.merge(hint_options || {})
+    end
 
     # Returns a Hash with the default attributes to apply to the input element.
     #

demo/test/components/previews/input_field_preview.rb

@@ -81,7 +81,7 @@ def helper_text
       Flowbite::InputField::Text.new(
         attribute: :email,
         form: form,
-        hint: "We’ll never share your details."
+        hint: {content: "We’ll never share your details."}
       )
     )
   end

test/components/flowbite/input_field_test.rb

@@ -12,14 +12,14 @@ def setup
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: "What's the title?"))
+    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: {content: "What's the title?"}))
 
     assert_selector("input[type='text'][value='The Great Gatsby']")
     assert_selector("p", text: "What's the title?")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: "What's the title?"))
+    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: {content: "What's the title?"}))
 
     assert_selector("input[aria-describedby='book_title_hint']")
     assert_selector("p#book_title_hint", text: "What's the title?")

test/components/input_field/file_test.rb

@@ -24,14 +24,14 @@ def test_renders_a_label
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: "Upload your profile picture"))
+    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: {content: "Upload your profile picture"}))
 
     assert_selector("input[type='file']")
     assert_selector("p", text: "Upload your profile picture")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: "Upload your profile picture"))
+    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: {content: "Upload your profile picture"}))
 
     assert_selector("input[aria-describedby='user_avatar_hint']")
     assert_selector("p#user_avatar_hint", text: "Upload your profile picture")

test/components/input_field/password_test.rb

@@ -24,14 +24,14 @@ def test_renders_a_label
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: "Enter a secure password"))
+    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: {content: "Enter a secure password"}))
 
     assert_selector("input[type='password']")
     assert_selector("p", text: "Enter a secure password")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: "Enter a secure password"))
+    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: {content: "Enter a secure password"}))
 
     assert_selector("input[aria-describedby='user_password_hint']")
     assert_selector("p#user_password_hint", text: "Enter a secure password")

test/components/input_field/url_test.rb

@@ -24,14 +24,14 @@ def test_renders_a_label
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: "Enter your website URL"))
+    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: {content: "Enter your website URL"}))
 
     assert_selector("input[type='url']")
     assert_selector("p", text: "Enter your website URL")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: "Enter your website URL"))
+    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: {content: "Enter your website URL"}))
 
     assert_selector("input[aria-describedby='user_website_url_hint']")
     assert_selector("p#user_website_url_hint", text: "Enter your website URL")