fix(pageColumns): apply column spacer on multicolumn views (#615)

RedHatInsights · Apr 13, 2021 · 8855a89 · 8855a89
1 parent 4b96da9
commit 8855a89
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageColumns.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageColumns.test.js.snap
@@ -5,6 +5,11 @@ exports[`PageColumns Component should render a basic component: basic 1`] = `
   className="lorem"
 >
   <Flex
+    alignItems={
+      Object {
+        "sm": "alignItemsStretch",
+      }
+    }
     className="curiosity-page-columns lorem"
     spaceItems={
       Object {
@@ -13,7 +18,7 @@ exports[`PageColumns Component should render a basic component: basic 1`] = `
     }
   >
     <div
-      className="pf-l-flex pf-m-space-items-none-on-sm curiosity-page-columns lorem"
+      className="pf-l-flex pf-m-space-items-none-on-sm pf-m-align-items-stretch-on-sm curiosity-page-columns lorem"
     >
       <FlexItem
         className="curiosity-page-columns-column"

diff --git a/src/components/pageLayout/pageColumns.js b/src/components/pageLayout/pageColumns.js
@@ -12,7 +12,11 @@ import { helpers } from '../../common';
  * @returns {Node}
  */
 const PageColumns = ({ children, className }) => (
-  <Flex spaceItems={{ sm: 'spaceItemsNone' }} className={`curiosity-page-columns ${className}`}>
+  <Flex
+    alignItems={{ sm: 'alignItemsStretch' }}
+    spaceItems={{ sm: 'spaceItemsNone' }}
+    className={`curiosity-page-columns ${className}`}
+  >
     {React.Children.toArray(children)
       .filter(child => React.isValidElement(child))
       .map(child => (

diff --git a/src/styles/_page-layout.scss b/src/styles/_page-layout.scss
@@ -1,8 +1,6 @@
-.curiosity,
 .curiosity-page-messages,
 .curiosity-page-toolbar,
 .curiosity-page-section,
-.curiosity-page-columns,
 .curiosity-page-columns-column {
   background-color: var(--pf-global--BackgroundColor--100);
   min-width: 320px;
@@ -12,6 +10,12 @@
 .curiosity-page-columns-column {
   margin-left: var(--pf-global--spacer--sm);
   margin-right: var(--pf-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--sm);
-  padding-right: var(--pf-global--spacer--sm)
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
 }
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
@@ -8,6 +8,15 @@
   }
 }
 
+.curiosity-page-columns-column {
+  .curiosity-page-toolbar {
+    .curiosity-toolbar {
+      padding-left: var(--pf-global--spacer--lg);
+      padding-right: var(--pf-global--spacer--lg);
+    }
+  }
+}
+
 .curiosity-input__display-name {
   &.pf-c-form-control.pf-m-search {
     /**