Merge pull request #358 from day8/qol/table-filter

Improve tag-dropdown sizing and defaults

Author: RT567

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.28.4 (2025-09-29)
+
+#### Added
+ - `tag-dropdown`: added `:max-height` parameter with reasonable default for dropdown menu
+ - `table-filter`: improved `tag-dropdown` sizing defaults within filter interface
+
 ## 2.28.4 (...)
 
 #### Added

demo/re_demo/table_filter.cljs

@@ -27,7 +27,9 @@
     :options [{:id "clojure" :label "Clojure"}
               {:id "javascript" :label "JavaScript"}
               {:id "python" :label "Python"}
-              {:id "java" :label "Java"}]}])
+              {:id "java" :label "Java"}
+              {:id "rust" :label "Rust"}
+              {:id "C" :label "C"}]}])
 
 (defn panel
   []

src/re_com/table_filter.cljs

@@ -451,6 +451,7 @@
         :choices           options
         :placeholder       "Select values..."
         :min-width         "220px"
+        :max-width         "600px"
         :show-only-button? true
         :show-counter?     true
         :on-change         #(on-change (assoc filter-spec :val %))

src/re_com/tag_dropdown.cljs

@@ -160,6 +160,7 @@
      {:name :min-width          :required false                         :type "string"                  :validate-fn string?                     :description [:span "the CSS min-width, like \"100px\" or \"20em\". This is the natural display width of the Component. It prevents the width from becoming smaller than the value specified, yet allows growth horizontally if sufficient choices are selected up to " [:code ":max-width"] " or unbounded growth if " [:code ":max-width"] " is not provided."]}
      {:name :max-width          :required false                         :type "string"                  :validate-fn string?                     :description "the CSS max-width, like \"100px\" or \"20em\". It prevents the width from becoming larger than the value specified. If sufficient choices are selected to go beyond the maximum then some choices will be hidden by overflow."}
      {:name :height             :required false :default "25px"         :type "string"                  :validate-fn string?                     :description "the specific height of the component"}
+     {:name :max-height         :required false :default "380px"        :type "string"                  :validate-fn string?                     :description "the maximum height of the dropdown menu"}
      {:name :style              :required false                         :type "map"                     :validate-fn map?                        :description "CSS styles to add or override"}
      {:name :parts              :required false                         :type "map"                     :validate-fn (parts? tag-dropdown-parts) :description "See Parts section below."}
      {: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'."]}
@@ -172,10 +173,11 @@
    (let [showing?      (reagent/atom false)]
      (fn tag-dropdown-render
        [& {:keys [choices model placeholder on-change unselect-buttons? required? show-only-button? show-counter? abbrev-fn abbrev-threshold label-fn
-                  description-fn min-width max-width height style disabled? parts src debug-as]
+                  description-fn min-width max-width height max-height style disabled? parts src debug-as]
            :or   {label-fn          :label
                   description-fn    :description
                   height            "25px"
+                  max-height        "380px"
                   show-only-button? false
                   show-counter?     false}
            :as   args}]
@@ -217,6 +219,7 @@
                                :disabled?     disabled?
                                :required?     required?
                                :show-only-button? show-only-button?
+                               :max-height    max-height
                                :parts         (->
                                                (select-keys parts selection-list/selection-list-parts)
                                                (assoc-in-if-empty [:list-group-item :style :border] "1px solid #ddd")