From 50bd99018a9d4471d99cd1cac58e8cfef6f933dd Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 21 May 2021 15:57:32 -0700 Subject: [PATCH] refactor!: Remove 'theme' props from components (#2194) * refactor!: Remove 'theme' props from components. * fix tests * fixes * use closest for getThemeName * selectors * class OR attribute for now. * remove const, cleanup --- src/assets/styles/global.scss | 5 ++++ .../calcite-accordion.e2e.ts | 5 ++-- .../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.e2e.ts | 3 +-- .../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.e2e.ts | 4 ---- .../calcite-color-picker.tsx | 17 ++------------ .../calcite-combobox/calcite-combobox.tsx | 5 +--- .../calcite-dropdown-item.tsx | 3 +-- .../calcite-dropdown/calcite-dropdown.e2e.ts | 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.e2e.ts | 3 +-- .../calcite-inline-editable.tsx | 8 +------ .../calcite-input-message.e2e.ts | 5 ++-- .../calcite-input-message.tsx | 5 +--- .../calcite-input/calcite-input.e2e.ts | 5 ++-- .../calcite-input/calcite-input.tsx | 13 ++++------- .../calcite-label/calcite-label.e2e.ts | 6 ++--- .../calcite-label/calcite-label.tsx | 8 ++----- src/components/calcite-link/calcite-link.tsx | 7 ++---- .../calcite-modal/calcite-modal.e2e.ts | 2 +- .../calcite-modal/calcite-modal.tsx | 7 ++---- .../calcite-notice/calcite-notice.e2e.ts | 3 +-- .../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.e2e.ts | 3 +-- .../calcite-radio-button-group.tsx | 11 +-------- .../calcite-radio-button.e2e.ts | 3 +-- .../calcite-radio-button.tsx | 6 +---- .../calcite-radio-group.e2e.ts | 3 +-- .../calcite-radio-group.tsx | 5 +--- .../calcite-radio/calcite-radio.e2e.ts | 3 +-- .../calcite-radio/calcite-radio.tsx | 5 +--- .../calcite-rating/calcite-rating.tsx | 10 +++----- .../calcite-scrim/calcite-scrim.tsx | 4 ---- .../calcite-select/calcite-select.e2e.ts | 4 ---- .../calcite-select/calcite-select.tsx | 10 +------- .../calcite-shell/calcite-shell.tsx | 6 ----- .../calcite-slider/calcite-slider.tsx | 3 --- .../calcite-split-button.e2e.ts | 2 -- .../calcite-split-button.tsx | 8 +------ .../calcite-stepper/calcite-stepper.e2e.ts | 7 +++--- .../calcite-stepper/calcite-stepper.tsx | 5 +--- .../calcite-switch/calcite-switch.e2e.ts | 3 +-- .../calcite-switch/calcite-switch.tsx | 5 +--- src/components/calcite-tabs/calcite-tabs.tsx | 6 ----- .../calcite-tile-select.e2e.ts | 1 - .../calcite-tile-select.tsx | 6 +---- .../calcite-tile/calcite-tile.e2e.ts | 3 +-- 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/demos/_assets/validateInput.ts | 1 - src/utils/dom.e2e.ts | 7 ++++-- src/utils/dom.ts | 7 ++++++ src/utils/resources.ts | 2 ++ 78 files changed, 103 insertions(+), 376 deletions(-) diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index c4df1f3232a..c431a3af281 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -12,6 +12,7 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + --calcite-theme-name: "light"; --calcite-ui-foreground-current: #c7eaff; --calcite-ui-inverse: #{$blk-180}; --calcite-ui-inverse-hover: #{$blk-170}; @@ -30,8 +31,10 @@ @apply font-sans; } +.calcite-theme--dark, [theme="dark"] { @include calcite-theme-dark(); + --calcite-theme-name: "dark"; --calcite-ui-foreground-current: #214155; --calcite-ui-inverse: #{$blk-180}; --calcite-ui-inverse-hover: #{$blk-190}; @@ -44,8 +47,10 @@ --calcite-scrim-background: #{rgba($blk-240, 0.75)}; } +.calcite-theme--light, [theme="light"] { @include calcite-theme-light(); + --calcite-theme-name: "light"; --calcite-ui-foreground-current: #c7eaff; --calcite-ui-inverse: #{$blk-180}; --calcite-ui-inverse-hover: #{$blk-170}; diff --git a/src/components/calcite-accordion/calcite-accordion.e2e.ts b/src/components/calcite-accordion/calcite-accordion.e2e.ts 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(` - + ${accordionContent} `); 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(` - + Accordion Item Content Accordion Item Content 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.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(` - + ${alertContent} `); @@ -51,7 +51,6 @@ describe("calcite-alert", () => { expect(element).toEqualAttribute("color", "yellow"); expect(element).toEqualAttribute("auto-dismiss-duration", "fast"); - expect(element).toEqualAttribute("theme", "dark"); expect(close).toBeNull(); expect(icon).toBeNull(); }); diff --git a/src/components/calcite-alert/calcite-alert.tsx b/src/components/calcite-alert/calcite-alert.tsx 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} ) : ( - + )} ); @@ -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 = ; - return [ - loading || disabled ? : null, - defaultSlot - ]; + return [loading || disabled ? : 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} > - + ); } 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.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-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} /> @@ -637,7 +627,6 @@ export class CalciteColorPicker { iconStart="minus" onClick={this.deleteColor} scale={scale} - theme={theme} /> @@ -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.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(` - + Open dropdown @@ -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-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.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(` - + `); 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-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; @@ -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} /> , ]} 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(` - Text + Text `); 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(` - + Label text Text 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.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(` - + `); 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(` - + Label text 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} > - + ); 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} > - + ); @@ -614,7 +609,7 @@ export class CalciteInput { data-adjustment="down" onMouseDown={this.numberButtonMouseDownHandler} > - + ); 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(` - + Label text @@ -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(` - + Label text @@ -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-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.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: ` 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 ( - + {this.renderStyle()}
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(` - + ${noticeContent} `); @@ -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-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} - {loading || disabled ? : null} + {loading || disabled ? : null} {defaultSlot} 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.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-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.e2e.ts b/src/components/calcite-radio-button/calcite-radio-button.e2e.ts index 7154a45c012..ee975d26e00 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-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. scale is passed as a property automatically from calcite-radio-button-group. */ @Prop({ reflect: true }) scale: Scale = "m"; - /** The color theme of the radio button, theme is passed as a property automatically from calcite-radio-button-group. */ - @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} />
); 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( - "" + "" ); 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-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.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-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 && (
- +
)} @@ -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 ( @@ -175,7 +172,6 @@ export class CalciteRating { class={{ [CSS_UTILITY.rtl]: dir === "rtl" }} dir={dir} scale={scale} - theme={theme} value={count?.toString()} > {!!average && {average.toString()}} 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.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-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.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", () => { { 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-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} @@ -86,7 +82,6 @@ export class CalciteSplitButton { onClick={this.calciteSplitButtonSecondaryClickHandler} placement="bottom-trailing" scale={this.scale} - theme={this.theme} width={this.scale} > 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(` - +
Step 1 content
 @@ -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(` - +
Step 1 content
 @@ -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(` - +
Step 1 content
 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; 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(``); + await page.setContent(``); const element = await page.find("calcite-switch"); - expect(element).toEqualAttribute("theme", "dark"); expect(element).toEqualAttribute("scale", "l"); }); 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.e2e.ts b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts index cb36793fa79..4d8ff4b4d55 100644 --- a/src/components/calcite-tile-select/calcite-tile-select.e2e.ts +++ b/src/components/calcite-tile-select/calcite-tile-select.e2e.ts @@ -27,7 +27,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-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.e2e.ts b/src/components/calcite-tile/calcite-tile.e2e.ts index c1d812709f4..2b424e99a38 100644 --- a/src/components/calcite-tile/calcite-tile.e2e.ts +++ b/src/components/calcite-tile/calcite-tile.e2e.ts @@ -19,8 +19,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/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 ( {this.href ? ( - - {this.renderTile()} - + {this.renderTile()} ) : ( 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/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`; diff --git a/src/utils/dom.e2e.ts b/src/utils/dom.e2e.ts index 7e5c8c290ac..ab91f78cae6 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,7 @@ const insideHostHTML = `` const insideShadowHTML = `
`; const outsideHostHTML = `Test`; -describe("utils/dom", () => { +describe("queries", () => { let page: E2EPage; beforeEach(async () => { diff --git a/src/utils/dom.ts b/src/utils/dom.ts index bed57f15207..e3e745e90a5 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -1,3 +1,6 @@ +import { Theme } from "../components/interfaces"; +import { CSS_UTILITY } from "./resources"; + export function nodeListToArray(nodeList: HTMLCollectionOf | NodeListOf | T[]): T[] { return Array.isArray(nodeList) ? nodeList : Array.from(nodeList); } @@ -10,6 +13,10 @@ export function getAttributes(el: HTMLElement, blockList: string[]): Record ({ ...acc, [name]: value }), {}); } +export function getThemeName(el: HTMLElement): Theme { + return closestElementCrossShadowBoundary(`.${CSS_UTILITY.darkTheme}, [theme=dark]`, el) ? "dark" : "light"; +} + export function getElementDir(el: HTMLElement): Direction { return getElementProp(el, "dir", "ltr", true) as Direction; } diff --git a/src/utils/resources.ts b/src/utils/resources.ts index caafcc443db..933021bc07e 100644 --- a/src/utils/resources.ts +++ b/src/utils/resources.ts @@ -1,3 +1,5 @@ export const CSS_UTILITY = { + darkTheme: "calcite-theme--light", + lightTheme: "calcite-theme--dark", rtl: "calcite--rtl" };