From 22e58ecc50613f01e20876fde716738bf5be1582 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 10:55:43 -0700
Subject: [PATCH 1/7] refactor!: Remove 'theme' props from components.
---
src/assets/styles/global.scss | 4 ++++
.../calcite-accordion/calcite-accordion.tsx | 5 +---
.../calcite-action-bar/calcite-action-bar.tsx | 7 +-----
.../calcite-action-pad/calcite-action-pad.tsx | 7 +-----
.../calcite-action/calcite-action.tsx | 7 +-----
.../calcite-alert/calcite-alert.tsx | 5 +---
.../calcite-avatar/calcite-avatar.tsx | 11 ++++-----
.../calcite-block/calcite-block.tsx | 13 ++--------
.../calcite-button/calcite-button.tsx | 8 ++-----
src/components/calcite-card/calcite-card.tsx | 6 +----
.../calcite-checkbox/calcite-checkbox.tsx | 5 +---
src/components/calcite-chip/calcite-chip.tsx | 5 +---
.../calcite-color-picker-hex-input.tsx | 7 +-----
.../calcite-color-picker-swatch.tsx | 14 +++--------
.../calcite-color-picker.tsx | 17 ++-----------
.../calcite-combobox/calcite-combobox.tsx | 5 +---
.../calcite-dropdown-item.tsx | 3 +--
.../calcite-dropdown/calcite-dropdown.tsx | 5 +---
src/components/calcite-fab/calcite-fab.tsx | 23 +++---------------
src/components/calcite-flow/calcite-flow.tsx | 15 +-----------
src/components/calcite-icon/calcite-icon.tsx | 10 +-------
.../calcite-inline-editable.tsx | 8 +------
.../calcite-input-message.tsx | 5 +---
.../calcite-input/calcite-input.tsx | 13 ++++------
.../calcite-label/calcite-label.tsx | 8 ++-----
src/components/calcite-link/calcite-link.tsx | 7 ++----
.../calcite-modal/calcite-modal.tsx | 7 ++----
.../calcite-notice/calcite-notice.tsx | 5 +---
.../calcite-pagination/calcite-pagination.tsx | 5 +---
.../calcite-panel/calcite-panel.tsx | 8 +------
.../calcite-pick-list/calcite-pick-list.tsx | 4 ----
.../calcite-pick-list/shared-list-render.tsx | 7 ++----
.../calcite-popover/calcite-popover.tsx | 4 ----
.../calcite-progress/calcite-progress.tsx | 4 ----
.../calcite-radio-button-group.tsx | 11 +--------
.../calcite-radio-button.tsx | 6 +----
.../calcite-radio-group.tsx | 5 +---
.../calcite-radio/calcite-radio.tsx | 5 +---
.../calcite-rating/calcite-rating.tsx | 10 +++-----
.../calcite-scrim/calcite-scrim.tsx | 4 ----
.../calcite-select/calcite-select.tsx | 10 +-------
.../calcite-shell/calcite-shell.tsx | 6 -----
.../calcite-slider/calcite-slider.tsx | 3 ---
.../calcite-split-button.tsx | 8 +------
.../calcite-stepper/calcite-stepper.tsx | 5 +---
.../calcite-switch/calcite-switch.tsx | 5 +---
src/components/calcite-tabs/calcite-tabs.tsx | 6 -----
.../calcite-tile-select.tsx | 6 +----
src/components/calcite-tile/calcite-tile.tsx | 8 +------
.../calcite-tip-manager.tsx | 6 -----
src/components/calcite-tip/calcite-tip.tsx | 6 -----
.../calcite-tooltip/calcite-tooltip.tsx | 4 ----
src/components/calcite-tree/calcite-tree.tsx | 5 +---
.../calcite-value-list/calcite-value-list.tsx | 4 ----
src/utils/dom.spec.ts | 24 ++++++++++++++++++-
src/utils/dom.ts | 10 ++++++++
56 files changed, 99 insertions(+), 325 deletions(-)
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index c4df1f3232a..a977ec21e80 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -12,6 +12,8 @@
-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};
@@ -32,6 +34,7 @@
[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};
@@ -46,6 +49,7 @@
[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.tsx b/src/components/calcite-accordion/calcite-accordion.tsx
index 9137acacfcf..2f6ea7406bb 100644
--- 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
index f2399e19d9c..9542883a260 100755
--- 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
index da46fa45e49..0b93ca30199 100755
--- 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
index 3f8d93c2a4a..52883e8c299 100755
--- 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.tsx b/src/components/calcite-alert/calcite-alert.tsx
index 1fc46e388df..caf192430d9 100644
--- 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
index 068b2f95d5d..b21305cbe8b 100644
--- 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
index d1b2223f903..be22b576e75 100644
--- 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
index 3298604e5ee..f08d3d0565a 100644
--- 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
index 01d4a99ca96..010ae8b7701 100644
--- 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
index 761e8a4651b..2798db64539 100644
--- 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
index 9f14f779403..7cf7408a96c 100644
--- 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
index 19da3c4883f..0174a4b3d27 100644
--- 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
index f41d7434b27..f65319d764f 100644
--- 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 (
diff --git a/src/components/calcite-color-picker/calcite-color-picker.tsx b/src/components/calcite-color-picker/calcite-color-picker.tsx
index 82b12678f07..3382f69cba9 100644
--- a/src/components/calcite-color-picker/calcite-color-picker.tsx
+++ b/src/components/calcite-color-picker/calcite-color-picker.tsx
@@ -14,7 +14,7 @@ import {
import Color from "color";
import { ColorAppearance, ColorMode, ColorValue, InternalColor } from "./interfaces";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import {
CSS,
DEFAULT_COLOR,
@@ -187,14 +187,6 @@ export class CalciteColorPicker {
*/
@Prop() storageId: string;
- /**
- * The component's theme.
- */
- @Prop({
- reflect: true
- })
- theme: Theme;
-
/**
* The color value.
*
@@ -522,8 +514,7 @@ export class CalciteColorPicker {
intlSaved,
intlSaveColor,
savedColors,
- scale,
- theme
+ scale
} = this;
const selectedColorInHex = color ? color.hex() : null;
const hexInputScale = scale !== "s" ? "m" : scale;
@@ -600,7 +591,6 @@ export class CalciteColorPicker {
onCalciteColorPickerHexInputChange={this.handleHexInputChange}
ref={this.storeHexInputRef}
scale={hexInputScale}
- theme={theme}
value={selectedColorInHex}
/>
</div>
@@ -637,7 +627,6 @@ export class CalciteColorPicker {
iconStart="minus"
onClick={this.deleteColor}
scale={scale}
- theme={theme}
/>
<calcite-button
appearance="transparent"
@@ -648,7 +637,6 @@ export class CalciteColorPicker {
iconStart="plus"
onClick={this.saveColor}
scale={scale}
- theme={theme}
/>
</div>
</div>
@@ -665,7 +653,6 @@ export class CalciteColorPicker {
onKeyDown={this.handleSavedColorKeyDown}
scale={scale}
tabIndex={0}
- theme={theme}
/>
))
]}
diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx
index 5b29e0b82e9..05bc9ebfbdd 100644
--- a/src/components/calcite-combobox/calcite-combobox.tsx
+++ b/src/components/calcite-combobox/calcite-combobox.tsx
@@ -25,7 +25,7 @@ import {
} from "../../utils/popper";
import { StrictModifiers, Instance as Popper } from "@popperjs/core";
import { guid } from "../../utils/guid";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
import {
ComboboxChildSelector,
@@ -121,9 +121,6 @@ export class CalciteCombobox {
/** Specify the scale of the combobox, defaults to m */
@Prop({ reflect: true }) scale: Scale = "m";
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
//--------------------------------------------------------------------------
//
// Event Listeners
diff --git a/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx b/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx
index bd46f28e40d..666e0645f8d 100644
--- a/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx
+++ b/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx
@@ -111,8 +111,7 @@ export class CalciteDropdownItem {
"has-text",
"is-link",
"dir",
- "id",
- "theme"
+ "id"
]);
const dir = getElementDir(this.el);
const scale = getElementProp(this.el, "scale", "m");
diff --git a/src/components/calcite-dropdown/calcite-dropdown.tsx b/src/components/calcite-dropdown/calcite-dropdown.tsx
index cf4eb7780b4..c5e2fb57dfc 100644
--- a/src/components/calcite-dropdown/calcite-dropdown.tsx
+++ b/src/components/calcite-dropdown/calcite-dropdown.tsx
@@ -21,7 +21,7 @@ import {
OverlayPositioning
} from "../../utils/popper";
import { StrictModifiers, Instance as Popper } from "@popperjs/core";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { DefaultDropdownPlacement } from "./resources";
import { CSS_UTILITY } from "../../utils/resources";
@@ -90,9 +90,6 @@ export class CalciteDropdown {
*/
@Prop({ mutable: true }) selectedItems: HTMLCalciteDropdownItemElement[] = [];
- /** specify the theme of the dropdown, defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
/** specify whether the dropdown is opened by hover or click of a trigger element */
@Prop({ reflect: true }) type: "hover" | "click" = "click";
diff --git a/src/components/calcite-fab/calcite-fab.tsx b/src/components/calcite-fab/calcite-fab.tsx
index c0a42e3b601..6a2a91af882 100755
--- a/src/components/calcite-fab/calcite-fab.tsx
+++ b/src/components/calcite-fab/calcite-fab.tsx
@@ -1,5 +1,5 @@
import { Component, Element, Method, Prop, h, VNode } from "@stencil/core";
-import { Appearance, Scale, Theme } from "../interfaces";
+import { Appearance, Scale } from "../interfaces";
import { ButtonColor } from "../calcite-button/interfaces";
import { CSS, ICONS } from "./resources";
import { focusElement, getElementDir } from "../../utils/dom";
@@ -61,11 +61,6 @@ export class CalciteFab {
*/
@Prop({ reflect: true }) textEnabled = false;
- /**
- * Used to set the component's color scheme.
- */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
@@ -94,19 +89,8 @@ export class CalciteFab {
// --------------------------------------------------------------------------
render(): VNode {
- const {
- appearance,
- color,
- disabled,
- el,
- loading,
- scale,
- theme,
- textEnabled,
- icon,
- label,
- text
- } = this;
+ const { appearance, color, disabled, el, loading, scale, textEnabled, icon, label, text } =
+ this;
const title = !textEnabled ? label || text || null : null;
const dir = getElementDir(el);
@@ -125,7 +109,6 @@ export class CalciteFab {
}}
round={true}
scale={scale}
- theme={theme}
title={title}
width="auto"
>
diff --git a/src/components/calcite-flow/calcite-flow.tsx b/src/components/calcite-flow/calcite-flow.tsx
index ed8a3ffcd0c..0211bde3603 100755
--- a/src/components/calcite-flow/calcite-flow.tsx
+++ b/src/components/calcite-flow/calcite-flow.tsx
@@ -1,9 +1,7 @@
-import { Component, Element, Listen, Method, Prop, State, h, VNode } from "@stencil/core";
+import { Component, Element, Listen, Method, State, h, VNode } from "@stencil/core";
import { CSS } from "./resources";
-import { Theme } from "../interfaces";
-
import { FlowDirection } from "./interfaces";
/**
@@ -15,17 +13,6 @@ import { FlowDirection } from "./interfaces";
shadow: true
})
export class CalciteFlow {
- // --------------------------------------------------------------------------
- //
- // Properties
- //
- // --------------------------------------------------------------------------
-
- /**
- * Used to set the component's color scheme.
- */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Public Methods
diff --git a/src/components/calcite-icon/calcite-icon.tsx b/src/components/calcite-icon/calcite-icon.tsx
index 124a062997f..cd21edaa4cb 100644
--- a/src/components/calcite-icon/calcite-icon.tsx
+++ b/src/components/calcite-icon/calcite-icon.tsx
@@ -2,7 +2,7 @@ import { Build, Component, Element, h, Host, Prop, State, VNode, Watch } from "@
import { CSS } from "./resources";
import { getElementDir } from "../../utils/dom";
import { fetchIcon, scaleToPx } from "./utils";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { CalciteIconPath, CalciteMultiPathEntry } from "@esri/calcite-ui-icons";
@Component({
@@ -59,14 +59,6 @@ export class CalciteIcon {
@Prop()
textLabel: string;
- /**
- * Icon theme. Can be "light" or "dark".
- */
- @Prop({
- reflect: true
- })
- theme: Theme;
-
//--------------------------------------------------------------------------
//
// Lifecycle
diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.tsx b/src/components/calcite-inline-editable/calcite-inline-editable.tsx
index 8eca1c544c3..7b65b69b826 100644
--- a/src/components/calcite-inline-editable/calcite-inline-editable.tsx
+++ b/src/components/calcite-inline-editable/calcite-inline-editable.tsx
@@ -10,7 +10,7 @@ import {
Watch
} from "@stencil/core";
import { getElementProp } from "../../utils/dom";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { TEXT } from "./resources";
/**
@@ -65,9 +65,6 @@ export class CalciteInlineEditable {
/** specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale */
@Prop({ reflect: true, mutable: true }) scale?: Scale;
- /** specify the theme of the inline-editable component, defaults to the theme of the wrapped calcite-input or the theme of the closest wrapping component with a set theme */
- @Prop({ reflect: true }) theme?: Theme;
-
/** when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */
@Prop() afterConfirm?: () => Promise<void>;
@@ -113,7 +110,6 @@ export class CalciteInlineEditable {
onClick={this.enableEditingHandler}
ref={(el) => (this.enableEditingButton = el)}
scale={this.scale}
- theme={this.theme}
/>
)}
{this.shouldShowControls && [
@@ -127,7 +123,6 @@ export class CalciteInlineEditable {
iconStart="x"
onClick={this.cancelEditingHandler}
scale={this.scale}
- theme={this.theme}
/>
</div>,
<calcite-button
@@ -140,7 +135,6 @@ export class CalciteInlineEditable {
loading={this.loading}
onClick={this.confirmChangesHandler}
scale={this.scale}
- theme={this.theme}
/>
]}
</div>
diff --git a/src/components/calcite-input-message/calcite-input-message.tsx b/src/components/calcite-input-message/calcite-input-message.tsx
index 8509c764d8a..635faf6d5b5 100644
--- a/src/components/calcite-input-message/calcite-input-message.tsx
+++ b/src/components/calcite-input-message/calcite-input-message.tsx
@@ -1,6 +1,6 @@
import { Component, Element, Host, h, Prop, VNode, Watch } from "@stencil/core";
import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
-import { Scale, Status, Theme } from "../interfaces";
+import { Scale, Status } from "../interfaces";
import { InputMessageType, StatusIconDefaults } from "./interfaces";
import { CSS_UTILITY } from "../../utils/resources";
@@ -36,9 +36,6 @@ export class CalciteInputMessage {
/** specify the status of the input field, determines message and icons */
@Prop({ reflect: true, mutable: true }) status: Status = "idle";
- /** specify the theme, defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
/** specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */
@Prop({ reflect: true }) type: InputMessageType = "default";
diff --git a/src/components/calcite-input/calcite-input.tsx b/src/components/calcite-input/calcite-input.tsx
index 6bea7bebec7..aff7dfc6f93 100644
--- a/src/components/calcite-input/calcite-input.tsx
+++ b/src/components/calcite-input/calcite-input.tsx
@@ -1,4 +1,4 @@
-import { Scale, Status, Theme } from "../interfaces";
+import { Scale, Status } from "../interfaces";
import {
Component,
Element,
@@ -152,9 +152,6 @@ export class CalciteInput {
/** optionally add suffix **/
@Prop() suffixText?: string;
- /** specify the theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
/**
* specify the input type
*
@@ -561,7 +558,6 @@ export class CalciteInput {
"scale",
"status",
"suffix-text",
- "theme",
"number-button-type",
"locale",
"group-separator"
@@ -581,7 +577,7 @@ export class CalciteInput {
disabled={this.loading}
onClick={this.clearInputValue}
>
- <calcite-icon icon="x" scale={iconScale} theme={this.theme} />
+ <calcite-icon icon="x" scale={iconScale} />
</button>
);
const iconEl = (
@@ -591,7 +587,6 @@ export class CalciteInput {
flipRtl={this.iconFlipRtl}
icon={this.requestedIcon}
scale={iconScale}
- theme={this.theme}
/>
);
@@ -604,7 +599,7 @@ export class CalciteInput {
data-adjustment="up"
onMouseDown={this.numberButtonMouseDownHandler}
>
- <calcite-icon icon="chevron-up" scale={iconScale} theme={this.theme} />
+ <calcite-icon icon="chevron-up" scale={iconScale} />
</div>
);
@@ -614,7 +609,7 @@ export class CalciteInput {
data-adjustment="down"
onMouseDown={this.numberButtonMouseDownHandler}
>
- <calcite-icon icon="chevron-down" scale={iconScale} theme={this.theme} />
+ <calcite-icon icon="chevron-down" scale={iconScale} />
</div>
);
diff --git a/src/components/calcite-label/calcite-label.tsx b/src/components/calcite-label/calcite-label.tsx
index b8c28d21373..a6d9f5cd6d5 100644
--- a/src/components/calcite-label/calcite-label.tsx
+++ b/src/components/calcite-label/calcite-label.tsx
@@ -1,7 +1,7 @@
import { Component, Element, Event, Listen, h, Prop, EventEmitter, VNode } from "@stencil/core";
import { getAttributes, getElementDir, queryElementRoots } from "../../utils/dom";
import { FocusRequest } from "./interfaces";
-import { Alignment, Scale, Status, Theme } from "../interfaces";
+import { Alignment, Scale, Status } from "../interfaces";
import { CSS_UTILITY } from "../../utils/resources";
@Component({
@@ -36,9 +36,6 @@ export class CalciteLabel {
/** specify the scale of the input, defaults to m */
@Prop({ reflect: true }) scale: Scale = "m";
- /** specify theme of the label and its any child input / input messages */
- @Prop({ reflect: true }) theme: Theme;
-
/** is the wrapped element positioned inline with the label slotted text */
@Prop({ reflect: true }) layout: "inline" | "inline-space-between" | "default" = "default";
@@ -159,8 +156,7 @@ export class CalciteLabel {
"dir",
"layout",
"scale",
- "status",
- "theme"
+ "status"
]);
const dir = getElementDir(this.el);
return (
diff --git a/src/components/calcite-link/calcite-link.tsx b/src/components/calcite-link/calcite-link.tsx
index 6beeb66ac92..34805837e95 100644
--- a/src/components/calcite-link/calcite-link.tsx
+++ b/src/components/calcite-link/calcite-link.tsx
@@ -1,6 +1,6 @@
import { Component, Element, h, Host, Method, Prop, VNode } from "@stencil/core";
import { getAttributes, focusElement, getElementDir } from "../../utils/dom";
-import { FlipContext, Theme } from "../interfaces";
+import { FlipContext } from "../interfaces";
import { CSS_UTILITY } from "../../utils/resources";
/** @slot default text slot for link text */
@@ -44,9 +44,6 @@ export class CalciteLink {
/** optionally pass an icon to display at the start of a button - accepts calcite ui icon names */
@Prop({ reflect: true }) iconStart?: string;
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
//--------------------------------------------------------------------------
//
// Lifecycle
@@ -78,7 +75,7 @@ export class CalciteLink {
/>
);
- const attributes = getAttributes(this.el, ["dir", "icon-end", "icon-start", "id", "theme"]);
+ const attributes = getAttributes(this.el, ["dir", "icon-end", "icon-start", "id"]);
const Tag = this.childElType;
const role = this.childElType === "span" ? "link" : null;
const tabIndex = this.disabled ? -1 : this.childElType === "span" ? 0 : null;
diff --git a/src/components/calcite-modal/calcite-modal.tsx b/src/components/calcite-modal/calcite-modal.tsx
index b2afe47acc2..c23e8493ba2 100644
--- a/src/components/calcite-modal/calcite-modal.tsx
+++ b/src/components/calcite-modal/calcite-modal.tsx
@@ -17,7 +17,7 @@ import { CalciteFocusableElement, focusElement, getElementDir } from "../../util
import { getKey } from "../../utils/key";
import { queryShadowRoot } from "@a11y/focus-trap/shadow";
import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { ModalBackgroundColor } from "./interfaces";
import { CSS_UTILITY } from "../../utils/resources";
@@ -81,9 +81,6 @@ export class CalciteModal {
* Use color to add importance to destructive/workflow dialogs. */
@Prop({ reflect: true }) color?: "red" | "blue";
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
/** Background color of modal content */
@Prop({ reflect: true }) backgroundColor: ModalBackgroundColor = "white";
@@ -122,7 +119,7 @@ export class CalciteModal {
const dir = getElementDir(this.el);
return (
<Host aria-modal="true" role="dialog">
- <calcite-scrim class="scrim" theme="dark" />
+ <calcite-scrim class="scrim" />
{this.renderStyle()}
<div class={{ modal: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
<div data-focus-fence onFocus={this.focusLastElement} tabindex="0" />
diff --git a/src/components/calcite-notice/calcite-notice.tsx b/src/components/calcite-notice/calcite-notice.tsx
index ab1a9104f5b..f032858f568 100644
--- a/src/components/calcite-notice/calcite-notice.tsx
+++ b/src/components/calcite-notice/calcite-notice.tsx
@@ -11,7 +11,7 @@ import {
} from "@stencil/core";
import { SLOTS, TEXT } from "./calcite-notice.resources";
-import { Scale, Theme, Width } from "../interfaces";
+import { Scale, Width } from "../interfaces";
import { StatusColor, StatusIcons } from "../calcite-alert/interfaces";
import { getElementDir, setRequestedIcon } from "../../utils/dom";
import { CSS_UTILITY } from "../../utils/resources";
@@ -67,9 +67,6 @@ export class CalciteNotice {
/** specify the scale of the notice, defaults to m */
@Prop({ reflect: true }) scale: Scale = "m";
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
/** specify the width of the notice, defaults to auto */
@Prop({ reflect: true }) width: Width = "auto";
diff --git a/src/components/calcite-pagination/calcite-pagination.tsx b/src/components/calcite-pagination/calcite-pagination.tsx
index d65a7f0155c..f3a4297b41b 100644
--- a/src/components/calcite-pagination/calcite-pagination.tsx
+++ b/src/components/calcite-pagination/calcite-pagination.tsx
@@ -10,7 +10,7 @@ import {
Fragment
} from "@stencil/core";
import { getElementDir } from "../../utils/dom";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { CSS, TEXT } from "./resources";
@@ -47,9 +47,6 @@ export class CalcitePagination {
/** title of the previous button */
@Prop() textLabelPrevious: string = TEXT.previousLabel;
- /** specify the theme of accordion, defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
/** The scale of the pagination */
@Prop({ reflect: true }) scale: Scale = "m";
diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index 0ad4c1c8f4b..8ee848943ab 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -13,7 +13,7 @@ import {
import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
import { getElementDir, getSlotted } from "../../utils/dom";
import { CSS_UTILITY } from "../../utils/resources";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { HeadingLevel, CalciteHeading } from "../functional/CalciteHeading";
/**
@@ -102,12 +102,6 @@ export class CalcitePanel {
*/
@Prop() intlOptions?: string;
- /**
- * Used to set the component's color scheme.
- */
-
- @Prop({ reflect: true }) theme: Theme;
-
/**
* Heading text.
*/
diff --git a/src/components/calcite-pick-list/calcite-pick-list.tsx b/src/components/calcite-pick-list/calcite-pick-list.tsx
index 73156635bb3..850a27705c6 100644
--- a/src/components/calcite-pick-list/calcite-pick-list.tsx
+++ b/src/components/calcite-pick-list/calcite-pick-list.tsx
@@ -30,7 +30,6 @@ import {
removeItem
} from "./shared-list-logic";
import List from "./shared-list-render";
-import { Theme } from "../interfaces";
import { HeadingLevel } from "../functional/CalciteHeading";
/**
@@ -84,9 +83,6 @@ export class CalcitePickList<
*/
@Prop({ reflect: true }) multiple = false;
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
diff --git a/src/components/calcite-pick-list/shared-list-render.tsx b/src/components/calcite-pick-list/shared-list-render.tsx
index c16b98ebf0a..a36fb58c20c 100644
--- a/src/components/calcite-pick-list/shared-list-render.tsx
+++ b/src/components/calcite-pick-list/shared-list-render.tsx
@@ -4,7 +4,6 @@ import { CSS } from "./resources";
import { getElementDir } from "../../utils/dom";
import { handleFilter } from "./shared-list-logic";
import DOMAttributes = JSXBase.DOMAttributes;
-import { Theme } from "../interfaces";
interface ListProps extends DOMAttributes {
disabled: boolean;
@@ -13,7 +12,6 @@ interface ListProps extends DOMAttributes {
dataForFilter: any;
handleFilter: typeof handleFilter;
filterPlaceholder: string;
- theme: Theme;
el: HTMLCalcitePickListElement | HTMLCalciteValueListElement;
setFilterEl: (el: HTMLCalciteFilterElement) => void;
}
@@ -27,8 +25,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes> = (
handleFilter,
filterPlaceholder,
el,
- setFilterEl,
- theme
+ setFilterEl
},
...rest
}): VNode => {
@@ -50,7 +47,7 @@ export const List: FunctionalComponent<{ props: ListProps } & DOMAttributes> = (
) : null}
<slot name="menu-actions" />
</header>
- {loading || disabled ? <calcite-scrim loading={loading} theme={theme} /> : null}
+ {loading || disabled ? <calcite-scrim loading={loading} /> : null}
{defaultSlot}
</section>
</Host>
diff --git a/src/components/calcite-popover/calcite-popover.tsx b/src/components/calcite-popover/calcite-popover.tsx
index d0a9a5e199a..cf2e155a41b 100644
--- a/src/components/calcite-popover/calcite-popover.tsx
+++ b/src/components/calcite-popover/calcite-popover.tsx
@@ -22,7 +22,6 @@ import {
} from "../../utils/popper";
import { StrictModifiers, Placement, Instance as Popper } from "@popperjs/core";
import { guid } from "../../utils/guid";
-import { Theme } from "../interfaces";
import { getElementDir, queryElementRoots } from "../../utils/dom";
import { CSS_UTILITY } from "../../utils/resources";
import { PopoverFocusId } from "./resources";
@@ -131,9 +130,6 @@ export class CalcitePopover {
/** Text for close button. */
@Prop() intlClose = TEXT.close;
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
diff --git a/src/components/calcite-progress/calcite-progress.tsx b/src/components/calcite-progress/calcite-progress.tsx
index 1f045a63866..d0b96033fc5 100644
--- a/src/components/calcite-progress/calcite-progress.tsx
+++ b/src/components/calcite-progress/calcite-progress.tsx
@@ -1,5 +1,4 @@
import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
-import { Theme } from "../interfaces";
@Component({
tag: "calcite-progress",
styleUrl: "calcite-progress.scss",
@@ -20,9 +19,6 @@ export class CalciteProgress {
/** For indeterminate progress bars, reverse the animation direction */
@Prop() reversed = false;
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
render(): VNode {
const isDeterminate = this.type === "determinate";
const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
diff --git a/src/components/calcite-radio-button-group/calcite-radio-button-group.tsx b/src/components/calcite-radio-button-group/calcite-radio-button-group.tsx
index 62f2ed1d2cd..4da5681b737 100644
--- a/src/components/calcite-radio-button-group/calcite-radio-button-group.tsx
+++ b/src/components/calcite-radio-button-group/calcite-radio-button-group.tsx
@@ -10,7 +10,7 @@ import {
EventEmitter,
Listen
} from "@stencil/core";
-import { Layout, Scale, Theme } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
@Component({
tag: "calcite-radio-button-group",
@@ -70,14 +70,6 @@ export class CalciteRadioButtonGroup {
this.passPropsToRadioButtons();
}
- /** The color theme of the radio button group. */
- @Prop({ reflect: true }) theme: Theme;
-
- @Watch("theme")
- onThemeChange(): void {
- this.passPropsToRadioButtons();
- }
-
//--------------------------------------------------------------------------
//
// Lifecycle
@@ -103,7 +95,6 @@ export class CalciteRadioButtonGroup {
radioButton.name = this.name;
radioButton.required = this.required;
radioButton.scale = this.scale;
- radioButton.theme = this.theme;
});
}
};
diff --git a/src/components/calcite-radio-button/calcite-radio-button.tsx b/src/components/calcite-radio-button/calcite-radio-button.tsx
index 56ed224d115..1e92629cd44 100644
--- a/src/components/calcite-radio-button/calcite-radio-button.tsx
+++ b/src/components/calcite-radio-button/calcite-radio-button.tsx
@@ -12,7 +12,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({
@@ -123,9 +123,6 @@ export class CalciteRadioButton {
/** The scale (size) of the radio button. <code>scale</code> is passed as a property automatically from <code>calcite-radio-button-group</code>. */
@Prop({ reflect: true }) scale: Scale = "m";
- /** The color theme of the radio button, <code>theme</code> is passed as a property automatically from <code>calcite-radio-button-group</code>. */
- @Prop({ reflect: true }) theme: Theme;
-
/** The value of the radio button. */
@Prop() value!: any;
@@ -358,7 +355,6 @@ export class CalciteRadioButton {
hovered={this.hovered}
ref={(el) => (this.radio = el)}
scale={this.scale}
- theme={this.theme}
/>
</div>
);
diff --git a/src/components/calcite-radio-group/calcite-radio-group.tsx b/src/components/calcite-radio-group/calcite-radio-group.tsx
index ae104691dd2..481623c4051 100644
--- a/src/components/calcite-radio-group/calcite-radio-group.tsx
+++ b/src/components/calcite-radio-group/calcite-radio-group.tsx
@@ -15,7 +15,7 @@ import {
import { getElementDir, hasLabel } from "../../utils/dom";
import { getKey } from "../../utils/key";
-import { Layout, Scale, Theme, Width } from "../interfaces";
+import { Layout, Scale, Width } from "../interfaces";
import { RadioAppearance } from "./interfaces";
@Component({
@@ -86,9 +86,6 @@ export class CalciteRadioGroup {
}
}
- /** The component's theme. */
- @Prop({ reflect: true }) theme: Theme;
-
/** specify the width of the group, defaults to auto */
@Prop({ reflect: true }) width: Extract<"auto" | "full", Width> = "auto";
diff --git a/src/components/calcite-radio/calcite-radio.tsx b/src/components/calcite-radio/calcite-radio.tsx
index 400ff03e10f..92e29820168 100644
--- a/src/components/calcite-radio/calcite-radio.tsx
+++ b/src/components/calcite-radio/calcite-radio.tsx
@@ -1,5 +1,5 @@
import { Component, h, Prop } from "@stencil/core";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
@Component({
tag: "calcite-radio",
@@ -37,9 +37,6 @@ export class CalciteRadio {
/** The scale (size) of the radio. */
@Prop({ reflect: true }) scale: Scale = "m";
- /** The color theme of the radio, */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Render Methods
diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx
index 7ac0c004de6..7b6f66addf9 100644
--- a/src/components/calcite-rating/calcite-rating.tsx
+++ b/src/components/calcite-rating/calcite-rating.tsx
@@ -13,7 +13,7 @@ import {
} from "@stencil/core";
import { getElementDir, hasLabel } from "../../utils/dom";
import { guid } from "../../utils/guid";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
import { TEXT } from "./calcite-rating-resources";
import { CSS_UTILITY } from "../../utils/resources";
@@ -37,9 +37,6 @@ export class CalciteRating {
//
// --------------------------------------------------------------------------
- /** specify the theme of scrim, defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
/** specify the scale of the component, defaults to m */
@Prop({ reflect: true }) scale: Scale = "m";
@@ -129,7 +126,7 @@ export class CalciteRating {
/>
{partial && (
<div class="fraction" style={{ width: `${fraction * 100}%` }}>
- <calcite-icon icon="star-f" scale={this.scale} theme={this.theme} />
+ <calcite-icon icon="star-f" scale={this.scale} />
</div>
)}
<span class="visually-hidden">{this.intlStars.replace("${num}", `${i}`)}</span>
@@ -157,7 +154,7 @@ export class CalciteRating {
}
render() {
- const { intlRating, showChip, scale, theme, count, average } = this;
+ const { intlRating, showChip, scale, count, average } = this;
const dir = getElementDir(this.el);
return (
<Fragment>
@@ -175,7 +172,6 @@ export class CalciteRating {
class={{ [CSS_UTILITY.rtl]: dir === "rtl" }}
dir={dir}
scale={scale}
- theme={theme}
value={count?.toString()}
>
{!!average && <span class="number--average">{average.toString()}</span>}
diff --git a/src/components/calcite-scrim/calcite-scrim.tsx b/src/components/calcite-scrim/calcite-scrim.tsx
index 4a82deb6a7a..a49e460f9ea 100644
--- a/src/components/calcite-scrim/calcite-scrim.tsx
+++ b/src/components/calcite-scrim/calcite-scrim.tsx
@@ -1,5 +1,4 @@
import { Component, Prop, h, VNode } from "@stencil/core";
-import { Theme } from "../interfaces";
import { CSS, TEXT } from "./resources";
@@ -24,9 +23,6 @@ export class CalciteScrim {
*/
@Prop({ reflect: true }) loading = false;
- /** specify the theme of scrim, defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Render Method
diff --git a/src/components/calcite-select/calcite-select.tsx b/src/components/calcite-select/calcite-select.tsx
index 077e3d6d268..97cabb8aaac 100644
--- a/src/components/calcite-select/calcite-select.tsx
+++ b/src/components/calcite-select/calcite-select.tsx
@@ -11,7 +11,7 @@ import {
VNode
} from "@stencil/core";
import { Direction, focusElement, getElementDir } from "../../utils/dom";
-import { Scale, Theme, Width } from "../interfaces";
+import { Scale, Width } from "../interfaces";
import { CSS } from "./resources";
import { FocusRequest } from "../calcite-label/interfaces";
import { CSS_UTILITY } from "../../utils/resources";
@@ -72,14 +72,6 @@ export class CalciteSelect {
@Prop({ mutable: true })
selectedOption: HTMLCalciteOptionElement;
- /**
- * The component theme.
- */
- @Prop({
- reflect: true
- })
- theme: Theme;
-
/**
* The component width.
*/
diff --git a/src/components/calcite-shell/calcite-shell.tsx b/src/components/calcite-shell/calcite-shell.tsx
index 16a31891a82..a8b6518ea3f 100755
--- a/src/components/calcite-shell/calcite-shell.tsx
+++ b/src/components/calcite-shell/calcite-shell.tsx
@@ -1,6 +1,5 @@
import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core";
import { CSS, SLOTS } from "./resources";
-import { Theme } from "../interfaces";
import { getSlotted } from "../../utils/dom";
/**
@@ -23,11 +22,6 @@ export class CalciteShell {
//
// --------------------------------------------------------------------------
- /**
- * Used to set the component's color scheme.
- */
- @Prop({ reflect: true }) theme: Theme;
-
/**
* Positions the center content behind any calcite-shell-panels.
*/
diff --git a/src/components/calcite-slider/calcite-slider.tsx b/src/components/calcite-slider/calcite-slider.tsx
index 82411b62468..8782b172c74 100644
--- a/src/components/calcite-slider/calcite-slider.tsx
+++ b/src/components/calcite-slider/calcite-slider.tsx
@@ -16,7 +16,6 @@ import { guid } from "../../utils/guid";
import { getKey } from "../../utils/key";
import { DataSeries } from "../calcite-graph/interfaces";
import { hasLabel } from "../../utils/dom";
-import { Theme } from "../interfaces";
type activeSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
@@ -38,8 +37,6 @@ export class CalciteSlider {
// Properties
//
//--------------------------------------------------------------------------
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
/** Disable and gray out the slider */
@Prop({ reflect: true }) disabled = false;
diff --git a/src/components/calcite-split-button/calcite-split-button.tsx b/src/components/calcite-split-button/calcite-split-button.tsx
index 5892d4a8a6d..bc0bf7aa3f8 100644
--- a/src/components/calcite-split-button/calcite-split-button.tsx
+++ b/src/components/calcite-split-button/calcite-split-button.tsx
@@ -1,7 +1,7 @@
import { Component, Element, Event, EventEmitter, h, Prop, VNode } from "@stencil/core";
import { getElementDir } from "../../utils/dom";
import { ButtonAppearance, ButtonColor, DropdownIconType } from "../calcite-button/interfaces";
-import { FlipContext, Scale, Theme } from "../interfaces";
+import { FlipContext, Scale } from "../interfaces";
@Component({
tag: "calcite-split-button",
@@ -48,9 +48,6 @@ export class CalciteSplitButton {
/** specify the scale of the control, defaults to m */
@Prop({ reflect: true }) scale: Scale = "m";
- /** select theme (light or dark), defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
/** fired when the primary button is clicked */
@Event() calciteSplitButtonPrimaryClick: EventEmitter;
@@ -74,7 +71,6 @@ export class CalciteSplitButton {
onClick={this.calciteSplitButtonPrimaryClickHandler}
scale={this.scale}
splitChild={"primary"}
- theme={this.theme}
>
{this.primaryText}
</calcite-button>
@@ -86,7 +82,6 @@ export class CalciteSplitButton {
onClick={this.calciteSplitButtonSecondaryClickHandler}
placement="bottom-trailing"
scale={this.scale}
- theme={this.theme}
width={this.scale}
>
<calcite-button
@@ -99,7 +94,6 @@ export class CalciteSplitButton {
scale={this.scale}
slot="dropdown-trigger"
splitChild={"secondary"}
- theme={this.theme}
/>
<slot />
</calcite-dropdown>
diff --git a/src/components/calcite-stepper/calcite-stepper.tsx b/src/components/calcite-stepper/calcite-stepper.tsx
index ea547c960a2..1ebe75f91df 100644
--- a/src/components/calcite-stepper/calcite-stepper.tsx
+++ b/src/components/calcite-stepper/calcite-stepper.tsx
@@ -12,7 +12,7 @@ import {
} from "@stencil/core";
import { IESTYLES } from "./calcite-stepper.resources";
import { getKey } from "../../utils/key";
-import { Layout, Scale, Theme } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
@Component({
tag: "calcite-stepper",
@@ -46,9 +46,6 @@ export class CalciteStepper {
/** specify the scale of stepper, defaults to m */
@Prop({ reflect: true }) scale: Scale = "m";
- /** specify the theme of stepper, defaults to light */
- @Prop({ reflect: true }) theme: Theme;
-
/** @internal */
@Prop({ mutable: true }) requestedContent: HTMLElement[] | NodeListOf<any>;
diff --git a/src/components/calcite-switch/calcite-switch.tsx b/src/components/calcite-switch/calcite-switch.tsx
index d7f96c34327..e38eb1c96e0 100644
--- a/src/components/calcite-switch/calcite-switch.tsx
+++ b/src/components/calcite-switch/calcite-switch.tsx
@@ -17,7 +17,7 @@ import { hiddenInputStyle } from "../../utils/form";
import { guid } from "../../utils/guid";
import { getKey } from "../../utils/key";
import { CSS_UTILITY } from "../../utils/resources";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
@Component({
tag: "calcite-switch",
@@ -67,9 +67,6 @@ export class CalciteSwitch {
this.inputEl.checked = newSwitched;
}
- /** The component's theme. */
- @Prop({ reflect: true }) theme: Theme;
-
/** The value of the switch input */
@Prop({ reflect: true }) value?: any;
diff --git a/src/components/calcite-tabs/calcite-tabs.tsx b/src/components/calcite-tabs/calcite-tabs.tsx
index f6380958289..c0915ef6a9a 100644
--- a/src/components/calcite-tabs/calcite-tabs.tsx
+++ b/src/components/calcite-tabs/calcite-tabs.tsx
@@ -1,5 +1,4 @@
import { Component, Prop, h, Element, Listen, State, VNode, Fragment } from "@stencil/core";
-import { Theme } from "../interfaces";
import { TabLayout, TabPosition } from "./interfaces";
@Component({
@@ -22,11 +21,6 @@ export class CalciteTabs {
//
//--------------------------------------------------------------------------
- /**
- * Select theme (light or dark)
- */
- @Prop({ reflect: true }) theme: Theme;
-
/**
* Align tab titles to the edge or fully justify them across the tab nav ("center")
*/
diff --git a/src/components/calcite-tile-select/calcite-tile-select.tsx b/src/components/calcite-tile-select/calcite-tile-select.tsx
index 4e44b648514..05b5fb5eca4 100644
--- a/src/components/calcite-tile-select/calcite-tile-select.tsx
+++ b/src/components/calcite-tile-select/calcite-tile-select.tsx
@@ -1,5 +1,5 @@
import { Component, Element, h, Prop, Listen, VNode, Watch, State, Method } from "@stencil/core";
-import { Alignment, Theme, Width } from "../interfaces";
+import { Alignment, Width } from "../interfaces";
import { TileSelectType } from "./interfaces";
import { getElementDir } from "../../utils/dom";
import { CSS_UTILITY } from "../../utils/resources";
@@ -61,9 +61,6 @@ export class CalciteTileSelect {
/** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
@Prop({ reflect: true }) inputAlignment: Extract<"end" | "start", Alignment> = "start";
- /** The theme of the tile select. */
- @Prop({ reflect: true }) theme: Theme;
-
/** The selection mode of the tile select: radio (single) or checkbox (multiple). */
@Prop({ reflect: true }) type: TileSelectType = "radio";
@@ -200,7 +197,6 @@ export class CalciteTileSelect {
if (this.name) {
this.input.name = this.name;
}
- this.input.theme = this.theme;
if (this.value) {
this.input.value = this.value != null ? this.value.toString() : "";
}
diff --git a/src/components/calcite-tile/calcite-tile.tsx b/src/components/calcite-tile/calcite-tile.tsx
index 1918bf7178a..b65da435635 100644
--- a/src/components/calcite-tile/calcite-tile.tsx
+++ b/src/components/calcite-tile/calcite-tile.tsx
@@ -1,5 +1,4 @@
import { Component, h, Prop, VNode, Fragment } from "@stencil/core";
-import { Theme } from "../interfaces";
@Component({
tag: "calcite-tile",
@@ -40,9 +39,6 @@ export class CalciteTile {
/** The icon that appears at the top of the tile. */
@Prop({ reflect: true }) icon?: string;
- /** The theme of the tile. */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Render Methods
@@ -74,9 +70,7 @@ export class CalciteTile {
return (
<Fragment>
{this.href ? (
- <calcite-link href={this.href} theme={this.theme}>
- {this.renderTile()}
- </calcite-link>
+ <calcite-link href={this.href}>{this.renderTile()}</calcite-link>
) : (
this.renderTile()
)}
diff --git a/src/components/calcite-tip-manager/calcite-tip-manager.tsx b/src/components/calcite-tip-manager/calcite-tip-manager.tsx
index ab2ab182bbe..077a62aa8d5 100644
--- a/src/components/calcite-tip-manager/calcite-tip-manager.tsx
+++ b/src/components/calcite-tip-manager/calcite-tip-manager.tsx
@@ -12,7 +12,6 @@ import {
} from "@stencil/core";
import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
import { getElementDir } from "../../utils/dom";
-import { Theme } from "../interfaces";
import { HeadingLevel, CalciteHeading } from "../functional/CalciteHeading";
/**
@@ -70,11 +69,6 @@ export class CalciteTipManager {
*/
@Prop() intlPrevious?: string;
- /**
- * Used to set the component's color scheme.
- */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
diff --git a/src/components/calcite-tip/calcite-tip.tsx b/src/components/calcite-tip/calcite-tip.tsx
index 92e2d23cb71..6574f9a8800 100644
--- a/src/components/calcite-tip/calcite-tip.tsx
+++ b/src/components/calcite-tip/calcite-tip.tsx
@@ -1,5 +1,4 @@
import { Component, Element, Event, EventEmitter, Prop, h, VNode, Fragment } from "@stencil/core";
-import { Theme } from "../interfaces";
import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
import { getSlotted } from "../../utils/dom";
import { HeadingLevel, CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
@@ -48,11 +47,6 @@ export class CalciteTip {
*/
@Prop() intlClose?: string;
- /**
- * Used to set the component's color scheme.
- */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
diff --git a/src/components/calcite-tooltip/calcite-tooltip.tsx b/src/components/calcite-tooltip/calcite-tooltip.tsx
index 209f6c57096..ee5678b9fe1 100644
--- a/src/components/calcite-tooltip/calcite-tooltip.tsx
+++ b/src/components/calcite-tooltip/calcite-tooltip.tsx
@@ -10,7 +10,6 @@ import {
CSS as PopperCSS,
OverlayPositioning
} from "../../utils/popper";
-import { Theme } from "../interfaces";
import { queryElementRoots } from "../../utils/dom";
@Component({
@@ -84,9 +83,6 @@ export class CalciteTooltip {
this.createPopper();
}
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
diff --git a/src/components/calcite-tree/calcite-tree.tsx b/src/components/calcite-tree/calcite-tree.tsx
index 37e0b7a9741..7139d86349c 100644
--- a/src/components/calcite-tree/calcite-tree.tsx
+++ b/src/components/calcite-tree/calcite-tree.tsx
@@ -12,7 +12,7 @@ import {
import { nodeListToArray } from "../../utils/dom";
import { TreeItemSelectDetail } from "../calcite-tree-item/interfaces";
import { TreeSelectDetail, TreeSelectionMode } from "./interfaces";
-import { Scale, Theme } from "../interfaces";
+import { Scale } from "../interfaces";
@Component({
tag: "calcite-tree",
@@ -40,9 +40,6 @@ export class CalciteTree {
/** Display input */
@Prop({ mutable: true }) inputEnabled = false;
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
/** @internal If this tree is nested within another tree, set to false */
@Prop({ reflect: true, mutable: true }) child: boolean;
diff --git a/src/components/calcite-value-list/calcite-value-list.tsx b/src/components/calcite-value-list/calcite-value-list.tsx
index 37b90973f76..3f42dbc370b 100644
--- a/src/components/calcite-value-list/calcite-value-list.tsx
+++ b/src/components/calcite-value-list/calcite-value-list.tsx
@@ -32,7 +32,6 @@ import {
} from "../calcite-pick-list/shared-list-logic";
import List from "../calcite-pick-list/shared-list-render";
import { getRoundRobinIndex } from "../../utils/array";
-import { Theme } from "../interfaces";
/**
* @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
@@ -90,9 +89,6 @@ export class CalciteValueList<
*/
@Prop({ reflect: true }) multiple = false;
- /** Select theme (light or dark) */
- @Prop({ reflect: true }) theme: Theme;
-
// --------------------------------------------------------------------------
//
// Private Properties
diff --git a/src/utils/dom.spec.ts b/src/utils/dom.spec.ts
index 37306a43ea0..a6ceef26c78 100644
--- a/src/utils/dom.spec.ts
+++ b/src/utils/dom.spec.ts
@@ -1,6 +1,28 @@
-import { getElementProp, getSlotted, setRequestedIcon } from "./dom";
+import { getElementProp, getSlotted, setRequestedIcon, themeNameCSSVariable, getThemeName } from "./dom";
describe("dom", () => {
+ describe("getThemeName()", () => {
+ it("getThemeName(): light", () => {
+ document.body.style.setProperty(themeNameCSSVariable, "light");
+ expect(getThemeName(document.body)).toBe("light");
+ });
+
+ it("getThemeName(): light double quoted and padded", () => {
+ document.body.style.setProperty(themeNameCSSVariable, ' "light" ');
+ expect(getThemeName(document.body)).toBe("light");
+ });
+
+ it("getThemeName(): light single quoted and padded", () => {
+ document.body.style.setProperty(themeNameCSSVariable, " 'light' ");
+ expect(getThemeName(document.body)).toBe("light");
+ });
+
+ it("getThemeName(): dark", () => {
+ document.body.style.setProperty(themeNameCSSVariable, "dark");
+ expect(getThemeName(document.body)).toBe("dark");
+ });
+ });
+
describe("getElementProp()", () => {
describe("light DOM", () => {
it("returns match if found on self", async () => {
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index bed57f15207..7939636061c 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,3 +1,7 @@
+import { Theme } from "../components/interfaces";
+
+export const themeNameCSSVariable = "--calcite-theme-name";
+
export function nodeListToArray<T extends Element>(nodeList: HTMLCollectionOf<T> | NodeListOf<T> | T[]): T[] {
return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
}
@@ -10,6 +14,12 @@ export function getAttributes(el: HTMLElement, blockList: string[]): Record<stri
.reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {});
}
+export function getThemeName(el: HTMLElement): Theme {
+ return getComputedStyle(el)
+ .getPropertyValue(themeNameCSSVariable)
+ .replace(/\s|'|"/g, "") as Theme;
+}
+
export function getElementDir(el: HTMLElement): Direction {
return getElementProp(el, "dir", "ltr", true) as Direction;
}
From 31e4100a32523617663a387e7e12629c653c18ce Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 12:05:34 -0700
Subject: [PATCH 2/7] fix tests
---
.../calcite-accordion.e2e.ts | 5 +-
.../calcite-alert/calcite-alert.e2e.ts | 3 +-
.../calcite-color-picker.e2e.ts | 4 --
.../calcite-dropdown/calcite-dropdown.e2e.ts | 3 +-
.../calcite-inline-editable.e2e.ts | 3 +-
.../calcite-input-message.e2e.ts | 5 +-
.../calcite-input/calcite-input.e2e.ts | 5 +-
.../calcite-label/calcite-label.e2e.ts | 6 +-
.../calcite-modal/calcite-modal.e2e.ts | 2 +-
.../calcite-notice/calcite-notice.e2e.ts | 3 +-
.../calcite-radio-button-group.e2e.ts | 3 +-
.../calcite-radio-button.e2e.ts | 3 +-
.../calcite-radio-group.e2e.ts | 3 +-
.../calcite-radio/calcite-radio.e2e.ts | 3 +-
.../calcite-select/calcite-select.e2e.ts | 4 --
.../calcite-split-button.e2e.ts | 2 -
.../calcite-stepper/calcite-stepper.e2e.ts | 7 +-
.../calcite-switch/calcite-switch.e2e.ts | 3 +-
.../calcite-tile-select.e2e.ts | 1 -
.../calcite-tile/calcite-tile.e2e.ts | 3 +-
src/utils/dom.e2e.ts | 65 ++++++++++++++++++-
src/utils/dom.spec.ts | 24 +------
22 files changed, 86 insertions(+), 74 deletions(-)
diff --git a/src/components/calcite-accordion/calcite-accordion.e2e.ts b/src/components/calcite-accordion/calcite-accordion.e2e.ts
index 9879bb010f3..73dff5f3928 100644
--- a/src/components/calcite-accordion/calcite-accordion.e2e.ts
+++ b/src/components/calcite-accordion/calcite-accordion.e2e.ts
@@ -31,7 +31,7 @@ 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");
@@ -39,14 +39,13 @@ describe("calcite-accordion", () => {
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-alert/calcite-alert.e2e.ts b/src/components/calcite-alert/calcite-alert.e2e.ts
index 39c4f10ded2..e6b32ff0ee3 100644
--- 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-color-picker/calcite-color-picker.e2e.ts b/src/components/calcite-color-picker/calcite-color-picker.e2e.ts
index 18733d8ce0d..9ab76a0df2d 100644
--- a/src/components/calcite-color-picker/calcite-color-picker.e2e.ts
+++ b/src/components/calcite-color-picker/calcite-color-picker.e2e.ts
@@ -34,10 +34,6 @@ describe("calcite-color-picker", () => {
{
propertyName: "scale",
value: "m"
- },
- {
- propertyName: "theme",
- value: "light"
}
]));
diff --git a/src/components/calcite-dropdown/calcite-dropdown.e2e.ts b/src/components/calcite-dropdown/calcite-dropdown.e2e.ts
index ad7a1ee5a71..2a4f64d2138 100644
--- a/src/components/calcite-dropdown/calcite-dropdown.e2e.ts
+++ b/src/components/calcite-dropdown/calcite-dropdown.e2e.ts
@@ -108,7 +108,7 @@ describe("calcite-dropdown", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-dropdown placement="bottom-trailing" scale="l" width="l" theme="dark">
+ <calcite-dropdown placement="bottom-trailing" scale="l" width="l">
<calcite-button slot="dropdown-trigger">Open dropdown</calcite-button>
<calcite-dropdown-group id="group-1" selection-mode="multi">
<calcite-dropdown-item id="item-1">
@@ -127,7 +127,6 @@ describe("calcite-dropdown", () => {
const group1 = await element.find("calcite-dropdown-group[id='group-1']");
expect(element).toEqualAttribute("scale", "l");
expect(element).toEqualAttribute("width", "l");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("placement", "bottom-trailing");
expect(group1).toEqualAttribute("selection-mode", "multi");
});
diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts b/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts
index b3f977eaf66..8e3f2b32919 100644
--- a/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts
+++ b/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts
@@ -58,14 +58,13 @@ describe("calcite-inline-editable", () => {
it("renders requested props when valid props are provided", async () => {
page = await newE2EPage();
await page.setContent(`
- <calcite-inline-editable controls editing-enabled loading disabled scale="l" theme="dark">
+ <calcite-inline-editable controls editing-enabled loading disabled scale="l" >
<calcite-input/>
</calcite-inline-editable>
`);
await page.waitForChanges();
const element = await page.find("calcite-inline-editable");
expect(element).toEqualAttribute("scale", "l");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toHaveAttribute("controls");
expect(element).toHaveAttribute("editing-enabled");
expect(element).toHaveAttribute("loading");
diff --git a/src/components/calcite-input-message/calcite-input-message.e2e.ts b/src/components/calcite-input-message/calcite-input-message.e2e.ts
index 044dfb39b32..99d2c877324 100644
--- a/src/components/calcite-input-message/calcite-input-message.e2e.ts
+++ b/src/components/calcite-input-message/calcite-input-message.e2e.ts
@@ -22,19 +22,18 @@ describe("calcite-input-message", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-input-message status="valid" theme="dark" type="floating">Text</calcite-input-message>
+ <calcite-input-message status="valid" type="floating">Text</calcite-input-message>
`);
const element = await page.find("calcite-input-message");
expect(element).toEqualAttribute("status", "valid");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("type", "floating");
});
it("inherits requested props when from wrapping calcite-label when props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-label status="invalid" theme="dark">
+ <calcite-label status="invalid">
Label text
<calcite-input-message>Text</calcite-input-message>
</calcite-label>
diff --git a/src/components/calcite-input/calcite-input.e2e.ts b/src/components/calcite-input/calcite-input.e2e.ts
index 57d8789a974..387a820220f 100644
--- a/src/components/calcite-input/calcite-input.e2e.ts
+++ b/src/components/calcite-input/calcite-input.e2e.ts
@@ -60,12 +60,11 @@ describe("calcite-input", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-input status="invalid" theme="dark" alignment="end" number-button-type="none" type="number" scale="s"></calcite-input>
+ <calcite-input status="invalid" alignment="end" number-button-type="none" type="number" scale="s"></calcite-input>
`);
const element = await page.find("calcite-input");
expect(element).toEqualAttribute("status", "invalid");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("alignment", "end");
expect(element).toEqualAttribute("number-button-type", "none");
expect(element).toEqualAttribute("type", "number");
@@ -75,7 +74,7 @@ describe("calcite-input", () => {
it("inherits requested props when from wrapping calcite-label when props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-label status="invalid" theme="dark" scale="s">
+ <calcite-label status="invalid" scale="s">
Label text
<calcite-input></calcite-input>
</calcite-label>
diff --git a/src/components/calcite-label/calcite-label.e2e.ts b/src/components/calcite-label/calcite-label.e2e.ts
index f90c311344a..915c4ee50f5 100644
--- a/src/components/calcite-label/calcite-label.e2e.ts
+++ b/src/components/calcite-label/calcite-label.e2e.ts
@@ -26,7 +26,7 @@ describe("calcite-label", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-label status="invalid" theme="dark" layout="inline-space-between">
+ <calcite-label status="invalid" layout="inline-space-between">
Label text
<calcite-input></calcite-input>
</calcite-label>
@@ -34,7 +34,6 @@ describe("calcite-label", () => {
const element = await page.find("calcite-label");
expect(element).toEqualAttribute("status", "invalid");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("layout", "inline-space-between");
});
@@ -134,7 +133,7 @@ describe("calcite-label", () => {
it("does not pass id to child label element", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-label id="dont-duplicate-me" status="invalid" theme="dark" layout="inline-space-between">
+ <calcite-label id="dont-duplicate-me" status="invalid" layout="inline-space-between">
Label text
<calcite-input></calcite-input>
</calcite-label>
@@ -145,7 +144,6 @@ describe("calcite-label", () => {
expect(element).toEqualAttribute("id", "dont-duplicate-me");
expect(childElement).not.toHaveAttribute("id");
expect(element).toEqualAttribute("status", "invalid");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("layout", "inline-space-between");
});
diff --git a/src/components/calcite-modal/calcite-modal.e2e.ts b/src/components/calcite-modal/calcite-modal.e2e.ts
index ffded2d7a3b..1ba8d88e823 100644
--- a/src/components/calcite-modal/calcite-modal.e2e.ts
+++ b/src/components/calcite-modal/calcite-modal.e2e.ts
@@ -304,7 +304,7 @@ describe("calcite-modal accessibility checks", () => {
expect(footer).toBeFalsy();
});
- it("should render calcite-scrim with dark theme background color", async () => {
+ it("should render calcite-scrim with dark background color", async () => {
const page = await newE2EPage({
html: `
<calcite-modal aria-labelledby="modal-title" is-active>
diff --git a/src/components/calcite-notice/calcite-notice.e2e.ts b/src/components/calcite-notice/calcite-notice.e2e.ts
index 0033c20902c..decc18509a6 100644
--- a/src/components/calcite-notice/calcite-notice.e2e.ts
+++ b/src/components/calcite-notice/calcite-notice.e2e.ts
@@ -36,7 +36,7 @@ describe("calcite-notice", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-notice theme="dark" color="yellow" dismissible>
+ <calcite-notice color="yellow" dismissible>
${noticeContent}
</calcite-notice>`);
@@ -45,7 +45,6 @@ describe("calcite-notice", () => {
const icon = await page.find("calcite-notice >>> .notice-icon");
expect(element).toEqualAttribute("color", "yellow");
- expect(element).toEqualAttribute("theme", "dark");
expect(close).not.toBeNull();
expect(icon).toBeNull();
});
diff --git a/src/components/calcite-radio-button-group/calcite-radio-button-group.e2e.ts b/src/components/calcite-radio-button-group/calcite-radio-button-group.e2e.ts
index bc3f66c3fea..2d351554817 100644
--- a/src/components/calcite-radio-button-group/calcite-radio-button-group.e2e.ts
+++ b/src/components/calcite-radio-button-group/calcite-radio-button-group.e2e.ts
@@ -56,8 +56,7 @@ describe("calcite-radio-button-group", () => {
{ propertyName: "layout", value: "horizontal" },
{ propertyName: "name", value: "reflects-name" },
{ propertyName: "required", value: true },
- { propertyName: "scale", value: "m" },
- { propertyName: "theme", value: "light" }
+ { propertyName: "scale", value: "m" }
]));
it("has a radio input for form compatibility", async () => {
diff --git a/src/components/calcite-radio-button/calcite-radio-button.e2e.ts b/src/components/calcite-radio-button/calcite-radio-button.e2e.ts
index 73ba3e2825a..6b55a9938aa 100644
--- a/src/components/calcite-radio-button/calcite-radio-button.e2e.ts
+++ b/src/components/calcite-radio-button/calcite-radio-button.e2e.ts
@@ -45,8 +45,7 @@ describe("calcite-radio-button", () => {
{ propertyName: "hidden", value: true },
{ propertyName: "name", value: "reflects-name" },
{ propertyName: "required", value: true },
- { propertyName: "scale", value: "m" },
- { propertyName: "theme", value: "light" }
+ { propertyName: "scale", value: "m" }
]));
it("has a radio input for form compatibility", async () => {
diff --git a/src/components/calcite-radio-group/calcite-radio-group.e2e.ts b/src/components/calcite-radio-group/calcite-radio-group.e2e.ts
index c171c21fbea..2ad82bd69a0 100644
--- a/src/components/calcite-radio-group/calcite-radio-group.e2e.ts
+++ b/src/components/calcite-radio-group/calcite-radio-group.e2e.ts
@@ -197,10 +197,9 @@ describe("calcite-radio-group", () => {
it("renders requested props", async () => {
const page = await newE2EPage();
await page.setContent(
- "<calcite-radio-group theme='dark' scale='l' layout='vertical' appearance='outline' width='full'></calcite-radio-group>"
+ "<calcite-radio-group scale='l' layout='vertical' appearance='outline' width='full'></calcite-radio-group>"
);
const element = await page.find("calcite-radio-group");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("scale", "l");
expect(element).toEqualAttribute("layout", "vertical");
expect(element).toEqualAttribute("appearance", "outline");
diff --git a/src/components/calcite-radio/calcite-radio.e2e.ts b/src/components/calcite-radio/calcite-radio.e2e.ts
index 203ef6096ca..bb1454c3aa5 100644
--- a/src/components/calcite-radio/calcite-radio.e2e.ts
+++ b/src/components/calcite-radio/calcite-radio.e2e.ts
@@ -15,7 +15,6 @@ describe("calcite-radio", () => {
{ propertyName: "disabled", value: true },
{ propertyName: "focused", value: true },
{ propertyName: "hidden", value: true },
- { propertyName: "scale", value: "m" },
- { propertyName: "theme", value: "light" }
+ { propertyName: "scale", value: "m" }
]));
});
diff --git a/src/components/calcite-select/calcite-select.e2e.ts b/src/components/calcite-select/calcite-select.e2e.ts
index 596f118d97a..cf450e0778b 100644
--- a/src/components/calcite-select/calcite-select.e2e.ts
+++ b/src/components/calcite-select/calcite-select.e2e.ts
@@ -27,10 +27,6 @@ describe("calcite-select", () => {
{
propertyName: "scale",
value: "m"
- },
- {
- propertyName: "theme",
- value: "light"
}
]));
diff --git a/src/components/calcite-split-button/calcite-split-button.e2e.ts b/src/components/calcite-split-button/calcite-split-button.e2e.ts
index f0fb1586bde..69e5e939f48 100644
--- a/src/components/calcite-split-button/calcite-split-button.e2e.ts
+++ b/src/components/calcite-split-button/calcite-split-button.e2e.ts
@@ -66,7 +66,6 @@ describe("calcite-split-button", () => {
<calcite-split-button
scale="s"
color="red"
- theme="dark"
dropdown-icon-type="caret"
loading
disabled
@@ -78,7 +77,6 @@ describe("calcite-split-button", () => {
const dropdownButton = await page.find("calcite-split-button >>> calcite-dropdown calcite-button");
expect(element).toEqualAttribute("scale", "s");
expect(element).toEqualAttribute("color", "red");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("dropdown-icon-type", "caret");
expect(element).toHaveAttribute("loading");
expect(element).toHaveAttribute("disabled");
diff --git a/src/components/calcite-stepper/calcite-stepper.e2e.ts b/src/components/calcite-stepper/calcite-stepper.e2e.ts
index 22976bffd0a..4e4f8947cd1 100644
--- a/src/components/calcite-stepper/calcite-stepper.e2e.ts
+++ b/src/components/calcite-stepper/calcite-stepper.e2e.ts
@@ -51,7 +51,7 @@ describe("calcite-stepper", () => {
it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-stepper layout="vertical" scale="l" theme="dark" numbered icon>
+ <calcite-stepper layout="vertical" scale="l" numbered icon>
<calcite-stepper-item item-title="Step 1" id="step-1">
<div>Step 1 content</div>
</calcite-stepper-item>
@@ -68,7 +68,6 @@ describe("calcite-stepper", () => {
const element = await page.find("calcite-stepper");
expect(element).toEqualAttribute("layout", "vertical");
expect(element).toEqualAttribute("scale", "l");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toHaveAttribute("numbered");
expect(element).toHaveAttribute("icon");
});
@@ -76,7 +75,7 @@ describe("calcite-stepper", () => {
it("adds active attribute to requested item", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-stepper layout="vertical" scale="l" theme="dark" numbered icon>
+ <calcite-stepper layout="vertical" scale="l" numbered icon>
<calcite-stepper-item item-title="Step 1" id="step-1">
<div>Step 1 content</div>
</calcite-stepper-item>
@@ -103,7 +102,7 @@ describe("calcite-stepper", () => {
it("adds active attribute to first item if none are requested", async () => {
const page = await newE2EPage();
await page.setContent(`
- <calcite-stepper layout="vertical" scale="l" theme="dark" numbered icon>
+ <calcite-stepper layout="vertical" scale="l" numbered icon>
<calcite-stepper-item item-title="Step 1" id="step-1">
<div>Step 1 content</div>
</calcite-stepper-item>
diff --git a/src/components/calcite-switch/calcite-switch.e2e.ts b/src/components/calcite-switch/calcite-switch.e2e.ts
index 2b149fd67b6..5b6269a0897 100644
--- a/src/components/calcite-switch/calcite-switch.e2e.ts
+++ b/src/components/calcite-switch/calcite-switch.e2e.ts
@@ -131,10 +131,9 @@ describe("calcite-switch", () => {
it("renders requested props", async () => {
const page = await newE2EPage();
- await page.setContent(`<calcite-switch theme="dark" scale="l" ></calcite-switch>`);
+ await page.setContent(`<calcite-switch scale="l" ></calcite-switch>`);
const element = await page.find("calcite-switch");
- expect(element).toEqualAttribute("theme", "dark");
expect(element).toEqualAttribute("scale", "l");
});
diff --git a/src/components/calcite-tile-select/calcite-tile-select.e2e.ts b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts
index 21acfb4548d..1f8c5c79462 100644
--- a/src/components/calcite-tile-select/calcite-tile-select.e2e.ts
+++ b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts
@@ -36,7 +36,6 @@ describe("calcite-tile-select", () => {
{ propertyName: "inputAlignment", value: "start" },
{ propertyName: "name", value: "my-tile-select" },
{ propertyName: "inputEnabled", value: true },
- { propertyName: "theme", value: "light" },
{ propertyName: "type", value: "radio" },
{ propertyName: "width", value: "auto" }
]));
diff --git a/src/components/calcite-tile/calcite-tile.e2e.ts b/src/components/calcite-tile/calcite-tile.e2e.ts
index 0c4f792132b..5894b2f0d5c 100644
--- a/src/components/calcite-tile/calcite-tile.e2e.ts
+++ b/src/components/calcite-tile/calcite-tile.e2e.ts
@@ -27,8 +27,7 @@ describe("calcite-tile", () => {
{ propertyName: "embed", value: true },
{ propertyName: "focused", value: true },
{ propertyName: "href", value: "http://www.esri.com" },
- { propertyName: "icon", value: "layers" },
- { propertyName: "theme", value: "light" }
+ { propertyName: "icon", value: "layers" }
]));
it("honors hidden attribute", async () => hidden("calcite-tile"));
diff --git a/src/utils/dom.e2e.ts b/src/utils/dom.e2e.ts
index 7e5c8c290ac..99f70e9a13a 100644
--- a/src/utils/dom.e2e.ts
+++ b/src/utils/dom.e2e.ts
@@ -1,5 +1,6 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { queryElementRoots, queryElementsRoots, getRootNode, getHost } from "./dom";
+import { queryElementRoots, queryElementsRoots, getRootNode, getHost, getThemeName, themeNameCSSVariable } from "./dom";
+import { Theme } from "../components/interfaces";
interface SetUpTestComponentOptions {
insideHostHTML: string;
@@ -16,6 +17,8 @@ type TestWindow = typeof window & {
setUpTestComponent: (options: SetUpTestComponentOptions) => void;
};
+type TestThemeWindow = typeof window & { getThemeName: (el: HTMLElement) => Theme };
+
const myButtonClass = "my-class";
const insideHost = "Inside Host";
const outsideHost = "Outside Host";
@@ -25,7 +28,65 @@ const insideHostHTML = `<button class="${myButtonClass}">${insideHost}</button>`
const insideShadowHTML = `<div><button>${insideShadow}</button></div>`;
const outsideHostHTML = `<span>Test</span><button>${outsideHost}</button>`;
-describe("utils/dom", () => {
+describe("getThemeName()", () => {
+ let page: E2EPage;
+
+ beforeEach(async () => {
+ page = await newE2EPage({
+ html: "<div>test</div>"
+ });
+
+ const content = `
+ const exports = {};
+ exports.themeNameCSSVariable = "${themeNameCSSVariable}";
+ ${getThemeName}
+ `;
+
+ await page.addScriptTag({
+ content
+ });
+
+ await page.waitForFunction(() => (window as TestThemeWindow).getThemeName);
+ });
+
+ it("getThemeName(): light", async () => {
+ const theme = await page.evaluate((themeNameCSSVariable: string) => {
+ document.body.style.setProperty(themeNameCSSVariable, "light");
+ return (window as TestThemeWindow).getThemeName(document.body);
+ }, themeNameCSSVariable);
+
+ expect(theme).toBe("light");
+ });
+
+ it("getThemeName(): light double quoted and padded", async () => {
+ const theme = await page.evaluate((themeNameCSSVariable: string) => {
+ document.body.style.setProperty(themeNameCSSVariable, ' "light" ');
+ return (window as TestThemeWindow).getThemeName(document.body);
+ }, themeNameCSSVariable);
+
+ expect(theme).toBe("light");
+ });
+
+ it("getThemeName(): light single quoted and padded", async () => {
+ const theme = await page.evaluate((themeNameCSSVariable: string) => {
+ document.body.style.setProperty(themeNameCSSVariable, " 'light' ");
+ return (window as TestThemeWindow).getThemeName(document.body);
+ }, themeNameCSSVariable);
+
+ expect(theme).toBe("light");
+ });
+
+ it("getThemeName(): dark", async () => {
+ const theme = await page.evaluate((themeNameCSSVariable: string) => {
+ document.body.style.setProperty(themeNameCSSVariable, "dark");
+ return (window as TestThemeWindow).getThemeName(document.body);
+ }, themeNameCSSVariable);
+
+ expect(theme).toBe("dark");
+ });
+});
+
+describe("queries", () => {
let page: E2EPage;
beforeEach(async () => {
diff --git a/src/utils/dom.spec.ts b/src/utils/dom.spec.ts
index a6ceef26c78..37306a43ea0 100644
--- a/src/utils/dom.spec.ts
+++ b/src/utils/dom.spec.ts
@@ -1,28 +1,6 @@
-import { getElementProp, getSlotted, setRequestedIcon, themeNameCSSVariable, getThemeName } from "./dom";
+import { getElementProp, getSlotted, setRequestedIcon } from "./dom";
describe("dom", () => {
- describe("getThemeName()", () => {
- it("getThemeName(): light", () => {
- document.body.style.setProperty(themeNameCSSVariable, "light");
- expect(getThemeName(document.body)).toBe("light");
- });
-
- it("getThemeName(): light double quoted and padded", () => {
- document.body.style.setProperty(themeNameCSSVariable, ' "light" ');
- expect(getThemeName(document.body)).toBe("light");
- });
-
- it("getThemeName(): light single quoted and padded", () => {
- document.body.style.setProperty(themeNameCSSVariable, " 'light' ");
- expect(getThemeName(document.body)).toBe("light");
- });
-
- it("getThemeName(): dark", () => {
- document.body.style.setProperty(themeNameCSSVariable, "dark");
- expect(getThemeName(document.body)).toBe("dark");
- });
- });
-
describe("getElementProp()", () => {
describe("light DOM", () => {
it("returns match if found on self", async () => {
From ff11835c4b3e2d584dd512ec3b1c56675d338ee8 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 14:02:57 -0700
Subject: [PATCH 3/7] fixes
---
src/demos/_assets/validateInput.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/demos/_assets/validateInput.ts b/src/demos/_assets/validateInput.ts
index 2b3b2cc1f42..a3a6ceae6b2 100644
--- a/src/demos/_assets/validateInput.ts
+++ b/src/demos/_assets/validateInput.ts
@@ -48,7 +48,6 @@ function validatePasswordExampleFocusMessage(event): void {
if (!existingMessage) {
const message = document.createElement("calcite-input-message");
message.active = true;
- message.theme = "dark";
message.id = "pw-status-1";
message.type = "floating";
message.innerHTML = `This should be at least 6 characters long`;
From 4baa18699d6cf82333c4f30cf220a1615957038a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 14:32:07 -0700
Subject: [PATCH 4/7] use closest for getThemeName
---
src/utils/dom.e2e.ts | 58 --------------------------------------------
src/utils/dom.ts | 4 +--
2 files changed, 1 insertion(+), 61 deletions(-)
diff --git a/src/utils/dom.e2e.ts b/src/utils/dom.e2e.ts
index 99f70e9a13a..ab91f78cae6 100644
--- a/src/utils/dom.e2e.ts
+++ b/src/utils/dom.e2e.ts
@@ -28,64 +28,6 @@ const insideHostHTML = `<button class="${myButtonClass}">${insideHost}</button>`
const insideShadowHTML = `<div><button>${insideShadow}</button></div>`;
const outsideHostHTML = `<span>Test</span><button>${outsideHost}</button>`;
-describe("getThemeName()", () => {
- let page: E2EPage;
-
- beforeEach(async () => {
- page = await newE2EPage({
- html: "<div>test</div>"
- });
-
- const content = `
- const exports = {};
- exports.themeNameCSSVariable = "${themeNameCSSVariable}";
- ${getThemeName}
- `;
-
- await page.addScriptTag({
- content
- });
-
- await page.waitForFunction(() => (window as TestThemeWindow).getThemeName);
- });
-
- it("getThemeName(): light", async () => {
- const theme = await page.evaluate((themeNameCSSVariable: string) => {
- document.body.style.setProperty(themeNameCSSVariable, "light");
- return (window as TestThemeWindow).getThemeName(document.body);
- }, themeNameCSSVariable);
-
- expect(theme).toBe("light");
- });
-
- it("getThemeName(): light double quoted and padded", async () => {
- const theme = await page.evaluate((themeNameCSSVariable: string) => {
- document.body.style.setProperty(themeNameCSSVariable, ' "light" ');
- return (window as TestThemeWindow).getThemeName(document.body);
- }, themeNameCSSVariable);
-
- expect(theme).toBe("light");
- });
-
- it("getThemeName(): light single quoted and padded", async () => {
- const theme = await page.evaluate((themeNameCSSVariable: string) => {
- document.body.style.setProperty(themeNameCSSVariable, " 'light' ");
- return (window as TestThemeWindow).getThemeName(document.body);
- }, themeNameCSSVariable);
-
- expect(theme).toBe("light");
- });
-
- it("getThemeName(): dark", async () => {
- const theme = await page.evaluate((themeNameCSSVariable: string) => {
- document.body.style.setProperty(themeNameCSSVariable, "dark");
- return (window as TestThemeWindow).getThemeName(document.body);
- }, themeNameCSSVariable);
-
- expect(theme).toBe("dark");
- });
-});
-
describe("queries", () => {
let page: E2EPage;
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 7939636061c..43aaf09cd71 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -15,9 +15,7 @@ export function getAttributes(el: HTMLElement, blockList: string[]): Record<stri
}
export function getThemeName(el: HTMLElement): Theme {
- return getComputedStyle(el)
- .getPropertyValue(themeNameCSSVariable)
- .replace(/\s|'|"/g, "") as Theme;
+ return getElementProp(el, "theme", "light", true) as Theme;
}
export function getElementDir(el: HTMLElement): Direction {
From f8ecb086ed665d134bf7ca7f4f2ae52a1d184164 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 14:58:38 -0700
Subject: [PATCH 5/7] selectors
---
src/assets/styles/global.scss | 2 ++
src/utils/resources.ts | 2 ++
2 files changed, 4 insertions(+)
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index a977ec21e80..57cf5ee8328 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -32,6 +32,7 @@
@apply font-sans;
}
+.calcite-theme--dark,
[theme="dark"] {
@include calcite-theme-dark();
--calcite-theme-name: "dark";
@@ -47,6 +48,7 @@
--calcite-scrim-background: #{rgba($blk-240, 0.75)};
}
+.calcite-theme--light,
[theme="light"] {
@include calcite-theme-light();
--calcite-theme-name: "light";
diff --git a/src/utils/resources.ts b/src/utils/resources.ts
index caafcc443db..50e1ffffb13 100644
--- a/src/utils/resources.ts
+++ b/src/utils/resources.ts
@@ -1,3 +1,5 @@
export const CSS_UTILITY = {
+ themeLight: "calcite-theme--light",
+ themeDark: "calcite-theme--dark",
rtl: "calcite--rtl"
};
From 19f8000e0b870dcf7f1912b0356d94c1f7614322 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 15:15:59 -0700
Subject: [PATCH 6/7] class OR attribute for now.
---
src/utils/dom.ts | 3 ++-
src/utils/resources.ts | 4 ++--
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 43aaf09cd71..a93ab41bc3d 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,4 +1,5 @@
import { Theme } from "../components/interfaces";
+import { CSS_UTILITY } from "./resources";
export const themeNameCSSVariable = "--calcite-theme-name";
@@ -15,7 +16,7 @@ export function getAttributes(el: HTMLElement, blockList: string[]): Record<stri
}
export function getThemeName(el: HTMLElement): Theme {
- return getElementProp(el, "theme", "light", true) as Theme;
+ return closestElementCrossShadowBoundary(`.${CSS_UTILITY.darkTheme}, [theme=dark]`, el) ? "dark" : "light";
}
export function getElementDir(el: HTMLElement): Direction {
diff --git a/src/utils/resources.ts b/src/utils/resources.ts
index 50e1ffffb13..933021bc07e 100644
--- a/src/utils/resources.ts
+++ b/src/utils/resources.ts
@@ -1,5 +1,5 @@
export const CSS_UTILITY = {
- themeLight: "calcite-theme--light",
- themeDark: "calcite-theme--dark",
+ darkTheme: "calcite-theme--light",
+ lightTheme: "calcite-theme--dark",
rtl: "calcite--rtl"
};
From 0e65ad7779635068ffffc819d871152c9d8ad4e2 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <MDriscoll@esri.com>
Date: Fri, 21 May 2021 15:32:32 -0700
Subject: [PATCH 7/7] remove const, cleanup
---
src/assets/styles/global.scss | 1 -
src/utils/dom.ts | 2 --
2 files changed, 3 deletions(-)
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 57cf5ee8328..c431a3af281 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -13,7 +13,6 @@
-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};
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index a93ab41bc3d..e3e745e90a5 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,8 +1,6 @@
import { Theme } from "../components/interfaces";
import { CSS_UTILITY } from "./resources";
-export const themeNameCSSVariable = "--calcite-theme-name";
-
export function nodeListToArray<T extends Element>(nodeList: HTMLCollectionOf<T> | NodeListOf<T> | T[]): T[] {
return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
}