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] 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