Update Input::Checkbox to the new Flowbite 4.0 styles

Author: koppen

app/components/flowbite/input/checkbox.rb

@@ -24,9 +24,9 @@ def sizes
         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"],
-              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"]
+              default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2"],
+              disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
+              error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "rounded-sm", "focus:ring-danger", "focus:ring-2"]
             )
           }.freeze
         end

app/components/flowbite/input_field/checkbox.rb

@@ -33,9 +33,9 @@ def input_component
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
@@ -48,9 +48,9 @@ def input_arguments
 
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

test/components/input/checkbox_test.rb

@@ -34,13 +34,13 @@ def test_renders_unchecked_when_false
   def test_renders_with_default_state
     render_inline(Flowbite::Input::Checkbox.new(form: @form, attribute: :subscribed))
 
-    assert_selector("input[name='user[subscribed]'].border-gray-300")
+    assert_selector("input[name='user[subscribed]'].border-default-medium")
   end
 
   def test_renders_in_disabled_state
     render_inline(Flowbite::Input::Checkbox.new(form: @form, attribute: :subscribed, disabled: true))
 
-    assert_selector("input[name='user[subscribed]'][disabled].bg-gray-100.border-gray-300.text-blue-600")
+    assert_selector("input[name='user[subscribed]'][disabled].bg-neutral-secondary-medium.border-default-medium.text-brand")
   end
 
   def test_sets_value
@@ -58,7 +58,7 @@ def test_adds_attributes_to_input
   def test_adds_class_attribute_to_existing_classes
     render_inline(Flowbite::Input::Checkbox.new(class: "custom-class", form: @form, attribute: :subscribed))
 
-    assert_selector("input[name='user[subscribed]'].bg-gray-100.custom-class")
+    assert_selector("input[name='user[subscribed]'].bg-neutral-secondary-medium.custom-class")
   end
 
   def test_renders_a_hidden_input_for_the_unchecked_case
@@ -76,7 +76,7 @@ def test_renders_a_hidden_input_for_the_unchecked_case_with_unchecked_value
   def test_replaces_class_attribute_with_options_class
     render_inline(Flowbite::Input::Checkbox.new(form: @form, attribute: :subscribed, options: {class: "custom-class"}))
 
-    assert_no_selector("input[name='user[subscribed]'].bg-gray-100.custom-class")
+    assert_no_selector("input[name='user[subscribed]'].bg-neutral-secondary-medium.custom-class")
     assert_selector("input[name='user[subscribed]'].custom-class")
   end
 

test/components/input_field/checkbox_test.rb

@@ -26,7 +26,7 @@ def test_renders_a_checkbox_input_element_with_custom_value
   def test_renders_a_label
     render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed))
 
-    assert_selector("label[for='user_subscribed'].font-medium.text-gray-900")
+    assert_selector("label[for='user_subscribed'].font-medium.text-heading")
   end
 
   def test_renders_a_label_with_specific_content
@@ -38,7 +38,7 @@ def test_renders_a_label_with_specific_content
   def test_passes_options_to_the_label
     render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed, label: {content: "Check to receive updates", options: {title: "label"}}))
 
-    assert_selector("label[title='label'].font-medium.text-gray-900", text: "Check to receive updates")
+    assert_selector("label[title='label'].font-medium.text-heading", text: "Check to receive updates")
   end
 
   def test_uses_specified_label_classes
@@ -52,7 +52,7 @@ def test_replaces_the_label_entirely
       component.with_label { "This is the full label" }
     end
 
-    refute_selector("p.text-xs.font-normal.text-gray-500")
+    refute_selector("p.text-xs.font-normal.text-body")
     assert_text("This is the full label")
   end
 
@@ -73,13 +73,13 @@ def test_renders_unchecked_when_false
   def test_renders_a_hint
     render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed, hint: {content: "Check to receive updates"}))
 
-    assert_selector("p.text-xs.font-normal.text-gray-500", text: "Check to receive updates")
+    assert_selector("p.text-xs.font-normal.text-body", text: "Check to receive updates")
   end
 
   def test_passes_options_to_the_hint
     render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed, hint: {content: "Check to receive updates", options: {title: "Hint"}}))
 
-    assert_selector("p[title='Hint'].text-xs.font-normal.text-gray-500", text: "Check to receive updates")
+    assert_selector("p[title='Hint'].text-xs.font-normal.text-body", text: "Check to receive updates")
   end
 
   def test_adds_aria_attributes_for_hint
@@ -94,7 +94,7 @@ def test_replaces_the_hint_entirely
       component.with_hint { "This is the full hint" }
     end
 
-    refute_selector("p.text-xs.font-normal.text-gray-500")
+    refute_selector("p.text-xs.font-normal.text-body")
     assert_text("This is the full hint")
   end
 
@@ -113,7 +113,7 @@ def test_renders_disabled_checkbox
   def test_renders_disabled_label
     render_inline(Flowbite::InputField::Checkbox.new(form: @form, attribute: :subscribed, disabled: true))
 
-    assert_selector("label[for='user_subscribed'].text-gray-400")
+    assert_selector("label[for='user_subscribed'].text-fg-disabled")
   end
 
   def test_renders_enabled_checkbox_by_default