Merge pull request #157 from epwinchell/toolbar_fix

Toolbar tag fix
ManageIQ · Oct 29, 2019 · f207827 · f207827
2 parents b6393d6 + 764f278
commit f207827
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/src/toolbar/Toolbar.jsx b/src/toolbar/Toolbar.jsx
@@ -73,9 +73,9 @@ export const ToolbarGroup = ({ group, onClick }) => {
   }
 
   return (
-    <span className="miq-toolbar-group form-group">
+    <div className="miq-toolbar-group form-group">
       {visibleItems.map((i, index) => buttonCase(i, index, onClick))}
-    </span>
+    </div>
   );
 };
 

diff --git a/src/toolbar/stories/Toolbar.stories.js b/src/toolbar/stories/Toolbar.stories.js
@@ -11,24 +11,28 @@ const toolbarBigData = require('../data/toolbar-big.json');
 storiesOf('Toolbar', module)
   .add('Toolbar', () => (
     <React.Fragment>
-      <div style={{ padding: 16 }}>
+      <div className="container-fluid">
         <div className="toolbar-pf row">
-          <Toolbar
-            onClick={action('Toolbar click')}
-            onViewClick={action('Toolbar click')}
-            groups={toolbarData}
-            views={viewData}
-          />
+          <div className="col-sm-12">
+            <Toolbar
+              onClick={action('Toolbar click')}
+              onViewClick={action('Toolbar click')}
+              groups={toolbarData}
+              views={viewData}
+            />
+          </div>
         </div>
       </div>
-      <div style={{ padding: 16 }}>
+      <div className="container-fluid">
         <div className="toolbar-pf row">
-          <Toolbar
-            onClick={action('Toolbar click')}
-            onViewClick={action('Toolbar click')}
-            groups={toolbarBigData}
-            views={viewData}
-          />
+          <div className="col-sm-12">
+            <Toolbar
+              onClick={action('Toolbar click')}
+              onViewClick={action('Toolbar click')}
+              groups={toolbarBigData}
+              views={viewData}
+            />
+          </div>
         </div>
       </div>
     </React.Fragment>

diff --git a/src/toolbar/styles.scss b/src/toolbar/styles.scss
@@ -18,13 +18,9 @@
   }
 }
 
-// copied: ui-components/src/styles/ui-components.scss
-// overrides _toolbar.scss to account for intermediate Angular markup and adjusted the margins to properly style wrapped form-groups
 .miq-toolbar-actions {
   margin-top: -10px;
-  .form-group:first-of-type {
-    padding-left: 0;
-  }
+  margin-left: -20px;  /* this compensates for toolbar-pf-filter not being in the first position */
   .form-group {
     margin-top: 10px;
     padding-left: 20px;