fix(FilterSidePanel/VerticalTabs): Adjust top and bottom spacing of f…

…ilter-side-panel and vertical-t (#877)

.filter-panel-pf has top and bottom padding, which causes layout issues when it's the only item
being used.  Removing the top and bottom padding and adding a bottom margin fixes the bug and
provides the proper spacing if another element is used.  As a result of these changes,
.vertical-tabs-pf needs to have a larger bottom margin set on it.

packages/patternfly-3/patternfly-react-extensions/less/filter-side-panel.less

@@ -1,5 +1,6 @@
 .filter-panel-pf {
-  padding: 20px 15px;
+  margin: 0 0 30px;
+  padding: 0 15px;
 }
 
 .filter-panel-pf-category {

packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less

@@ -1,6 +1,11 @@
 .vertical-tabs-pf {
-  padding: 0;
   list-style: none;
+  margin: 0 0 30px;
+  padding: 0;
+
+  .vertical-tabs-pf {
+    margin-bottom: 0;
+  }
 }
 
 .vertical-tabs-pf-tab {

packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_filter-side-panel.scss

@@ -1,5 +1,6 @@
 .filter-panel-pf {
-  padding: 20px 15px;
+  margin: 0 0 30px;
+  padding: 0 15px;
 }
 
 .filter-panel-pf-category {

packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss

@@ -1,6 +1,11 @@
 .vertical-tabs-pf {
-  padding: 0;
   list-style: none;
+  margin: 0 0 30px;
+  padding: 0;
+
+  .vertical-tabs-pf {
+    margin-bottom: 0;
+  }
 }
 
 .vertical-tabs-pf-tab {

packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanel.stories.js

@@ -18,7 +18,7 @@ const stories = storiesOf(
 stories.addDecorator(
   defaultTemplate({
     title: 'Filter Side Panel',
-    description: 'Note: the width and border styling is not part of the FilterSidePanel.'
+    description: 'Note: the width, border, and top padding styling are not part of the FilterSidePanel.'
   })
 );
 
@@ -49,7 +49,7 @@ stories.add(
       step: 1
     });
     return (
-      <div style={{ width: '195px', border: '1px solid grey' }}>
+      <div style={{ width: '195px', border: '1px solid grey', paddingTop: '20px' }}>
         <MockFilterSidePanelExample maxShowCount={maxShowCountValue} leeway={leewayValue} />
       </div>
     );