feat: pfe-tabs style updates (#948)

* feat Add support for empty local variables

* feat CHANGELOG udpate

* feat Working through local variable updates

* feat Working through challenges moving to empty variables in the component mixins

* feat Applying empty local variables

* feat Fix typo in band story

* feat Add some more documentation to the sass

* feat Update local function references and update toast for local vars

* feat Remove commented out variable print

* feat Update modal

* feat Update tabs

* feat Add theming to page-status

* feat Adjusting implementation on the accordion

* Simplify functions!

* feat Fix improperly escaped parens

* feat Update documentation

* feat Update documentation with best practices

* feat Revert accidental updates to variable names

* feat Clean up unnecessary interpolation

* feat Remove unnecessary interpolation from autocomplete

* feat Remove unneeded interpolation from avatar, badge, and band

* feat Cleaning up references and interpolation in band, card

* Apply suggestions from code review

* feat Fix compile error

* feat Revert doc updates, new PR opened for these

* feat Update changelog, remove doc update

* feat Working through dropdown updates

* feat Fix a find-replace error in doc for pfe-surface

* feat Rename and remove alias for set local function

* feat Abstract repo variable and local value

* feat Ensure all pfe prefixes reference repo var

* feat Replace repo variable across the project

* feat dropdown items using new syntax now

* feat Jump links still broken but bringing items together to make styling easier

* feat Add empty local variable updates to pfe-jump-links

* feat Fix band local theme ref

* feat Remove change to jump links template

* Remove dupe from changelog

* feat Use the pfe-print-local tool in accordion

* feat Apply updated format to pfe-cta

* feat Update modal

* feat Adjust navigation and select components for new empty loca vars

* feat Add context to broadcasted output

* feat Clean up empty map

* feat git checkout origin/master -- elements/**/package-lock.json

* feat Pull out package-lock updates

* feat Adjust maxWidth on cta

* feat Fix self-referencing broadcast variables

* US251839 tab style updates

* Update elements/pfe-sass/functions/_custom-properties.scss

Co-authored-by: Kendall Totten <[email protected]>

* updates from pair programming session

* sass updates

* some code clean up

* fix tab shift when tab goes from not active to active

* feat Remove interpolation from pfe-toast and revert variablizing --pfe on custom props

* add ie11 fixes

* some code clean up

* some code clean up

* feat Update generator notes and docs; add backwards support in avatar

* some code clean up

* feat Add comments to self-referential maps

* feat Navigation item, remove interpolation and commented out code

* feat Update a few merges to deep merge with LOCAL-VARIABLES maps; add comments

* feat Move new maps to shared assets file for readability

* feat Backwards compatibility for pfe-dropdown

* feat Fallback for pfe-dropdown property naming

* feat Additional fallback styles for variable naming

* dark theme tweaks

* Updates from design review

* updates from design review

* attempt at fix for focus state for tabs with sudo element

* Move styles for extra borders on vertical wind variant into pfe-tabs template

* dark vertical styling

* style clean up

* dark earth style update

* updeates from code review

* fix for vertical earth tabs on dark

* add saturated band to pfe tabs demo page

* updates from CR

* some CR changes

* add missed tab padding updates

* saturate hover color fix

* remove package-lock files

* Update CHANGELOG-prerelease.md

* Update CHANGELOG-prerelease.md

* Removing unrelated files from latest merge with master

* Assist with interpolation clean-up

* updates from code review

* changes for red hat theme tab font size

* add fix for earth vertical tab alignment and earth saturated font color

* style fixes

* update ie11 style

* fix active state

* fix default dark wind color

* ie11 fixes

* pfe-tabs fork: Debugging tools, var name updates + backwards compatibility (#1005)

* Add back debugging mixin to print local variables for testing. Update names of variables in local map for BEM & consistency, move old vars to backwards-compatibility map.

* Simplify border properties; use regular css properties instead of redefining local vars as often. Add ui-border vars.

* Add comment to new mixin.  Add links to pfe-tab demo to ensure tab index works in tab panels. Run prettier on the pfe-tab sass. Clean up ie11 styles, remove magic numbers & replace with pfe-fetch.
Update tab panel colors & border placement per feedback from Corey.
Add support for padding adjustments to panel per breakpoint; change tab width. Update demo file so its full width to demonstrate spacing.
Restore tab and panel variable regions.
Add weird background colors to demo so you can see where tabs have background colors.
Restore use of surface--border var, delete ui-border

* add inset to earth variant to prevent weird border visuals & match pfe core

* remove commented out lines; deprecate unusable padding variables in parent file

* Update debug mixin to lean on pfe-print-local mixin #singlesourceoftruth
Rearrange & de-dupe selectors in pfe-tab sass file
Fix vertical variants on mobile

* Add broadcast variables to tab panels;
Remove ie11 overrides from pfe-tab

* Update elements/pfe-tabs/src/pfe-tab.scss

Co-authored-by: [ Cassondra ] <[email protected]>

* Remove debugging code, cleanup fallbacks

* move fallbacks to local vars map

* move fallbacks to local vars map

* Update backwards compatibility map & references in file to use new variables

* Update CHANGELOG-prerelease.md

* Fix text colors

* Catch up with the latest colors

* Fix hover state border jumpiness

* remove nth child extra specificity, fix border width on vertical earth

* reduce duplicate selectors

* remove @at-root

* removed unused var

* tidy

* use text--on-dark instead of surface--lightest for typography

* Move color into .pfe > * for specificity, run prettier, add color & color--focus vars to dark / saturated sets

* remove ie11 override

* Fix the dang first/last borders on vertical earth variants

* formatting

* Tidy @at-root

* add interpolation for local var value

* remove debug

* resolve jumpy borders on vertical earth variants

* revert demo css

Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: Kendall Totten <[email protected]>

Author: 4 people

CHANGELOG-prerelease.md

@@ -2,6 +2,7 @@
 
 - [6ef7f74](https://github.com/patternfly/patternfly-elements/commit/6ef7f74bfe22b259373f3485a46b21f37aa7196e) fix: pfe-accordion border styles (#1002)
 - [572ea91](https://github.com/patternfly/patternfly-elements/commit/572ea9133373ab91e99c2fc6e67aa6fb1a0d1ed0) feat: UI colors should match PF core (#895)
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-tab style updates (#814)
 
 ## Prerelease 53 ( 2020-07-21 )
 

elements/pfe-sass/maps/_colors.scss

@@ -14,14 +14,14 @@ $pfe-colors: (
   link--focus:                 $pf-color-blue-500,
 
   text--on-dark:               $pf-color-white,
-  text--muted--on-dark:        $pf-color-white,
+  text--muted--on-dark:        $pf-color-black-300,
   link--on-dark:               $pf-color-blue-200,
   link--visited--on-dark:      $pf-color-blue-100,
   link--hover--on-dark:        $pf-color-blue-100,
   link--focus--on-dark:        $pf-color-blue-100,
 
   text--on-saturated:          $pf-color-white,
-  text--muted--on-saturated:   $pf-color-white,
+  text--muted--on-saturated:   $pf-color-black-300,
   link--on-saturated:          $pf-color-white,
   link--visited--on-saturated: $pf-color-purple-400,
   link--hover--on-saturated:   $pf-color-black-100,
@@ -154,4 +154,5 @@ $pfe-colors: (
   feedback--default--darkest:         $pf-color-black-800,
 
   overlay:                            rgba($pf-color-black-900, .5)
-);
+);
+

elements/pfe-sass/maps/_general.scss

@@ -26,12 +26,14 @@ $pfe-vars: (
   surface--border-width--heavy:  4px,
   surface--border-style:         solid,
   surface--border-radius:        3px,
+  surface--border-width--active: 3px,
 
   icon-size:                     1em,
-  
+
   ui--element--size:             20px,
 
   ui--border-width:              1px,
+  ui--border-width--active:      3px,
   ui--border-style:              solid,
   ui--border-radius:             2px,
 

elements/pfe-tabs/demo/demo.css

@@ -57,18 +57,34 @@ section.pfe-l-grid {
 .example>h2 {
     text-align: right;
 }
+section>h2 {
+    margin-top: 2em;
+}
 
 .subheading {
   margin: 0;
   font-size: 18px;
   font-weight: bold;
   font-family: "Arial";
 }
-
+.inner {
+   margin: auto;
+   max-width:1140px;
+   padding: 50px 0;
+}
+.light-background {
+    background-color: rgb(252, 250, 244);
+    --theme: light;
+}
 .dark-background {
-    background-color: #151515;
+    background-color: #383333;
     --theme: dark;
 }
+.saturated-background {
+    background-color: teal;
+    --theme: saturated;
+}
+
 
 .floating-card {
     float: left;
@@ -123,4 +139,4 @@ button.form-ui {
     height: 2em;
     font-size: 1em;
     padding: 2px 5px;
-}
+}

elements/pfe-tabs/demo/index.html

@@ -2,22 +2,26 @@
 
 $LOCAL: tabs;
 
-$LOCAL-VARIABLES: (
-  focus:  pfe-var(link)
-);
+$LOCAL-VARIABLES: (focus: pfe-var(link),
+  panel: ( // to avoid collisions with tab header
+    BackgroundColor: transparent,
+    Padding: pfe-var(container-spacer),
+    BorderTop: 0,
+    BorderRight: 0,
+    BorderBottom: 0,
+    BorderLeft: 0,
+  ));
+
+////////////////////////////////
 
 :host {
-
   display: block;
+  color: pfe-broadcasted(text);
 
   @at-root #{&}(:focus) {
     outline: none;
   }
 
-  ::slotted(*) {
-    color: #{pfe-broadcasted(text)};
-  }
-
   [tabindex] {
     display: flex;
     height: 100%;
@@ -26,69 +30,105 @@ $LOCAL-VARIABLES: (
   .container {
     margin: 0;
     width: 100%;
-    padding: #{pfe-local($cssvar: Padding, $region: panel, $fallback: #{pfe-var(container-spacer)} 0)};
+    background-color: pfe-local(BackgroundColor, $region: panel);
+    border-top: pfe-local(BorderTop, $region: panel);
+    border-right: pfe-local(BorderRight, $region: panel);
+    border-bottom: pfe-local(BorderBottom, $region: panel);
+    border-left: pfe-local(BorderLeft, $region: panel);
+
+    padding: pfe-local(Padding, $region: panel); //16px
 
-    border-top:    #{pfe-local(BorderTop, 0, $region: panel)};
-    border-right:  #{pfe-local(BorderRight, 0, $region: panel)};
-    border-bottom: #{pfe-local(BorderBottom, 0, $region: panel)};
-    border-left:   #{pfe-local(BorderLeft, 0, $region: panel)};
+    @media screen and (min-width: pfe-breakpoint(md)) {
+      padding: calc(#{pfe-local(Padding, $region: panel)} * 2);
+    }
+
+    @media screen and (min-width: pfe-breakpoint(lg)) {
+      padding: calc(#{pfe-local(Padding, $region: panel)} * 3);
+    }
+
+    @media screen and (min-width: pfe-breakpoint(xl)) {
+      padding: calc(#{pfe-local(Padding, $region: panel)} * 4);
+    }
 
     @include pfe-clearfix;
+
     @include browser-query(ie11) {
       padding: 1em;
-      background-color: #{map-get($pfe-colors, surface--lightest)} !important;
-      color: #{pfe-var(text)} !important;
+      background-color: pfe-fetch(surface--lightest) !important;
+      color: pfe-fetch(text) !important;
     }
   }
 }
 
+:host([hidden]) {
+  display: none;
+}
+
 /// ===========================================================================
 /// HORIZONTAL
 /// ===========================================================================
 :host([pfe-variant="earth"]) {
-  --pfe-tabs__panel--Padding: calc(#{pfe-var(container-spacer)} * 2);
-
-  --pfe-tabs__panel--BorderRight: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-var(surface--border)};
-  --pfe-tabs__panel--BorderBottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-var(surface--border)};
-  --pfe-tabs__panel--BorderLeft: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-var(surface--border)};
-
 
   @include browser-query(ie11) {
     .container {
+      background-color: pfe-fetch(surface--lightest);
       padding: 1em;
-      border-right: 1px solid #{pfe-var(surface--border)};
-      border-bottom: 1px solid #{pfe-var(surface--border)};
-      border-left: 1px solid #{pfe-var(surface--border)};
+      border-right: 1px solid pfe-fetch(surface--border);
+      border-bottom: 1px solid pfe-fetch(surface--border);
+      border-left: 1px solid pfe-fetch(surface--border);
     }
   }
 }
 
+
 /// ===========================================================================
 /// VERTICAL
 /// ===========================================================================
+
 @media screen and (min-width: #{pfe-breakpoint(md)}) {
   :host([pfe-variant="wind"][vertical]) {
-    --pfe-tabs__panel--Padding: #{pfe-var(container-spacer)} 0 #{pfe-var(container-spacer)} calc(#{pfe-var(container-spacer)} * 2);
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
 
     @include browser-query(ie11) {
       .container {
         padding: 1em 0 1em 2em;
       }
     }
-	}
+  }
 
-	:host([pfe-variant="earth"][vertical]) {
-    --pfe-tabs__panel--BorderTop:   #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-var(surface--border)};
+  :host([pfe-variant="earth"][vertical]) {
+    border-top: 0px;
+    border-left: pfe-var(ui--border-width) pfe-var(ui--border-style) pfe-var(surface--border);
     height: 100%;
-    
+
     @include browser-query(ie11) {
       .container {
-        border-top: 1px solid #{pfe-var(surface--border)};
+        border-top: 1px solid pfe-fetch(surface--border);
       }
     }
-	}
+  }
 }
 
-:host([hidden]) {
-  display: none;
+/// ===========================================================================
+/// CONTEXTS: DARK & SATURATED
+/// ===========================================================================
+/// In dark & saturated contexts, we override the local color vars
+:host([pfe-variant="earth"][on="dark"]) {
+  --pfe-tabs__panel--BackgroundColor: #{pfe-var(surface--darkest)};
+  @include pfe-set-broadcast-theme(dark);
+}
+
+:host([pfe-variant="earth"][on="saturated"]) {
+  --pfe-tabs__panel--BackgroundColor: #{pfe-var(surface--lightest)};
+  @include pfe-set-broadcast-theme(light);
 }
+
+:host([pfe-variant="wind"][on="saturated"]) {
+  @include pfe-set-broadcast-theme(saturated);
+}
+
+:host([pfe-variant="wind"][on="dark"]) {
+  @include pfe-set-broadcast-theme(dark);
+}