From a5c36381aeccbfba5344256104a34f29052f8d28 Mon Sep 17 00:00:00 2001
From: colemanw <coleman@civicrm.org>
Date: Wed, 24 May 2023 11:22:53 -0400
Subject: [PATCH] SearchKit - Add caret icon to dropdown menus, tweak defaults

Adds a caret icon to dropdown menus to clarify their function, and tweaks the defaults to the standard used by the AdminUI extension (xs size, no text).
Adds css rule to prevent line breaks inside the button.
---
 .../ang/crmSearchAdmin/crmSearchAdminDisplay.component.js     | 4 ++--
 ext/search_kit/ang/crmSearchAdmin/displays/colType/menu.html  | 1 +
 ext/search_kit/ang/crmSearchDisplay/colType/menu.html         | 1 +
 ext/search_kit/css/crmSearchDisplay.css                       | 4 ++++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index c951df2079..e6e9bbdc06 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -62,9 +62,9 @@
           label: ts('Menu'),
           icon: 'fa-bars',
           defaults: {
-            text: ts('Actions'),
+            text: '',
             style: 'default',
-            size: 'btn-sm',
+            size: 'btn-xs',
             icon: 'fa-bars',
             links: []
           }
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/colType/menu.html b/ext/search_kit/ang/crmSearchAdmin/displays/colType/menu.html
index 9b0e15e7cd..d26a95b4a8 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/colType/menu.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/colType/menu.html
@@ -26,6 +26,7 @@
         <i class="{{ col.icon ? 'crm-i ' + col.icon : '' }}"></i>
       </span>
       <span crm-ui-editable ng-model="col.text">{{ col.text }}</span>
+      <span class="caret disabled"></span>
     </button>
   </div>
   <crm-search-admin-token-select model="col" field="text" suffix=":label"></crm-search-admin-token-select>
diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/menu.html b/ext/search_kit/ang/crmSearchDisplay/colType/menu.html
index 5e6556f875..cef1a83bbb 100644
--- a/ext/search_kit/ang/crmSearchDisplay/colType/menu.html
+++ b/ext/search_kit/ang/crmSearchDisplay/colType/menu.html
@@ -2,6 +2,7 @@
   <button type="button" class="dropdown-toggle {{:: $ctrl.settings.columns[colIndex].size }} btn-{{:: $ctrl.settings.columns[colIndex].style }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="colData.open = true">
     <i ng-if=":: $ctrl.settings.columns[colIndex].icon" class="crm-i {{:: $ctrl.settings.columns[colIndex].icon }}"></i>
     {{:: colData.text }}
+    <span class="caret"></span>
   </button>
   <ul class="dropdown-menu {{ $ctrl.settings.columns[colIndex].alignment === 'text-right' ? 'dropdown-menu-right' : '' }}" ng-if=":: colData.open">
     <li ng-repeat="link in colData.links" class="bg-{{:: link.style }}">
diff --git a/ext/search_kit/css/crmSearchDisplay.css b/ext/search_kit/css/crmSearchDisplay.css
index 095115e494..a24fb30816 100644
--- a/ext/search_kit/css/crmSearchDisplay.css
+++ b/ext/search_kit/css/crmSearchDisplay.css
@@ -20,6 +20,10 @@
   width: 60px;
 }
 
+#bootstrap-theme .crm-search-display button.dropdown-toggle {
+  white-space: nowrap;
+}
+
 /* Loading placeholders */
 #bootstrap-theme .crm-search-loading-placeholder {
   height: 2em;
-- 
2.25.1