refactor!: Remove 'theme' props from components (#2194)

* refactor!: Remove 'theme' props from components. * fix tests * fixes * use closest for getThemeName * selectors * class OR attribute for now. * remove const, cleanup
Esri · May 21, 2021 · 50bd990 · 50bd990
1 parent d18dc51
commit 50bd990
Show file tree

Hide file tree

Showing 78 changed files with 103 additions and 376 deletions.
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
@@ -12,6 +12,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
+  --calcite-theme-name: "light";
   --calcite-ui-foreground-current: #c7eaff;
   --calcite-ui-inverse: #{$blk-180};
   --calcite-ui-inverse-hover: #{$blk-170};
@@ -30,8 +31,10 @@
   @apply font-sans;
 }
 
+.calcite-theme--dark,
 [theme="dark"] {
   @include calcite-theme-dark();
+  --calcite-theme-name: "dark";
   --calcite-ui-foreground-current: #214155;
   --calcite-ui-inverse: #{$blk-180};
   --calcite-ui-inverse-hover: #{$blk-190};
@@ -44,8 +47,10 @@
   --calcite-scrim-background: #{rgba($blk-240, 0.75)};
 }
 
+.calcite-theme--light,
 [theme="light"] {
   @include calcite-theme-light();
+  --calcite-theme-name: "light";
   --calcite-ui-foreground-current: #c7eaff;
   --calcite-ui-inverse: #{$blk-180};
   --calcite-ui-inverse-hover: #{$blk-170};

diff --git a/src/components/calcite-accordion/calcite-accordion.e2e.ts b/src/components/calcite-accordion/calcite-accordion.e2e.ts
@@ -31,22 +31,21 @@ describe("calcite-accordion", () => {
   it("renders requested props when valid props are provided", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-accordion appearance="minimal" icon-position="start"  scale="l" selection-mode="single-persist" theme="dark" icon-type="caret">
+    <calcite-accordion appearance="minimal" icon-position="start"  scale="l" selection-mode="single-persist" icon-type="caret">
     ${accordionContent}
     </calcite-accordion>`);
     const element = await page.find("calcite-accordion");
     expect(element).toEqualAttribute("appearance", "minimal");
     expect(element).toEqualAttribute("icon-position", "start");
     expect(element).toEqualAttribute("scale", "l");
     expect(element).toEqualAttribute("selection-mode", "single-persist");
-    expect(element).toEqualAttribute("theme", "dark");
     expect(element).toEqualAttribute("icon-type", "caret");
   });
 
   it("renders icon if requested", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-accordion appearance="minimal" icon-position="start"  scale="l" selection-mode="single-persist" theme="dark" icon-type="caret">
+    <calcite-accordion appearance="minimal" icon-position="start"  scale="l" selection-mode="single-persist" icon-type="caret">
     <calcite-accordion-item item-title="Accordion Title 1" icon="car" id="1">Accordion Item Content
     </calcite-accordion-item>
     <calcite-accordion-item item-title="Accordion Title 1" id="2" active>Accordion Item Content

diff --git a/src/components/calcite-accordion/calcite-accordion.tsx b/src/components/calcite-accordion/calcite-accordion.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, h, Listen, Prop, VNode } from "@stencil/core";
 import { getKey } from "../../utils/key";
 import { AccordionAppearance } from "./interfaces";
-import { Position, Scale, Theme } from "../interfaces";
+import { Position, Scale } from "../interfaces";
 
 @Component({
   tag: "calcite-accordion",
@@ -39,9 +39,6 @@ export class CalciteAccordion {
    * or single-persist (allow and require one open item), defaults to multi */
   @Prop({ reflect: true }) selectionMode: "multi" | "single" | "single-persist" = "multi";
 
-  /** specify the theme of accordion, defaults to light */
-  @Prop({ reflect: true }) theme: Theme;
-
   //--------------------------------------------------------------------------
   //
   //  Events

diff --git a/src/components/calcite-action-bar/calcite-action-bar.tsx b/src/components/calcite-action-bar/calcite-action-bar.tsx
@@ -10,7 +10,7 @@ import {
   VNode,
   Method
 } from "@stencil/core";
-import { Position, Theme } from "../interfaces";
+import { Position } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, focusElement } from "../../utils/dom";
@@ -88,11 +88,6 @@ export class CalciteActionBar {
    */
   @Prop({ reflect: true }) position: Position;
 
-  /**
-   * Used to set the component's color scheme.
-   */
-  @Prop({ reflect: true }) theme: Theme;
-
   // --------------------------------------------------------------------------
   //
   //  Events

diff --git a/src/components/calcite-action-pad/calcite-action-pad.tsx b/src/components/calcite-action-pad/calcite-action-pad.tsx
@@ -10,7 +10,7 @@ import {
   VNode,
   Method
 } from "@stencil/core";
-import { Layout, Position, Theme } from "../interfaces";
+import { Layout, Position } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { getElementDir, focusElement, getSlotted } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -78,11 +78,6 @@ export class CalciteActionPad {
    */
   @Prop({ reflect: true }) position: Position;
 
-  /**
-   * Used to set the component's color scheme.
-   */
-  @Prop({ reflect: true }) theme: Theme;
-
   // --------------------------------------------------------------------------
   //
   //  Events

diff --git a/src/components/calcite-action/calcite-action.tsx b/src/components/calcite-action/calcite-action.tsx
@@ -11,7 +11,7 @@ import {
   VNode
 } from "@stencil/core";
 
-import { Alignment, Appearance, Scale, Theme } from "../interfaces";
+import { Alignment, Appearance, Scale } from "../interfaces";
 
 import { CSS, TEXT } from "./resources";
 
@@ -94,11 +94,6 @@ export class CalciteAction {
    */
   @Prop({ reflect: true }) textEnabled = false;
 
-  /**
-   * Used to set the component's color scheme.
-   */
-  @Prop({ reflect: true }) theme: Theme;
-
   // --------------------------------------------------------------------------
   //
   //  Events

diff --git a/src/components/calcite-alert/calcite-alert.e2e.ts b/src/components/calcite-alert/calcite-alert.e2e.ts
@@ -41,7 +41,7 @@ describe("calcite-alert", () => {
   it("renders requested props when valid props are provided", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-alert theme="dark" color="yellow" auto-dismiss-duration="fast" auto-dismiss>
+    <calcite-alert color="yellow" auto-dismiss-duration="fast" auto-dismiss>
     ${alertContent}
     </calcite-alert>`);
 
@@ -51,7 +51,6 @@ describe("calcite-alert", () => {
 
     expect(element).toEqualAttribute("color", "yellow");
     expect(element).toEqualAttribute("auto-dismiss-duration", "fast");
-    expect(element).toEqualAttribute("theme", "dark");
     expect(close).toBeNull();
     expect(icon).toBeNull();
   });

diff --git a/src/components/calcite-alert/calcite-alert.tsx b/src/components/calcite-alert/calcite-alert.tsx
@@ -14,7 +14,7 @@ import {
 } from "@stencil/core";
 import { getElementDir, setRequestedIcon } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./calcite-alert.resources";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
 import { StatusColor, AlertDuration, StatusIcons } from "./interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 
@@ -84,9 +84,6 @@ export class CalciteAlert {
   /** specify the scale of the button, defaults to m */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Select theme (light or dark) */
-  @Prop({ reflect: true }) theme: Theme;
-
   @Watch("icon")
   @Watch("color")
   updateRequestedIcon(): void {

diff --git a/src/components/calcite-avatar/calcite-avatar.tsx b/src/components/calcite-avatar/calcite-avatar.tsx
@@ -1,8 +1,9 @@
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { isValidHex } from "../calcite-color-picker/utils";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
 import { hexToHue, stringToHex } from "./utils";
+import { getThemeName } from "../../utils/dom";
 
 @Component({
   tag: "calcite-avatar",
@@ -24,9 +25,6 @@ export class CalciteAvatar {
   //
   //--------------------------------------------------------------------------
 
-  /** Select theme (light or dark) */
-  @Prop({ reflect: true }) theme: Theme;
-
   /** specify the scale of the avatar, defaults to m */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -90,7 +88,7 @@ export class CalciteAvatar {
             {initials}
           </span>
         ) : (
-          <calcite-icon class="icon" icon="user" scale={this.scale} theme={this.theme} />
+          <calcite-icon class="icon" icon="user" scale={this.scale} />
         )}
       </span>
     );
@@ -100,7 +98,8 @@ export class CalciteAvatar {
    * Generate a valid background color that is consistent and unique to this user
    */
   private generateFillColor() {
-    const { userId, username, fullName, theme } = this;
+    const { userId, username, fullName, el } = this;
+    const theme = getThemeName(el);
     const id = userId && `#${userId.substr(userId.length - 6)}`;
     const name = username || fullName || "";
     const hex = id && isValidHex(id) ? id : stringToHex(name);

diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx
@@ -1,7 +1,6 @@
 import { Component, Element, Event, EventEmitter, Host, Prop, h, VNode } from "@stencil/core";
 import { CSS, SLOTS, TEXT, HEADING_LEVEL, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
-import { Theme } from "../interfaces";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { HeadingLevel, CalciteHeading } from "../functional/CalciteHeading";
 
@@ -75,11 +74,6 @@ export class CalciteBlock {
    */
   @Prop() summary: string;
 
-  /**
-   * Used to set the component's color scheme.
-   */
-  @Prop({ reflect: true }) theme: Theme;
-
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -117,14 +111,11 @@ export class CalciteBlock {
   // --------------------------------------------------------------------------
 
   renderScrim(): VNode[] {
-    const { disabled, loading, theme } = this;
+    const { disabled, loading } = this;
 
     const defaultSlot = <slot />;
 
-    return [
-      loading || disabled ? <calcite-scrim loading={loading} theme={theme} /> : null,
-      defaultSlot
-    ];
+    return [loading || disabled ? <calcite-scrim loading={loading} /> : null, defaultSlot];
   }
 
   render(): VNode {

diff --git a/src/components/calcite-button/calcite-button.tsx b/src/components/calcite-button/calcite-button.tsx
@@ -2,7 +2,7 @@ import { Component, Element, h, Method, Prop, Build, State, VNode } from "@stenc
 import { CSS, TEXT } from "./resources";
 import { getAttributes, getElementDir } from "../../utils/dom";
 import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
-import { FlipContext, Scale, Theme, Width } from "../interfaces";
+import { FlipContext, Scale, Width } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 
 @Component({
@@ -70,9 +70,6 @@ export class CalciteButton {
   /** is the button a child of a calcite-split-button */
   @Prop({ reflect: true }) splitChild?: "primary" | "secondary" | false = false;
 
-  /** Select theme (light or dark) */
-  @Prop({ reflect: true }) theme: Theme;
-
   /** specify the width of the button, defaults to auto */
   @Prop({ reflect: true }) width: Width = "auto";
 
@@ -115,8 +112,7 @@ export class CalciteButton {
       "loading",
       "scale",
       "slot",
-      "width",
-      "theme"
+      "width"
     ]);
     const Tag = this.childElType;
 

diff --git a/src/components/calcite-card/calcite-card.tsx b/src/components/calcite-card/calcite-card.tsx
@@ -2,7 +2,6 @@ import { Component, Element, Event, EventEmitter, h, Prop, VNode } from "@stenci
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
-import { Theme } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 
 /**
@@ -47,9 +46,6 @@ export class CalciteCard {
   /** Indicates whether the card is selectable. */
   @Prop({ reflect: true }) selectable = false;
 
-  /**  The theme of the card.*/
-  @Prop({ reflect: true }) theme: Theme;
-
   /** string to override English loading text */
   @Prop() intlLoading?: string = TEXT.loading;
 
@@ -146,7 +142,7 @@ export class CalciteCard {
         onKeyDown={this.cardSelectKeyDown}
         title={checkboxLabel}
       >
-        <calcite-checkbox checked={this.selected} theme={this.theme} />
+        <calcite-checkbox checked={this.selected} />
       </label>
     );
   }

diff --git a/src/components/calcite-checkbox/calcite-checkbox.tsx b/src/components/calcite-checkbox/calcite-checkbox.tsx
@@ -13,7 +13,7 @@ import {
 } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { focusElement } from "../../utils/dom";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
 import { hiddenInputStyle } from "../../utils/form";
 
 @Component({
@@ -79,9 +79,6 @@ export class CalciteCheckbox {
   /** specify the scale of the checkbox, defaults to m */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Determines what theme to use */
-  @Prop({ reflect: true }) theme: Theme;
-
   /** The value of the checkbox input */
   @Prop() value?: any;
 

diff --git a/src/components/calcite-chip/calcite-chip.tsx b/src/components/calcite-chip/calcite-chip.tsx
@@ -3,7 +3,7 @@ import { getElementDir, getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { CSS, TEXT } from "./resources";
 import { ChipColor } from "./interfaces";
-import { Appearance, Scale, Theme } from "../interfaces";
+import { Appearance, Scale } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 
 @Component({
@@ -39,9 +39,6 @@ export class CalciteChip {
   /** specify the scale of the chip, defaults to m */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Select theme (light or dark) */
-  @Prop({ reflect: true }) theme: Theme;
-
   @Prop() value!: any;
 
   // --------------------------------------------------------------------------

diff --git a/src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx b/src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx
@@ -21,7 +21,7 @@ import {
 } from "../calcite-color-picker/utils";
 import Color from "color";
 import { CSS } from "./resources";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
 import { RGB } from "../calcite-color-picker/interfaces";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
@@ -97,11 +97,6 @@ export class CalciteColorPickerHexInput {
    */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /**
-   * The component's theme.
-   */
-  @Prop({ reflect: true }) theme: Theme;
-
   /**
    * The hex value.
    */

diff --git a/src/components/calcite-color-picker-swatch/calcite-color-picker-swatch.tsx b/src/components/calcite-color-picker-swatch/calcite-color-picker-swatch.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, h, Prop, VNode, Watch } from "@stencil/core";
 import Color from "color";
 import { COLORS, CSS } from "./resources";
-import { Scale, Theme } from "../interfaces";
-import { getElementProp } from "../../utils/dom";
+import { Scale } from "../interfaces";
+import { getThemeName } from "../../utils/dom";
 
 @Component({
   tag: "calcite-color-picker-swatch",
@@ -45,14 +45,6 @@ export class CalciteColorPickerSwatch {
   })
   scale: Scale = "m";
 
-  /**
-   * The component's theme.
-   */
-  @Prop({
-    reflect: true
-  })
-  theme: Theme;
-
   //--------------------------------------------------------------------------
   //
   //  Private State/Props
@@ -78,7 +70,7 @@ export class CalciteColorPickerSwatch {
     const { active, el, internalColor } = this;
     const borderRadius = active ? "100%" : "0";
     const hex = internalColor.hex();
-    const theme = getElementProp(el, "theme", "light", true);
+    const theme = getThemeName(el);
     const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
 
     return (