fix: Add clearfix to tabs & accordions, in case of floating content (#835)

* Add clearfix to tabs & accordions, in case of floating content
* Update demo pages with floating cards

Author: starryeyez024

CHANGELOG-prerelease.md

@@ -1,6 +1,7 @@
 ## Prerelese 46 ( TBD )
 
-- []() fix: pfe-tabs check for tagName on addedNode mutation before continuing
+- [27fee5f](https://github.com/patternfly/patternfly-elements/commit/27fee5f5c5eb021ac126f3767dd0299f5cda8231) fix: pfe-tabs check for tagName on addedNode mutation before continuing
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Add clearfix within tab and accordion panels
 
 ## Prerelese 45 ( 2020-04-27 )
 

elements/pfe-accordion/demo/index.html

@@ -90,6 +90,13 @@
       .custom-styles h2 {
           margin-top: 0;
       }
+      .floating-card {
+        float: left;
+        width:48%;
+        margin-right:2%;
+        border: #eee solid 1px;
+        padding: 20px;
+      }
     </style>
 
     <pfe-band pfe-color="lightest">
@@ -121,12 +128,15 @@ <h3>Panel with multiple paragraphs</h3>
             </pfe-accordion>
           </pfe-accordion-panel>
           <pfe-accordion-header>
-            <h3>Panel with links</h3>
+            <h3>Panel with links & floating cards</h3>
           </pfe-accordion-header>
           <pfe-accordion-panel>
-            <p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to
-              repeat common phrases or serve as a general representation of the individual
-              they depict. A portrait of his parents would not be of much help to Harry.</p>
+              <div class="floating-card">
+                <p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.</p>              
+              </div>
+              <div class="floating-card">
+                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
           </pfe-accordion-panel>
           <pfe-accordion-header>
             <h3>Panel with CTA</h3>

elements/pfe-accordion/src/pfe-accordion-panel.scss

@@ -19,6 +19,7 @@ $LOCAL: accordion;
 }
 
 .container {
+  @include pfe-clearfix;
   @include pfe-panel-container;
   --pfe-accordion--panel-container--Padding: 0 calc(#{pfe-local(base--Padding)} * 3) #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5);
 }

elements/pfe-content-set/demo/index.html

@@ -89,6 +89,13 @@
       color: white;
       float: right;
     }
+    .floating-card {
+      float: left;
+      width:48%;
+      margin-right:2%;
+      border: #eee solid 1px;
+      padding: 20px;
+    }
 
   </style>
 </head>
@@ -118,14 +125,17 @@ <h4 pfe-content-set--header>Heading 2</h4>
         porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
         mollis interdum.</div>
       <h4 pfe-content-set--header>Heading 3</h4>
-      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
-        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
-        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
-        fermentum.</div>
+      <div pfe-content-set--panel>
+          <div class="floating-card">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+          <div class="floating-card">
+            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+      </div>
     </pfe-content-set>
   </section>
 
-
   <section class="faux-container" style="max-width: 800px">
     <h4 class="label">Default pfe-content-set in a 800px container</h4>
 

elements/pfe-tabs/demo/index.html

@@ -55,6 +55,13 @@
       .dark-background {
         background-color: #000;
       }
+      .floating-card {
+        float: left;
+        width:48%;
+        margin-right:2%;
+        border: #eee solid 1px;
+        padding: 20px;
+      }
     </style>
 
     <noscript>
@@ -96,10 +103,12 @@ <h2>Content 2</h2>
           <pfe-tab role="heading" slot="tab" id="tab3">Tab 3</pfe-tab>
           <pfe-tab-panel role="region" slot="panel">
             <h2>Content 3</h2>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <div class="floating-card">
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+            <div class="floating-card">
+              <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>            
           </pfe-tab-panel>
       </pfe-tabs>
 

elements/pfe-tabs/src/pfe-tab-panel.scss

@@ -33,6 +33,7 @@ $variables: (
     border-bottom: #{pfe-local($cssvar: BorderBottom, $region: panel, $fallback: 0)};
     border-left:   #{pfe-local($cssvar: BorderLeft, $region: panel, $fallback: 0)};
 
+    @include pfe-clearfix;
     @include browser-query(ie11) {
       padding: 1em;
       background-color: #{map-get($pfe-colors, surface--lightest)} !important;