FIX Convert broken add-existing-search-form styles to use Bootstrap lists and pagination

css/GridFieldExtensions.css

@@ -14,7 +14,7 @@
 }
 
 .add-existing-search-dialog .add-existing-search-form .field label {
-  padding-bottom: 4px;
+  padding: 4px 0;
 }
 
 .add-existing-search-dialog .add-existing-search-form .Actions {
@@ -22,38 +22,12 @@
   padding: 0;
 }
 
-.add-existing-search-dialog .add-existing-search-items li a {
+.add-existing-search-dialog .list-group-item {
-  background: #FFF;
+  min-height: 32px;
-  border: solid #CCC;
-  border-right-width: 1px;
-  border-bottom-width: 1px;
-  border-left-width: 1px;
-  display: block;
-  padding: 6px;
 }
 
-.add-existing-search-dialog .add-existing-search-items li:first-child a {
+.add-existing-search-dialog .btn-toolbar {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  border-top-width: 1px;
-}
-
-.add-existing-search-dialog .add-existing-search-items li:last-child a {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.add-existing-search-dialog .add-existing-search-items li a:hover {
-  background: #F4F4F4;
-}
-
-.add-existing-search-dialog .add-existing-search-pagination li {
-  background: #FFF;
-  display: block;
-  float: left;
-  margin-right: 2px;
   margin-top: 12px;
-  padding: 6px;
 }
 
 /**

javascript/GridFieldExtensions.js

@@ -44,6 +44,15 @@
 			}
 		});
 
+		// Allow the list item to be clickable as well as the anchor
+    $('.add-existing-search-dialog .add-existing-search-items .list-group-item-action').entwine({
+      onclick: function() {
+        if (this.children('a').length > 0) {
+          this.children('a').first().trigger('click');
+        }
+      }
+    });
+
 		$(".add-existing-search-dialog .add-existing-search-items a").entwine({
 			onclick: function() {
 				var link = this.closest(".add-existing-search-items").data("add-link");

src/GridFieldAddExistingSearchHandler.php

@@ -7,8 +7,10 @@ use SilverStripe\Control\RequestHandler;
 use SilverStripe\Forms\FieldList;
 use SilverStripe\Forms\Form;
 use SilverStripe\Forms\FormAction;
+use SilverStripe\Forms\GridField\GridField;
 use SilverStripe\ORM\DataList;
 use SilverStripe\ORM\PaginatedList;
+use SilverStripe\ORM\Search\SearchContext;
 
 /**
  * Used by {@link GridFieldAddExistingSearchButton} to provide the searching
@@ -49,7 +51,7 @@ class GridFieldAddExistingSearchHandler extends RequestHandler
 
     public function index()
     {
-        return $this->renderWith('Symbiote\\GridFieldExtensions\\GridFieldAddExistingSearchHandler');
+        return $this->renderWith(__CLASS__);
     }
 
     public function add($request)
@@ -73,19 +75,18 @@ class GridFieldAddExistingSearchHandler extends RequestHandler
      */
     public function SearchForm()
     {
-        $form = new Form(
+        $form = Form::create(
             $this,
             'SearchForm',
             $this->context->getFields(),
-            new FieldList(
+            FieldList::create(
                 FormAction::create('doSearch', _t('GridFieldExtensions.SEARCH', 'Search'))
                     ->setUseButtonTag(true)
-                    ->addExtraClass('ss-ui-button')
+                    ->addExtraClass('btn btn-primary font-icon-search')
-                    ->setAttribute('data-icon', 'magnifier')
             )
         );
 
-        $form->addExtraClass('stacked add-existing-search-form');
+        $form->addExtraClass('stacked add-existing-search-form form--no-dividers');
         $form->setFormMethod('GET');
 
         return $form;

templates/Symbiote/GridFieldExtensions/GridFieldAddExistingSearchHandler.ss

@@ -1,35 +1,55 @@
 $SearchForm
 
-<h3><% _t("RESULTS", "Results") %></h3>
+<h3><%t GridFieldExtensions.RESULTS "Results" %></h3>
 <div class="add-existing-search-results">
 	<% if $Items %>
-		<ul class="add-existing-search-items" data-add-link="$Link('add')">
+		<ul class="list-group add-existing-search-items" data-add-link="$Link('add')">
 			<% loop $Items %>
-				<li class="$EvenOdd"><a href="#" data-id="$ID">$Title</a></li>
+				<li class="$EvenOdd list-group-item list-group-item-action">
+                    <a href="#" data-id="$ID">$Title</a>
+                </li>
 			<% end_loop %>
 		</ul>
 	<% else %>
-		<p><% _t("NOITEMS", "There are no items.") %></p>
+		<p><%t GridFieldExtensions.NOITEMS "There are no items." %></p>
 	<% end_if %>
 
 	<% if $Items.MoreThanOnePage %>
-		<ul class="add-existing-search-pagination">
+		<ul class="pagination add-existing-search-pagination">
 			<% if $Items.NotFirstPage %>
-				<li><a href="$Items.PrevLink">&laquo;</a></li>
+				<li class="page-item">
+                    <a class="page-link" href="$Items.PrevLink">
+                        <span aria-hidden="true">&laquo;</span>
+                        <span class="sr-only"><%t GridFieldExtensions.PREVIOUS "Previous" %></span>
+                    </a>
+                </li>
 			<% end_if %>
 
-			<% loop $Items.PaginationSummary(4) %>
+			<% loop $Items.PaginationSummary(2) %>
 				<% if $CurrentBool %>
-					<li class="current">$PageNum</li>
+					<li class="page-item active">
+                        <a class="page-link" href="#">
+                            $PageNum <span class="sr-only"><%t GridFieldExtensions.CURRENT "(current)" %></span>
+                        </a>
+                    </li>
 				<% else_if $Link %>
-					<li><a href="$Link">$PageNum</a></li>
+                    <li class="page-item">
+                        <a class="page-link" href="$Link">
+                            $PageNum
+                        </a>
+                    </li>
 				<% else %>
-					<li>&hellip;</li>
+					<li class="page-item disabled">
+                        <a class="page-link" href="#">&hellip;</a>
+                    </li>
 				<% end_if %>
 			<% end_loop %>
 
 			<% if $Items.NotLastPage %>
-				<li><a href="$Items.NextLink">&raquo;</a></li>
+                <a class="page-link" href="$Items.NextLink">
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only"><%t GridFieldExtensions.Next "Next" %></span>
+                </a>
 			<%end_if %>
 		</ul>
 	<% end_if %>