[UI Framework] Fix IE11 bug which caused kuiToolBarSearch to grow too wide when there is only a single kuiToolBarSection sibling. (#15215) (#15225)

* Fix IE11 bug which caused kuiToolBarSearch to grow too wide when there is only a single kuiToolBarSection sibling.
* Fix bugs with KuiListingTableToolBar rendering empty sections. Update docs example to demonstrate a tool bar with a search and a section.

ui_framework/dist/ui_framework.css

@@ -3981,6 +3981,8 @@ input[type="button"] {
 
 /**
  * 1. Put 10px of space between each child.
+ * 2. Fix IE11 bug which causes this item to grow too wide when there is only a single
+ *    kuiToolBarSection sibling.
  */
 .kuiToolBarSearch {
   display: -webkit-box;
@@ -3997,7 +3999,8 @@ input[type="button"] {
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
-  max-width: 800px;
+  max-width: 100%;
+  /* 2 */
   line-height: 1.5; }
   .kuiToolBarSearch:first-child {
     margin-left: 0; }
@@ -4013,7 +4016,8 @@ input[type="button"] {
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   position: relative;
-  font-size: 14px; }
+  font-size: 14px;
+  max-width: 800px; }
 
 .kuiToolBarSearchBox__icon {
   position: absolute;

ui_framework/doc_site/src/views/table/listing_table_with_no_items.js

@@ -3,7 +3,6 @@ import React from 'react';
 import {
   KuiButton,
   KuiButtonIcon,
-  KuiPager,
   KuiListingTable,
   KuiListingTableNoMatchesPrompt,
 } from '../../../../components';
@@ -36,22 +35,6 @@ function renderToolBarActions() {
   ];
 }
 
-function renderPager() {
-  return (
-    <KuiPager
-      startNumber={1}
-      hasNextPage={true}
-      hasPreviousPage={false}
-      endNumber={10}
-      totalItems={100}
-      onNextPage={() => {
-      }}
-      onPreviousPage={() => {
-      }}
-    />
-  );
-}
-
 function renderHeader() {
   return [
     'Title',
@@ -67,7 +50,6 @@ function renderHeader() {
 export function ListingTableWithNoItems() {
   return (
     <KuiListingTable
-      pager={renderPager()}
       toolBarActions={renderToolBarActions()}
       header={renderHeader()}
       onFilter={() => {}}

ui_framework/src/components/table/listing_table/__snapshots__/listing_table.test.js.snap

@@ -24,12 +24,6 @@ exports[`renders KuiListingTable 1`] = `
         />
       </div>
     </div>
-    <div
-      class="kuiToolBarSection"
-    />
-    <div
-      class="kuiToolBarSection"
-    />
   </div>
   <table
     class="kuiTable"
@@ -192,9 +186,6 @@ exports[`renders KuiListingTable 1`] = `
         0 items selected
       </div>
     </div>
-    <div
-      class="kuiToolBarFooterSection"
-    />
   </div>
 </div>
 `;

ui_framework/src/components/table/listing_table/listing_table_tool_bar.js

@@ -8,17 +8,31 @@ import {
 } from '../../';
 
 export function KuiListingTableToolBar({ pager, actions, onFilter, filter }) {
-  return (
-    <KuiToolBar>
-      <KuiToolBarSearchBox onFilter={onFilter} filter={filter} />
+  let actionsSection;
 
+  if (actions) {
+    actionsSection = (
       <KuiToolBarSection>
         {actions}
       </KuiToolBarSection>
+    );
+  }
 
+  let pagerSection;
+
+  if (pager) {
+    pagerSection = (
       <KuiToolBarSection>
         {pager}
       </KuiToolBarSection>
+    );
+  }
+
+  return (
+    <KuiToolBar>
+      <KuiToolBarSearchBox onFilter={onFilter} filter={filter} />
+      {actionsSection}
+      {pagerSection}
     </KuiToolBar>
   );
 }

ui_framework/src/components/table/listing_table/listing_table_tool_bar_footer.js

@@ -18,6 +18,16 @@ export function KuiListingTableToolBarFooter({ pager, itemsSelectedCount }) {
     return `${itemsSelectedCount} items selected`;
   };
 
+  let pagerSection;
+
+  if (pager) {
+    pagerSection = (
+      <KuiToolBarFooterSection>
+        {pager}
+      </KuiToolBarFooterSection>
+    );
+  }
+
   return (
     <KuiToolBarFooter>
       <KuiToolBarFooterSection>
@@ -26,9 +36,7 @@ export function KuiListingTableToolBarFooter({ pager, itemsSelectedCount }) {
         </KuiToolBarText>
       </KuiToolBarFooterSection>
 
-      <KuiToolBarFooterSection>
-        {pager}
-      </KuiToolBarFooterSection>
+      {pagerSection}
     </KuiToolBarFooter>
   );
 }

ui_framework/src/components/tool_bar/_tool_bar_search.scss

@@ -1,5 +1,7 @@
 /**
  * 1. Put 10px of space between each child.
+ * 2. Fix IE11 bug which causes this item to grow too wide when there is only a single
+ *    kuiToolBarSection sibling.
  */
 .kuiToolBarSearch {
   display: flex;
@@ -20,7 +22,7 @@
   }
 
   flex: 1 1 auto;
-  max-width: 800px;
+  max-width: 100%; /* 2 */
   line-height: $kuiLineHeight;
 }
 
@@ -28,6 +30,7 @@
   flex: 1 1 auto;
   position: relative;
   font-size: $kuiFontSize;
+  max-width: 800px;
 }
 
   .kuiToolBarSearchBox__icon {