feat: add input_class and control_class props to form components

FormField, Select, Textarea now accept input_class (appended to the
main input element's class string). CheckboxGroup accepts control_class
(appended to the wrapping <div class="control">).

Both Jinja2 and Cotton template sets updated. Existing tests updated to
pass empty defaults; new tests verify prop applied to correct element and
default renders without extra class.

Closes #1

Author: fsecada01

src/cf_ui/templates/cotton/bulma/cf/checkbox-group.html

@@ -1,7 +1,7 @@
-<c-vars name label error="" choices="[]" selected="[]" class="" />
+<c-vars name label error="" choices="[]" selected="[]" control_class="" class="" />
 <div class="field {{ class }}">
   <label class="label">{{ label }}</label>
-  <div class="control">
+  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
     <label class="checkbox mr-3">
       <input type="checkbox"

src/cf_ui/templates/cotton/bulma/cf/form-field.html

@@ -1,8 +1,8 @@
-<c-vars name label value="" error="" type="text" required="false" class="" />
+<c-vars name label value="" error="" type="text" required="false" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}"
+    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
            id="{{ name }}"
            type="{{ type }}"
            name="{{ name }}"

src/cf_ui/templates/cotton/bulma/cf/select.html

@@ -1,9 +1,9 @@
-<c-vars name label value="" error="" options="[]" class="" />
+<c-vars name label value="" error="" options="[]" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}">
+      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
         {% for opt in options %}
         <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
           {{ opt.label }}

src/cf_ui/templates/cotton/bulma/cf/textarea.html

@@ -1,8 +1,8 @@
-<c-vars name label value="" error="" rows="4" class="" />
+<c-vars name label value="" error="" rows="4" input_class="" class="" />
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}"
+    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
               id="{{ name }}"
               name="{{ name }}"
               rows="{{ rows }}">{{ value }}</textarea>

src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja

@@ -1,7 +1,7 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label">{{ label }}</label>
-  <div class="control">
+  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
     <label class="checkbox mr-3">
       <input type="checkbox"

src/cf_ui/templates/jinja/bulma/FormField.jinja

@@ -1,8 +1,8 @@
-{#def name, label, value="", error="", type="text", required=false, extra_class="" #}
+{#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}"
+    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
            id="{{ name }}"
            type="{{ type }}"
            name="{{ name }}"

src/cf_ui/templates/jinja/bulma/Select.jinja

@@ -1,9 +1,9 @@
-{#def name, label, value="", error="", options=[], extra_class="" #}
+{#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}">
+      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
         {% for opt in options %}
         <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
           {{ opt.label }}

src/cf_ui/templates/jinja/bulma/Textarea.jinja

@@ -1,8 +1,8 @@
-{#def name, label, value="", error="", rows=4, extra_class="" #}
+{#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 <div class="field {{ extra_class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}"
+    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
               id="{{ name }}"
               name="{{ name }}"
               rows="{{ rows }}">{{ value }}</textarea>

tests/unit/cotton/test_forms.py

@@ -72,3 +72,73 @@ def test_checkbox_group_cotton_renders_choices(cotton_render):
     )
     assert "Apple" in html
     assert "checked" in html
+
+
+# ── Granular class prop tests ────────────────────────────────────────────────
+
+
+def test_form_field_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/form-field.html",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required="false",
+        input_class="is-rounded",
+    )
+    assert "is-rounded" in html
+
+
+def test_form_field_cotton_input_class_default_omitted(cotton_render):
+    html = cotton_render(
+        "cf/form-field.html",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required="false",
+        input_class="",
+    )
+    assert "is-rounded" not in html
+
+
+def test_select_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/select.html",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        input_class="my-select",
+    )
+    assert "my-select" in html
+
+
+def test_textarea_cotton_input_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/textarea.html",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows="4",
+        input_class="has-fixed-size",
+    )
+    assert "has-fixed-size" in html
+
+
+def test_checkbox_group_cotton_control_class_applied(cotton_render):
+    html = cotton_render(
+        "cf/checkbox-group.html",
+        name="fruits",
+        label="Fruits",
+        choices=[{"value": "a", "label": "Apple"}],
+        selected=[],
+        error="",
+        control_class="is-flex",
+    )
+    assert "is-flex" in html

tests/unit/jinja/test_forms.py

@@ -8,6 +8,7 @@ def test_form_field_renders_label(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "Email Address" in html
     assert '<label class="label"' in html
@@ -23,6 +24,7 @@ def test_form_field_renders_input(render):
         type="email",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert 'name="email"' in html
     assert 'type="email"' in html
@@ -39,6 +41,7 @@ def test_form_field_shows_error(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "This field is required." in html
     assert "is-danger" in html
@@ -55,6 +58,7 @@ def test_form_field_no_error_omits_danger(render):
         type="text",
         required=False,
         extra_class="",
+        input_class="",
     )
     assert "is-danger" not in html
 
@@ -69,6 +73,7 @@ def test_form_field_required_attribute(render):
         type="text",
         required=True,
         extra_class="",
+        input_class="",
     )
     assert "required" in html
 
@@ -83,6 +88,7 @@ def test_select_renders_options(render):
         error="",
         options=options,
         extra_class="",
+        input_class="",
     )
     assert "Option A" in html
     assert "Option B" in html
@@ -99,6 +105,7 @@ def test_select_shows_error(render):
         error="Required",
         options=[],
         extra_class="",
+        input_class="",
     )
     assert "Required" in html
     assert "is-danger" in html
@@ -113,6 +120,7 @@ def test_textarea_renders_value(render):
         error="",
         rows=4,
         extra_class="",
+        input_class="",
     )
     assert "Hello world" in html
     assert 'name="bio"' in html
@@ -128,6 +136,7 @@ def test_textarea_shows_error(render):
         error="Too short",
         rows=4,
         extra_class="",
+        input_class="",
     )
     assert "Too short" in html
     assert "is-danger" in html
@@ -143,6 +152,7 @@ def test_checkbox_group_renders_choices(render):
         selected=["a"],
         error="",
         extra_class="",
+        control_class="",
     )
     assert "Apple" in html
     assert "Banana" in html
@@ -160,6 +170,7 @@ def test_checkbox_group_unchecked_item(render):
         selected=["a"],
         error="",
         extra_class="",
+        control_class="",
     )
     assert html.count("checked") == 1
 
@@ -173,6 +184,130 @@ def test_checkbox_group_shows_error(render):
         selected=[],
         error="Select at least one",
         extra_class="",
+        control_class="",
     )
     assert "Select at least one" in html
     assert "is-danger" in html
+
+
+# ── Granular class prop tests ────────────────────────────────────────────────
+
+
+def test_form_field_input_class_applied(render):
+    html = render(
+        "FormField.jinja",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required=False,
+        extra_class="",
+        input_class="is-rounded",
+    )
+    assert "is-rounded" in html
+    assert 'class="input is-rounded"' in html
+
+
+def test_form_field_input_class_default_omitted(render):
+    html = render(
+        "FormField.jinja",
+        name="email",
+        label="Email",
+        value="",
+        error="",
+        type="text",
+        required=False,
+        extra_class="",
+        input_class="",
+    )
+    assert 'class="input"' in html
+
+
+def test_select_input_class_applied(render):
+    html = render(
+        "Select.jinja",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        extra_class="",
+        input_class="my-select",
+    )
+    assert 'class="my-select"' in html
+
+
+def test_select_input_class_default_omitted(render):
+    html = render(
+        "Select.jinja",
+        name="choice",
+        label="Choose",
+        value="",
+        error="",
+        options=[],
+        extra_class="",
+        input_class="",
+    )
+    # No class attribute on the bare <select> when input_class is empty
+    assert "<select " not in html or 'class=""' not in html
+
+
+def test_textarea_input_class_applied(render):
+    html = render(
+        "Textarea.jinja",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows=4,
+        extra_class="",
+        input_class="has-fixed-size",
+    )
+    assert "has-fixed-size" in html
+    assert 'class="textarea has-fixed-size"' in html
+
+
+def test_textarea_input_class_default_omitted(render):
+    html = render(
+        "Textarea.jinja",
+        name="bio",
+        label="Bio",
+        value="",
+        error="",
+        rows=4,
+        extra_class="",
+        input_class="",
+    )
+    assert 'class="textarea"' in html
+
+
+def test_checkbox_group_control_class_applied(render):
+    choices = [{"value": "a", "label": "Apple"}]
+    html = render(
+        "CheckboxGroup.jinja",
+        name="fruits",
+        label="Fruits",
+        choices=choices,
+        selected=[],
+        error="",
+        extra_class="",
+        control_class="is-flex",
+    )
+    assert "is-flex" in html
+    assert 'class="control is-flex"' in html
+
+
+def test_checkbox_group_control_class_default_omitted(render):
+    choices = [{"value": "a", "label": "Apple"}]
+    html = render(
+        "CheckboxGroup.jinja",
+        name="fruits",
+        label="Fruits",
+        choices=choices,
+        selected=[],
+        error="",
+        extra_class="",
+        control_class="",
+    )
+    assert 'class="control"' in html