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:
@@ -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])]
|
||||
|
||||
Reference in New Issue
Block a user