input and label fixes

basicmachines-co · Oct 27, 2024 · 3f8c181 · 3f8c181
1 parent 3875712
commit 3f8c181
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 17 deletions.
diff --git a/components/ui/Checkbox.jinja b/components/ui/Checkbox.jinja
@@ -10,15 +10,11 @@
   <input
       type="checkbox"
       id="{{ attrs.get('id', '') }}"
-      class="{{ className }}
-      text-black accent-black rounded
-      border-zinc-200 dark:border-zinc-50
-      focus:ring-2 focus:ring-offset-2
-      focus:ring-black dark:focus:ring-white
-      dark:focus:ring-2 dark:focus:ring-offset-2
-      "
+      class="{{ className }} text-black accent-black rounded border-zinc-200 dark:border-zinc-50 focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white dark:focus:ring-2 dark:focus:ring-offset-2"
       {% if checked %}checked{% endif %}
       {% if disabled %}disabled{% endif %}
   />
-  <label for="{{ attrs.get('id', '') }}" class="ml-2 text-sm">{{ label }}</label>
+  {% if label %}
+    <label for="{{ attrs.get('id', '') }}" class="ml-2 text-sm">{{ label }}</label>
+  {% endif %}
 </div>
diff --git a/components/ui/FormLabel.jinja b/components/ui/FormLabel.jinja
@@ -1,10 +1,10 @@
 {#def
-    for_id: str,
+    htmlFor: str,
     className: str = "",
     error: bool = False
 #}
 <label
-    for="{{ for_id }}"
+    for="{{ htmlFor }}"
     class="{% if error %}text-red-500 dark:text-red-800{% endif %} {{ className }} block text-sm font-medium leading-6"
 >
   {{ content }}

diff --git a/components/ui/Label.jinja b/components/ui/Label.jinja
@@ -1,13 +1,11 @@
 {#def
-    for_id: str = "",
+    htmlFor: str = "",
     className: str = "",
-    disabled: bool = False
 #}
 {% set baseclassName = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" %}
 <label
-    for="{{ for_id }}"
+    for="{{ htmlFor }}"
     class="{{ baseclassName }} {{ className }}"
-    {% if disabled %}disabled{% endif %}
     {{ attrs.render() }}
 >
   {{ content }}

diff --git a/documentation/backend/templates/form.html b/documentation/backend/templates/form.html
@@ -1,6 +1,6 @@
 <Form method="GET" action="">
   <FormItem id="email-field">
-    <FormLabel for_id="email">Email Address</FormLabel>
+    <FormLabel htmlFor="email">Email Address</FormLabel>
     <Input
         id="email"
         placeholder="Email"

diff --git a/documentation/backend/templates/form_errors.html b/documentation/backend/templates/form_errors.html
@@ -4,7 +4,7 @@
 
 <Form method="GET" action="">
   <FormItem id="email-field">
-    <FormLabel for_id="emalocil" :error="{{ error }}">Email Address</FormLabel>
+    <FormLabel htmlFor="emalocil" :error="{{ error }}">Email Address</FormLabel>
     <Input
         id="email"
         type="email"

diff --git a/documentation/backend/templates/input_button.html b/documentation/backend/templates/input_button.html
@@ -0,0 +1,4 @@
+<div class="flex w-full max-w-sm items-center space-x-2">
+  <Input type="email" placeholder="Email"/>
+  <Button type="submit">Subscribe</Button>
+</div>
diff --git a/documentation/backend/templates/input_file.html b/documentation/backend/templates/input_file.html
@@ -0,0 +1,4 @@
+<div class="w-full space-y-2">
+  <Label htmlFor="picture">Picture</Label>
+  <Input id="picture" type="file"/>
+</div>
diff --git a/documentation/backend/templates/input_peer_disabled.html b/documentation/backend/templates/input_peer_disabled.html
@@ -0,0 +1,4 @@
+<div class="w-full space-y-2">
+  <Label for="email" disabled="true">Email Address</Label>
+  <Input id="email" type="text" class="peer" disabled/>
+</div>
diff --git a/documentation/backend/templates/label.html b/documentation/backend/templates/label.html
@@ -0,0 +1,4 @@
+  <div class="flex items-center space-x-2">
+    <Checkbox id="terms" />
+    <Label htmlFor="terms">Accept terms and conditions</Label>
+  </div>
diff --git a/documentation/docs/components/input.md b/documentation/docs/components/input.md
@@ -1,4 +1,4 @@
-# Form
+# Input
 
 Displays a form input field.
 
@@ -79,3 +79,42 @@ style="width: 100%; height: 200px; border: none;">
     ```html
     {% include-markdown "../../backend/templates/input_label.html" %}
     ```
+
+### File
+
+=== "Preview"
+    <iframe
+    src="{{ preview_url}}/components/input?option=file"
+    style="width: 100%; height: 200px; border: none;">
+    </iframe>
+
+=== "Code"
+    ```html
+    {% include-markdown "../../backend/templates/input_file.html" %}
+    ```
+
+### Button
+
+=== "Preview"
+    <iframe
+    src="{{ preview_url}}/components/input?option=button"
+    style="width: 100%; height: 200px; border: none;">
+    </iframe>
+
+=== "Code"
+    ```html
+    {% include-markdown "../../backend/templates/input_button.html" %}
+    ```
+
+### Peer Disabled
+
+=== "Preview"
+    <iframe
+    src="{{ preview_url}}/components/input?option=peer_disabled"
+    style="width: 100%; height: 200px; border: none;">
+    </iframe>
+
+=== "Code"
+    ```html
+    {% include-markdown "../../backend/templates/input_peer_disabled.html" %}
+    ```
diff --git a/documentation/docs/components/label.md b/documentation/docs/components/label.md
@@ -0,0 +1,32 @@
+# Label
+
+Displays a label for a form field.
+
+## Preview
+
+<iframe
+src="{{ preview_url}}/components/label"
+style="width: 100%; height: 200px; border: none;">
+</iframe>
+
+## Props
+
+| Prop        | Type    | Default | Description                               |
+|-------------|---------|---------|-------------------------------------------|
+| `htmlFor`   | String  | `False` | The id of the field the label refers to.  |
+| `className` | String  | `""`    | Additional CSS classes for customization. |
+
+## Components
+
+=== "Label.jinja"
+{% raw %}
+```jinja
+{% include '../../../components/ui/Label.jinja' %}
+```
+{% endraw %}
+
+## Usage
+
+```html
+{% include-markdown "../../backend/templates/label.html" %}
+```