fix: align dev target inconsistencies across hiccup, replicant, squint
- Squint section helper: add missing inner flex-column wrapper div (was putting children directly in section, unlike hiccup/replicant) - Hiccup accordion text: shorten to match replicant/squint wording - Squint dialog ID: rename "demo-dialog-sq" → "demo-dialog" to match others
This commit is contained in:
@@ -70,9 +70,9 @@
|
|||||||
;; ── Accordion ───────────────────────────────────────────────────────
|
;; ── Accordion ───────────────────────────────────────────────────────
|
||||||
(defn accordion-demo []
|
(defn accordion-demo []
|
||||||
(section "Accordion"
|
(section "Accordion"
|
||||||
(accordion/accordion {:title "What is this framework?"} "A cross-target component library for Clojure, ClojureScript, and Squint.")
|
(accordion/accordion {:title "What is this framework?"} "A cross-target component library.")
|
||||||
(accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call the component functions.")
|
(accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call functions.")
|
||||||
(accordion/accordion {:title "Is it accessible?"} "Yes, components follow ARIA best practices.")))
|
(accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")))
|
||||||
|
|
||||||
;; ── Table ───────────────────────────────────────────────────────────
|
;; ── Table ───────────────────────────────────────────────────────────
|
||||||
(defn table-demo []
|
(defn table-demo []
|
||||||
|
|||||||
@@ -22,10 +22,10 @@
|
|||||||
(if (= current "dark") "light" "dark"))))
|
(if (= current "dark") "light" "dark"))))
|
||||||
|
|
||||||
(defn section [title & children]
|
(defn section [title & children]
|
||||||
(into [:section {:style {"margin-bottom" "2.5rem"}}
|
[:section {:style {"margin-bottom" "2.5rem"}}
|
||||||
[:h3 {:style {"color" "var(--fg-1)" "margin-bottom" "1rem"
|
[:h3 {:style {"color" "var(--fg-1)" "margin-bottom" "1rem"
|
||||||
"border-bottom" "var(--border-0)" "padding-bottom" "0.5rem"}} title]]
|
"border-bottom" "var(--border-0)" "padding-bottom" "0.5rem"}} title]
|
||||||
children))
|
(into [:div {:style {"display" "flex" "flex-direction" "column" "gap" "1rem"}}] children)])
|
||||||
|
|
||||||
;; ── Button ──────────────────────────────────────────────────────────
|
;; ── Button ──────────────────────────────────────────────────────────
|
||||||
(def button-variants ["primary" "secondary" "ghost" "danger"])
|
(def button-variants ["primary" "secondary" "ghost" "danger"])
|
||||||
@@ -97,18 +97,18 @@
|
|||||||
[:p {:style {"color" "var(--fg-2)" "font-size" "var(--font-sm)"}} "Click button to open dialog."]
|
[:p {:style {"color" "var(--fg-2)" "font-size" "var(--font-sm)"}} "Click button to open dialog."]
|
||||||
(button/button {:variant "primary"
|
(button/button {:variant "primary"
|
||||||
:on-click (fn [_]
|
:on-click (fn [_]
|
||||||
(when-let [el (js/document.getElementById "demo-dialog-sq")]
|
(when-let [el (js/document.getElementById "demo-dialog")]
|
||||||
(.showModal el)))}
|
(.showModal el)))}
|
||||||
"Open dialog")
|
"Open dialog")
|
||||||
(dialog/dialog {:id "demo-dialog-sq"}
|
(dialog/dialog {:id "demo-dialog"}
|
||||||
(dialog/dialog-header {} [:h3 "Dialog Title"] [:p "Are you sure you want to continue?"])
|
(dialog/dialog-header {} [:h3 "Dialog Title"] [:p "Are you sure you want to continue?"])
|
||||||
(dialog/dialog-body {} [:p "This action cannot be undone."])
|
(dialog/dialog-body {} [:p "This action cannot be undone."])
|
||||||
(dialog/dialog-footer {}
|
(dialog/dialog-footer {}
|
||||||
(button/button {:variant "secondary" :size "sm"
|
(button/button {:variant "secondary" :size "sm"
|
||||||
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog-sq")))}
|
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog")))}
|
||||||
"Cancel")
|
"Cancel")
|
||||||
(button/button {:variant "primary" :size "sm"
|
(button/button {:variant "primary" :size "sm"
|
||||||
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog-sq")))}
|
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog")))}
|
||||||
"Confirm")))))
|
"Confirm")))))
|
||||||
|
|
||||||
;; ── Spinner ─────────────────────────────────────────────────────────
|
;; ── Spinner ─────────────────────────────────────────────────────────
|
||||||
|
|||||||
Reference in New Issue
Block a user