Skip to content

Commit

Permalink
Merge branch 'master' into dash8
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Jul 22, 2024
2 parents c76fdb2 + cc4863b commit b5acb8a
Show file tree
Hide file tree
Showing 14 changed files with 261 additions and 124 deletions.
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@

> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below.


## 2.21.12 (2024-07-20)

#### Fixed

- `dropdown` - Always drops down when not clipping. Before, this component would choose a body position closest to the vertical center of the viewport. Now, it chooses a position below the anchor, unless that would cause the body to clip.
- `simple-v-table` - Renamed `:row-export-fn` to `:on-export-row-label-fn`.


## 2.21.11 (2024-07-11)

#### Fixed
Expand Down
17 changes: 10 additions & 7 deletions src/re_com/box.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
[clojure.string :as string]
[re-com.config :refer [include-args-desc?]]
[re-com.debug :refer [->attr]]
[re-com.util :as u]
[re-com.validate :refer [justify-style? justify-options-list align-style? align-options-list scroll-style?
scroll-options-list string-or-hiccup? css-style? css-class? html-attr?]]))
scroll-options-list string-or-hiccup? css-style? css-class? html-attr? part?]]))

(def visualise-flow? false)

Expand Down Expand Up @@ -301,7 +302,7 @@
{:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]}
{:name :margin :required false :type "string" :validate-fn string? :description "a CSS margin style"}
{:name :padding :required false :type "string" :validate-fn string? :description "a CSS padding style"}
{:name :gap :required false :type "string" :validate-fn string? :description "the amount of whitespace to put between each child. Typically, an absolute CSS length like 10px or 10em, but can be a stretchy proportional amount like 2"}
{:name :gap :required false :type "string" :validate-fn part? :description "the amount of whitespace to put between each child. Typically, an absolute CSS length like 10px or 10em, but can be a stretchy proportional amount like 2"}
{:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names - space separated string, or a vector of strings."}
{:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"}
{:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}
Expand Down Expand Up @@ -333,10 +334,12 @@
(when padding {:padding padding})
(when visualise-flow? {:background-color "antiquewhite"})
style)
gap-form (when gap [re-com.box/gap
:src (at)
:size gap
:height gap]) ;; TODO: required to get around a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=423112. Remove once fixed.
gap-form (if (string? gap)
[re-com.box/gap
:src (at)
:size gap
:height gap]
[u/part gap]) ;; TODO: required to get around a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=423112. Remove once fixed.
children (if gap
(interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps
children)]
Expand Down Expand Up @@ -538,4 +541,4 @@
:style style
:attr attr
:src src
:debug-as debug-as))))
:debug-as debug-as))))
25 changes: 18 additions & 7 deletions src/re_com/dropdown.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,13 @@
:type "boolean | r/atom"}
{:name :direction
:required false
:default :best
:type ":up | :down | :toward-center"}
:default :toward-center
:type "keyword"
:description [:span "Determines how to position the "
[:code ":body"] " part. " [:code ":toward-center"]
" dynamically re-positions it, while "
[:code ":up"] " and " [:code ":down"]
" force it toward a static direction."]}
{:default 0
:description "component's tabindex. A value of -1 removes from order"
:name :tab-index
Expand Down Expand Up @@ -221,7 +226,9 @@
(defn optimize-position!
"Returns an [x y] position for popover, relative to anchor.
Considers two possible vertical positions - above or below the anchor.
Picks the vertical position whose midpoint is nearest to the viewport's midpoint.
If one vertical position clips outside the viewport, chooses the opposite position.
If both vertical positions clip, picks the vertical position whose midpoint
is nearest the viewport's midpoint.
Calculates a left-justified horizontal position, constrained by the viewport width
and the right edge of the anchor.
Expand All @@ -236,15 +243,19 @@
a-bot (.-bottom a-rect)
b-h (.-offsetHeight body-el)
b-w (.-offsetWidth body-el)
v-mid-y (/ js/window.innerHeight 2)
w-h js/window.innerHeight
v-mid-y (/ w-h 2)
lo-mid-y (+ a-bot (/ b-w 2))
hi-mid-y (- a-y (/ b-h 2))
bot-clipped? (< w-h (+ a-bot b-h))
top-clipped? (neg? (- a-y b-h))
top-best? (= hi-mid-y (nearest v-mid-y lo-mid-y hi-mid-y))
v-pos (cond
top-clipped? :low
top-best? :high
:else :low)
(not (or top-clipped? bot-clipped?)) :low
bot-clipped? :high
top-clipped? :low
top-best? :high
:else :low)
left-bound (max (- a-x) 0)
right-bound (max (- a-w b-w) 0)
hi-y (- b-h)
Expand Down
105 changes: 80 additions & 25 deletions src/re_com/error_modal.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,42 @@
[re-com.box :as box]
[re-com.modal-panel :as mp]
[re-com.theme :as theme]
[re-com.theme.blue-modern :as blue-modern]
[re-com.buttons :as button]
[re-com.text :as text]
[re-com.util :as u :refer [deref-or-value px]]))

(swap! theme/registry update :main vector blue-modern/theme)

(defn close-button [props]
(let [hover? (r/atom nil)]
[:div {:on-mouse-enter (partial reset! hover? true)
:on-mouse-leave (partial reset! hover? false)
:style {:padding "12px 7px 7px 7px"}}
[u/x-button (merge props {:hover? hover? :stroke-width "1.2px"})]]))

(defn error-modal
[& {:keys [severity title
what-happened what-happened-label
implications implications-label
what-to-do what-to-do-label
what-happened what-happened-title
implications implications-title
what-to-do what-to-do-title
details details-title
error error-title
action instructions
proceedable?
undone?
backdrop-on-click on-close closeable?
theme
header footer heading]
:or {title "Sorry, you've hit a bug"
what-happened-label "What Happened?"
implications-label "Implications"
what-to-do-label "What Should I Do?"
what-happened-title "What Happened?"
implications-title "Implications"
what-to-do-title "What Should I Do?"
details-title "Low-level Details (for developers):"
severity :error
closeable? true}
:as args}]
(let [themed (fn [part & [props]]
(let [themed (fn [part props]
(theme/apply props
{:part part
:state {:severity severity}}
Expand All @@ -35,7 +51,11 @@
arrow-side-length (* 2 arrow-midpoint)
arrow-points (str arrow-midpoint "," arrow-midpoint " "
arrow-side-length "," 0 " "
"0,0")]
"0,0")
error (if (string? error)
(fn [props] [:div props error]) error)
details (if (string? details)
(fn [props] [:div props details]) details)]
[mp/modal-panel
(themed ::modal
{:backdrop-on-click backdrop-on-click
Expand All @@ -48,23 +68,58 @@
(themed ::title-wrapper
{:src (at)
:children
[[text/title (themed ::title {:level :level2 :label title})]
(when closeable? [u/x-button {:on-click on-close}])]})]
[:svg (themed ::triangle {:style {:width (px arrow-side-length)
:height (px arrow-midpoint)
:transform (str "translateX(" (-> panel-padding (- arrow-midpoint) px) ")")}})
[[text/title (themed ::title {:label title})]
(when closeable? [close-button {:on-click on-close
:height "12px"
:width "12px"}])]})]
[:svg (themed ::triangle
{:style {:width (px arrow-side-length)
:height (px arrow-midpoint)
:transform (str "translateX("
(-> panel-padding (- arrow-midpoint) px) ")")}})
[:polygon {:points arrow-points}]]
[box/v-box
(themed ::body
{:children
[[u/part header args]
(when what-happened
[u/part heading (themed ::heading {:label what-happened-label :level :level2}) text/title])
[u/part what-happened args]
(when implications
[u/part heading (themed ::heading {:label implications-label :level :level2}) text/title])
[u/part implications args]
(when what-to-do
[u/part heading (themed ::heading {:label what-to-do-label :level :level2}) text/title])
[u/part what-to-do args]
[u/part footer args]]})]]})]})]))
{:gap [:<>
[box/gap :size "19px"]
[box/line]
[box/gap :size "7px"]]
:children
[(when header
[:<>
[box/gap :size "19px"]
[u/part header args]])
[:<>
(when action
[u/part heading
(themed ::sub-title-2 {:label action :level :level2})
text/title])
(when instructions
[text/p instructions])
(when what-happened
[:<>
[u/part heading
(themed ::sub-title-2 {:label what-happened-title :level :level3}) text/title]
[u/part what-happened args]])

(when implications
[:<>
[u/part heading
(themed ::sub-title {:label implications-title :level :level3}) text/title]
[u/part implications args]])

(when what-to-do
[:<>
[u/part heading (themed ::sub-title {:label what-to-do-title :level :level3}) text/title]
[u/part what-to-do args]])]

(when (or details error)
[:<>
[u/part heading
(themed ::sub-title {:label details-title :level :level3}) text/title]
[u/part details args]

[u/part error (themed ::error args)]])

(when footer
[u/part footer args])]})]]})]})]))
74 changes: 42 additions & 32 deletions src/re_com/text.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
(ns re-com.text
(:require-macros
[re-com.core :refer [handler-fn at reflect-current-component]]
[re-com.validate :refer [validate-args-macro]])
(:require
[re-com.config :refer [include-args-desc?]]
[re-com.debug :refer [->attr]]
[re-com.box :refer [v-box box line flex-child-style]]
[re-com.util :refer [deep-merge]]
[re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? parts? string-or-hiccup?]]))
(ns re-com.text
(:require-macros
[re-com.core :refer [handler-fn at reflect-current-component]]
[re-com.validate :refer [validate-args-macro]])
(:require
[re-com.config :refer [include-args-desc?]]
[re-com.debug :refer [->attr]]
[re-com.box :refer [v-box box line flex-child-style]]
[re-com.theme :as theme]
[re-com.util :refer [deep-merge]]
[re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? parts? string-or-hiccup?]]))

;; ------------------------------------------------------------------------------------
;; Component: label
Expand Down Expand Up @@ -83,37 +84,46 @@
{:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the title, not the wrapping div)"}
{:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the title, not the wrapping div)"]}
{:name :parts :required false :type "map" :validate-fn (parts? title-parts) :description "See Parts section below."}
{:name :theme :required false :type "map" :description "alpha"}
{:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]}
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}]))

(defn title
"A title with four preset levels"
[& {:keys [label level underline? margin-top margin-bottom class style attr parts src debug-as]
[& {:keys [label level underline? margin-top margin-bottom class style attr parts src debug-as theme]
:or {margin-top "0.6em" margin-bottom "0.3em"}
:as args}]
(or
(validate-args-macro title-args-desc args)
(let [preset-class (if (nil? level) "" (name level))]
(let [preset-class (if (nil? level) "" (name level))
this-theme (theme/defaults args)
themed (fn [part props]
(theme/apply props
{:part part}
this-theme))]
[v-box
:src src
:debug-as (or debug-as (reflect-current-component))
:class (str "rc-title-wrapper " preset-class " " (get-in parts [:wrapper :class]))
:style (get-in parts [:wrapper :style])
:attr (get-in parts [:wrapper :attr])
:children [[:span (merge {:class (str "display-flex rc-title " preset-class " " class)
:style (merge (flex-child-style "none")
{:margin-top margin-top}
{:line-height 1} ;; so that the margins are correct
(when-not underline? {:margin-bottom margin-bottom})
style)}
attr)
label]
(when underline? [line
:src (at)
:size "1px"
:class (str "rc-title-underline " (get-in parts [:underline :class]))
:style (merge {:margin-bottom margin-bottom} (get-in parts [:underline :style]))
:attr (get-in parts [:underline :attr])])]])))
(themed ::title-wrapper
{:src src
:debug-as (or debug-as (reflect-current-component))
:class (str "rc-title-wrapper " preset-class " " (get-in parts [:wrapper :class]))
:style (get-in parts [:wrapper :style])
:attr (get-in parts [:wrapper :attr])
:children [[:span
(themed ::title-label
(merge {:class (str "display-flex rc-title " preset-class " " class)
:style (merge (flex-child-style "none")
{:margin-top margin-top}
{:line-height 1} ;; so that the margins are correct
(when-not underline? {:margin-bottom margin-bottom})
style)}
attr))
label]
(when underline? [line
:src (at)
:size "1px"
:class (str "rc-title-underline " (get-in parts [:underline :class]))
:style (merge {:margin-bottom margin-bottom} (get-in parts [:underline :style]))
:attr (get-in parts [:underline :attr])])]})])))

;; ------------------------------------------------------------------------------------
;; Component: p
Expand Down Expand Up @@ -153,4 +163,4 @@
[:span.rc-p m (into [:span] children)]))

;; Alias for backwards compatibility; p and p-span used to be different implementations.
(def p-span p)
(def p-span p)
Loading

0 comments on commit b5acb8a

Please sign in to comment.