Set search bar border rounded class for number of configured search f…

…ields
projectblacklight · Nov 21, 2024 · 7e84d33 · 7e84d33
1 parent db5d87f
commit 7e84d33
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/app/components/blacklight/search_bar_component.html.erb b/app/components/blacklight/search_bar_component.html.erb
@@ -22,12 +22,12 @@
 
       <%= f.label @query_param, scoped_t('search.label'), class: 'visually-hidden' %>
       <% if autocomplete_path.present? %>
-        <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper form-control">
-          <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
+        <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper form-control <%= rounded_border_class %>">
+          <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control #{rounded_border_class}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
           <ul id="autocomplete-popup" class="dropdown-menu" role="listbox" aria-label="<%= scoped_t('search.label') %>" hidden></ul>
         </auto-complete>
       <% else %>
-        <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label') }  %>
+        <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control #{rounded_border_class}", autofocus: @autofocus, aria: { label: scoped_t('search.label') }  %>
       <% end %>
 
       <%= append %>

diff --git a/app/components/blacklight/search_bar_component.rb b/app/components/blacklight/search_bar_component.rb
@@ -60,6 +60,12 @@ def advanced_search_enabled?
       blacklight_config.advanced_search.enabled
     end
 
+    def rounded_border_class
+      return 'rounded-0' if search_fields.length > 1
+
+      'rounded-left rounded-start'
+    end
+
     private
 
     def blacklight_config

diff --git a/spec/components/blacklight/search_bar_component_spec.rb b/spec/components/blacklight/search_bar_component_spec.rb
@@ -10,6 +10,7 @@
   let(:blacklight_config) do
     Blacklight::Configuration.new.configure do |config|
       config.view = { list: nil, abc: nil }
+      config.add_search_field('test_field', label: 'Test Field')
     end
   end
 
@@ -79,4 +80,28 @@
       expect(render.css("input[name='bar']")).to be_present
     end
   end
+
+  context 'with one search field' do
+    subject(:render) { render_inline(instance) }
+
+    it 'sets the rounded border class' do
+      expect(render.css('.rounded-start.rounded-left')).to be_present
+    end
+  end
+
+  context 'with multiple search fields' do
+    subject(:render) { render_inline(instance) }
+
+    let(:blacklight_config) do
+      Blacklight::Configuration.new.configure do |config|
+        config.view = { list: nil, abc: nil }
+        config.add_search_field('test_field', label: 'Test Field')
+        config.add_search_field('another_field', label: 'Another Field')
+      end
+    end
+
+    it 'sets the rounded border class' do
+      expect(render.css('.rounded-0')).to be_present
+    end
+  end
 end