floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add separator component

Browse Source 
Horizontal and vertical separator (divider) with CSS classes, ARIA
role="none", and data-orientation attribute. Includes dark mode support,
unit tests, and demos in all three dev targets.
This commit is contained in:
Florian Schroedl
2026-03-11 18:38:20 +01:00
parent 660723179c
commit e9e0b15e16
7 changed files with 190 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dev/hiccup/src/dev/hiccup.clj
View File

@@ -18,7 +18,8 @@
[ui.pagination :as pagination]
[ui.form :as form]
[ui.sidebar :as sidebar]
[ui.icon :as icon]))
[ui.icon :as icon]
[ui.separator :as separator]))
;; ── Query Params ────────────────────────────────────────────────────
@@ -228,6 +229,24 @@
(pagination/pagination {:current 3 :total 5
:href-fn (fn [p] (str "#page-" p))})))
(defn separator-demo []
(section "Separator"
;; Basic horizontal
[:div {:style "max-width: 24rem;"}
[:div {:style "display: flex; flex-direction: column; gap: 0.375rem;"}
[:div {:style "font-weight: 500; line-height: 1;"} "Clojure UI"]
[:div {:style "color: var(--fg-2); font-size: var(--font-sm);"} "A cross-target component library"]]
[:div {:style "margin: 1rem 0;"}
(separator/separator {})]
[:p {:style "font-size: var(--font-sm);"} "Build once, render everywhere — Hiccup, Replicant, and Squint."]]
;; Vertical separator
[:div {:style "display: flex; align-items: center; gap: 1rem; height: 1.25rem;"}
[:span {:style "font-size: var(--font-sm);"} "Blog"]
(separator/separator {:orientation :vertical})
[:span {:style "font-size: var(--font-sm);"} "Docs"]
(separator/separator {:orientation :vertical})
[:span {:style "font-size: var(--font-sm);"} "Source"]]))
(defn form-demo []
(section "Form"
[:form {:style "max-width: 480px;"}
@@ -297,6 +316,7 @@
(tooltip-demo)
(breadcrumb-demo)
(pagination-demo)
(separator-demo)
(form-demo)])
(def icon-categories
@@ -403,6 +423,8 @@
{:label "Spinner" :anchor "spinner"}
{:label "Skeleton" :anchor "skeleton"}
{:label "Tooltip" :anchor "tooltip"}]}
{:title "Layout"
:items [{:label "Separator" :anchor "separator"}]}
{:title "Navigation"
:items [{:label "Breadcrumb" :anchor "breadcrumb"}
{:label "Pagination" :anchor "pagination"}]}])

24
dev/replicant/src/dev/replicant.cljs
View File

@@ -17,7 +17,8 @@
[ui.pagination :as pagination]
[ui.form :as form]
[ui.sidebar :as sidebar]
[ui.icon :as icon]))
[ui.icon :as icon]
[ui.separator :as separator]))
;; ── State ───────────────────────────────────────────────────────────
@@ -192,6 +193,24 @@
(pagination/pagination {:current 3 :total 5
:on-click (fn [p] (js/console.log (str "Page: " p)))})))
(defn separator-demo []
(section "Separator"
;; Basic horizontal
[:div {:style {:max-width "24rem"}}
[:div {:style {:display "flex" :flex-direction "column" :gap "0.375rem"}}
[:div {:style {:font-weight "500" :line-height "1"}} "Clojure UI"]
[:div {:style {:color "var(--fg-2)" :font-size "var(--font-sm)"}} "A cross-target component library"]]
[:div {:style {:margin "1rem 0"}}
(separator/separator {})]
[:p {:style {:font-size "var(--font-sm)"}} "Build once, render everywhere — Hiccup, Replicant, and Squint."]]
;; Vertical separator
[:div {:style {:display "flex" :align-items "center" :gap "1rem" :height "1.25rem"}}
[:span {:style {:font-size "var(--font-sm)"}} "Blog"]
(separator/separator {:orientation :vertical})
[:span {:style {:font-size "var(--font-sm)"}} "Docs"]
(separator/separator {:orientation :vertical})
[:span {:style {:font-size "var(--font-sm)"}} "Source"]]))
(defn form-demo []
(section "Form"
[:form {:style {:max-width "480px"}}
@@ -255,6 +274,7 @@
(tooltip-demo)
(breadcrumb-demo)
(pagination-demo)
(separator-demo)
(form-demo)])
(def icon-categories
@@ -360,6 +380,8 @@
{:label "Spinner" :anchor "spinner"}
{:label "Skeleton" :anchor "skeleton"}
{:label "Tooltip" :anchor "tooltip"}]}
{:title "Layout"
:items [{:label "Separator" :anchor "separator"}]}
{:title "Navigation"
:items [{:label "Breadcrumb" :anchor "breadcrumb"}
{:label "Pagination" :anchor "pagination"}]}])

24
dev/squint/src/dev/squint.cljs
View File

@@ -16,7 +16,8 @@
[ui.pagination :as pagination]
[ui.form :as form]
[ui.sidebar :as sidebar]
[ui.icon :as icon]))
[ui.icon :as icon]
[ui.separator :as separator]))
;; ── State ───────────────────────────────────────────────────────────
@@ -210,6 +211,24 @@
(pagination/pagination {:current 3 :total 5
:on-click (fn [p] (js/console.log (str "Page: " p)))})))
(defn separator-demo []
(section "Separator"
;; Basic horizontal
[:div {:style {"max-width" "24rem"}}
[:div {:style {"display" "flex" "flex-direction" "column" "gap" "0.375rem"}}
[:div {:style {"font-weight" "500" "line-height" "1"}} "Clojure UI"]
[:div {:style {"color" "var(--fg-2)" "font-size" "var(--font-sm)"}} "A cross-target component library"]]
[:div {:style {"margin" "1rem 0"}}
(separator/separator {})]
[:p {:style {"font-size" "var(--font-sm)"}} "Build once, render everywhere — Hiccup, Replicant, and Squint."]]
;; Vertical separator
[:div {:style {"display" "flex" "align-items" "center" "gap" "1rem" "height" "1.25rem"}}
[:span {:style {"font-size" "var(--font-sm)"}} "Blog"]
(separator/separator {:orientation "vertical"})
[:span {:style {"font-size" "var(--font-sm)"}} "Docs"]
(separator/separator {:orientation "vertical"})
[:span {:style {"font-size" "var(--font-sm)"}} "Source"]]))
(defn form-demo []
(section "Form"
[:form {:style {"max-width" "480px"}}
@@ -273,6 +292,7 @@
(tooltip-demo)
(breadcrumb-demo)
(pagination-demo)
(separator-demo)
(form-demo)])
(def icon-categories
@@ -386,6 +406,8 @@
{:label "Spinner" :anchor "spinner"}
{:label "Skeleton" :anchor "skeleton"}
{:label "Tooltip" :anchor "tooltip"}]}
{:title "Layout"
:items [{:label "Separator" :anchor "separator"}]}
{:title "Navigation"
:items [{:label "Breadcrumb" :anchor "breadcrumb"}
{:label "Pagination" :anchor "pagination"}]}])