feat!: Use HTML classes instead of custom 'theme' attributes for them…

…ing components. #2262 BREAKING CHANGE: Using a 'theme' attribute is no longer supported to theme a component. Instead, a HTML class attribute of 'calcite-theme-light', 'calcite-theme-dark', or 'calcite-theme-auto' should be set on a component or one of its parent elements. Example: `<calcite-button theme="light" />` now becomes `<calcite-button class="calcite-theme-light" />`. The `calcite-theme-auto` class will defer to the browser's CSS 'prefers-color-scheme' media query to decide whether the light or dark theme will be used.
Esri · Jun 7, 2021 · b762520 · b762520
1 parent 5ef418d
commit b762520
Show file tree

Hide file tree

Showing 65 changed files with 241 additions and 205 deletions.
diff --git a/.storybook/resources.ts b/.storybook/resources.ts
@@ -1,4 +1,4 @@
-import { Appearance, Position, Scale, Theme } from "../src/components/interfaces";
+import { Appearance, Position, Scale, ThemeClass } from "../src/components/interfaces";
 
 type Direction = "ltr" | "rtl";
 
@@ -9,14 +9,14 @@ interface AttributeMetadata<T> {
 
 interface CommonAttributes {
   dir: AttributeMetadata<Direction>;
-  theme: AttributeMetadata<Theme>;
+  theme: AttributeMetadata<ThemeClass>;
   scale: AttributeMetadata<Scale>;
   position: AttributeMetadata<Position>;
   appearance: AttributeMetadata<Appearance>;
 }
 
 const dirOptions: Direction[] = ["ltr", "rtl"];
-const themeOptions: Theme[] = ["light", "dark"];
+const themeOptions: ThemeClass[] = ["calcite-theme-light", "calcite-theme-dark", "calcite-theme-auto"];
 const positionOptions: Position[] = ["start", "end"];
 const scaleOptions: Scale[] = ["s", "m", "l"];
 const appearanceOptions: Appearance[] = ["solid", "clear", "outline"];

diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
@@ -49,13 +49,11 @@
   @apply font-sans;
 }
 
-.calcite-theme-dark,
-[theme="dark"] {
+.calcite-theme-dark {
   @include calcite-theme-dark-extended();
 }
 
-.calcite-theme-light,
-[theme="light"] {
+.calcite-theme-light {
   @include calcite-theme-light-extended();
 }
 

diff --git a/src/components/calcite-accordion/calcite-accordion.stories.ts b/src/components/calcite-accordion/calcite-accordion.stories.ts
@@ -38,9 +38,9 @@ const createAccordionAttributes: (options?: { exceptions: string[] }) => Attribu
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }
@@ -189,9 +189,9 @@ export const icon = (): string =>
 export const darkThemeIcon = (): string =>
   create(
     "calcite-accordion",
-    createAccordionAttributes({ exceptions: ["theme"] }).concat({
-      name: "theme",
-      value: "dark"
+    createAccordionAttributes({ exceptions: ["class"] }).concat({
+      name: "class",
+      value: "calcite-theme-dark"
     }),
     html`
       ${create(

diff --git a/src/components/calcite-accordion/readme.md b/src/components/calcite-accordion/readme.md
@@ -1,6 +1,6 @@
 # calcite-accordion
 
-`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (theme, icon-position, scale, appearance), and selection functionality. Selection modes include "multi", "single", and "single-persist".
+`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include "multi", "single", and "single-persist".
 
 <!-- Auto Generated Below -->
 

diff --git a/src/components/calcite-action-bar/calcite-action-bar.stories.ts b/src/components/calcite-action-bar/calcite-action-bar.stories.ts
@@ -73,9 +73,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -103,14 +103,14 @@ export const basic = (): string =>
 export const darkThemeRTL = (): string =>
   create(
     "calcite-action-bar",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ]),
     html`

diff --git a/src/components/calcite-action-pad/calcite-action-pad.stories.ts b/src/components/calcite-action-pad/calcite-action-pad.stories.ts
@@ -73,9 +73,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -103,14 +103,14 @@ export const basic = (): string =>
 export const darkThemeRTL = (): string =>
   create(
     "calcite-action-pad",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ]),
     html`

diff --git a/src/components/calcite-action/calcite-action.stories.ts b/src/components/calcite-action/calcite-action.stories.ts
@@ -111,9 +111,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -127,14 +127,14 @@ export const basic = (): string => create("calcite-action", createAttributes());
 export const darkThemeRTL = (): string =>
   create(
     "calcite-action",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ])
   );
diff --git a/src/components/calcite-alert/calcite-alert.e2e.ts b/src/components/calcite-alert/calcite-alert.e2e.ts
@@ -190,7 +190,7 @@ describe("calcite-alert", () => {
     describe("when theme attribute is dark", () => {
       it("should render alert dismiss progress bar with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<div theme="dark">${alertSnippet}</div>`
+          html: `<div class="calcite-theme-dark">${alertSnippet}</div>`
         });
         await page.waitForTimeout(animationDurationInMs);
         alertDismissProgressBar = await page.find("calcite-alert[active] >>> .alert-dismiss-progress");

diff --git a/src/components/calcite-alert/calcite-alert.stories.ts b/src/components/calcite-alert/calcite-alert.stories.ts
@@ -14,7 +14,7 @@ export default {
 
 export const TitleMessageLink = (): string => html`
 <calcite-alert
-theme="light"
+class="calcite-theme-light"
 ${boolean("icon", true)}
 ${boolean("auto-dismiss", false)}
 auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -35,7 +35,7 @@ TitleMessageLink.story = {
 
 export const TitleMessage = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -54,7 +54,7 @@ TitleMessage.story = {
 
 export const MessageLink = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -73,7 +73,7 @@ MessageLink.story = {
 
 export const Message = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -87,7 +87,7 @@ export const Message = (): string => html`
 
 export const CustomIcon = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     icon="${select("icon", iconNames, iconNames[0])}"
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -124,19 +124,29 @@ export const Queue = (): string => html`
     <calcite-button color="red" onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("active")'
       >Close Alert 3</calcite-button
     >
-    <calcite-alert id="one" theme="light" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
+    <calcite-alert
+      id="one"
+      class="calcite-theme-light"
+      icon
+      color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
     </calcite-alert>
-    <calcite-alert id="two" theme="light" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
+    <calcite-alert
+      id="two"
+      class="calcite-theme-light"
+      icon
+      color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
     </calcite-alert>
     <calcite-alert
       data-custom-id="my-id"
-      theme="light"
+      class="calcite-theme-light"
       icon
       color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}"
     >
@@ -149,7 +159,7 @@ export const Queue = (): string => html`
 
 export const DarkTheme = (): string => html`
   <calcite-alert
-    theme="dark"
+    class="calcite-theme-dark"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -159,7 +169,7 @@ export const DarkTheme = (): string => html`
   >
     <div slot="title">Something failed</div>
     <div slot="message">That thing you wanted to do didn't work as expected</div>
-    <calcite-link theme="dark" slot="link" title="my action">My action</calcite-link>
+    <calcite-link slot="link" title="my action">My action</calcite-link>
   </calcite-alert>
 `;
 
@@ -170,43 +180,61 @@ DarkTheme.story = {
 export const DarkThemeQueue = (): string => html`
   <div>
     <h5 style="color:white">Open or add to queue</h5>
-    <calcite-button theme="dark" onclick='document.querySelector("#one").setAttribute("active", "")'
+    <calcite-button class="calcite-theme-dark" onclick='document.querySelector("#one").setAttribute("active", "")'
       >Open Alert 1</calcite-button
     >
-    <calcite-button theme="dark" onclick='document.querySelector("#two").setAttribute("active", "")'
+    <calcite-button class="calcite-theme-dark" onclick='document.querySelector("#two").setAttribute("active", "")'
       >Open Alert 2</calcite-button
     >
-    <calcite-button theme="dark" onclick='document.querySelector("[data-custom-id=my-id]").setAttribute("active", "")'
+    <calcite-button
+      class="calcite-theme-dark"
+      onclick='document.querySelector("[data-custom-id=my-id]").setAttribute("active", "")'
       >Open Alert 3</calcite-button
     >
     <br />
     <br />
     <h5 style="color:white">Close or remove from queue</h5>
-    <calcite-button theme="dark" color="red" onclick='document.querySelector("#one").removeAttribute("active")'
+    <calcite-button
+      class="calcite-theme-dark"
+      color="red"
+      onclick='document.querySelector("#one").removeAttribute("active")'
       >Close Alert 1</calcite-button
     >
-    <calcite-button theme="dark" color="red" onclick='document.querySelector("#two").removeAttribute("active")'
+    <calcite-button
+      class="calcite-theme-dark"
+      color="red"
+      onclick='document.querySelector("#two").removeAttribute("active")'
       >Close Alert 2</calcite-button
     >
     <calcite-button
-      theme="dark"
+      class="calcite-theme-dark"
       color="red"
       onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("active")'
       >Close Alert 3</calcite-button
     >
-    <calcite-alert id="one" theme="dark" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
+    <calcite-alert
+      id="one"
+      class="calcite-theme-dark"
+      icon
+      color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-      <calcite-link theme="dark" slot="link" title="my action">My action</calcite-link>
+      <calcite-link class="calcite-theme-dark" slot="link" title="my action">My action</calcite-link>
     </calcite-alert>
-    <calcite-alert id="two" theme="dark" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
+    <calcite-alert
+      id="two"
+      class="calcite-theme-dark"
+      icon
+      color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-      <calcite-link theme="dark" slot="link" title="my action">My action</calcite-link>
+      <calcite-link class="calcite-theme-dark" slot="link" title="my action">My action</calcite-link>
     </calcite-alert>
     <calcite-alert
       data-custom-id="my-id"
-      theme="dark"
+      class="calcite-theme-dark"
       icon
       color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}"
     >
@@ -222,7 +250,7 @@ DarkThemeQueue.story = {
 export const Rtl = (): string => html`
 <div dir="rtl">
 <calcite-alert
-theme="light"
+class="calcite-theme-dark"
 ${boolean("icon", true)}
 ${boolean("auto-dismiss", false)}
 auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"

diff --git a/src/components/calcite-avatar/calcite-avatar.stories.ts b/src/components/calcite-avatar/calcite-avatar.stories.ts
@@ -40,7 +40,7 @@ MissingThumbnail.story = {
 
 export const Dark = (): string => html`
   <calcite-avatar
-    theme="dark"
+    class="calcite-theme-dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     full-name="${text("full-name", "John Doe")}"
     username="${text("username", "jdoe")}"

diff --git a/src/components/calcite-block/calcite-block.stories.ts b/src/components/calcite-block/calcite-block.stories.ts
@@ -87,9 +87,9 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }

diff --git a/src/components/calcite-button/calcite-button.e2e.ts b/src/components/calcite-button/calcite-button.e2e.ts
@@ -333,7 +333,7 @@ describe("calcite-button", () => {
     describe("when theme attribute is dark", () => {
       it("should render button pseudo classes with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<div theme="dark">${buttonSnippet}</div>`
+          html: `<div class="calcite-theme-dark">${buttonSnippet}</div>`
         });
         buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.focus();

diff --git a/src/components/calcite-button/calcite-button.stories.ts b/src/components/calcite-button/calcite-button.stories.ts
@@ -142,7 +142,7 @@ SideBySide.story = {
 
 export const DarkMode = (): string => html`
   <calcite-button
-    theme="dark"
+    class="calcite-theme-dark"
     appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
     color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -165,7 +165,7 @@ DarkMode.story = {
 export const RTL = (): string => html`
   <calcite-button
     dir="rtl"
-    theme="dark"
+    class="calcite-theme-dark"
     appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
     color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"