From abc8cc13aa165bb37411b9af01967e9cf3ddb4a9 Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Wed, 7 Nov 2018 08:57:37 -0500
Subject: [PATCH] fix(FilterSidePanel/VerticalTabs): Adjust top and bottom
 spacing of filter-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.
---
 .../less/filter-side-panel.less                            | 3 ++-
 .../patternfly-react-extensions/less/vertical-tabs.less    | 7 ++++++-
 .../patternfly-react-extensions/_filter-side-panel.scss    | 3 ++-
 .../sass/patternfly-react-extensions/_vertical-tabs.scss   | 7 ++++++-
 .../components/FilterSidePanel/FilterSidePanel.stories.js  | 4 ++--
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/patternfly-3/patternfly-react-extensions/less/filter-side-panel.less b/packages/patternfly-3/patternfly-react-extensions/less/filter-side-panel.less
index 11a7fccf591..74d00161cf2 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/filter-side-panel.less
+++ b/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 {
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less b/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less
index 30113f6ac8b..cd906b6fa55 100644
--- a/packages/patternfly-3/patternfly-react-extensions/less/vertical-tabs.less
+++ b/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 {
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_filter-side-panel.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_filter-side-panel.scss
index e5cafb412f4..d893f0879bf 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_filter-side-panel.scss
+++ b/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 {
diff --git a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss b/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss
index 6e046a338f9..ad9c3e2ebdf 100644
--- a/packages/patternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_vertical-tabs.scss
+++ b/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 {
diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanel.stories.js b/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanel.stories.js
index 0375e0f8e0f..9a19a425f87 100644
--- a/packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/FilterSidePanel.stories.js
+++ b/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>
     );