Merge branch 'issue-360/band-body-grid-gap' of github.com:patternfly/patternfly-elements into issue-360/band-body-grid-gap

Author: starryeyez024

docs/assets/pfe-base-sass/variables/_colors.scss

@@ -160,7 +160,7 @@ $pfe-global--disabled-state--BorderColor:        $pfe-global--color--gray-mercur
 // Theme colors
 // ========================================================================
 
-// I think these are misplaced. Should be in cp-theme instead.
+// @TODO I think these are misplaced. Should be in the theme instead
 // $pfe-global--primary-color:         $pfe-global--color--red !default;
 // $pfe-global--secondary-color:       $pf-color-black-600 !default;
 //

docs/assets/sass/_colors.scss

@@ -160,7 +160,7 @@ $pfe-global--disabled-state--BorderColor:        $pfe-global--color--gray-mercur
 // Theme colors
 // ========================================================================
 
-// I think these are misplaced. Should be in cp-theme instead.
+// @TODO I think these are misplaced. Should be in the theme instead.
 // $pfe-global--primary-color:         $pfe-global--color--red !default;
 // $pfe-global--secondary-color:       $pf-color-black-600 !default;
 //

docs/content/theme/pfe-layouts.md

@@ -12,7 +12,6 @@ tags = [ "theme" ]
 <link rel="stylesheet" type="text/css" href="//overpass-30e2.kxcdn.com/overpass.css">
 <link rel="stylesheet" type="text/css" href="../pfe-layouts.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css">
-<link rel="stylesheet" type="text/css" href="../../cp-themeset/cp-themeset.css">
 
 <style>
 

elements/pfe-accordion/demo/index.html

@@ -5,7 +5,6 @@
     <title>PFElements: pfe-accordion Demo</title>
 
     <link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
-    <!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
 
     <noscript>
       <link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">

elements/pfe-autocomplete/README.md

@@ -4,15 +4,12 @@
 
 ## Install
 ```
-npm install @patternfly/cp-theme
 npm install @patternfly/pfe-autocomplete
 ```
 
-cp-theme is a package that contains css variables setting that is used for theming patternfly elements.
 
 Once installed, import it to your application:
 ```
-import '@patternfly/cp-theme.umd.js';
 import '@patternfly/pfe-autocomplete.umd.js';
 ```
 

elements/pfe-autocomplete/demo/index.html

@@ -15,7 +15,6 @@
     <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
     <script>require([
-      '../../../themes/cp-theme/cp-theme.umd.js',
       '../pfe-autocomplete.umd.js'
     ])</script>
   </head>

elements/pfe-avatar/demo/index.html

@@ -21,7 +21,6 @@
     <!--   })</script> -->
 
     <script type="module" src="../pfe-avatar.js"></script>
-    <script src="../../../themes/cp-theme/cp-theme.umd.js"></script>
 
     <style type="text/css" media="screen">
       /* :root {

elements/pfe-avatar/demo/pfe-avatar.story.js

@@ -2,6 +2,20 @@
 
 $LOCAL: band;
 
+%flex-fallback {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    margin-bottom: #{pfe-local(gutter--vertical)};
+}
+
+%grid-layout {
+  display: grid;
+  grid-row-gap: #{pfe-local(gutter--vertical)};
+  grid-column-gap: #{pfe-local(gutter--horizontal)};
+  margin-bottom: 0;
+}
+
 :host {
   display: block;
 
@@ -55,9 +69,7 @@ $LOCAL: band;
 
   // Wrapper sets padding and background visuals
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-items: flex-start;
+  @extend %flex-fallback;
 
   // Padding 
   padding: calc(#{pfe-local(Padding--vertical)} / 2)  #{pfe-local(Padding--horizontal)};
@@ -99,45 +111,6 @@ $LOCAL: band;
   --pfe-band--Padding:   calc(#{pfe-local(Padding--vertical)} / 4)  #{pfe-local(Padding--horizontal)};
 }
 
-.pfe-band__header,
-.pfe-band__body,
-.pfe-band__aside,
-.pfe-band__footer {
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: flex-start;
-    margin-bottom: #{pfe-local(gutter--vertical)};
-}
-
-@supports (display: grid) {
-    .pfe-band__header,
-    .pfe-band__body,
-    .pfe-band__aside,
-    .pfe-band__footer {
-        display: grid;
-        grid-row-gap: var(--pfe-band--gutter--vertical);
-        grid-column-gap: var(--pfe-band--gutter--horizontal);
-        margin-bottom: 0;
-    }
-    .pfe-band__header {
-        grid-area: header;
-        grid-template-columns: var(--pfe-band__header--layout);
-    }
-    .pfe-band__footer {
-        grid-area: footer;
-        grid-template-columns: var(--pfe-band__footer--layout);
-    }
-    .pfe-band__aside {
-        grid-area: aside;
-        grid-template-columns: var(--pfe-band__aside--layout);
-    }
-    .pfe-band__body {
-        grid-area: body;
-        grid-template-columns: var(--pfe-band__body--layout);
-        margin-bottom: 0;
-    }
-}
-
 .pfe-band {
   &__container {
     // Does not need to be wrapped in @supports because it updates variables
@@ -227,12 +200,11 @@ $LOCAL: band;
     position:  relative;
     margin:    0 auto;
     width: #{pfe-local(Width)};
-    
+    @extend %flex-fallback;
+
     // Grid support styles
     @supports (display: grid) {
-      display:               grid;
-      grid-row-gap:          #{pfe-local(gutter--vertical)};
-      grid-column-gap:       #{pfe-local(gutter--horizontal)};
+      @extend %grid-layout;
       grid-template-columns: #{pfe-local(layout)};
       grid-template-rows:    max-content;
       grid-template-areas:   var(--pfe-band--gridTemplateArea_mobile);
@@ -241,4 +213,18 @@ $LOCAL: band;
       }
     }
   }
+  // For each section in the band layout
+  @each $section in (header, body, aside, footer) {
+    &__#{$section} { // i.e., pfe-band__header
+      @extend %flex-fallback; // Add the flex fallback styles
+      // Apply the standard grid
+      @supports (display: grid) {
+          @extend %grid-layout;
+          // Apply the section as a named grid-area
+          grid-area: #{$section};
+          // Allow users to hook into the layout with custom columns
+          grid-template-columns: var(--pfe-band__#{$section}--layout);
+      }
+    }
+  }
 }

elements/pfe-band/src/pfe-band.scss

@@ -4,15 +4,6 @@
     <meta charset="utf-8">
     <title>PFElements: pfe-card Demo</title>
 
-    <!-- needed for CP-Theme -->
-    <link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
-    <!--
-      if support for IE11 IS NOT needed, just include the stylesheet
-      than contains all of the variables for your themeset
-    -->
-    <!-- use cp-theme -->
-    <!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
-
     <!-- uncomment the es5-adapter if you're using the umd version -->
     <script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
     <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
@@ -24,7 +15,6 @@
     -->
     <script>
         require([
-          '../../../themes/cp-theme/cp-theme.umd.js',
           '../../pfe-cta/pfe-cta.umd.js',
           '../pfe-card.umd.js'
         ]);