diff --git a/web-components/src/[sandbox]/examples/toggle-switch.ts b/web-components/src/[sandbox]/examples/toggle-switch.ts index b1b9836987..d84d95c59c 100644 --- a/web-components/src/[sandbox]/examples/toggle-switch.ts +++ b/web-components/src/[sandbox]/examples/toggle-switch.ts @@ -26,4 +26,10 @@ export const toggleSwitchTemplate = html` Checked Smaller Toggle Switch + + Toggle Switch with label right aligned + + + Toggle Switch with label left aligned + `; diff --git a/web-components/src/components/dropdown/Dropdown.test.ts b/web-components/src/components/dropdown/Dropdown.test.ts index d2d3d9c356..c6d15bbab6 100644 --- a/web-components/src/components/dropdown/Dropdown.test.ts +++ b/web-components/src/components/dropdown/Dropdown.test.ts @@ -234,6 +234,25 @@ describe("Dropdown Component", () => { it("should render correct icon name", () => { expect(dropdown.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("icon-arrow-down_16"); }); + + it("should change selectedKey on update of default option", async () => { + const dropdown = await fixture( + html` + + ` + ); + expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[10].id); + + dropdown["defaultOption"] = dropdownObjectLongOptions[1]; + await elementUpdated(dropdown); + + expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[1].id); + }); }); describe("List", () => { diff --git a/web-components/src/components/dropdown/Dropdown.ts b/web-components/src/components/dropdown/Dropdown.ts index 7c3153415c..1c54259425 100644 --- a/web-components/src/components/dropdown/Dropdown.ts +++ b/web-components/src/components/dropdown/Dropdown.ts @@ -104,6 +104,13 @@ export namespace Dropdown { if (name === "disabled") { this.setAttribute("tabindex", !this.disabled ? "0" : "-1"); } + if (name === "defaultOption") { + if (this.defaultOption) { + const { key } = this.getOptionKeyValuePair(this.defaultOption); + + this.selectedKey = key; + } + } }); } diff --git a/web-components/src/components/label/scss/label.scss b/web-components/src/components/label/scss/label.scss index df7fa3ff74..e742ab8bdc 100644 --- a/web-components/src/components/label/scss/label.scss +++ b/web-components/src/components/label/scss/label.scss @@ -2,6 +2,7 @@ .md-label { @include form-label; display: flex; + align-items: center; &.right { @include form-label(right, false); diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts b/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts index f67b891b33..d76f9ee53a 100644 --- a/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts +++ b/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts @@ -8,8 +8,9 @@ import "@/components/toggle-switch/ToggleSwitch"; import "@/components/theme/Theme"; +import { alignLabel } from "@/components/toggle-switch/ToggleSwitch"; import { withA11y } from "@storybook/addon-a11y"; -import { boolean, withKnobs } from "@storybook/addon-knobs"; +import { boolean, withKnobs, select } from "@storybook/addon-knobs"; import { html } from "lit-element"; export default { @@ -33,11 +34,20 @@ export const ToggleSwitch = () => { const checked = boolean("Checked", false); const disabled = boolean("Disabled", false); const smaller = boolean("Smaller", false); + const align = select("Align Label", alignLabel, "right"); return html` - - Label Toggle Switch - + + + Label Toggle Switch + + `; }; diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.test.ts b/web-components/src/components/toggle-switch/ToggleSwitch.test.ts index bb70da7ba4..b029341e0f 100644 --- a/web-components/src/components/toggle-switch/ToggleSwitch.test.ts +++ b/web-components/src/components/toggle-switch/ToggleSwitch.test.ts @@ -57,4 +57,22 @@ describe("Toggle Switch Component", () => { expect(element.checked).toBeTruthy(); }); + + test("should add class md-toggle-switch__label__container__left on align label left", async () => { + const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement; + element.alignLabel = "left"; + await elementUpdated(element); + const span = div.querySelector("span") as HTMLSpanElement; + + expect(span.classList.contains("md-toggle-switch__label__container__left")).toBeTruthy(); + }); + + test("should not add class md-toggle-switch__label__container__left on align label right", async () => { + const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement; + element.alignLabel = "right"; + await elementUpdated(element); + const span = div.querySelector("span") as HTMLSpanElement; + + expect(span.classList.contains("md-toggle-switch__label__container__left")).toBeFalsy(); + }); }); diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.ts b/web-components/src/components/toggle-switch/ToggleSwitch.ts index 81d820d4e1..6ecb9e86e1 100644 --- a/web-components/src/components/toggle-switch/ToggleSwitch.ts +++ b/web-components/src/components/toggle-switch/ToggleSwitch.ts @@ -13,7 +13,10 @@ import { html, LitElement, property } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import styles from "./scss/module.scss"; +export const alignLabel = ["left", "right"] as const; + export namespace ToggleSwitch { + export type alignLabel = typeof alignLabel[number]; @customElementWithCheck("md-toggle-switch") export class ELEMENT extends FocusMixin(LitElement) { @property({ type: String }) htmlId = ""; @@ -22,6 +25,7 @@ export namespace ToggleSwitch { @property({ type: Boolean }) disabled = false; @property({ type: Boolean }) small = false; @property({ type: Boolean }) smaller = false; + @property({ type: String }) alignLabel: ToggleSwitch.alignLabel = "right"; @property({ type: Boolean, reflect: true }) autofocus = false; handleClick() { @@ -37,6 +41,20 @@ export namespace ToggleSwitch { }; } + switchTemplate() { + if (this.alignLabel === "left") { + return html` + + + `; + } else { + return html` + + + `; + } + } + render() { return html`
- - + ${this.switchTemplate()}
`; diff --git a/web-components/src/components/toggle-switch/scss/toggle-switch.scss b/web-components/src/components/toggle-switch/scss/toggle-switch.scss index 9bc4840ec5..2f8c3070d7 100644 --- a/web-components/src/components/toggle-switch/scss/toggle-switch.scss +++ b/web-components/src/components/toggle-switch/scss/toggle-switch.scss @@ -47,6 +47,11 @@ transition: background 350ms; width: $toggle-switch__width; + &__left { + margin-right: 0; + margin-left: 0.75rem; + } + @media screen and (-ms-high-contrast: active) { filter: brightness(1) contrast(1) saturate(1.5); }