From 955ee17939d88deefc8a8bfb8ac7066e87d64ac9 Mon Sep 17 00:00:00 2001
From: Jay Staudt <jstaudt@devis.com>
Date: Tue, 2 Apr 2019 14:09:20 -0400
Subject: [PATCH 1/6] wrap filter components with labels and hidden text

---
 .../src/components/date.js                    | 44 +++++++++++--------
 .../src/components/multiselect.js             | 28 +++++++-----
 .../src/components/number.js                  | 38 ++++++++++------
 .../src/components/select.js                  | 26 ++++++-----
 .../src/components/text.js                    | 26 ++++++-----
 5 files changed, 97 insertions(+), 65 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 45717ae..a2d1b44 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -132,24 +132,32 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <select
-          ref={ n => this.dateFilterComparator = n }
-          style={ comparatorStyle }
-          className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
-        >
-          { this.getComparatorOptions() }
-        </select>
-        <input
-          ref={ n => this.inputDate = n }
-          className={ `filter date-filter-input form-control ${dateClassName}` }
-          style={ dateStyle }
-          type="date"
-          onChange={ this.onChangeDate }
-          placeholder={ placeholder || `Enter ${text}...` }
-          defaultValue={ this.getDefaultDate() }
-        />
+        <label htmlFor={`date-filter-comparator-${ column.text }`}>
+          <span className="sr-only">Filter comparator</span>
+          <select
+            ref={ n => this.dateFilterComparator = n }
+            id={`date-filter-comparator-${ column.text }`}
+            style={ comparatorStyle }
+            className={ `date-filter-comparator form-control ${comparatorClassName}` }
+            onChange={ this.onChangeComparator }
+            defaultValue={ defaultValue ? defaultValue.comparator : '' }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
+        <label htmlFor={`date-filter-column-${ column.text }`}>
+          <span className="sr-only">Enter ${ column.text }</span>
+          <input
+            ref={ n => this.inputDate = n }
+            id={`date-filter-column-${ column.text }`}
+            className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ dateStyle }
+            type="date"
+            onChange={ this.onChangeDate }
+            placeholder={ placeholder || `Enter ${text}...` }
+            defaultValue={ this.getDefaultDate() }
+          />
+        </label>
       </div>
     );
   }
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index 5f4623b..8d658ca 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -111,18 +111,22 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
-        { ...rest }
-        ref={ n => this.selectInput = n }
-        style={ style }
-        multiple
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
-      >
-        { this.getOptions() }
-      </select>
+      <label htmlFor={`multiselect-filter-column-${column.text}`}>
+        <span className="sr-only">Filter by {column.text}</span>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={`multiselect-filter-column-${column.text}`}
+          style={ style }
+          multiple
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
     );
   }
 }
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 447eed2..5968b62 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -170,38 +170,50 @@ class NumberFilter extends Component {
     return (
       <div
         onClick={ e => e.stopPropagation() }
-        className={ `filter number-filter ${className}` }
+        className={`filter number-filter ${className}`}
         style={ style }
       >
-        <select
-          ref={ n => this.numberFilterComparator = n }
-          style={ comparatorStyle }
-          className={ `number-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
-        >
-          { this.getComparatorOptions() }
-        </select>
+        <label htmlFor={`number-filter-comparator-${column.text}`}>
+          <span className="sr-only">Filter comparator</span>
+          <select
+            ref={ n => this.numberFilterComparator = n }
+            style={ comparatorStyle }
+            id={`number-filter-comparator-${ column.text }`}
+            className={`number-filter-comparator form-control ${comparatorClassName}`}
+            onChange={ this.onChangeComparator }
+            defaultValue={ defaultValue ? defaultValue.comparator : '' }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
         {
-          options ?
+          options ? 
+          <label htmlFor={`number-filter-column-${ column.text }`}>
+            <span className="sr-only">{`Select ${column.text}`}</span>
             <select
               ref={ n => this.numberFilter = n }
+              id={`number-filter-column-${ column.text }`}
               style={ numberStyle }
               className={ selectClass }
               onChange={ this.onChangeNumberSet }
               defaultValue={ defaultValue ? defaultValue.number : '' }
             >
               { this.getNumberOptions() }
-            </select> :
+            </select>
+          </label> :
+          <label htmlFor={`number-filter-column-${ column.text }`}>
+            <span className="sr-only">{`Enter ${ column.text }`}</span>
             <input
               ref={ n => this.numberFilter = n }
+              id={`number-filter-column-${ column.text }`}
               type="number"
               style={ numberStyle }
-              className={ `number-filter-input form-control ${numberClassName}` }
+              className={`number-filter-input form-control ${numberClassName}`}
               placeholder={ placeholder || `Enter ${column.text}...` }
               onChange={ this.onChangeNumber }
               defaultValue={ defaultValue ? defaultValue.number : '' }
             />
+          </label>
         }
       </div>
     );
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 973bdb3..c9089b7 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -136,17 +136,21 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
-        { ...rest }
-        ref={ n => this.selectInput = n }
-        style={ style }
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
-      >
-        { this.getOptions() }
-      </select>
+      <label htmlFor={`select-filter-column-${ column.text }`}>
+        <span className="sr-only">Filter by { column.text }</span>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={`select-filter-column-${ column.text }`}
+          style={ style }
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
     );
   }
 }
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index a17c3ea..f76d07f 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -94,17 +94,21 @@ class TextFilter extends Component {
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <input
-        { ...rest }
-        ref={ n => this.input = n }
-        type="text"
-        className={ `filter text-filter form-control ${className}` }
-        style={ style }
-        onChange={ this.filter }
-        onClick={ this.handleClick }
-        placeholder={ placeholder || `Enter ${text}...` }
-        value={ this.state.value }
-      />
+      <label htmlFor={`text-filter-column-${text}`}>
+        <span className="sr-only">Filter by {text}</span>
+        <input
+          { ...rest }
+          ref={ n => this.input = n }
+          type="text"
+          id={`text-filter-column-${ text }`}
+          className={ `filter text-filter form-control ${className}` }
+          style={ style }
+          onChange={ this.filter }
+          onClick={ this.handleClick }
+          placeholder={ placeholder || `Enter ${text}...` }
+          value={ this.state.value }
+        />
+      </label>
     );
   }
 }

From ba7512969e026df3c8b48e1389f8225c300c6b87 Mon Sep 17 00:00:00 2001
From: Jay Staudt <jstaudt@devis.com>
Date: Tue, 2 Apr 2019 14:09:53 -0400
Subject: [PATCH 2/6] add non-redundant titles to page buttons

---
 packages/react-bootstrap-table2-paginator/src/page-button.js    | 2 +-
 .../react-bootstrap-table2-paginator/test/page-button.test.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index e2834ee..94a4d6d 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -30,7 +30,7 @@ class PageButton extends Component {
     }, className);
 
     return (
-      <li className={ classes } title={ title }>
+      <li className={ classes } title={`page-${title}`}>
         <a href="#" onClick={ this.handleClick } className="page-link">{ page }</a>
       </li>
     );
diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
index 4e3d800..25c51d6 100644
--- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
@@ -105,7 +105,7 @@ describe('PageButton', () => {
     const title = 'aTitle';
     beforeEach(() => {
       wrapper = shallow(
-        <PageButton { ...props } active disabled={ false } title={ title } />
+        <PageButton {...props} active disabled={false} title={`page-${ title }`} />
       );
     });
 

From d47a3757b8191b300305521319dc1118351d1d30 Mon Sep 17 00:00:00 2001
From: Jay Staudt <jstaudt@devis.com>
Date: Tue, 2 Apr 2019 14:10:14 -0400
Subject: [PATCH 3/6] wrap search bar with label and hidden text

---
 .../src/search/SearchBar.js                   | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index f51f09c..9ade309 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -54,20 +54,25 @@ class SearchBar extends React.Component {
     const {
       className,
       style,
-      placeholder
+      placeholder,
+      tableId,
     } = this.props;
 
     return (
-      <input
-        ref={ n => this.input = n }
-        type="text"
-        style={ style }
-        onKeyUp={ () => this.onKeyup() }
-        onChange={ this.onChangeValue }
-        className={ `form-control ${className}` }
-        value={ this.state.value }
-        placeholder={ placeholder || SearchBar.defaultProps.placeholder }
-      />
+      <label htmlFor={`search-bar-${tableId}`} className="w-100">
+      <span className="sr-only">Search this table</span>
+        <input
+          ref={ n => this.input = n }
+          id={`search-bar-${ tableId }`}
+          type="text"
+          style={ style }
+          onKeyUp={ () => this.onKeyup() }
+          onChange={ this.onChangeValue }
+          className={ `form-control ${className}` }
+          value={ this.state.value }
+          placeholder={ placeholder || SearchBar.defaultProps.placeholder }
+        />
+      </label>
     );
   }
 }
@@ -78,7 +83,8 @@ SearchBar.propTypes = {
   placeholder: PropTypes.string,
   style: PropTypes.object,
   delay: PropTypes.number,
-  searchText: PropTypes.string
+  searchText: PropTypes.string,
+  tableId: PropTypes.string
 };
 
 SearchBar.defaultProps = {
@@ -86,7 +92,8 @@ SearchBar.defaultProps = {
   style: {},
   placeholder: 'Search',
   delay: 250,
-  searchText: ''
+  searchText: '',
+  tableId: 0
 };
 
 export default SearchBar;

From 1a1f6969cb898d0a5f5d01b8e6c64e7759d5bf68 Mon Sep 17 00:00:00 2001
From: Jay Staudt <jstaudt@devis.com>
Date: Tue, 2 Apr 2019 14:42:47 -0400
Subject: [PATCH 4/6] adjustments via eslint

---
 .../src/components/date.js                    | 10 +--
 .../src/components/multiselect.js             |  4 +-
 .../src/components/number.js                  | 62 +++++++++----------
 .../src/components/select.js                  |  4 +-
 .../src/components/text.js                    |  4 +-
 .../src/page-button.js                        |  2 +-
 .../test/page-button.test.js                  |  2 +-
 .../src/search/SearchBar.js                   |  8 +--
 8 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index a2d1b44..25a7fdd 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -132,11 +132,11 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <label htmlFor={`date-filter-comparator-${ column.text }`}>
+        <label htmlFor={ `date-filter-comparator-${text}` }>
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.dateFilterComparator = n }
-            id={`date-filter-comparator-${ column.text }`}
+            id={ `date-filter-comparator-${text}` }
             style={ comparatorStyle }
             className={ `date-filter-comparator form-control ${comparatorClassName}` }
             onChange={ this.onChangeComparator }
@@ -145,11 +145,11 @@ class DateFilter extends Component {
             { this.getComparatorOptions() }
           </select>
         </label>
-        <label htmlFor={`date-filter-column-${ column.text }`}>
-          <span className="sr-only">Enter ${ column.text }</span>
+        <label htmlFor={ `date-filter-column-${text}` }>
+          <span className="sr-only">Enter ${ text }</span>
           <input
             ref={ n => this.inputDate = n }
-            id={`date-filter-column-${ column.text }`}
+            id={ `date-filter-column-${text}` }
             className={ `filter date-filter-input form-control ${dateClassName}` }
             style={ dateStyle }
             type="date"
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index 8d658ca..e4c1f3e 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -111,12 +111,12 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <label htmlFor={`multiselect-filter-column-${column.text}`}>
+      <label htmlFor={ `multiselect-filter-column-${column.text}` }>
         <span className="sr-only">Filter by {column.text}</span>
         <select
           { ...rest }
           ref={ n => this.selectInput = n }
-          id={`multiselect-filter-column-${column.text}`}
+          id={ `multiselect-filter-column-${column.text}` }
           style={ style }
           multiple
           className={ selectClass }
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 5968b62..843a06b 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -170,16 +170,16 @@ class NumberFilter extends Component {
     return (
       <div
         onClick={ e => e.stopPropagation() }
-        className={`filter number-filter ${className}`}
+        className={ `filter number-filter ${className}` }
         style={ style }
       >
-        <label htmlFor={`number-filter-comparator-${column.text}`}>
+        <label htmlFor={ `number-filter-comparator-${column.text}` }>
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.numberFilterComparator = n }
             style={ comparatorStyle }
-            id={`number-filter-comparator-${ column.text }`}
-            className={`number-filter-comparator form-control ${comparatorClassName}`}
+            id={ `number-filter-comparator-${column.text}` }
+            className={ `number-filter-comparator form-control ${comparatorClassName}` }
             onChange={ this.onChangeComparator }
             defaultValue={ defaultValue ? defaultValue.comparator : '' }
           >
@@ -187,33 +187,33 @@ class NumberFilter extends Component {
           </select>
         </label>
         {
-          options ? 
-          <label htmlFor={`number-filter-column-${ column.text }`}>
-            <span className="sr-only">{`Select ${column.text}`}</span>
-            <select
-              ref={ n => this.numberFilter = n }
-              id={`number-filter-column-${ column.text }`}
-              style={ numberStyle }
-              className={ selectClass }
-              onChange={ this.onChangeNumberSet }
-              defaultValue={ defaultValue ? defaultValue.number : '' }
-            >
-              { this.getNumberOptions() }
-            </select>
-          </label> :
-          <label htmlFor={`number-filter-column-${ column.text }`}>
-            <span className="sr-only">{`Enter ${ column.text }`}</span>
-            <input
-              ref={ n => this.numberFilter = n }
-              id={`number-filter-column-${ column.text }`}
-              type="number"
-              style={ numberStyle }
-              className={`number-filter-input form-control ${numberClassName}`}
-              placeholder={ placeholder || `Enter ${column.text}...` }
-              onChange={ this.onChangeNumber }
-              defaultValue={ defaultValue ? defaultValue.number : '' }
-            />
-          </label>
+          options ?
+            <label htmlFor={ `number-filter-column-${column.text}` }>
+              <span className="sr-only">{`Select ${column.text}`}</span>
+              <select
+                ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
+                style={ numberStyle }
+                className={ selectClass }
+                onChange={ this.onChangeNumberSet }
+                defaultValue={ defaultValue ? defaultValue.number : '' }
+              >
+                { this.getNumberOptions() }
+              </select>
+            </label> :
+            <label htmlFor={ `number-filter-column-${column.text}` }>
+              <span className="sr-only">{`Enter ${column.text}`}</span>
+              <input
+                ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
+                type="number"
+                style={ numberStyle }
+                className={ `number-filter-input form-control ${numberClassName}` }
+                placeholder={ placeholder || `Enter ${column.text}...` }
+                onChange={ this.onChangeNumber }
+                defaultValue={ defaultValue ? defaultValue.number : '' }
+              />
+            </label>
         }
       </div>
     );
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index c9089b7..b2d6973 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -136,12 +136,12 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <label htmlFor={`select-filter-column-${ column.text }`}>
+      <label htmlFor={ `select-filter-column-${column.text}` }>
         <span className="sr-only">Filter by { column.text }</span>
         <select
           { ...rest }
           ref={ n => this.selectInput = n }
-          id={`select-filter-column-${ column.text }`}
+          id={ `select-filter-column-${column.text}` }
           style={ style }
           className={ selectClass }
           onChange={ this.filter }
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index f76d07f..a4268c4 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -94,13 +94,13 @@ class TextFilter extends Component {
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <label htmlFor={`text-filter-column-${text}`}>
+      <label htmlFor={ `text-filter-column-${text}` }>
         <span className="sr-only">Filter by {text}</span>
         <input
           { ...rest }
           ref={ n => this.input = n }
           type="text"
-          id={`text-filter-column-${ text }`}
+          id={ `text-filter-column-${text}` }
           className={ `filter text-filter form-control ${className}` }
           style={ style }
           onChange={ this.filter }
diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index 94a4d6d..c81b8e2 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -30,7 +30,7 @@ class PageButton extends Component {
     }, className);
 
     return (
-      <li className={ classes } title={`page-${title}`}>
+      <li className={ classes } title={ `page-${title}` }>
         <a href="#" onClick={ this.handleClick } className="page-link">{ page }</a>
       </li>
     );
diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
index 25c51d6..087b270 100644
--- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
@@ -105,7 +105,7 @@ describe('PageButton', () => {
     const title = 'aTitle';
     beforeEach(() => {
       wrapper = shallow(
-        <PageButton {...props} active disabled={false} title={`page-${ title }`} />
+        <PageButton { ...props } active disabled={ false } title={ `page-${title}` } />
       );
     });
 
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index 9ade309..a8ca9d1 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -55,15 +55,15 @@ class SearchBar extends React.Component {
       className,
       style,
       placeholder,
-      tableId,
+      tableId
     } = this.props;
 
     return (
-      <label htmlFor={`search-bar-${tableId}`} className="w-100">
-      <span className="sr-only">Search this table</span>
+      <label htmlFor={ `search-bar-${tableId}` } className="w-100">
+        <span className="sr-only">Search this table</span>
         <input
           ref={ n => this.input = n }
-          id={`search-bar-${ tableId }`}
+          id={ `search-bar-${tableId}` }
           type="text"
           style={ style }
           onKeyUp={ () => this.onKeyup() }

From 6d2493d537d2c9ea9e7fcc9782d3fc0e8a3e7565 Mon Sep 17 00:00:00 2001
From: Jay Staudt <jstaudt@devis.com>
Date: Tue, 2 Apr 2019 14:53:52 -0400
Subject: [PATCH 5/6] revert page-button title

---
 packages/react-bootstrap-table2-paginator/src/page-button.js    | 2 +-
 .../react-bootstrap-table2-paginator/test/page-button.test.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index c81b8e2..e2834ee 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -30,7 +30,7 @@ class PageButton extends Component {
     }, className);
 
     return (
-      <li className={ classes } title={ `page-${title}` }>
+      <li className={ classes } title={ title }>
         <a href="#" onClick={ this.handleClick } className="page-link">{ page }</a>
       </li>
     );
diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
index 087b270..4e3d800 100644
--- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
@@ -105,7 +105,7 @@ describe('PageButton', () => {
     const title = 'aTitle';
     beforeEach(() => {
       wrapper = shallow(
-        <PageButton { ...props } active disabled={ false } title={ `page-${title}` } />
+        <PageButton { ...props } active disabled={ false } title={ title } />
       );
     });
 

From 8436edba7e91f5a47fb0f3153515893fcfcb248d Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sun, 7 Apr 2019 14:03:42 +0800
Subject: [PATCH 6/6] no inline-block on label element

---
 .../.storybook/webpack.config.js                       |  9 ++++++++-
 .../react-bootstrap-table2-example/stories/index.js    |  1 +
 .../src/components/date.js                             |  5 ++++-
 .../src/components/multiselect.js                      |  5 ++++-
 .../src/components/number.js                           | 10 ++++++++--
 .../src/components/select.js                           |  5 ++++-
 .../src/components/text.js                             |  5 ++++-
 .../style/react-bootstrap-table2-filter.scss           |  4 ++++
 .../src/search/SearchBar.js                            |  5 ++++-
 .../style/react-bootstrap-table2-toolkit.scss          |  3 +++
 10 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
index a3995c8..75e6df6 100644
--- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
+++ b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
@@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
 const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -43,7 +44,13 @@ const loaders = [{
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
+  include: [
+    storyPath,
+    sourceStylePath,
+    paginationStylePath,
+    filterStylePath,
+    toolkitStylePath
+  ],
 }, {
   test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 9fc20d1..d35cbcb 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -229,6 +229,7 @@ import 'stories/stylesheet/storybook.scss';
 import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
 import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
 import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
+import '../../react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss';
 
 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 25a7fdd..578f558 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -132,7 +132,10 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <label htmlFor={ `date-filter-comparator-${text}` }>
+        <label
+          className="filter-label"
+          htmlFor={ `date-filter-comparator-${text}` }
+        >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.dateFilterComparator = n }
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index e4c1f3e..2de86f9 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -111,7 +111,10 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <label htmlFor={ `multiselect-filter-column-${column.text}` }>
+      <label
+        className="filter-label"
+        htmlFor={ `multiselect-filter-column-${column.text}` }
+      >
         <span className="sr-only">Filter by {column.text}</span>
         <select
           { ...rest }
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 843a06b..29e0370 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -173,7 +173,10 @@ class NumberFilter extends Component {
         className={ `filter number-filter ${className}` }
         style={ style }
       >
-        <label htmlFor={ `number-filter-comparator-${column.text}` }>
+        <label
+          className="filter-label"
+          htmlFor={ `number-filter-comparator-${column.text}` }
+        >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.numberFilterComparator = n }
@@ -188,7 +191,10 @@ class NumberFilter extends Component {
         </label>
         {
           options ?
-            <label htmlFor={ `number-filter-column-${column.text}` }>
+            <label
+              className="filter-label"
+              htmlFor={ `number-filter-column-${column.text}` }
+            >
               <span className="sr-only">{`Select ${column.text}`}</span>
               <select
                 ref={ n => this.numberFilter = n }
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index b2d6973..3f7471b 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -136,7 +136,10 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <label htmlFor={ `select-filter-column-${column.text}` }>
+      <label
+        className="filter-label"
+        htmlFor={ `select-filter-column-${column.text}` }
+      >
         <span className="sr-only">Filter by { column.text }</span>
         <select
           { ...rest }
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index a4268c4..1995ebe 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -94,7 +94,10 @@ class TextFilter extends Component {
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <label htmlFor={ `text-filter-column-${text}` }>
+      <label
+        className="filter-label"
+        htmlFor={ `text-filter-column-${text}` }
+      >
         <span className="sr-only">Filter by {text}</span>
         <input
           { ...rest }
diff --git a/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss b/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss
index e2304b6..445579e 100644
--- a/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss
+++ b/packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss
@@ -1,3 +1,7 @@
+.react-bootstrap-table > table > thead > tr > th .filter-label {
+  display: block !important;
+}
+
 .react-bootstrap-table > table > thead > tr > th .filter {
   font-weight: normal;
 }
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index a8ca9d1..64e148f 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -59,7 +59,10 @@ class SearchBar extends React.Component {
     } = this.props;
 
     return (
-      <label htmlFor={ `search-bar-${tableId}` } className="w-100">
+      <label
+        htmlFor={ `search-bar-${tableId}` }
+        className="search-label"
+      >
         <span className="sr-only">Search this table</span>
         <input
           ref={ n => this.input = n }
diff --git a/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss b/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss
index e69de29..c840023 100644
--- a/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss
+++ b/packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss
@@ -0,0 +1,3 @@
+.search-label {
+  display: block !important;
+}
\ No newline at end of file