refactor(form): replace inline error text with tooltip icon

Instead of rendering error messages as `<small class="form-error">`
below inputs, errors now display as a circle-x icon inside the input
area. Hovering the icon shows the error text in a danger-styled tooltip.

- Wrap children in `.form-field-control` when error is present
- Use existing tooltip + icon components for the error indicator
- Add CSS for positioning, padding-right offset, and danger color overrides
- Update tests to match new structure
- Add pre-commit tmux server check instructions to AGENTS.md
This commit is contained in:
Florian Schroedl
2026-03-05 14:01:26 +01:00
parent d5473b1bbf
commit b52361ebf1
4 changed files with 105 additions and 17 deletions

View File

@@ -32,11 +32,19 @@
(is (some #(and (vector? %) (= :small (first %)) (= "form-hint" (get-in % [1 :class])))
result))))
(testing "renders error text"
(testing "renders error icon with tooltip"
(let [result (form/form-field {:label "Email" :error "Invalid email"} [:input])]
(is (= "form-field form-field--error" (get-in result [1 :class])))
(is (some #(and (vector? %) (= :small (first %)) (= "form-error" (get-in % [1 :class])))
result))))
;; Children wrapped in form-field-control
(let [control (nth result 3)]
(is (= :div (first control)))
(is (= "form-field-control" (get-in control [1 :class])))
;; Contains the child input
(is (= :input (first (nth control 2))))
;; Contains the tooltip with error text
(let [tip (nth control 3)]
(is (= :span (first tip)))
(is (= "Invalid email" (get-in tip [1 :data-tooltip])))))))
(testing "no label renders without label element"
(let [result (form/form-field {} [:input])]