From 4ba02c629131c9efd45134d61afe15d269969a8f Mon Sep 17 00:00:00 2001 From: James Nestor Date: Mon, 19 Aug 2024 22:11:56 +0100 Subject: [PATCH 1/2] chore: update dependencies, fix eslint issues, update favorite --- web-components/package.json | 6 +++--- web-components/src/[sandbox]/examples/card.ts | 8 ++++---- .../src/[sandbox]/examples/favorite.ts | 4 ++-- .../src/[sandbox]/examples/menu-overlay.ts | 2 +- web-components/src/[sandbox]/examples/tabs.ts | 10 +++++----- .../button/tokens/mdv2-button-tokens.js | 3 +++ web-components/src/components/card/Card.ts | 6 ++++-- .../src/components/favorite/Favorite.test.ts | 2 +- .../src/components/favorite/Favorite.ts | 18 +++++++++--------- .../src/components/favorite/scss/favorite.scss | 2 -- .../src/components/favorite/scss/settings.scss | 4 ++-- .../floating-modal/FloatingModal.test.ts | 5 ++--- .../components/meeting-alert/MeetingAlert.ts | 1 - .../src/components/menu-overlay/MenuOverlay.ts | 2 +- .../slider/tokens/mdv2-slider-token.js | 1 - 15 files changed, 37 insertions(+), 37 deletions(-) diff --git a/web-components/package.json b/web-components/package.json index 7ebb4a7a89..6de73902be 100644 --- a/web-components/package.json +++ b/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@momentum-ui/web-components", - "version": "2.13.10", + "version": "2.13.11", "author": "Yana Harris", "license": "MIT", "repository": "https://github.com/momentum-design/momentum-ui.git", @@ -60,8 +60,8 @@ "@interactjs/interact": "1.10.3", "@interactjs/modifiers": "1.10.3", "@interactjs/utils": "1.10.3", - "@momentum-design/icons": "0.0.154", - "@momentum-design/tokens": "0.0.73", + "@momentum-design/icons": "0.0.155", + "@momentum-design/tokens": "0.0.77", "@popperjs/core": "^2.4.4", "country-codes-list": "1.6.8", "country-flags-svg": "1.1.4", diff --git a/web-components/src/[sandbox]/examples/card.ts b/web-components/src/[sandbox]/examples/card.ts index e166f10e61..375bad6192 100644 --- a/web-components/src/[sandbox]/examples/card.ts +++ b/web-components/src/[sandbox]/examples/card.ts @@ -14,8 +14,8 @@ export class CardTemplateSandbox extends LitElement { this.addEventListener("card-menu-click", this.handleClickMenu as EventListener); } - private handleClickCard(e: MouseEvent) { - const { id } = e.detail as any; + private handleClickCard(e: CustomEvent) { + const { id } = e.detail; this.value = "Card " + id + ": is clickable"; } @@ -26,8 +26,8 @@ export class CardTemplateSandbox extends LitElement { this.value = "Card " + id + ": is key event"; } - private handleClickMenu(e: MouseEvent) { - const { id, type } = e.detail as any; + private handleClickMenu(e: CustomEvent) { + const { id, type } = e.detail; this.value = "Card " + id + ": in " + type + " mode"; } diff --git a/web-components/src/[sandbox]/examples/favorite.ts b/web-components/src/[sandbox]/examples/favorite.ts index 9b161a3188..3b5e4b2074 100644 --- a/web-components/src/[sandbox]/examples/favorite.ts +++ b/web-components/src/[sandbox]/examples/favorite.ts @@ -23,8 +23,8 @@ export class FavoriteTemplateSandbox extends LitElement { } } - private handleKeydownFavorite(e: KeyboardEvent) { - const { active, value } = e.detail as any; + private handleKeydownFavorite(e: CustomEvent) { + const { active, value } = e.detail; this.selected = active; if (active === true) { diff --git a/web-components/src/[sandbox]/examples/menu-overlay.ts b/web-components/src/[sandbox]/examples/menu-overlay.ts index a5d4d2947b..e3f66bb2f7 100644 --- a/web-components/src/[sandbox]/examples/menu-overlay.ts +++ b/web-components/src/[sandbox]/examples/menu-overlay.ts @@ -331,7 +331,7 @@ export const menuOverlayTemplate = html`

with list (focus)

- { + { console.log("Opening modal--"); document.dispatchEvent(new CustomEvent("on-widget-update")); }}> diff --git a/web-components/src/[sandbox]/examples/tabs.ts b/web-components/src/[sandbox]/examples/tabs.ts index c29a946ffe..c29e1abcef 100644 --- a/web-components/src/[sandbox]/examples/tabs.ts +++ b/web-components/src/[sandbox]/examples/tabs.ts @@ -22,7 +22,7 @@ import { unsafeHTML } from "lit-html/directives/unsafe-html"; import { nanoid } from "nanoid"; const tabsOverlayHtmlList = ["All templates", "Only Fb Template", ...Array(20)].map( - (value, index, array) => html` + (value, index) => html` ${value || "Tab " + index} @@ -58,7 +58,7 @@ export class TabsOrderPrefsExample extends LitElement { ]; } - handleResetTabs(e: any) { + handleResetTabs() { this.shadowRoot!.querySelector("md-tabs")!.dispatchEvent( new CustomEvent("clear-tab-order-prefs", { detail: { @@ -78,8 +78,8 @@ export class TabsOrderPrefsExample extends LitElement {
{ - this.handleResetTabs(e); + @click=${() => { + this.handleResetTabs(); }} variant="primary" > @@ -471,7 +471,7 @@ export class TabsTemplateSandbox extends LitElement { ${repeat( this.currentTabsOrder, - (tabElement) => nanoid(10), + () => nanoid(10), (tabElement) => html` ${unsafeHTML(this.tabs[tabElement])} ` )} ${ diff --git a/web-components/src/components/button/tokens/mdv2-button-tokens.js b/web-components/src/components/button/tokens/mdv2-button-tokens.js index 389bd7f78e..623d5e8d8d 100644 --- a/web-components/src/components/button/tokens/mdv2-button-tokens.js +++ b/web-components/src/components/button/tokens/mdv2-button-tokens.js @@ -409,6 +409,9 @@ const button = { "icon-color": { common: "$mds-color-theme-text-warning-active" } + }, + "border-radius": { + common: "100%" } }, "focus-ring": { diff --git a/web-components/src/components/card/Card.ts b/web-components/src/components/card/Card.ts index 52e4b057af..d22a2f602f 100644 --- a/web-components/src/components/card/Card.ts +++ b/web-components/src/components/card/Card.ts @@ -11,6 +11,8 @@ import "@/components/favorite/Favorite"; import "@/components/icon/Icon"; import "@/components/list/List"; import "@/components/list/ListItem"; +import "@/components/menu-overlay/MenuOverlay"; +import "@/components/tooltip/Tooltip"; import { customElementWithCheck } from "@/mixins/CustomElementCheck"; import reset from "@/wc_scss/reset.scss"; import { html, LitElement, property } from "lit-element"; @@ -34,7 +36,7 @@ export namespace Card { return [reset, styles]; } - handleCardClick(event: MouseEvent) { + handleCardClick() { this.dispatchEvent( new CustomEvent<{ id: string }>("card-click", { detail: { @@ -97,7 +99,7 @@ export namespace Card { id="${this.id}" part="card" tabindex="0" - @click=${(ev: MouseEvent) => this.handleCardClick(ev)} + @click=${() => this.handleCardClick()} @keydown=${(ev: KeyboardEvent) => this.handleCardKeyDown(ev)} >
diff --git a/web-components/src/components/favorite/Favorite.test.ts b/web-components/src/components/favorite/Favorite.test.ts index b08043d59f..83a2c63ccf 100644 --- a/web-components/src/components/favorite/Favorite.test.ts +++ b/web-components/src/components/favorite/Favorite.test.ts @@ -43,7 +43,7 @@ describe("Favorite component", () => { const component = await fixtureFactory(); const mockClick = jest.spyOn(component, "handleFavorite"); - component.handleFavorite(new CustomEvent("click")); + component.handleFavorite(); await elementUpdated(component); expect(mockClick).toHaveBeenCalled(); diff --git a/web-components/src/components/favorite/Favorite.ts b/web-components/src/components/favorite/Favorite.ts index 0c9bf8b861..aa3f6f1f7c 100644 --- a/web-components/src/components/favorite/Favorite.ts +++ b/web-components/src/components/favorite/Favorite.ts @@ -6,16 +6,15 @@ * */ -import reset from "@/wc_scss/reset.scss"; -import { html, internalProperty, LitElement, property } from "lit-element"; -import { FocusMixin } from "@/mixins"; -import { customElementWithCheck } from "@/mixins/CustomElementCheck"; import "@/components/icon/Icon"; -import styles from "./scss/module.scss"; import { Key } from "@/constants"; -import { nothing } from "lit-html"; +import { FocusMixin } from "@/mixins"; +import { customElementWithCheck } from "@/mixins/CustomElementCheck"; +import reset from "@/wc_scss/reset.scss"; +import { html, internalProperty, LitElement, property } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import { ifDefined } from "lit-html/directives/if-defined"; +import styles from "./scss/module.scss"; export namespace Favorite { @customElementWithCheck("md-favorite") @@ -38,7 +37,7 @@ export namespace Favorite { return [reset, styles]; } - handleFavorite(event: CustomEvent) { + handleFavorite() { if (this.disabled) { return; } else { @@ -103,8 +102,9 @@ export namespace Favorite { name="favorite-checkbox" /> `; diff --git a/web-components/src/components/favorite/scss/favorite.scss b/web-components/src/components/favorite/scss/favorite.scss index 24434ad1b3..0f6f45d515 100644 --- a/web-components/src/components/favorite/scss/favorite.scss +++ b/web-components/src/components/favorite/scss/favorite.scss @@ -6,8 +6,6 @@ @include flex($display: inline-flex); border-radius: $favorite-border; height: $favorite-size; - padding: calc(#{$favorite-indent} * 1.5); - padding-top: calc(#{$favorite-indent} * 2.5); position: relative; width: $favorite-size; diff --git a/web-components/src/components/favorite/scss/settings.scss b/web-components/src/components/favorite/scss/settings.scss index 35144d9321..8562be0be9 100644 --- a/web-components/src/components/favorite/scss/settings.scss +++ b/web-components/src/components/favorite/scss/settings.scss @@ -1,3 +1,3 @@ -$favorite-size: rem-calc(20); -$favorite-border: rem-calc(4); +$favorite-size: rem-calc(24); +$favorite-border: var(--button-favorite-border-radius, rem-calc(4)); $favorite-indent: rem-calc(2); diff --git a/web-components/src/components/floating-modal/FloatingModal.test.ts b/web-components/src/components/floating-modal/FloatingModal.test.ts index e0940dee69..faaef33b39 100644 --- a/web-components/src/components/floating-modal/FloatingModal.test.ts +++ b/web-components/src/components/floating-modal/FloatingModal.test.ts @@ -1,8 +1,7 @@ +import { Button } from "@/components/button/Button"; +import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers"; import "./FloatingModal"; import { FloatingModal } from "./FloatingModal"; -import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers"; -import { Button } from "@/components/button/Button"; -import interact from "@interactjs/interact/index"; Object.defineProperties(Element.prototype, { getBoundingClientRect: { diff --git a/web-components/src/components/meeting-alert/MeetingAlert.ts b/web-components/src/components/meeting-alert/MeetingAlert.ts index 1e1e67df11..64e58ca050 100644 --- a/web-components/src/components/meeting-alert/MeetingAlert.ts +++ b/web-components/src/components/meeting-alert/MeetingAlert.ts @@ -130,7 +130,6 @@ export namespace MeetingAlert { title, closeAriaLabel, show, - onKeyDown, snoozeAriaLabel: remindAriaLabel } = this; diff --git a/web-components/src/components/menu-overlay/MenuOverlay.ts b/web-components/src/components/menu-overlay/MenuOverlay.ts index dd336a2e20..11631ec1a9 100644 --- a/web-components/src/components/menu-overlay/MenuOverlay.ts +++ b/web-components/src/components/menu-overlay/MenuOverlay.ts @@ -339,7 +339,7 @@ export namespace MenuOverlay { } } - private handleTriggerClick = (event: MouseEvent) => { + private handleTriggerClick = () => { this.toggleOverlay(); }; diff --git a/web-components/src/components/slider/tokens/mdv2-slider-token.js b/web-components/src/components/slider/tokens/mdv2-slider-token.js index 766b1ae9b4..462e7db85c 100644 --- a/web-components/src/components/slider/tokens/mdv2-slider-token.js +++ b/web-components/src/components/slider/tokens/mdv2-slider-token.js @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-var-requires */ /* eslint-disable no-undef */ -const colors = require("@momentum-ui/tokens/dist/colors.json"); const slider = { prefix: "mdv2", From 711e3bf1ec7d88aeec84461c1b9b1bc5d82f76c2 Mon Sep 17 00:00:00 2001 From: James Nestor Date: Mon, 19 Aug 2024 22:16:31 +0100 Subject: [PATCH 2/2] test: update test --- web-components/src/components/favorite/Favorite.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-components/src/components/favorite/Favorite.test.ts b/web-components/src/components/favorite/Favorite.test.ts index 83a2c63ccf..b918d6b9c6 100644 --- a/web-components/src/components/favorite/Favorite.test.ts +++ b/web-components/src/components/favorite/Favorite.test.ts @@ -19,7 +19,7 @@ describe("Favorite component", () => { expect(component).toBeDefined(); const icon = component.shadowRoot?.querySelector("md-icon"); - expect(icon?.getAttribute("name")).toEqual("favorite_16"); + expect(icon?.getAttribute("name")).toEqual("favorite-bold"); }); test("should set disabled Favorite", async () => { @@ -36,7 +36,7 @@ describe("Favorite component", () => { expect(element.checked).toBeTruthy; const icon = element.shadowRoot?.querySelector("md-icon"); - expect(icon?.getAttribute("name")).toEqual("favorite-active_16"); + expect(icon?.getAttribute("name")).toEqual("favorite-filled"); }); test("should dispatch Action", async () => {