Add input_class and control_class props to form components

.github/workflows/ci.yml

@@ -18,12 +18,14 @@ jobs:
 
       - name: Install uv
         uses: astral-sh/setup-uv@v3
-
-      - name: Set up Python ${{ matrix.python-version }}
-        run: uv python install ${{ matrix.python-version }}
+        with:
+          python-version: ${{ matrix.python-version }}
 
       - name: Install dependencies
-        run: uv pip install -e ".[dev]"
+        run: |
+          uv venv
+          uv pip install -e ".[dev]"
+          echo "$GITHUB_WORKSPACE/.venv/bin" >> $GITHUB_PATH
 
       - name: Install Playwright browsers
         run: playwright install chromium --with-deps

pyproject.toml

@@ -27,7 +27,9 @@ django = [
 ]
 fastapi = [
     "fastapi>=0.109.0",
+    "uvicorn[standard]>=0.27.0",
     "jinjax>=0.41",
+    "python-multipart>=0.0.5",
 ]
 litestar = [
     "litestar>=2.0",
@@ -70,6 +72,9 @@ testpaths = ["tests"]
 pythonpath = ["src"]
 asyncio_mode = "auto"
 
+[tool.uv.sources]
+component-framework = { git = "https://github.com/fsecada01/component-framework.git" }
+
 [tool.ruff]
 line-length = 100
 target-version = "py311"

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