origin/US198278-tab-design-updates copy variant to panel, update panel mixin to use arguments for borders & padding

Author: starryeyez024

elements/pfe-sass/mixins/_mixins.scss

@@ -355,14 +355,19 @@
     --pfe-tabs--aux: #{pfe-color(ui-tab--dark-hover-color)};
 }
 
-@mixin pfe-tab-panel-container {
-    border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
-    border-top: none;
-    padding: #{pfe-var(container-spacer)};
-    padding: calc(#{pfe-var(container-spacer)} * 2);
+@mixin pfe-tab-panel-container($orientation: "horizontal", $border: false) {
+    padding: #{pfe-var(container-spacer)} 0;
+    @if $orientation == "vertical" {
+      padding-left: calc(#{pfe-var(container-spacer)} * 2);
+    }
+    @if $border {
+      padding: calc(#{pfe-var(container-spacer)} * 2);
+      border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
+      @if $orientation == "horizontal" {
+        border-top: none;
+      }
+      @if $orientation == "vertical" {
+        border-left: none;
+      }
+    }
 }
-
-@mixin pfe-tab-panel-container-vertical {
-    border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)}  #{pfe-color(surface--border)};
-    border-left: none;
-}

elements/pfe-tabs/demo/index.html

@@ -5,9 +5,11 @@
     <title>PatternFly Elements: pfe-tabs Demo</title>
 
     <link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
+
+    <!--
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
-    <!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
+    <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>

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

@@ -3,19 +3,27 @@
 :host {
   display: block;
   color: var(--pfe-broadcasted--color--text);
-
-	.container {
-		@include pfe-tab-panel-container;
-	}
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([vertical]) {
+/* Horizontal */
+:host([pfe-variant="wind"]) .container {
+	@include pfe-tab-panel-container;
+}
+
+:host([pfe-variant="earth"]) .container {
+	@include pfe-tab-panel-container($border: true);
+}
 
-	.container {
-		@include pfe-tab-panel-container-vertical;
-	}
+/* Vertical */
+:host([pfe-variant="wind"][vertical]) .container {
+	@include pfe-tab-panel-container($orientation: "vertical");
 }
+
+:host([pfe-variant="earth"][vertical]) .container {
+	@include pfe-tab-panel-container($orientation: "vertical", $border: true);
+}
+

elements/pfe-tabs/src/pfe-tabs.js

@@ -123,7 +123,7 @@ class PfeTabs extends PFElement {
   }
 
   static get observedAttributes() {
-    return ["vertical", "selected-index", "pfe-variant", "on"];
+    return ["vertical", "selected-index", "pfe-variant"];
   }
 
   get selectedIndex() {
@@ -181,17 +181,15 @@ class PfeTabs extends PFElement {
           this._allTabs().forEach(tab =>
             tab.setAttribute("pfe-variant", "wind")
           );
+          this._allPanels().forEach(panel =>
+            panel.setAttribute("pfe-variant", "wind")
+          );
         } else if (this.getAttribute("pfe-variant") === "earth") {
           this._allTabs().forEach(tab =>
             tab.setAttribute("pfe-variant", "earth")
           );
-        }
-        break;
-
-      case "on":
-        if (this.getAttribute("on") === "dark") {
-          this._allTabs().forEach(tab =>
-            tab.setAttribute("on", "dark")
+          this._allPanels().forEach(panel =>
+            panel.setAttribute("pfe-variant", "earth")
           );
         }
         break;