fix: Add a warning about updating the on attribute before upgrade (#809)

* fix Add a warning about updating the on attribute before upgrade

* fix Update documentation

* updating the changelog

* fix Move warning for on attribute into connectedCallback

* fix Remove on from storybook

* fix Remove references to on attribute from documentation and demos

* fix Add theme preview to stories for components that support theme

* fix Revert theming updates to storybook into a separate branch

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

Author: 3 people

.storybook/config.js

@@ -14,17 +14,21 @@ addParameters({
       brandUrl: "/"
     }
   },
-  backgrounds: [{
-    name: "light",
-    value: "#fff",
-    default: true
-  },{
-    name: "dark",
-    value: "#252525"
-  }, {
-    name: "saturated",
-    value: "#007a87"
-  }]
+  backgrounds: [
+    {
+      name: "light",
+      value: "#fff",
+      default: true
+    },
+    {
+      name: "dark",
+      value: "#252525"
+    },
+    {
+      name: "saturated",
+      value: "#007a87"
+    }
+  ]
 });
 
 function loadStories() {

.storybook/utils.js

@@ -24,7 +24,7 @@ String.prototype.sentenceCase = function() {
 };
 
 // Print attributes based on an object
-export const listProperties = (obj) =>
+export const listProperties = obj =>
   Object.entries(obj)
     .map(set => {
       let string = " ";
@@ -43,11 +43,7 @@ export const listProperties = (obj) =>
       }
 
       // If printing is allowed, the value exists and is not null
-      if (
-        print &&
-        typeof v !== "undefined" &&
-        (v !== null && v !== "null")
-      ) {
+      if (print && typeof v !== "undefined" && v !== null && v !== "null") {
         string += p;
         // If the value is a string and the value is not equal to the string "true"
         if (typeof v === "string" && v !== "true") {
@@ -81,7 +77,7 @@ export function customTag(obj) {
     // If a tag is defined, use that, else use a div
     if (obj.tag) {
       start += `<${obj.tag}`;
-      end   += !selfClosing.includes(obj.tag) ? `</${obj.tag}>` : "";
+      end += !selfClosing.includes(obj.tag) ? `</${obj.tag}>` : "";
     } else {
       start += "<div";
       end += "</div>";
@@ -90,7 +86,9 @@ export function customTag(obj) {
     start += obj.attributes ? listProperties(obj.attributes || {}) : "";
     start += !selfClosing.includes(obj.tag) ? ">" : "/>";
   }
-    return `${start}${typeof obj.content !== "undefined" ? obj.content || autoContent() : ""}${end}`;
+  return `${start}${
+    typeof obj.content !== "undefined" ? obj.content || autoContent() : ""
+  }${end}`;
 }
 
 const parseMarkup = string => {
@@ -154,7 +152,7 @@ const renderSlots = (slots = []) =>
         let parsed = parseMarkup(slot.content);
         Object.assign(slot, parsed);
       }
-      return slot.content || slot.tag && selfClosing.includes(slot.tag)
+      return slot.content || (slot.tag && selfClosing.includes(slot.tag))
         ? customTag({
             tag: slot.tag,
             slot: slot.slot,
@@ -168,7 +166,7 @@ const renderSlots = (slots = []) =>
 // Creates a component dynamically based on inputs
 export function component(tag, attributes = {}, slots = [], noSlot = false) {
   return `<${tag}${listProperties(attributes)}>${
-    slots.length > 0 ? renderSlots(slots) : (!noSlot) ? autoContent() : ""
+    slots.length > 0 ? renderSlots(slots) : !noSlot ? autoContent() : ""
   }</${tag}>`;
 }
 
@@ -221,7 +219,7 @@ export function autoPropKnobs(properties, bridge) {
       prefixed = false;
     }
 
-    if(prefixed) {
+    if (prefixed) {
       attr = `pfe-${attr}`;
     }
 

CHANGELOG-prerelease.md

@@ -1,6 +1,7 @@
 ## Prerelese 45 ( TBD )
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) feat: add event emission to pfe-select
+- [eb74cb8](https://github.com/patternfly/patternfly-elements/commit/eb74cb8f989048164fbb6ed1508c502659a752ed) feat: add event emission to pfe-select
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Add a warning about updating the on attribute before upgrade
 
 ## Prerelease 44 ( 2020-04-02 )
 

docs/content/develop/_index.md

@@ -25,7 +25,7 @@ Before getting started, it's important to note that because this is a library, e
     - If it is a `container` component, then it should focus on creating sections in which components can be placed. These will handle surface colors, padding, some layout, but no typography styles. Examples include: `pfe-card`, `pfe-band`
     - If it is a `combo` component, then it should not contain any styles of its own (exception: you might need to set the display value of the host) but rather, it will pull together other components into a set that is logical for content editors or developers. These components can also make decisions about the way the children components are laid out or which components are called based on built-in logic for that combo.
 3. Components should be context aware, if possible.
-    - `Content` components should be equipped with styles for the `on="dark"` attribute, so that they can be used on both light and dark backgrounds.
+    - `Content` components should be equipped with styles for light, dark, and saturated backgrounds.
 4. Framework agnostic
     - A PatternFly Element should "just work" when you drop it onto any page (provided the proper polyfills are there). It should have ALL the styles it needs, when coupled with a PFE Theme.
 
@@ -44,7 +44,7 @@ A component always touches all four sides of its parent container. For example,
 
 **Example: [Call-to-action](https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-cta/src)**
 
-This component has attributes which invoke the multiple style changes on a call-to-action link. It also has `on="dark"` styles built-in so that colors will automatically adjust on dark surfaces
+This component has attributes which invoke the multiple style changes on a call-to-action link. It has styles built-in so that colors will automatically adjust to surfaces.
 
 ## Combo Elements
 

docs/content/theme/_index.md

@@ -28,7 +28,7 @@ This is because the accent color should be the brightest and boldest, and the pr
 Additionally, each component comes equipped to adjust its colors depending on where it's placed on the page. For example, should you need to put a default CTA (which is blue) on a dark blue card, the CTA will need to adapt. You can do this by informing the component of its context (on a dark background) by giving the `on` attribute the value of `dark`.
 
     <pfe-card pfe-color="dark">
-	    <pfe-cta pfe-color="base" on="dark">
+	    <pfe-cta pfe-color="base">
 	    	<a href="#">Default</a>
 	    </pfe-cta>
 	</pfe-card>
@@ -39,4 +39,4 @@ Should you need to deviate from this color usage, and set your primary CTA to us
 		<a href="#">Primary</a>
 	</pfe-cta>
 
-Please note that if you are opting to override colors of components, they will not automatically respond to the `on="dark"` attribute any longer.
+Please note that if you are opting to override colors of components, they will not automatically respond to the theme context any longer.

elements/pfe-accordion/demo/index.html

@@ -306,7 +306,7 @@ <h3>Where do the main characters work as adults?</h3>
     </section>
 
     <section class="saturated-background on-saturated">
-      <h2>pfe-accordion [on="saturated"]</h2><br/>
+      <h2>&lt;pfe-accordion&gt; on a custom saturated background</h2><br/>
       <pfe-accordion>
         <pfe-accordion-header>
           <h3>Why do wizards need money if they could just create it?</h3>

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

@@ -38,16 +38,7 @@ stories.add(PfeAccordion.tag, () => {
   let headings = [];
   let panels = [];
 
-  // const props = PfeAccordion.properties;
-  const props = {
-    on: {
-      title: "Theme",
-      type: "string",
-      enum: ["light", "dark"],
-      default: "light",
-      prefixed: false
-    }
-  };
+  const props = PfeAccordion.properties;
 
   config.prop = tools.autoPropKnobs(props, storybookBridge);
 

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

@@ -236,7 +236,7 @@ <h4 pfe-content-set--header>Heading 3</h4>
 
   <pfe-band pfe-color="darkest">
 
-    <pfe-content-set on="dark">
+    <pfe-content-set>
       <h4 pfe-content-set--header>Heading 1</h4>
       <div pfe-content-set--panel>
         <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit

elements/pfe-sass/README.md

@@ -48,19 +48,3 @@ Let's use the pfe-cta as an example. We can start by defining local variables, n
       --pfe-cta--Color: var(theme--surface-accent--link);
     }
 ```
-
-
-
-### On=dark is being deprecated.
-
-**Instead, custom classes already on the page should set broadcast values:**
-
-```css
-.on-dark {
- --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);
- --pfe-broadcasted--link:  var(--pfe-theme--color--link--on-dark, #73bcf7);
- --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--on-dark--hover, #2b9af3);
- --pfe-broadcasted--link--visited:var(--pfe-theme--color--link--on-dark--visited, #73bcf7);
- --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--on-dark--focus, #2b9af3);
-}
-```

elements/pfe-styles/demo/theme-test.html

@@ -517,15 +517,15 @@ <h2>Call-to-action component</h2>
         <h2>Band component</h2>
       </header>
       <article style="display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr);">
-        <pfe-card pfe-color="lightest" class="border-card PFElement" pfelement="" has_body="" has_footer="" pfe-type="container" on="light">
+        <pfe-card pfe-color="lightest" class="border-card">
           <img src="https://web-dev-drupal-carobert.dev.a1.vary.redhat.com/cms/managed-files/placeholder.jpg"
             pfe-overflow="top right left" style="max-height: 200px;">
           <h3 class="pfe-headline-3">Card component</h3>
           <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
           <pfe-cta slot="pfe-card--footer"><a href="#">Call-to-action component</a></pfe-cta>
         </pfe-card>
 
-        <pfe-card pfe-color="complement" pfe-size="small" class="resource-card PFElement" pfelement="" has_header="" has_body="" has_footer="" pfe-type="container" on="saturated">
+        <pfe-card pfe-color="complement" pfe-size="small" class="resource-card">
           <h3 slot="pfe-card--header">
             <span>Card heading</span>
           </h3>
@@ -538,9 +538,8 @@ <h3 slot="pfe-card--header">
         </pfe-card>
 
         <pfe-card pfe-color="accent"
-          pfe-img-src="https://web-dev-drupal-carobert.dev.a1.vary.redhat.com/cms/managed-files/bkgd-training-value-2000x727.png"
-          class="custom-styles PFElement" pfelement="" has_body="" has_footer="" pfe-type="container" on="saturated"
-          style="background-image: url(&quot;https://web-dev-drupal-carobert.dev.a1.vary.redhat.com/cms/managed-files/bkgd-training-value-2000x727.png&quot;);">
+          pfe-img-src="https://www.redhat.com/cms/managed-files/bkgd-training-value-2000x727.png"
+          class="custom-styles">
           <pfe-icon icon="rh-atom" circled="lightest" size="lg">
           <h3 class="pfe-headline-3">Card heading</h3>
           <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore