feat: Add support for empty local variables (#854)

* 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

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

Co-authored-by: Kendall Totten <ktotten@redhat.com>

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

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

* 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

* feat Align pfe-health-index with design variables

* feat Update variable use in pfe-health-index

* feat Add TODO notes

* feat Setting up accordion for future updates to allow for empty local vars

* remove repo find/replace in comments

Co-authored-by: Kendall Totten <ktotten@redhat.com>

* feat Fix issue with earth variant hover tabs

* Remove prefix interpolation from comment string

Co-authored-by: Kendall Totten <ktotten@redhat.com>

* feat Resolve some code review feedback

* feat Fix the accordion disclosure issue noted in code review

Co-authored-by: Kendall Totten <ktotten@redhat.com>

Author: castastrophe

CHANGELOG-prerelease.md

@@ -1,6 +1,11 @@
+## Prerelease 52 ( TBD )
+
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add support for empty local variables
+
 ## Prerelease 51 ( 2020-07-16 )
 
 - [6965df](https://github.com/patternfly/patternfly-elements/commit/6965df7214f1cda636337093e0bf22bfc658403d) fix: Support nested tabs or accordions inside pfe-content-set
+- [49c6146](https://github.com/patternfly/patternfly-elements/commit/49c6146fbaed4cf6ca8d198e107471b53fe07796) feat: Add generator label to new PRs where appropriate, add .github folder to tools
 
 ## Prerelease 50 ( 2020-06-26 )
 
@@ -17,9 +22,6 @@
     -  Update paths to built-in sets: (#723)
     -  Storybook icon listing: (#728)
     -  Icon panel storybook: (#719)
-- [cf010c1](https://github.com/patternfly/patternfly-elements/commit/cf010c18c404e07d59eab775ee44552f52627bde) feat: Automerging PRs based on labels
-- [732f65a](https://github.com/patternfly/patternfly-elements/commit/732f65ada3383f6d04deb6670d82eb80d525d8ff) fix: pfe-modal removing hidden attribute (#924)
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add generator label to new PRs where appropriate, add .github folder to tools
 
 ## Prerelease 49 ( 2020-05-29 )
 

elements/pfe-accordion/src/_shared-assets.scss

@@ -0,0 +1,5 @@
+// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
+@import "../../pfe-sass/pfe-sass";
+
+$LOCAL: accordion;
+$LOCAL-VARIABLES: pfe-accordion-variables();

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

@@ -1,72 +1,69 @@
-// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
-@import "../../pfe-sass/pfe-sass";
-
-$LOCAL: accordion;
+@import "shared-assets";
 
 /// ===========================================================================
 /// DEFAULT ACCORDION HEADING
 /// ===========================================================================
 :host {
-  transition: transform 0.3s #{pfe-var(animation-timing)};
+  transition: transform 0.3s pfe-var(animation-timing);
   display: block;
 
   // Shadow template styles
   > * {
     margin: 0;
   }
-}
- 
-button {
-  @include pfe-trigger;
 
-  // @TODO workaround, can we get the variables working?
-  @include browser-query(edge) {
-    text-align: left;
-  }
+  button {
+    @include pfe-trigger;
 
-  @include browser-query(ie11) {
-    padding: 16px 24px;
-    &:hover {
-      border-left-color: #{pfe-color(ui-base)};
+    // @TODO workaround, can we get the variables working?
+    @include browser-query(edge) {
+      text-align: left;
+    }
+
+    @include browser-query(ie11) {
+      padding: 16px 24px;
+      &:hover {
+        border-left-color: pfe-fetch(ui-base);
+      }
+    }
+
+    &[aria-expanded="true"] {
+      $accordion: pfe-accordion-variables($state: expanded);
+      @include pfe-print-local($accordion);
+      @include browser-query(ie11) {
+        border-bottom-width: 0;
+        border-left-color: pfe-fetch(ui-base);
+        border-right-color: pfe-fetch(surface--border);
+      }
     }
   }
 }
 
 :host(:not([pfe-disclosure="true"])) {
-  button[aria-expanded="true"]::after {
-    @include pfe-chevron($state: open);
-  }
-  button[aria-expanded="false"]::after {
+  button::after {
     @include pfe-chevron($state: closed);
   }
+  button[aria-expanded="true"]::after {
+    transform: rotate(-135deg);
+  }
 }
 
 // Add border bottom to the last button in an accordion set.
 :host(:last-of-type) button:not([aria-expanded="true"]) {
   @include pfe-trigger-last;
 }
-:host(:last-of-type.animating) button {
-  --pfe-accordion--BorderBottomWidth: 0;
-}
 
-/// ===========================================================================
-/// EXPANDED STYLES
-/// ===========================================================================
-
-// Default styles
-button[aria-expanded="true"] {
-  @include pfe-accordion-variables($state: expanded);
-  @include browser-query(ie11) {
-    border-bottom-width: 0;
-    border-left-color: #{pfe-color(ui-base)};
-    border-right-color: #{pfe-color(surface--border)};
-  }
+:host(:last-of-type.animating) button {
+  @include pfe-print-local((BorderBottomWidth: 0));
 }
 
 // Styles contextual to theme
 @each $context in $THEMES {
-  :host([on="#{$context}"]) button[aria-expanded="true"] {
-    @include pfe-accordion-variables($state: expanded, $theme: #{$context});
+  @if $context != light {
+    :host([on="#{$context}"]) button[aria-expanded="true"] {
+      $accordion: pfe-accordion-variables($state: expanded, $theme: #{$context});
+      @include pfe-print-local($accordion);
+    }
   }
 }
 
@@ -76,58 +73,26 @@ button[aria-expanded="true"] {
 
 :host([pfe-disclosure="true"]) {
   button {
-    --pfe-accordion--Trigger--padding: #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5) #{pfe-local(base--Padding)} calc((#{pfe-local(base--Padding)} * 3) + 2px) !important;
+    padding-left: calc((#{pfe-local(Padding, $region: base)} * 3));
     @include browser-query(ie11) {
       padding: 16px 24px 16px 47px;
-      border-right-color: #{pfe-color(surface--border)};
-      border-left-color: #{pfe-color(surface--border)};
-      border-left-width: #{pfe-var(surface--border-width)};
+      border-right-color: pfe-fetch(surface--border);
+      border-left-color: pfe-fetch(surface--border);
+      border-left-width: pfe-fetch(surface--border-width);
     }
 
-    &[aria-expanded="true"] {
-      padding-left: calc(( #{pfe-var(container-spacer)} * 3 ) - 1px ) !important;
-      border-left-width: #{pfe-var(surface--border-width--heavy)};
-
-      &::before {
-        @include pfe-chevron($state: open, $position: before);
-        left: calc( #{pfe-var(container-spacer)} * 1.3125 ); // 21px.
-      }
-    }
-    &[aria-expanded="false"]::before {
-      @include pfe-chevron($state: closed, $position: before);
-    }
-
-    // Adjust contents position on hover.
     &:hover {
-      padding-left: calc(( #{pfe-var(container-spacer)} * 3 ) - 1px ) !important;
-      --pfe-accordion--BorderLeftWidth: #{pfe-var(surface--border-width--heavy)};
-
+      padding-left: calc(#{pfe-local(Padding, $region: base)} * 3 - #{pfe-var(surface--border-width--heavy)} + #{pfe-var(surface--border-width)});
       &::before {
-        left: calc( #{pfe-var(container-spacer)} * 1.3125 ); // 21px.
+        margin-left: calc((#{pfe-var(surface--border-width--heavy)} - #{pfe-var(surface--border-width)}) * -1);
       }
     }
-  }
-}
-
-// Set the header border while animating. 
-:host([pfe-disclosure="true"].animating) {
-  --pfe-accordion--BorderLeftWidth: #{pfe-var(surface--border-width--heavy)};
-  --pfe-accordion--BorderColor--accent: #{pfe-color(ui-base)}; // set border-left color while animating.
-
-  button {
-    padding-left: calc((var(--pfe-theme--container-spacer,16px) * 3) - 1px)!important;
 
     &::before {
-      left: calc( #{pfe-var(container-spacer)} * 1.3125 ); // 21px.
+      @include pfe-chevron($state: open, $position: before);
+    }
+    &[aria-expanded="true"]::before {
+      transform: rotate(45deg) translateY(4px);
     }
   }
 }
-
-// Override border-left color for different themes.
-@each $context in $THEMES {
-  :host([pfe-disclosure="true"][on="#{$context}"].animating) {
-    @include pfe-accordion-variables($state: expanded, $theme: #{$context});
-  }
-}
-
-

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

@@ -1,7 +1,4 @@
-// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
-@import "../../pfe-sass/pfe-sass";
-
-$LOCAL: accordion;
+@import "shared-assets";
 
 /// ===========================================================================
 /// DEFAULT ACCORDION PANEL
@@ -21,7 +18,19 @@ $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);
+  @include pfe-print-local((
+    panel-container: (
+      Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) #{pfe-local(Padding, $region: base)} calc(#{pfe-local(Padding, $region: base)} * 1.5)
+    )
+  ));
+
+  :host([pfe-disclosure="true"]) & {
+    @include pfe-print-local((
+      panel-container: (
+        Padding: 0 calc(#{pfe-local(Padding, $region: base)} * 3) pfe-local(Padding, $region: base) calc((#{pfe-local(Padding, $region: base)} * 1.5) - 4px)
+      )
+    ));
+  }
 }
 
 :host(:last-of-type[expanded]) {
@@ -34,26 +43,22 @@ $LOCAL: accordion;
 
 :host([expanded]),
 :host(.animating) {
-  @include pfe-accordion-variables($state: expanded);
+  $accordion: pfe-accordion-variables($state: expanded);
+  @include pfe-print-local($accordion);
   @include pfe-panel-variables;
   @include pfe-collapsible($state: open);
   @include browser-query(ie11) {
     border-top-width: 0;
-    border-left-color: #{pfe-color(ui-base)};
-    border-right-color: #{pfe-color(surface--border)};
+    border-left-color: pfe-var(ui-base);
+    border-right-color: pfe-var(surface--border);
   }
 }
 
 @each $context in $THEMES {
   :host([on="#{$context}"][expanded]),
   :host([on="#{$context}"].animating){
-    @include pfe-accordion-variables($state: expanded, $theme: #{$context});
+    $accordion: pfe-accordion-variables($state: expanded, $theme: #{$context});
+    @include pfe-print-local($accordion);
     @include pfe-panel-variables($theme: #{$context});
   }
 }
-
-:host([pfe-disclosure="true"]) {
-  .container {
-    --pfe-accordion--panel-container--padding: 0 calc(#{pfe-local(base--Padding)} * 3) #{pfe-local(base--Padding)} calc((#{pfe-local(base--Padding)} * 1.5) - 4px);
-  }
-}

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

@@ -1,31 +1,31 @@
-// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
-@import "../../pfe-sass/pfe-sass";
+@import "shared-assets";
 
-$LOCAL: accordion;
-
-@include pfe-theme-contexts; // imports on="light" etc support
+// @include pfe-theme-contexts; // imports on="light" etc support
 
 :host {
-  @include pfe-accordion-variables;
-
+  @include pfe-print-local($LOCAL-VARIABLES);
   display: block;
   position: relative;
   overflow: hidden;
   margin: 0;
-  color: #{pfe-local(Color)};
+  color: pfe-local(Color);
 
   @include browser-query(ie11) {
-    background-color: #{pfe-color(surface--lightest)} !important;
-    color: #{pfe-color(text)} !important;
+    background-color: pfe-fetch(surface--lightest) !important;
+    color: pfe-fetch(text) !important;
   }
 }
 
 @each $context in $THEMES {
-  :host([on="#{$context}"]) {
-    @include pfe-accordion-variables($theme: #{$context});
+  @if $context != light {
+    :host([on="#{$context}"]) {
+      $context: pfe-accordion-variables($theme: #{$context});
+      @include pfe-print-local($context);
+    }
   }
 }
 
 :host([pfe-disclosure="true"]) {
-  @include pfe-accordion-variables($variant: disclosure);
+  $disclosure: pfe-accordion-variables($variant: disclosure);
+  @include pfe-print-local($disclosure);
 }