From cefb4723e246d32c1d1806ed5b5f129f4b1e13c6 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 24 Aug 2023 15:08:01 -0700 Subject: [PATCH 01/42] refactor(tabs, tab, tab-nav, tab-title): getElementProp is refactored out in favor of inheritable props set directly on parent --- .../src/components/tab-title/tab-title.tsx | 19 ++++++-------- .../src/components/tabs/tabs.e2e.ts | 21 ++++++++++++++- .../src/components/tabs/tabs.tsx | 26 ++++++++++++++++--- 3 files changed, 51 insertions(+), 15 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 703b9fb5e48..a8af212b53f 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -13,7 +13,7 @@ import { VNode, Watch, } from "@stencil/core"; -import { getElementDir, getElementProp, toAriaBoolean, nodeListToArray } from "../../utils/dom"; +import { getElementDir, toAriaBoolean, nodeListToArray } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { connectInteractive, @@ -94,14 +94,18 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo @Prop({ reflect: true, mutable: true }) layout: TabLayout; /** - * @internal + * Specifies the position of the `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + * + * @internal */ - @Prop({ reflect: true, mutable: true }) position: TabPosition; + @Prop() position: TabPosition = "top"; /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + * * @internal */ - @Prop({ reflect: true, mutable: true }) scale: Scale; + @Prop() scale: Scale = "m"; /** * @internal @@ -176,15 +180,8 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo componentWillRender(): void { if (this.parentTabsEl) { this.layout = this.parentTabsEl.layout; - this.position = this.parentTabsEl.position; - this.scale = this.parentTabsEl.scale; this.bordered = this.parentTabsEl.bordered; } - // handle case when tab-nav is only parent - if (!this.parentTabsEl && this.parentTabNavEl) { - this.position = getElementProp(this.parentTabNavEl, "position", this.position); - this.scale = getElementProp(this.parentTabNavEl, "scale", this.scale); - } } render(): VNode { diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 8dbe5ff3f59..bd65521505d 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; -import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; +import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; describe("calcite-tabs", () => { @@ -34,6 +34,14 @@ describe("calcite-tabs", () => { ]); }); + describe("reflects", () => { + reflects("calcite-tabs", [ + { propertyName: "layout", value: "inline" }, + { propertyName: "position", value: "top" }, + { propertyName: "scale", value: "m" }, + ]); + }); + describe("accessible: checked", () => { accessible(`${tabsContent}`); }); @@ -346,4 +354,15 @@ describe("calcite-tabs", () => { expect(selectedTitleOnEmit).toBe("boats"); }); + + it("inheritable props `position` and `scale` get passed to `tab-nav` and `tab-titles`", async () => { + const page = await newE2EPage(); + await page.setContent(html` `); + const tabTitles = await page.findAll("calcite-tab-titles"); + + tabTitles.forEach(async (item) => { + expect(await item.getProperty("position")).toBe("bottom"); + expect(await item.getProperty("scale")).toBe("l"); + }); + }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index b900fb24ec6..c10ed1803de 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -1,7 +1,8 @@ -import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from "@stencil/core"; +import { Component, Element, Fragment, h, Listen, Prop, State, VNode, Watch } from "@stencil/core"; import { Scale } from "../interfaces"; import { TabLayout, TabPosition } from "./interfaces"; import { SLOTS } from "./resources"; +import { createObserver } from "../../utils/observers"; /** * @slot - A slot for adding `calcite-tab`s. @@ -25,15 +26,21 @@ export class Tabs { @Prop({ reflect: true }) layout: TabLayout = "inline"; /** - * Specifies the position of the component in relation to the `calcite-tab`s. + * Specifies the position of the `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. */ @Prop({ reflect: true }) position: TabPosition = "top"; /** - * Specifies the size of the component. + * Specifies the size of the component, defaults to `scale`. */ @Prop({ reflect: true }) scale: Scale = "m"; + @Watch("position") + @Watch("scale") + handlePropsChange(): void { + this.updateItems(); + } + /** * When `true`, the component will display with a folder style menu. */ @@ -45,6 +52,10 @@ export class Tabs { // //-------------------------------------------------------------------------- + connectedCallback(): void { + this.mutationObserver?.observe(this.el, { childList: true }); + } + render(): VNode { return ( @@ -133,6 +144,15 @@ export class Tabs { */ @State() tabs: HTMLCalciteTabElement[] = []; + private mutationObserver = createObserver("mutation", () => this.updateItems()); + + private updateItems = (): void => { + this.titles.forEach((title) => { + title.position = this.position; + title.scale = this.scale; + }); + }; + //-------------------------------------------------------------------------- // // Private Methods From 9f05d24eef9d58f76bb4d47a9d134f9ef9d9be0f Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 24 Aug 2023 17:41:05 -0700 Subject: [PATCH 02/42] include tab scale --- .../src/components/tab-nav/tab-nav.tsx | 12 +++++----- .../src/components/tab-title/tab-title.tsx | 2 +- .../src/components/tab/tab.tsx | 8 +++---- .../src/components/tabs/tabs.tsx | 22 ++++++++++++++----- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 831bc3ee7cc..8c6fe2df3cf 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -55,9 +55,11 @@ export class TabNav { @Prop({ mutable: true }) selectedTitle: HTMLCalciteTabTitleElement = null; /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + * * @internal */ - @Prop({ reflect: true, mutable: true }) scale: Scale = "m"; + @Prop() scale: Scale = "m"; /** * @internal @@ -65,9 +67,11 @@ export class TabNav { @Prop({ reflect: true, mutable: true }) layout: TabLayout = "inline"; /** - * @internal + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + * + * @internal */ - @Prop({ reflect: true, mutable: true }) position: TabPosition = "bottom"; + @Prop() position: TabPosition = "top"; /** * @internal @@ -137,8 +141,6 @@ export class TabNav { const { parentTabsEl } = this; this.layout = parentTabsEl?.layout; - this.position = parentTabsEl?.position; - this.scale = parentTabsEl?.scale; this.bordered = parentTabsEl?.bordered; // fix issue with active tab-title not lining up with blue indicator if (this.selectedTitle) { diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index a8af212b53f..b79c9ff71ed 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -94,7 +94,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo @Prop({ reflect: true, mutable: true }) layout: TabLayout; /** - * Specifies the position of the `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. * * @internal */ diff --git a/packages/calcite-components/src/components/tab/tab.tsx b/packages/calcite-components/src/components/tab/tab.tsx index adcccd6a986..a81c2f39ee9 100644 --- a/packages/calcite-components/src/components/tab/tab.tsx +++ b/packages/calcite-components/src/components/tab/tab.tsx @@ -46,9 +46,11 @@ export class Tab { @Prop({ reflect: true, mutable: true }) selected = false; /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + * * @internal */ - @Prop({ reflect: true, mutable: true }) scale: Scale = "m"; + @Prop() scale: Scale = "m"; //-------------------------------------------------------------------------- // @@ -78,10 +80,6 @@ export class Tab { this.calciteInternalTabRegister.emit(); } - componentWillRender(): void { - this.scale = this.parentTabsEl?.scale; - } - disconnectedCallback(): void { // Dispatching to body in order to be listened by other elements that are still connected to the DOM. document.body?.dispatchEvent( diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index c10ed1803de..c4d2bf119bd 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -26,7 +26,7 @@ export class Tabs { @Prop({ reflect: true }) layout: TabLayout = "inline"; /** - * Specifies the position of the `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. */ @Prop({ reflect: true }) position: TabPosition = "top"; @@ -53,7 +53,7 @@ export class Tabs { //-------------------------------------------------------------------------- connectedCallback(): void { - this.mutationObserver?.observe(this.el, { childList: true }); + this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } render(): VNode { @@ -144,12 +144,24 @@ export class Tabs { */ @State() tabs: HTMLCalciteTabElement[] = []; - private mutationObserver = createObserver("mutation", () => this.updateItems()); + mutationObserver = createObserver("mutation", () => this.updateItems()); private updateItems = (): void => { + const { position, scale } = this; + + const nav = this.el.querySelector("calcite-tab-nav") as HTMLCalciteTabNavElement; + if (nav) { + nav.position = position; + } + + const tab = this.el.querySelector("calcite-tab") as HTMLCalciteTabElement; + if (tab) { + tab.scale = scale; + } + this.titles.forEach((title) => { - title.position = this.position; - title.scale = this.scale; + title.position = position; + title.scale = scale; }); }; From 27c8c251679dab37be4c253e22b62fb6c33db382 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 7 Sep 2023 12:14:35 -0700 Subject: [PATCH 03/42] update tests per new changes --- packages/calcite-components/src/components/tab/tab.e2e.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/tab/tab.e2e.ts b/packages/calcite-components/src/components/tab/tab.e2e.ts index 655cac5935d..7615bb5cbea 100644 --- a/packages/calcite-components/src/components/tab/tab.e2e.ts +++ b/packages/calcite-components/src/components/tab/tab.e2e.ts @@ -18,7 +18,7 @@ describe("calcite-tab", () => { defaults("calcite-tab", [ { propertyName: "tab", defaultValue: undefined }, { propertyName: "selected", defaultValue: false }, - { propertyName: "scale", defaultValue: undefined }, + { propertyName: "scale", defaultValue: "m" }, ]); }); @@ -28,7 +28,7 @@ describe("calcite-tab", () => { html: `${tabHtml}`, }); const element = await page.find("calcite-tab"); - expect(element).toEqualAttribute("scale", "m"); + expect(await element.getProperty("scale")).toBe("m"); expect(await (await element.getComputedStyle())["font-size"]).toEqual("14px"); expect(await (await element.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem }); @@ -39,7 +39,7 @@ describe("calcite-tab", () => { html: `${tabHtml}`, }); const element = await page.find("calcite-tab"); - expect(element).toEqualAttribute("scale", "s"); + expect(await element.getProperty("scale")).toBe("s"); expect(await (await element.getComputedStyle())["font-size"]).toEqual("12px"); expect(await (await element.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem }); @@ -51,7 +51,7 @@ describe("calcite-tab", () => { html: `${tabHtml}`, }); const element = await page.find("calcite-tab"); - expect(element).toEqualAttribute("scale", "l"); + expect(await element.getProperty("scale")).toBe("l"); expect(await (await element.getComputedStyle())["font-size"]).toEqual("16px"); expect(await (await element.getComputedStyle())["line-height"]).toEqual("20px"); // 1.25rem }); From b322908a7d1382b758621e22eaa430acf9408d82 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 7 Sep 2023 17:17:02 -0700 Subject: [PATCH 04/42] adjust tab-nav tests to asserting on scales being inherited and not reflected --- .../src/components/tab-nav/tab-nav.e2e.ts | 44 ++++++++----------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index 72c8a967f62..fa4bfee4a1b 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -78,62 +78,56 @@ describe("calcite-tab-nav", () => { }); }); + const navWithTabTitleSetHtml = html` + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + + `; + describe("scale property", () => { describe("default", () => { - it("should render without scale", async () => { + it("should inherit parent scale", async () => { const page = await newE2EPage({ - html: `${tabNavHtml}`, + html: `${navWithTabTitleSetHtml}`, }); const element = await page.find("calcite-tab-nav"); - expect(element).not.toHaveAttribute("scale"); + expect(await element.getProperty("scale")).toBe("m"); }); }); describe("when scale is small", () => { it("should render with small scale", async () => { const page = await newE2EPage({ - html: ` - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - `, + html: html`${navWithTabTitleSetHtml}`, }); const element = await page.find("calcite-tab-nav"); expect(await (await element.getComputedStyle())["minHeight"]).toEqual("24px"); - expect(element).toEqualAttribute("scale", "s"); + expect(await element.getProperty("scale")).toBe("s"); }); }); describe("when scale is medium", () => { it("should render with medium scale", async () => { const page = await newE2EPage({ - html: ` - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - `, + html: html`${navWithTabTitleSetHtml}`, }); const element = await page.find("calcite-tab-nav"); expect(await (await element.getComputedStyle())["minHeight"]).toEqual("32px"); - expect(element).toEqualAttribute("scale", "m"); + expect(await element.getProperty("scale")).toBe("m"); }); }); describe("when scale is large", () => { - it("should render with medium scale", async () => { + it("should render with large scale", async () => { const page = await newE2EPage({ - html: ` - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - `, + html: html`${tabNavHtml}`, }); const element = await page.find("calcite-tab-nav"); expect(await (await element.getComputedStyle())["minHeight"]).toEqual("44px"); - expect(element).toEqualAttribute("scale", "l"); + expect(await element.getProperty("scale")).toBe("l"); }); }); From 4b572a40ecabff576cfeecce38bb991125c8be19 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 7 Sep 2023 19:03:34 -0700 Subject: [PATCH 05/42] make testing scale inheritance down the ancestry tree dry --- .../src/components/tab-title/tab-title.e2e.ts | 223 +++++++----------- 1 file changed, 88 insertions(+), 135 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index e220ccdb174..203d76c441e 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -379,118 +379,69 @@ describe("calcite-tab-title", () => { }); describe("scale property", () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage(); - }); - - it("should inherit default medium scale from tab-nav", async () => { - await page.setContent( - html` - - Tab Title - Tab 2 Title - - ` - ); - - const tabTitleNav = await page.find("calcite-tab-nav"); - const tabTitleEl = await page.find("calcite-tab-title"); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - const contentStyles = await content.getComputedStyle(); - - expect(tabTitleEl).toEqualAttribute("scale", "m"); - expect(tabTitleNav).toEqualAttribute("scale", "m"); - expect(contentStyles.fontSize).toEqual("14px"); - expect(contentStyles.lineHeight).toEqual("16px"); - }); + const tabTitleSetHtml = html` + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + `; + + const navWithTabTitleSetHtml = html` + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + + `; + + const scaleStyles = [ + { scale: null, styles: { fontSize: "14px", lineHeight: "16px" } }, //default + { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, // n2h: ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem) + { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, // n1h: ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem) + { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, // "0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem) + ]; + + for (const testCase of scaleStyles) { + describe("when immediate parent element is `tabs`", () => { + it(`should inherit ${testCase.scale || "default medium"} scale from parent`, async () => { + const page = await newE2EPage({ + html: html`${tabTitleSetHtml}`, + }); + + const tabTitleEl = await page.find("calcite-tab-title"); + const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); + const contentStyles = await content.getComputedStyle(); + + expect(await tabTitleEl.getProperty("scale")).toBe(`${testCase.scale}` || "m"); + + expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); + expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + }); + }); - it("should inherit small scale from tab-nav", async () => { - await page.setContent( - html` - - Tab Title - Tab 2 Title - - ` - ); - - const tabTitleNav = await page.find("calcite-tab-nav"); - const tabTitleEl = await page.find("calcite-tab-title"); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - const contentStyles = await content.getComputedStyle(); - - expect(tabTitleEl).toEqualAttribute("scale", "s"); - expect(tabTitleNav).toEqualAttribute("scale", "s"); - expect(contentStyles.fontSize).toEqual("12px"); - expect(contentStyles.lineHeight).toEqual("16px"); - }); + describe("when immediate parent element is `tab-nav`", () => { + it(`should inherit ${testCase.scale || "default medium"} scale down from 'tabs' parent`, async () => { + const page = await newE2EPage({ + html: html`${navWithTabTitleSetHtml}`, + }); - it("should inherit large scale from tab-nav", async () => { - await page.setContent( - html` - - Tab Title - Tab 2 Title - - ` - ); - - const tabTitleNav = await page.find("calcite-tab-nav"); - const tabTitleEl = await page.find("calcite-tab-title"); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - const contentStyles = await content.getComputedStyle(); - - expect(tabTitleEl).toEqualAttribute("scale", "l"); - expect(tabTitleNav).toEqualAttribute("scale", "l"); - expect(contentStyles.fontSize).toEqual("16px"); - expect(contentStyles.lineHeight).toEqual("20px"); - }); - }); - }); - - describe("when parent element is tabs", () => { - describe("scale property", () => { - it("should inherit default m scale", async () => { - const page = await newE2EPage({ - html: ` - Tab Title - Tab 2 Title - `, - }); - const element = await page.find("calcite-tab-title"); - expect(element).toEqualAttribute("scale", "m"); - }); + const tabTitleEl = await page.find("calcite-tab-title"); + const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); + const contentStyles = await content.getComputedStyle(); - it("should inherit small scale from tabs", async () => { - const page = await newE2EPage({ - html: ` - Tab Title - Tab 2 Title - `, - }); - const element = await page.find("calcite-tab-title"); - expect(element).toEqualAttribute("scale", "s"); - }); + expect(await tabTitleEl.getProperty("scale")).toBe(`${testCase.scale}` || "m"); - it("should inherit large scale from tabs", async () => { - const page = await newE2EPage({ - html: ` - Tab 1 Title - Tab 2 Title - `, + expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); + expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + }); }); - const element = await page.find("calcite-tab-title"); - expect(element).toEqualAttribute("scale", "l"); - }); - }); - }); + } - describe("when the active tab-title changes", () => { - it("should move the active tab nav indicator", async () => { - const page = await newE2EPage({ - html: ` + describe("when the active tab-title changes", () => { + it("should move the active tab nav indicator", async () => { + const page = await newE2EPage({ + html: ` Tab 1 Title @@ -504,36 +455,38 @@ describe("calcite-tab-title", () => { Tab 4 Content `, + }); + const tabTitle1 = await page.find(".title-1"); + const tabTitle2 = await page.find(".title-2"); + + expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title"); + expect( + await page.evaluate(() => { + return ( + document + .querySelector("calcite-tab-nav") + .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement + ).style.left; + }) + ).not.toEqual("0px"); + + // toggle new selected tab-title + await tabTitle2.removeAttribute("selected"); + await tabTitle1.setAttribute("selected", true); + await page.waitForChanges(); + + expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title"); + expect( + await page.evaluate(() => { + return ( + document + .querySelector("calcite-tab-nav") + .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement + ).style.left; + }) + ).toEqual("0px"); + }); }); - const tabTitle1 = await page.find(".title-1"); - const tabTitle2 = await page.find(".title-2"); - - expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title"); - expect( - await page.evaluate(() => { - return ( - document - .querySelector("calcite-tab-nav") - .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement - ).style.left; - }) - ).not.toEqual("0px"); - - // toggle new selected tab-title - await tabTitle2.removeAttribute("selected"); - await tabTitle1.setAttribute("selected", true); - await page.waitForChanges(); - - expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title"); - expect( - await page.evaluate(() => { - return ( - document - .querySelector("calcite-tab-nav") - .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement - ).style.left; - }) - ).toEqual("0px"); }); }); }); From c5fa9bfb1b153021e0a2f776d81eb6a1e4728c31 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 11 Sep 2023 12:26:42 -0700 Subject: [PATCH 06/42] update tabs test per new requirements: attribute is no longer reflected on children --- .../src/components/tab-nav/tab-nav.e2e.ts | 6 ++-- .../src/components/tabs/tabs.e2e.ts | 30 +++++++++++-------- .../src/components/tabs/tabs.tsx | 15 +++++++--- 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index fa4bfee4a1b..9d79dcafe18 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -137,7 +137,7 @@ describe("calcite-tab-nav", () => { html: `${tabNavHtml}`, }); const element = await page.find("calcite-tab-nav"); - expect(element).toEqualAttribute("scale", "m"); + expect(await element.getProperty("scale")).toBe("m"); }); describe("when tabs scale is small", () => { @@ -146,7 +146,7 @@ describe("calcite-tab-nav", () => { html: `${tabNavHtml}`, }); const element = await page.find("calcite-tab-nav"); - expect(element).toEqualAttribute("scale", "s"); + expect(await element.getProperty("scale")).toBe("s"); }); }); @@ -156,7 +156,7 @@ describe("calcite-tab-nav", () => { html: `${tabNavHtml}`, }); const element = await page.find("calcite-tab-nav"); - expect(element).toEqualAttribute("scale", "l"); + expect(await element.getProperty("scale")).toBe("l"); }); }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index bd65521505d..38cf9b33183 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -128,12 +128,12 @@ describe("calcite-tabs", () => { describe("when no scale is provided", () => { it("should render itself and child tab elements with default medium scale", async () => { const page = await newE2EPage({ - html: `${tabsContent}`, + html: tabsSnippet, }); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); - expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "m"); - expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "m"); - expect(await page.find("calcite-tab")).toEqualAttribute("scale", "m"); + expect((await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); + expect((await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); + expect((await page.find("calcite-tab")).getProperty("scale")).toBe("m"); }); }); @@ -142,30 +142,34 @@ describe("calcite-tabs", () => { const page = await newE2EPage({ html: `${tabsContent}`, }); + expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "s"); - expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "s"); - expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "s"); - expect(await page.find("calcite-tab")).toEqualAttribute("scale", "s"); + expect((await page.find("calcite-tab-nav")).getProperty("scale")).toBe("s"); + expect((await page.find("calcite-tab-title")).getProperty("scale")).toBe("s"); + expect((await page.find("calcite-tab")).getProperty("scale")).toBe("s"); }); it("should render itself and child tab elements with corresponding scale (medium)", async () => { const page = await newE2EPage({ html: `${tabsContent}`, }); + expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); - expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "m"); - expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "m"); - expect(await page.find("calcite-tab")).toEqualAttribute("scale", "m"); + console.log((await page.find("calcite-tab-nav")).getProperty("scale")); + expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); + expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); + expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("m"); }); it("should render itself and child tab elements with corresponding scale (large)", async () => { const page = await newE2EPage({ html: `${tabsContent}`, }); + expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "l"); - expect(await page.find("calcite-tab-nav")).toEqualAttribute("scale", "l"); - expect(await page.find("calcite-tab-title")).toEqualAttribute("scale", "l"); - expect(await page.find("calcite-tab")).toEqualAttribute("scale", "l"); + expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("l"); + expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("l"); + expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("l"); }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index c4d2bf119bd..1c4b0817a0d 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -54,6 +54,11 @@ export class Tabs { connectedCallback(): void { this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); + this.updateItems(); + } + + disconnectedCallback(): void { + this.mutationObserver?.disconnect(); } render(): VNode { @@ -159,10 +164,12 @@ export class Tabs { tab.scale = scale; } - this.titles.forEach((title) => { - title.position = position; - title.scale = scale; - }); + this.el + .querySelectorAll("calcite-tab-title-item") + .forEach((title: HTMLCalciteTabTitleElement) => { + title.position = position; + title.scale = scale; + }); }; //-------------------------------------------------------------------------- From 85c5b5d561cfeaac52f38f027bea4a0ff587ddd8 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 11 Sep 2023 12:50:05 -0700 Subject: [PATCH 07/42] cleanup --- .../src/components/tabs/tabs.e2e.ts | 12 +++++----- .../src/components/tabs/tabs.tsx | 23 ++++++++++--------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 38cf9b33183..5275c1d44d7 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -131,9 +131,9 @@ describe("calcite-tabs", () => { html: tabsSnippet, }); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); - expect((await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); - expect((await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); - expect((await page.find("calcite-tab")).getProperty("scale")).toBe("m"); + expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); + expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); + expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("m"); }); }); @@ -144,9 +144,9 @@ describe("calcite-tabs", () => { }); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "s"); - expect((await page.find("calcite-tab-nav")).getProperty("scale")).toBe("s"); - expect((await page.find("calcite-tab-title")).getProperty("scale")).toBe("s"); - expect((await page.find("calcite-tab")).getProperty("scale")).toBe("s"); + expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("s"); + expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("s"); + expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("s"); }); it("should render itself and child tab elements with corresponding scale (medium)", async () => { diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 1c4b0817a0d..861b1818266 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -154,22 +154,23 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - const nav = this.el.querySelector("calcite-tab-nav") as HTMLCalciteTabNavElement; - if (nav) { - nav.position = position; - } + Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( + (nav: HTMLCalciteTabNavElement) => { + nav.position = position; + nav.scale = scale; + } + ); - const tab = this.el.querySelector("calcite-tab") as HTMLCalciteTabElement; - if (tab) { + Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; - } + }); - this.el - .querySelectorAll("calcite-tab-title-item") - .forEach((title: HTMLCalciteTabTitleElement) => { + Array.from(this.el.querySelectorAll("calcite-tab-title-item")).forEach( + (title: HTMLCalciteTabTitleElement) => { title.position = position; title.scale = scale; - }); + } + ); }; //-------------------------------------------------------------------------- From 88df173f2da48d81bd323efa6e063ab26fd4961d Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 11 Sep 2023 14:49:52 -0700 Subject: [PATCH 08/42] cleanup --- .../src/components/tab-nav/tab-nav.tsx | 8 +++--- .../src/components/tabs/tabs.e2e.ts | 25 ++++++++++--------- .../src/components/tabs/tabs.tsx | 20 +++++++-------- 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 8c6fe2df3cf..56829b2d7df 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -125,10 +125,6 @@ export class TabNav { this.resizeObserver?.observe(this.el); } - disconnectedCallback(): void { - this.resizeObserver?.disconnect(); - } - componentWillLoad(): void { const storageKey = `calcite-tab-nav-${this.storageId}`; if (localStorage && this.storageId && localStorage.getItem(storageKey)) { @@ -163,6 +159,10 @@ export class TabNav { } } + disconnectedCallback(): void { + this.resizeObserver?.disconnect(); + } + render(): VNode { const dir = getElementDir(this.el); const width = `${this.indicatorWidth}px`; diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 5275c1d44d7..2af18faadab 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -127,9 +127,10 @@ describe("calcite-tabs", () => { describe("when no scale is provided", () => { it("should render itself and child tab elements with default medium scale", async () => { - const page = await newE2EPage({ - html: tabsSnippet, - }); + const page = await newE2EPage(); + await page.setContent(html`${tabsSnippet}`); + await page.waitForChanges(); + expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); @@ -139,9 +140,9 @@ describe("calcite-tabs", () => { describe("when scale is provided", () => { it("should render itself and child tab elements with corresponding scale (small)", async () => { - const page = await newE2EPage({ - html: `${tabsContent}`, - }); + const page = await newE2EPage(); + await page.setContent(html`${tabsContent}`); + await page.waitForChanges(); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "s"); expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("s"); @@ -150,9 +151,9 @@ describe("calcite-tabs", () => { }); it("should render itself and child tab elements with corresponding scale (medium)", async () => { - const page = await newE2EPage({ - html: `${tabsContent}`, - }); + const page = await newE2EPage(); + await page.setContent(html`${tabsContent}`); + await page.waitForChanges(); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); console.log((await page.find("calcite-tab-nav")).getProperty("scale")); @@ -162,9 +163,9 @@ describe("calcite-tabs", () => { }); it("should render itself and child tab elements with corresponding scale (large)", async () => { - const page = await newE2EPage({ - html: `${tabsContent}`, - }); + const page = await newE2EPage(); + await page.setContent(html`${tabsContent}`); + await page.waitForChanges(); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "l"); expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("l"); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 861b1818266..fd807372d30 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -154,23 +154,21 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( - (nav: HTMLCalciteTabNavElement) => { - nav.position = position; - nav.scale = scale; - } - ); + this.el.querySelectorAll("calcite-tab-nav").forEach((nav: HTMLCalciteTabNavElement) => { + nav.position = position; + nav.scale = scale; + }); - Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { + this.el.querySelectorAll("calcite-tab").forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; }); - Array.from(this.el.querySelectorAll("calcite-tab-title-item")).forEach( - (title: HTMLCalciteTabTitleElement) => { + this.el + .querySelectorAll("calcite-tab-title-item") + .forEach((title: HTMLCalciteTabTitleElement) => { title.position = position; title.scale = scale; - } - ); + }); }; //-------------------------------------------------------------------------- From 4fba6d2282c350fac045a90ba586a9dd2e63ed0c Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 11 Sep 2023 16:28:59 -0700 Subject: [PATCH 09/42] clean loop with absent value --- .../src/components/tab-title/tab-title.e2e.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index 203d76c441e..ee2173ba7f6 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -396,7 +396,7 @@ describe("calcite-tab-title", () => { `; const scaleStyles = [ - { scale: null, styles: { fontSize: "14px", lineHeight: "16px" } }, //default + { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, // n2h: ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem) { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, // n1h: ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem) { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, // "0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem) @@ -415,8 +415,8 @@ describe("calcite-tab-title", () => { expect(await tabTitleEl.getProperty("scale")).toBe(`${testCase.scale}` || "m"); - expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); - expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "m"); + expect(contentStyles.lineHeight).toEqual(testCase.scale ? testCase.styles.lineHeight : "16px"); }); }); @@ -432,8 +432,8 @@ describe("calcite-tab-title", () => { expect(await tabTitleEl.getProperty("scale")).toBe(`${testCase.scale}` || "m"); - expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); - expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "m"); + expect(contentStyles.lineHeight).toEqual(testCase.scale ? testCase.styles.lineHeight : "16px"); }); }); } From 41fefb6c0b0161ca320c630b253fa8e4e72d6625 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 12 Sep 2023 15:43:41 -0700 Subject: [PATCH 10/42] refactor selectors out into resources, other refactors --- .../src/components/tab-title/tab-title.e2e.ts | 26 +++++++------------ .../src/components/tabs/resources.ts | 4 +++ .../src/components/tabs/tabs.tsx | 24 ++++++++++------- 3 files changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index ee2173ba7f6..e2d9bcdbc96 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -386,14 +386,7 @@ describe("calcite-tab-title", () => { Tab 4 Title `; - const navWithTabTitleSetHtml = html` - - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - - `; + const navWithTabTitleSetHtml = html` ${tabTitleSetHtml} `; const scaleStyles = [ { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default @@ -411,28 +404,29 @@ describe("calcite-tab-title", () => { const tabTitleEl = await page.find("calcite-tab-title"); const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); + const contentStyles = await content.getComputedStyle(); - expect(await tabTitleEl.getProperty("scale")).toBe(`${testCase.scale}` || "m"); + expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale ? `${testCase.scale}` : ""); - expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "m"); + expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "14px"); expect(contentStyles.lineHeight).toEqual(testCase.scale ? testCase.styles.lineHeight : "16px"); }); }); describe("when immediate parent element is `tab-nav`", () => { it(`should inherit ${testCase.scale || "default medium"} scale down from 'tabs' parent`, async () => { - const page = await newE2EPage({ - html: html`${navWithTabTitleSetHtml}`, - }); + const page = await newE2EPage(); + await page.setContent(`${navWithTabTitleSetHtml}`); - const tabTitleEl = await page.find("calcite-tab-title"); + const tabTitleEl = await page.find(`calcite-tab-title`); const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); + const contentStyles = await content.getComputedStyle(); - expect(await tabTitleEl.getProperty("scale")).toBe(`${testCase.scale}` || "m"); + expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale ? `${testCase.scale}` : ""); - expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "m"); + expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "14px"); expect(contentStyles.lineHeight).toEqual(testCase.scale ? testCase.styles.lineHeight : "16px"); }); }); diff --git a/packages/calcite-components/src/components/tabs/resources.ts b/packages/calcite-components/src/components/tabs/resources.ts index 325745e85ad..95d908abbef 100644 --- a/packages/calcite-components/src/components/tabs/resources.ts +++ b/packages/calcite-components/src/components/tabs/resources.ts @@ -1,3 +1,7 @@ export const SLOTS = { titleGroup: "title-group", }; + +export const Tab = "CALCITE-TAB"; +export const TabNav = "CALCITE-TAB-NAV"; +export const TabTitle = "CALCITE-TAB-TITLE"; diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index fd807372d30..181be76bb49 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -1,7 +1,7 @@ import { Component, Element, Fragment, h, Listen, Prop, State, VNode, Watch } from "@stencil/core"; import { Scale } from "../interfaces"; import { TabLayout, TabPosition } from "./interfaces"; -import { SLOTS } from "./resources"; +import { SLOTS, Tab, TabNav, TabTitle } from "./resources"; import { createObserver } from "../../utils/observers"; /** @@ -57,6 +57,10 @@ export class Tabs { this.updateItems(); } + async componentWillLoad(): Promise { + this.updateItems(); + } + disconnectedCallback(): void { this.mutationObserver?.disconnect(); } @@ -153,22 +157,24 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; + console.log("position", position); - this.el.querySelectorAll("calcite-tab-nav").forEach((nav: HTMLCalciteTabNavElement) => { + Array.from(this.el.querySelectorAll(TabNav)).forEach((nav: HTMLCalciteTabNavElement) => { + console.log("nav", nav); nav.position = position; nav.scale = scale; }); - this.el.querySelectorAll("calcite-tab").forEach((tab: HTMLCalciteTabElement) => { + Array.from(this.el.querySelectorAll(Tab)).forEach((tab: HTMLCalciteTabElement) => { + console.log("tab", tab); tab.scale = scale; }); - this.el - .querySelectorAll("calcite-tab-title-item") - .forEach((title: HTMLCalciteTabTitleElement) => { - title.position = position; - title.scale = scale; - }); + Array.from(this.el.querySelectorAll(TabTitle)).forEach((title: HTMLCalciteTabTitleElement) => { + console.log("title", title); + title.position = position; + title.scale = scale; + }); }; //-------------------------------------------------------------------------- From 07d83bf895cba5181f3912ef5585246569489d77 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 12 Sep 2023 16:47:37 -0700 Subject: [PATCH 11/42] Refactor tab-nav scale test into one compact it block --- .../src/components/tab-nav/tab-nav.e2e.ts | 112 +++++------------- .../src/components/tabs/tabs.e2e.ts | 1 - .../src/components/tabs/tabs.tsx | 4 - 3 files changed, 30 insertions(+), 87 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index 9d79dcafe18..f864dcdb7fe 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -1,10 +1,16 @@ -import { newE2EPage } from "@stencil/core/testing"; -import { accessible, renders, hidden } from "../../tests/commonTests"; +import { E2EPage, newE2EPage } from "@stencil/core/testing"; +import { accessible, defaults, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { TabNav } from "../tabs/resources"; describe("calcite-tab-nav", () => { const tabNavHtml = ""; + describe("defaults (immediate parent tabs or tab-nav)", () => { + defaults("calcite-tabs", [{ propertyName: "scale", defaultValue: "m" }]); + defaults(`${tabNavHtml}`, [{ propertyName: "scale", defaultValue: "m" }]); + }); + describe("renders", () => { renders(tabNavHtml, { display: "flex" }); }); @@ -78,86 +84,28 @@ describe("calcite-tab-nav", () => { }); }); - const navWithTabTitleSetHtml = html` - - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - - `; - - describe("scale property", () => { - describe("default", () => { - it("should inherit parent scale", async () => { - const page = await newE2EPage({ - html: `${navWithTabTitleSetHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await element.getProperty("scale")).toBe("m"); - }); - }); - - describe("when scale is small", () => { - it("should render with small scale", async () => { - const page = await newE2EPage({ - html: html`${navWithTabTitleSetHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await (await element.getComputedStyle())["minHeight"]).toEqual("24px"); - expect(await element.getProperty("scale")).toBe("s"); - }); - }); - - describe("when scale is medium", () => { - it("should render with medium scale", async () => { - const page = await newE2EPage({ - html: html`${navWithTabTitleSetHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await (await element.getComputedStyle())["minHeight"]).toEqual("32px"); - expect(await element.getProperty("scale")).toBe("m"); - }); - }); - - describe("when scale is large", () => { - it("should render with large scale", async () => { - const page = await newE2EPage({ - html: html`${tabNavHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await (await element.getComputedStyle())["minHeight"]).toEqual("44px"); - expect(await element.getProperty("scale")).toBe("l"); - }); - }); - - describe("when nested within tabs parent", () => { - it("should render with default medium scale", async () => { - const page = await newE2EPage({ - html: `${tabNavHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await element.getProperty("scale")).toBe("m"); - }); - - describe("when tabs scale is small", () => { - it("should render with small scale", async () => { - const page = await newE2EPage({ - html: `${tabNavHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await element.getProperty("scale")).toBe("s"); - }); - }); - - describe("when tabs scale is large", () => { - it("should render with large scale", async () => { - const page = await newE2EPage({ - html: `${tabNavHtml}`, - }); - const element = await page.find("calcite-tab-nav"); - expect(await element.getProperty("scale")).toBe("l"); - }); + describe("scales", () => { + const scaleMinHeightPairs = { + s: "24px", + m: "32px", + l: "44px", + }; + + Object.entries(scaleMinHeightPairs).forEach(([scale, minHeight]) => { + it(`${scale} scale`, async () => { + let page: E2EPage; + const immediateParent = ["tabs", "tab-nav"]; + + for (const parent in immediateParent) { + page = await newE2EPage(); + await page.setContent( + parent === "tabs" ? html`${tabNavHtml}` : html`${tabNavHtml}` + ); + } + + const element = await page.find(TabNav); + expect((await element.getComputedStyle())["minHeight"]).toEqual(minHeight); + expect(await element.getProperty("scale")).toBe(`${scale}`); }); }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 2af18faadab..a7027a54893 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -156,7 +156,6 @@ describe("calcite-tabs", () => { await page.waitForChanges(); expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); - console.log((await page.find("calcite-tab-nav")).getProperty("scale")); expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("m"); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 181be76bb49..5a7b5ba54ce 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -157,21 +157,17 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - console.log("position", position); Array.from(this.el.querySelectorAll(TabNav)).forEach((nav: HTMLCalciteTabNavElement) => { - console.log("nav", nav); nav.position = position; nav.scale = scale; }); Array.from(this.el.querySelectorAll(Tab)).forEach((tab: HTMLCalciteTabElement) => { - console.log("tab", tab); tab.scale = scale; }); Array.from(this.el.querySelectorAll(TabTitle)).forEach((title: HTMLCalciteTabTitleElement) => { - console.log("title", title); title.position = position; title.scale = scale; }); From c17919e483720c6d0196d37ed5b26e40941f109c Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 13 Sep 2023 17:10:09 -0700 Subject: [PATCH 12/42] add a class selector and refactor test loop --- .../src/components/tab-nav/tab-nav.e2e.ts | 23 +++++++------------ .../src/components/tab-nav/tab-nav.scss | 6 ++--- .../src/components/tab-nav/tab-nav.tsx | 2 +- 3 files changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index f864dcdb7fe..9ba3e36e61c 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -1,4 +1,4 @@ -import { E2EPage, newE2EPage } from "@stencil/core/testing"; +import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { TabNav } from "../tabs/resources"; @@ -91,23 +91,16 @@ describe("calcite-tab-nav", () => { l: "44px", }; - Object.entries(scaleMinHeightPairs).forEach(([scale, minHeight]) => { - it(`${scale} scale`, async () => { - let page: E2EPage; - const immediateParent = ["tabs", "tab-nav"]; - - for (const parent in immediateParent) { - page = await newE2EPage(); - await page.setContent( - parent === "tabs" ? html`${tabNavHtml}` : html`${tabNavHtml}` - ); - } + for (const [key, value] of Object.entries(scaleMinHeightPairs)) { + it(`${key} scale`, async () => { + const page = await newE2EPage(); + await page.setContent(html`${tabNavHtml}`); const element = await page.find(TabNav); - expect((await element.getComputedStyle())["minHeight"]).toEqual(minHeight); - expect(await element.getProperty("scale")).toBe(`${scale}`); + expect((await element.getComputedStyle())["height"]).toEqual(value); + expect(await element.getProperty("scale")).toBe(`${key}`); }); - }); + } }); it("focuses on keyboard interaction", async () => { diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index b5d60b51fcb..ea8bad56078 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -2,15 +2,15 @@ @apply relative flex; } -:host([scale="s"]) { +:host .scale--s { min-block-size: theme("spacing.6"); } -:host([scale="m"]) { +:host .scale--m { min-block-size: theme("spacing.8"); } -:host([scale="l"]) { +:host .scale--l { min-block-size: theme("spacing.11"); } diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 56829b2d7df..3ca70fe1bd3 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -171,7 +171,7 @@ export class TabNav { return (
(this.tabNavEl = el)} From 25529f7b5af189c2fa65f76132f4e2bbfe7fc9a7 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 12 Oct 2023 20:07:40 -0700 Subject: [PATCH 13/42] refactor use of attribute scale as selector and use a dynamically added scale class in the format .scale--s --- .../src/components/tab-nav/readme.md | 14 ++++++----- .../src/components/tab-nav/tab-nav.e2e.ts | 4 ++-- .../src/components/tab-nav/tab-nav.tsx | 3 ++- .../src/components/tab-nav/usage/Basic.md | 14 ++++++----- .../src/components/tab-title/resources.ts | 14 ----------- .../src/components/tab-title/tab-title.scss | 24 +++++++++---------- .../src/components/tab-title/tab-title.tsx | 3 ++- .../src/components/tab/tab.scss | 6 ++--- .../src/components/tab/tab.tsx | 8 +++++-- .../src/components/tabs/resources.ts | 22 +++++++++++++---- .../src/components/tabs/tabs.tsx | 16 +++++++------ 11 files changed, 70 insertions(+), 58 deletions(-) delete mode 100644 packages/calcite-components/src/components/tab-title/resources.ts diff --git a/packages/calcite-components/src/components/tab-nav/readme.md b/packages/calcite-components/src/components/tab-nav/readme.md index 58098465d28..e46d1f01980 100644 --- a/packages/calcite-components/src/components/tab-nav/readme.md +++ b/packages/calcite-components/src/components/tab-nav/readme.md @@ -8,14 +8,16 @@ The tab-nav groups several [calcite-tab-title](../tab-title) components and buil ### Basic -When tab-nav is the only parent, tab-title can inherit its `scale` and `position` from tab-nav: +Tab-nav and tab-title inherit their `scale` and `position` from tab-title parent: ```html - - Layers - Maps - Data - + + + Layers + Maps + Data + + ``` ## Properties diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index 9ba3e36e61c..7f8e7443906 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -1,7 +1,7 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { TabNav } from "../tabs/resources"; +import { CSS } from "../tabs/resources"; describe("calcite-tab-nav", () => { const tabNavHtml = ""; @@ -96,7 +96,7 @@ describe("calcite-tab-nav", () => { const page = await newE2EPage(); await page.setContent(html`${tabNavHtml}`); - const element = await page.find(TabNav); + const element = await page.find(CSS.tabNav); expect((await element.getComputedStyle())["height"]).toEqual(value); expect(await element.getProperty("scale")).toBe(`${key}`); }); diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 60eadc7870b..63d84698ac4 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -21,6 +21,7 @@ import { createObserver } from "../../utils/observers"; import { Scale } from "../interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces"; import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; +import { CSS } from "../tabs/resources"; /** * @slot - A slot for adding `calcite-tab-title`s. @@ -171,7 +172,7 @@ export class TabNav { return (
(this.tabNavEl = el)} diff --git a/packages/calcite-components/src/components/tab-nav/usage/Basic.md b/packages/calcite-components/src/components/tab-nav/usage/Basic.md index 6d4a68d2356..646898c381d 100644 --- a/packages/calcite-components/src/components/tab-nav/usage/Basic.md +++ b/packages/calcite-components/src/components/tab-nav/usage/Basic.md @@ -1,9 +1,11 @@ -When tab-nav is the only parent, tab-title can inherit its `scale` and `position` from tab-nav: +Tab-nav tab-title inherit their `scale` and `position` from tabs parent. ```html - - Layers - Maps - Data - + + + Layers + Maps + Data + + ``` diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts deleted file mode 100644 index 477cf6c8ca4..00000000000 --- a/packages/calcite-components/src/components/tab-title/resources.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const CSS = { - closeButton: "close-button", - container: "container", - content: "content", - contentHasText: "content--has-text", - iconEnd: "icon-end", - iconStart: "icon-start", - iconPresent: "icon-present", - titleIcon: "calcite-tab-title--icon", -}; - -export const ICONS = { - close: "x", -}; diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 275cce426ea..197e49a24f6 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -4,9 +4,9 @@ margin-inline-end: theme("margin.5"); } -:host([layout="center"][scale="s"]), -:host([layout="center"][scale="m"]), -:host([layout="center"][scale="l"]) { +:host([layout="center"]) .scale--s, +:host([layout="center"]) .scale--m, +:host([layout="center"]) .scale--l { @apply my-0 text-center; margin-inline-end: theme("margin.0"); flex-basis: theme("spacing.48"); @@ -22,25 +22,25 @@ } } -:host([layout="center"][bordered][closable][scale="s"]) { +:host([layout="center"][bordered][closable]) .scale--s { .content { padding-inline-start: 36px; //28px button width + 0.5rem padding } } -:host([layout="center"][bordered][closable][scale="m"]) { +:host([layout="center"][bordered][closable]) .scale--m { .content { padding-inline-start: 40px; //28px button width + 0.75rem padding } } -:host([layout="center"][closable][scale="l"]) { +:host([layout="center"][closable]) .scale--l { .content { padding-inline-start: 40px; //36px button width + .25 padding } } -:host([layout="center"][closable][bordered][scale="l"]) { +:host([layout="center"][closable][bordered]) .scale--s { .content { padding-inline-start: 52px; //36px button width + 1rem padding } @@ -87,20 +87,20 @@ } } -:host([scale="s"]) { +:host .scale--s { margin-inline-end: 1rem; .content { @apply text-n2h py-1; } } -:host([scale="m"]) { +:host .scale--m { .content { @apply text-n1h py-2; } } -:host([scale="l"]) { +:host .scale--l { margin-inline-end: 1.5rem; .content { @apply text-0h py-2.5; @@ -255,13 +255,13 @@ } } -:host([bordered][scale="s"]) { +:host([bordered]) .scale--s { .content { @apply px-2; } } -:host([bordered][scale="l"]) { +:host([bordered]) .scale--l { .content { @apply px-4; } diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index b79c9ff71ed..dea154161ee 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -24,7 +24,7 @@ import { import { createObserver } from "../../utils/observers"; import { FlipContext, Scale } from "../interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces"; -import { CSS, ICONS } from "./resources"; +import { CSS, ICONS } from "../tabs/resources"; import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { @@ -218,6 +218,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo class={{ container: true, [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd, + [`scale--${this.scale}`]: true, }} hidden={closed} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss index a7236a5114a..07537ebbdc1 100644 --- a/packages/calcite-components/src/components/tab/tab.scss +++ b/packages/calcite-components/src/components/tab/tab.scss @@ -18,15 +18,15 @@ section, @apply hidden h-full w-full; } -:host([scale="s"]) { +:host .scale--s { @apply text-n2h py-1; } -:host([scale="m"]) { +:host .scale--m { @apply text-n1h py-2; } -:host([scale="l"]) { +:host .scale--l { @apply text-0h; padding-block: 13px; } diff --git a/packages/calcite-components/src/components/tab/tab.tsx b/packages/calcite-components/src/components/tab/tab.tsx index a81c2f39ee9..b5a808165f1 100644 --- a/packages/calcite-components/src/components/tab/tab.tsx +++ b/packages/calcite-components/src/components/tab/tab.tsx @@ -15,7 +15,7 @@ import { nodeListToArray } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { Scale } from "../interfaces"; import { TabChangeEventDetail } from "./interfaces"; - +import { CSS } from "../tabs/resources"; /** * @slot - A slot for adding custom content. */ @@ -63,7 +63,11 @@ export class Tab { return ( -
+
diff --git a/packages/calcite-components/src/components/tabs/resources.ts b/packages/calcite-components/src/components/tabs/resources.ts index 95d908abbef..b56961d5ec2 100644 --- a/packages/calcite-components/src/components/tabs/resources.ts +++ b/packages/calcite-components/src/components/tabs/resources.ts @@ -1,7 +1,21 @@ +export const CSS = { + closeButton: "close-button", + container: "container", + content: "content", + contentHasText: "content--has-text", + iconEnd: "icon-end", + iconStart: "icon-start", + iconPresent: "icon-present", + tab: "tab", + tabNav: "tab-nav", + tabTitle: "tab-title", + titleIcon: "calcite-tab-title--icon", +}; + +export const ICONS = { + close: "x", +}; + export const SLOTS = { titleGroup: "title-group", }; - -export const Tab = "CALCITE-TAB"; -export const TabNav = "CALCITE-TAB-NAV"; -export const TabTitle = "CALCITE-TAB-TITLE"; diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 5a7b5ba54ce..176b1cef4d7 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -1,7 +1,7 @@ import { Component, Element, Fragment, h, Listen, Prop, State, VNode, Watch } from "@stencil/core"; import { Scale } from "../interfaces"; import { TabLayout, TabPosition } from "./interfaces"; -import { SLOTS, Tab, TabNav, TabTitle } from "./resources"; +import { SLOTS, CSS } from "./resources"; import { createObserver } from "../../utils/observers"; /** @@ -158,19 +158,21 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - Array.from(this.el.querySelectorAll(TabNav)).forEach((nav: HTMLCalciteTabNavElement) => { + Array.from(this.el.querySelectorAll(CSS.tabNav)).forEach((nav: HTMLCalciteTabNavElement) => { nav.position = position; nav.scale = scale; }); - Array.from(this.el.querySelectorAll(Tab)).forEach((tab: HTMLCalciteTabElement) => { + Array.from(this.el.querySelectorAll(CSS.tab)).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; }); - Array.from(this.el.querySelectorAll(TabTitle)).forEach((title: HTMLCalciteTabTitleElement) => { - title.position = position; - title.scale = scale; - }); + Array.from(this.el.querySelectorAll(CSS.tabTitle)).forEach( + (title: HTMLCalciteTabTitleElement) => { + title.position = position; + title.scale = scale; + } + ); }; //-------------------------------------------------------------------------- From e115f45211544f9f2f1dd83c6a9ed87ccf39912e Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 12 Oct 2023 20:30:45 -0700 Subject: [PATCH 14/42] cleanup tabs --- .../src/components/tabs/tabs.e2e.ts | 8 ++++++-- .../src/components/tabs/tabs.tsx | 18 ++++++++++-------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index a7027a54893..9bf44774aa8 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -4,7 +4,7 @@ import { accessible, defaults, hidden, reflects, renders } from "../../tests/com import { GlobalTestProps } from "../../tests/utils"; describe("calcite-tabs", () => { - const tabsContent = ` + const tabsContent = html` Tab 1 Title Tab 2 Title @@ -361,9 +361,13 @@ describe("calcite-tabs", () => { it("inheritable props `position` and `scale` get passed to `tab-nav` and `tab-titles`", async () => { const page = await newE2EPage(); - await page.setContent(html` `); + await page.setContent(html`${tabsContent}`); + const tabNav = await page.find("calcite-tab-nav"); const tabTitles = await page.findAll("calcite-tab-titles"); + expect(await tabNav.getProperty("position")).toBe("bottom"); + expect(await tabNav.getProperty("scale")).toBe("l"); + tabTitles.forEach(async (item) => { expect(await item.getProperty("position")).toBe("bottom"); expect(await item.getProperty("scale")).toBe("l"); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 176b1cef4d7..3b2b6d0f280 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -1,7 +1,7 @@ import { Component, Element, Fragment, h, Listen, Prop, State, VNode, Watch } from "@stencil/core"; import { Scale } from "../interfaces"; import { TabLayout, TabPosition } from "./interfaces"; -import { SLOTS, CSS } from "./resources"; +import { SLOTS } from "./resources"; import { createObserver } from "../../utils/observers"; /** @@ -31,7 +31,7 @@ export class Tabs { @Prop({ reflect: true }) position: TabPosition = "top"; /** - * Specifies the size of the component, defaults to `scale`. + * Specifies the size of the component, defaults to `m`. */ @Prop({ reflect: true }) scale: Scale = "m"; @@ -158,16 +158,18 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - Array.from(this.el.querySelectorAll(CSS.tabNav)).forEach((nav: HTMLCalciteTabNavElement) => { - nav.position = position; - nav.scale = scale; - }); + Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( + (nav: HTMLCalciteTabNavElement) => { + nav.position = position; + nav.scale = scale; + } + ); - Array.from(this.el.querySelectorAll(CSS.tab)).forEach((tab: HTMLCalciteTabElement) => { + Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; }); - Array.from(this.el.querySelectorAll(CSS.tabTitle)).forEach( + Array.from(this.el.querySelectorAll("calcite-tab-title")).forEach( (title: HTMLCalciteTabTitleElement) => { title.position = position; title.scale = scale; From cf561c7d287c9397d5f6b9455abf8c58e870185b Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 12 Oct 2023 20:55:29 -0700 Subject: [PATCH 15/42] cleanup --- .../src/components/tab-nav/usage/Basic.md | 6 +++--- packages/calcite-components/src/components/tabs/tabs.tsx | 9 +++------ 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/usage/Basic.md b/packages/calcite-components/src/components/tab-nav/usage/Basic.md index 646898c381d..6a5874bfe9f 100644 --- a/packages/calcite-components/src/components/tab-nav/usage/Basic.md +++ b/packages/calcite-components/src/components/tab-nav/usage/Basic.md @@ -1,8 +1,8 @@ -Tab-nav tab-title inherit their `scale` and `position` from tabs parent. +Tab-nav and tab-title inherit their `scale` and `position` from tabs parent. ```html - - + + Layers Maps Data diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 3b2b6d0f280..d81fed165b1 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -158,12 +158,9 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( - (nav: HTMLCalciteTabNavElement) => { - nav.position = position; - nav.scale = scale; - } - ); + const nav: HTMLCalciteTabNavElement = this.el.querySelector("calcite-tab-nav"); + nav.position = position; + nav.scale = scale; Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; From 336ea704dcc90d853fac2503fac0c48552e57be9 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 13 Oct 2023 08:47:56 -0700 Subject: [PATCH 16/42] use a css selector instead of an attribute selector in the tabs for position and other cleanup --- .../src/components/tab-nav/tab-nav.scss | 12 +++++------ .../src/components/tab-nav/tab-nav.tsx | 6 +++++- .../src/components/tabs/tabs.e2e.ts | 20 ++++++++++++++++--- .../src/components/tabs/tabs.tsx | 9 ++++++--- 4 files changed, 34 insertions(+), 13 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index ea8bad56078..07ff543f45a 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -2,15 +2,15 @@ @apply relative flex; } -:host .scale--s { +:host .scale-s { min-block-size: theme("spacing.6"); } -:host .scale--m { +:host .scale-m { min-block-size: theme("spacing.8"); } -:host .scale--l { +:host .scale-l { min-block-size: theme("spacing.11"); } @@ -45,12 +45,12 @@ @apply justify-evenly; } -:host([position="bottom"]) .tab-nav-active-indicator { +:host .position-bottom .tab-nav-active-indicator { inset-block-end: unset; @apply top-0; } -:host([position="bottom"]) .tab-nav-active-indicator-container { +:host .position-bottom .tab-nav-active-indicator-container { inset-block-end: unset; @apply top-0; } @@ -59,7 +59,7 @@ inset-block-end: unset; // display active blue line above instead of below } -:host([bordered][position="bottom"]) .tab-nav-active-indicator-container { +:host([bordered]) .position-bottom .tab-nav-active-indicator-container { inset-block-end: 0; // display active blue line below instead of above inset-block-start: unset; } diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 63d84698ac4..5a8d4713c4b 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -172,7 +172,11 @@ export class TabNav { return (
(this.tabNavEl = el)} diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 9bf44774aa8..b5f3ed37cf7 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -16,7 +16,7 @@ describe("calcite-tabs", () => { Tab 3 Content Tab 4 Content `; - const tabsSnippet = `${tabsContent}`; + const tabsSnippet = html`${tabsContent}`; describe("renders", () => { renders(tabsSnippet, { display: "flex" }); @@ -270,11 +270,25 @@ describe("calcite-tabs", () => { document.body.innerHTML = `<${wrapperName}>`; const wrapper = document.querySelector(wrapperName); + + async function waitForAnimationFrames(count) { + async function frame() { + if (count > 0) { + await new Promise((resolve) => requestAnimationFrame(resolve)); + count--; + await frame(); + } + } + + await frame(); + } + wrapper.shadowRoot.querySelector("#title-2").click(); - await new Promise((resolve) => requestAnimationFrame(() => resolve())); - await new Promise((resolve) => requestAnimationFrame(() => resolve())); + await waitForAnimationFrames(4); const tabTitle = wrapper.shadowRoot.querySelector("calcite-tab-title[selected]").id; + await waitForAnimationFrames(2); + const tab = wrapper.shadowRoot.querySelector("calcite-tab[selected]").id; return { tabTitle, tab }; }, diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index d81fed165b1..3b2b6d0f280 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -158,9 +158,12 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - const nav: HTMLCalciteTabNavElement = this.el.querySelector("calcite-tab-nav"); - nav.position = position; - nav.scale = scale; + Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( + (nav: HTMLCalciteTabNavElement) => { + nav.position = position; + nav.scale = scale; + } + ); Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; From 342851ebb46efb0dd2c92785ca263a4853e66cc9 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 13 Oct 2023 13:42:17 -0700 Subject: [PATCH 17/42] cleanup old test setup --- .../src/components/tab-nav/tab-nav.e2e.ts | 3 +- .../src/components/tab-title/tab-title.e2e.ts | 202 ++++++++---------- .../src/components/tab/tab.e2e.ts | 19 +- .../src/components/tab/tab.scss | 6 +- .../src/components/tab/tab.tsx | 2 +- 5 files changed, 104 insertions(+), 128 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index 7f8e7443906..2818550d50d 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -1,7 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { CSS } from "../tabs/resources"; describe("calcite-tab-nav", () => { const tabNavHtml = ""; @@ -96,7 +95,7 @@ describe("calcite-tab-nav", () => { const page = await newE2EPage(); await page.setContent(html`${tabNavHtml}`); - const element = await page.find(CSS.tabNav); + const element = await page.find("calcite-tab-nav"); expect((await element.getComputedStyle())["height"]).toEqual(value); expect(await element.getProperty("scale")).toBe(`${key}`); }); diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index e2d9bcdbc96..91d82eb6c38 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -1,11 +1,12 @@ import { newE2EPage, E2EPage, E2EElement } from "@stencil/core/testing"; import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { CSS } from "./resources"; +import { CSS } from "../tabs/resources"; describe("calcite-tab-title", () => { const tabTitleHtml = ""; const tabTitleClosableHtml = ""; + const multiTabTitleClosableMarkup = ` @@ -108,10 +109,18 @@ describe("calcite-tab-title", () => { page = await newE2EPage(); await page.setContent( html` - + + + Tab 1 Title + Tab 2 Title + Tab 3 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content Text Text - + ` ); @@ -338,104 +347,66 @@ describe("calcite-tab-title", () => { expect(activeEventSpy).toHaveReceivedEventTimes(2); }); - describe("when parent element is tab-nav", () => { - describe("when position is top, default", () => { - it("should render with bottom border on hover", async () => { - const page = await newE2EPage({ - html: ` - - Tab 1 title - - `, - }); - const element = await page.find("#for-hover"); - await element.hover(); + describe("scale property", () => { + const tabTitleSetHtml = html` + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + `; - const container = await page.find("#for-hover >>> .container"); - const containerStyles = await container.getComputedStyle(); - expect(containerStyles["border-top-width"]).toEqual("0px"); - expect(containerStyles["border-bottom-width"]).not.toEqual("0px"); - }); - }); + const navWithTabTitleSetHtml = html` ${tabTitleSetHtml} `; - describe("when position is bottom", () => { - it("should render with top border on hover", async () => { - const page = await newE2EPage({ - html: ` - - Tab 1 Title - Tab 2 Title - - `, - }); - const element = await page.find("#for-hover"); - await element.hover(); + const scaleStyles = [ + { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default + { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, // n2h: ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem) + { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, // n1h: ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem) + { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, // "0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem) + ]; - const container = await page.find("#for-hover >>> .container"); - const containerStyles = await container.getComputedStyle(); - expect(containerStyles["border-top-width"]).not.toEqual("0px"); - expect(containerStyles["border-bottom-width"]).toEqual("0px"); - }); - }); + for (const testCase of scaleStyles) { + describe("when immediate parent element is `tabs`", () => { + it(`should inherit ${testCase.scale || "default medium"} scale from parent`, async () => { + const page = await newE2EPage(); + await page.setContent(html`${tabTitleSetHtml}`); - describe("scale property", () => { - const tabTitleSetHtml = html` - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - `; + page.waitForChanges(); - const navWithTabTitleSetHtml = html` ${tabTitleSetHtml} `; + const tabTitleEl = await page.find("calcite-tab-title"); + const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - const scaleStyles = [ - { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default - { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, // n2h: ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem) - { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, // n1h: ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem) - { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, // "0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem) - ]; + const contentStyles = await content.getComputedStyle(); + expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale); - for (const testCase of scaleStyles) { - describe("when immediate parent element is `tabs`", () => { - it(`should inherit ${testCase.scale || "default medium"} scale from parent`, async () => { - const page = await newE2EPage({ - html: html`${tabTitleSetHtml}`, - }); - - const tabTitleEl = await page.find("calcite-tab-title"); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - - const contentStyles = await content.getComputedStyle(); - - expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale ? `${testCase.scale}` : ""); - - expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "14px"); - expect(contentStyles.lineHeight).toEqual(testCase.scale ? testCase.styles.lineHeight : "16px"); - }); + expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); + expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); }); + }); + + describe("when immediate parent element is `tab-nav`", () => { + it(`should inherit ${testCase.scale || "default medium"} scale down from 'tabs' parent`, async () => { + const page = await newE2EPage(); + await page.setContent(`${navWithTabTitleSetHtml}`); - describe("when immediate parent element is `tab-nav`", () => { - it(`should inherit ${testCase.scale || "default medium"} scale down from 'tabs' parent`, async () => { - const page = await newE2EPage(); - await page.setContent(`${navWithTabTitleSetHtml}`); + page.waitForChanges(); - const tabTitleEl = await page.find(`calcite-tab-title`); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); + const tabTitleEl = await page.find(`calcite-tab-title`); + const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - const contentStyles = await content.getComputedStyle(); + const contentStyles = await content.getComputedStyle(); - expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale ? `${testCase.scale}` : ""); + expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale); - expect(contentStyles.fontSize).toEqual(testCase.scale ? testCase.styles.fontSize : "14px"); - expect(contentStyles.lineHeight).toEqual(testCase.scale ? testCase.styles.lineHeight : "16px"); - }); + expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); + expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); }); - } + }); + } - describe("when the active tab-title changes", () => { - it("should move the active tab nav indicator", async () => { - const page = await newE2EPage({ - html: ` + describe("when the active tab-title changes", () => { + it("should move the active tab nav indicator", async () => { + const page = await newE2EPage({ + html: ` Tab 1 Title @@ -449,37 +420,36 @@ describe("calcite-tab-title", () => { Tab 4 Content `, - }); - const tabTitle1 = await page.find(".title-1"); - const tabTitle2 = await page.find(".title-2"); - - expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title"); - expect( - await page.evaluate(() => { - return ( - document - .querySelector("calcite-tab-nav") - .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement - ).style.left; - }) - ).not.toEqual("0px"); - - // toggle new selected tab-title - await tabTitle2.removeAttribute("selected"); - await tabTitle1.setAttribute("selected", true); - await page.waitForChanges(); - - expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title"); - expect( - await page.evaluate(() => { - return ( - document - .querySelector("calcite-tab-nav") - .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement - ).style.left; - }) - ).toEqual("0px"); }); + const tabTitle1 = await page.find(".title-1"); + const tabTitle2 = await page.find(".title-2"); + + expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title"); + expect( + await page.evaluate(() => { + return ( + document + .querySelector("calcite-tab-nav") + .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement + ).style.left; + }) + ).not.toEqual("0px"); + + // toggle new selected tab-title + await tabTitle2.removeAttribute("selected"); + await tabTitle1.setAttribute("selected", true); + await page.waitForChanges(); + + expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title"); + expect( + await page.evaluate(() => { + return ( + document + .querySelector("calcite-tab-nav") + .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement + ).style.left; + }) + ).toEqual("0px"); }); }); }); diff --git a/packages/calcite-components/src/components/tab/tab.e2e.ts b/packages/calcite-components/src/components/tab/tab.e2e.ts index 7615bb5cbea..f590e5cbe73 100644 --- a/packages/calcite-components/src/components/tab/tab.e2e.ts +++ b/packages/calcite-components/src/components/tab/tab.e2e.ts @@ -29,8 +29,11 @@ describe("calcite-tab", () => { }); const element = await page.find("calcite-tab"); expect(await element.getProperty("scale")).toBe("m"); - expect(await (await element.getComputedStyle())["font-size"]).toEqual("14px"); - expect(await (await element.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem + + const section = await page.find(`calcite-tab >>> section`); + + expect(await (await section.getComputedStyle())["font-size"]).toEqual("14px"); + expect(await (await section.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem }); describe("when tabs scale is small", () => { @@ -40,8 +43,10 @@ describe("calcite-tab", () => { }); const element = await page.find("calcite-tab"); expect(await element.getProperty("scale")).toBe("s"); - expect(await (await element.getComputedStyle())["font-size"]).toEqual("12px"); - expect(await (await element.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem + + const section = await page.find(`calcite-tab >>> section`); + expect(await (await section.getComputedStyle())["font-size"]).toEqual("12px"); + expect(await (await section.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem }); }); @@ -52,8 +57,10 @@ describe("calcite-tab", () => { }); const element = await page.find("calcite-tab"); expect(await element.getProperty("scale")).toBe("l"); - expect(await (await element.getComputedStyle())["font-size"]).toEqual("16px"); - expect(await (await element.getComputedStyle())["line-height"]).toEqual("20px"); // 1.25rem + + const section = await page.find(`calcite-tab >>> section`); + expect(await (await section.getComputedStyle())["font-size"]).toEqual("16px"); + expect(await (await section.getComputedStyle())["line-height"]).toEqual("20px"); // 1.25rem }); }); }); diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss index 07537ebbdc1..7b915f6fbda 100644 --- a/packages/calcite-components/src/components/tab/tab.scss +++ b/packages/calcite-components/src/components/tab/tab.scss @@ -18,15 +18,15 @@ section, @apply hidden h-full w-full; } -:host .scale--s { +:host .scale-s section { @apply text-n2h py-1; } -:host .scale--m { +:host .scale-m section { @apply text-n1h py-2; } -:host .scale--l { +:host .scale-l section { @apply text-0h; padding-block: 13px; } diff --git a/packages/calcite-components/src/components/tab/tab.tsx b/packages/calcite-components/src/components/tab/tab.tsx index b5a808165f1..78012320882 100644 --- a/packages/calcite-components/src/components/tab/tab.tsx +++ b/packages/calcite-components/src/components/tab/tab.tsx @@ -64,7 +64,7 @@ export class Tab { return (
From c86e4829934d4d579d01c3a701bfb4e20f436090 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 13 Oct 2023 14:19:57 -0700 Subject: [PATCH 18/42] cleanup --- .../src/components/tab-title/tab-title.e2e.ts | 2 +- .../src/components/tab-title/tab-title.scss | 24 +++++++++---------- .../src/components/tab-title/tab-title.tsx | 2 +- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index 91d82eb6c38..f28094c7975 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -355,7 +355,7 @@ describe("calcite-tab-title", () => { Tab 4 Title `; - const navWithTabTitleSetHtml = html` ${tabTitleSetHtml} `; + const navWithTabTitleSetHtml = html`${tabTitleSetHtml}`; const scaleStyles = [ { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 197e49a24f6..1f206ed6a36 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -4,9 +4,9 @@ margin-inline-end: theme("margin.5"); } -:host([layout="center"]) .scale--s, -:host([layout="center"]) .scale--m, -:host([layout="center"]) .scale--l { +:host([layout="center"]) .scale-s, +:host([layout="center"]) .scale-m, +:host([layout="center"]) .scale-l { @apply my-0 text-center; margin-inline-end: theme("margin.0"); flex-basis: theme("spacing.48"); @@ -22,25 +22,25 @@ } } -:host([layout="center"][bordered][closable]) .scale--s { +:host([layout="center"][bordered][closable]) .scale-s { .content { padding-inline-start: 36px; //28px button width + 0.5rem padding } } -:host([layout="center"][bordered][closable]) .scale--m { +:host([layout="center"][bordered][closable]) .scale-m { .content { padding-inline-start: 40px; //28px button width + 0.75rem padding } } -:host([layout="center"][closable]) .scale--l { +:host([layout="center"][closable]) .scale-l { .content { padding-inline-start: 40px; //36px button width + .25 padding } } -:host([layout="center"][closable][bordered]) .scale--s { +:host([layout="center"][closable][bordered]) .scale-s { .content { padding-inline-start: 52px; //36px button width + 1rem padding } @@ -87,20 +87,20 @@ } } -:host .scale--s { +:host .scale-s { margin-inline-end: 1rem; .content { @apply text-n2h py-1; } } -:host .scale--m { +:host .scale-m { .content { @apply text-n1h py-2; } } -:host .scale--l { +:host .scale-l { margin-inline-end: 1.5rem; .content { @apply text-0h py-2.5; @@ -255,13 +255,13 @@ } } -:host([bordered]) .scale--s { +:host([bordered]) .scale-s { .content { @apply px-2; } } -:host([bordered]) .scale--l { +:host([bordered]) .scale-l { .content { @apply px-4; } diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 34f5f064b45..23c3afb474a 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -219,7 +219,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo class={{ container: true, [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd, - [`scale--${this.scale}`]: true, + [`scale-${this.scale}`]: true, }} hidden={closed} // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) From eac7b60c9d44c31b21307d90f436c2fee7ac381b Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 13 Oct 2023 14:38:24 -0700 Subject: [PATCH 19/42] combine and simplify to make tests DRY --- .../src/components/tab/tab.e2e.ts | 45 ++++----------- .../src/components/tabs/tabs.e2e.ts | 56 +++++-------------- .../src/components/tabs/tabs.tsx | 29 +++++----- 3 files changed, 41 insertions(+), 89 deletions(-) diff --git a/packages/calcite-components/src/components/tab/tab.e2e.ts b/packages/calcite-components/src/components/tab/tab.e2e.ts index f590e5cbe73..e7e204cb2de 100644 --- a/packages/calcite-components/src/components/tab/tab.e2e.ts +++ b/packages/calcite-components/src/components/tab/tab.e2e.ts @@ -23,44 +23,23 @@ describe("calcite-tab", () => { }); describe("when nested within calcite-tabs component", () => { - it("should render with medium scale", async () => { - const page = await newE2EPage({ - html: `${tabHtml}`, - }); - const element = await page.find("calcite-tab"); - expect(await element.getProperty("scale")).toBe("m"); - - const section = await page.find(`calcite-tab >>> section`); - - expect(await (await section.getComputedStyle())["font-size"]).toEqual("14px"); - expect(await (await section.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem - }); - - describe("when tabs scale is small", () => { - it("should render with small scale", async () => { - const page = await newE2EPage({ - html: `${tabHtml}`, - }); - const element = await page.find("calcite-tab"); - expect(await element.getProperty("scale")).toBe("s"); - - const section = await page.find(`calcite-tab >>> section`); - expect(await (await section.getComputedStyle())["font-size"]).toEqual("12px"); - expect(await (await section.getComputedStyle())["line-height"]).toEqual("16px"); // 1rem - }); - }); - - describe("when tabs scale is large", () => { - it("should render with large scale", async () => { + const scales = [ + { name: "medium", scale: "m", fontSize: "14px", lineHeight: "16px" }, + { name: "small", scale: "s", fontSize: "12px", lineHeight: "16px" }, + { name: "large", scale: "l", fontSize: "16px", lineHeight: "20px" }, + ]; + + scales.forEach(({ name, scale, fontSize, lineHeight }) => { + it(`should render with ${name} scale`, async () => { const page = await newE2EPage({ - html: `${tabHtml}`, + html: `${tabHtml}`, }); const element = await page.find("calcite-tab"); - expect(await element.getProperty("scale")).toBe("l"); + expect(await element.getProperty("scale")).toBe(scale); const section = await page.find(`calcite-tab >>> section`); - expect(await (await section.getComputedStyle())["font-size"]).toEqual("16px"); - expect(await (await section.getComputedStyle())["line-height"]).toEqual("20px"); // 1.25rem + expect(await (await section.getComputedStyle())["font-size"]).toEqual(fontSize); + expect(await (await section.getComputedStyle())["line-height"]).toEqual(lineHeight); }); }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index b5f3ed37cf7..f80603e2f76 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -124,52 +124,22 @@ describe("calcite-tabs", () => { expect(tab).toEqualAttribute("aria-labelledby", title.id); } }); + describe("calcite-tabs", () => { + const scales = ["s", "m", "l"]; - describe("when no scale is provided", () => { - it("should render itself and child tab elements with default medium scale", async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabsSnippet}`); - await page.waitForChanges(); + scales.forEach((scale) => { + const scaleName = scale === "m" ? "default medium" : scale; - expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); - expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); - expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); - expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("m"); - }); - }); - - describe("when scale is provided", () => { - it("should render itself and child tab elements with corresponding scale (small)", async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabsContent}`); - await page.waitForChanges(); - - expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "s"); - expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("s"); - expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("s"); - expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("s"); - }); + it(`should render itself and child tab elements with corresponding scale (${scaleName})`, async () => { + const page = await newE2EPage(); + await page.setContent(html`${tabsContent}`); + await page.waitForChanges(); - it("should render itself and child tab elements with corresponding scale (medium)", async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabsContent}`); - await page.waitForChanges(); - - expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "m"); - expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("m"); - expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("m"); - expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("m"); - }); - - it("should render itself and child tab elements with corresponding scale (large)", async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabsContent}`); - await page.waitForChanges(); - - expect(await page.find("calcite-tabs")).toEqualAttribute("scale", "l"); - expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe("l"); - expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe("l"); - expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe("l"); + expect(await page.find("calcite-tabs")).toEqualAttribute("scale", scale); + expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe(scale); + expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe(scale); + expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe(scale); + }); }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 3b2b6d0f280..92b7ef60b7f 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -155,26 +155,29 @@ export class Tabs { mutationObserver = createObserver("mutation", () => this.updateItems()); + private updateElements = ( + selector: string, + updater: (el: T) => void + ): void => { + Array.from(this.el.querySelectorAll(selector)).forEach(updater); + }; + private updateItems = (): void => { const { position, scale } = this; - Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( - (nav: HTMLCalciteTabNavElement) => { - nav.position = position; - nav.scale = scale; - } - ); + this.updateElements.call(this, "calcite-tab-nav", (nav: HTMLCalciteTabNavElement) => { + nav.position = position; + nav.scale = scale; + }); - Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { + this.updateElements.call(this, "calcite-tab", (tab: HTMLCalciteTabElement) => { tab.scale = scale; }); - Array.from(this.el.querySelectorAll("calcite-tab-title")).forEach( - (title: HTMLCalciteTabTitleElement) => { - title.position = position; - title.scale = scale; - } - ); + this.updateElements.call(this, "calcite-tab-title", (title: HTMLCalciteTabTitleElement) => { + title.position = position; + title.scale = scale; + }); }; //-------------------------------------------------------------------------- From 9bef438e02f36b1b10dd0e0aabb66d27bcce0e72 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 13 Oct 2023 15:03:06 -0700 Subject: [PATCH 20/42] simplify tab-title tests --- .../src/components/tab-title/tab-title.e2e.ts | 121 +++++++++--------- 1 file changed, 58 insertions(+), 63 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index f28094c7975..ded255fca17 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -347,6 +347,20 @@ describe("calcite-tab-title", () => { expect(activeEventSpy).toHaveReceivedEventTimes(2); }); + async function testTabTitleStyles(page: E2EPage, testCase: any) { + page.waitForChanges(); + + const tabTitleEl = await page.find(`calcite-tab-title`); + const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); + + const contentStyles = await content.getComputedStyle(); + + expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale); + + expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); + expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + } + describe("scale property", () => { const tabTitleSetHtml = html` Tab 1 Title @@ -359,54 +373,36 @@ describe("calcite-tab-title", () => { const scaleStyles = [ { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default - { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, // n2h: ["var(--calcite-font-size--2)", { lineHeight: "1rem" }], // 12px (0.75rem) - { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, // n1h: ["var(--calcite-font-size--1)", { lineHeight: "1rem" }], // 14px (0.875rem) - { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, // "0h": ["var(--calcite-font-size-0)", { lineHeight: "1.25rem" }], // 16px (1rem) + { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, + { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, + { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, ]; - for (const testCase of scaleStyles) { + for (const { scale, styles } of scaleStyles) { describe("when immediate parent element is `tabs`", () => { - it(`should inherit ${testCase.scale || "default medium"} scale from parent`, async () => { + it(`should inherit ${scale || "default medium"} scale from parent`, async () => { const page = await newE2EPage(); - await page.setContent(html`${tabTitleSetHtml}`); + await page.setContent(html`${tabTitleSetHtml}`); - page.waitForChanges(); - - const tabTitleEl = await page.find("calcite-tab-title"); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - - const contentStyles = await content.getComputedStyle(); - expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale); - - expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); - expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + await testTabTitleStyles(page, { scale, styles }); }); }); describe("when immediate parent element is `tab-nav`", () => { - it(`should inherit ${testCase.scale || "default medium"} scale down from 'tabs' parent`, async () => { + it(`should inherit ${scale || "default medium"} scale down from 'tabs' parent`, async () => { const page = await newE2EPage(); - await page.setContent(`${navWithTabTitleSetHtml}`); - - page.waitForChanges(); + await page.setContent(`${navWithTabTitleSetHtml}`); - const tabTitleEl = await page.find(`calcite-tab-title`); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - - const contentStyles = await content.getComputedStyle(); - - expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale); - - expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); - expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); + await testTabTitleStyles(page, { scale, styles }); }); }); } + }); - describe("when the active tab-title changes", () => { - it("should move the active tab nav indicator", async () => { - const page = await newE2EPage({ - html: ` + describe("when the active tab-title changes", () => { + it("should move the active tab nav indicator", async () => { + const page = await newE2EPage({ + html: ` Tab 1 Title @@ -420,37 +416,36 @@ describe("calcite-tab-title", () => { Tab 4 Content `, - }); - const tabTitle1 = await page.find(".title-1"); - const tabTitle2 = await page.find(".title-2"); - - expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title"); - expect( - await page.evaluate(() => { - return ( - document - .querySelector("calcite-tab-nav") - .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement - ).style.left; - }) - ).not.toEqual("0px"); - - // toggle new selected tab-title - await tabTitle2.removeAttribute("selected"); - await tabTitle1.setAttribute("selected", true); - await page.waitForChanges(); - - expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title"); - expect( - await page.evaluate(() => { - return ( - document - .querySelector("calcite-tab-nav") - .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement - ).style.left; - }) - ).toEqual("0px"); }); + const tabTitle1 = await page.find(".title-1"); + const tabTitle2 = await page.find(".title-2"); + + expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title"); + expect( + await page.evaluate(() => { + return ( + document + .querySelector("calcite-tab-nav") + .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement + ).style.left; + }) + ).not.toEqual("0px"); + + // toggle new selected tab-title + await tabTitle2.removeAttribute("selected"); + await tabTitle1.setAttribute("selected", true); + await page.waitForChanges(); + + expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title"); + expect( + await page.evaluate(() => { + return ( + document + .querySelector("calcite-tab-nav") + .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement + ).style.left; + }) + ).toEqual("0px"); }); }); }); From edebe99c0d10f853cd7b8efbc22eb8e3e6b3014b Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 13 Oct 2023 18:15:12 -0700 Subject: [PATCH 21/42] revert some refactors --- .../src/components/tab-nav/tab-nav.scss | 6 ++-- .../src/components/tab-nav/tab-nav.tsx | 2 +- .../src/components/tab-title/tab-title.scss | 6 ++-- .../src/components/tab/tab.scss | 6 ++-- .../src/components/tabs/tabs.tsx | 29 +++++++++---------- 5 files changed, 23 insertions(+), 26 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index 07ff543f45a..51fb41201e6 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -2,15 +2,15 @@ @apply relative flex; } -:host .scale-s { +.scale-s { min-block-size: theme("spacing.6"); } -:host .scale-m { +.scale-m { min-block-size: theme("spacing.8"); } -:host .scale-l { +.scale-l { min-block-size: theme("spacing.11"); } diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index 5a8d4713c4b..b7482439be4 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -72,7 +72,7 @@ export class TabNav { * * @internal */ - @Prop() position: TabPosition = "top"; + @Prop() position: TabPosition = "bottom"; /** * @internal diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 1f206ed6a36..aad12e0692e 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -87,20 +87,20 @@ } } -:host .scale-s { +.scale-s { margin-inline-end: 1rem; .content { @apply text-n2h py-1; } } -:host .scale-m { +.scale-m { .content { @apply text-n1h py-2; } } -:host .scale-l { +.scale-l { margin-inline-end: 1.5rem; .content { @apply text-0h py-2.5; diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss index 7b915f6fbda..6ef7b8892c5 100644 --- a/packages/calcite-components/src/components/tab/tab.scss +++ b/packages/calcite-components/src/components/tab/tab.scss @@ -18,15 +18,15 @@ section, @apply hidden h-full w-full; } -:host .scale-s section { +.scale-s section { @apply text-n2h py-1; } -:host .scale-m section { +.scale-m section { @apply text-n1h py-2; } -:host .scale-l section { +.scale-l section { @apply text-0h; padding-block: 13px; } diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 92b7ef60b7f..3b2b6d0f280 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -155,29 +155,26 @@ export class Tabs { mutationObserver = createObserver("mutation", () => this.updateItems()); - private updateElements = ( - selector: string, - updater: (el: T) => void - ): void => { - Array.from(this.el.querySelectorAll(selector)).forEach(updater); - }; - private updateItems = (): void => { const { position, scale } = this; - this.updateElements.call(this, "calcite-tab-nav", (nav: HTMLCalciteTabNavElement) => { - nav.position = position; - nav.scale = scale; - }); + Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( + (nav: HTMLCalciteTabNavElement) => { + nav.position = position; + nav.scale = scale; + } + ); - this.updateElements.call(this, "calcite-tab", (tab: HTMLCalciteTabElement) => { + Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; }); - this.updateElements.call(this, "calcite-tab-title", (title: HTMLCalciteTabTitleElement) => { - title.position = position; - title.scale = scale; - }); + Array.from(this.el.querySelectorAll("calcite-tab-title")).forEach( + (title: HTMLCalciteTabTitleElement) => { + title.position = position; + title.scale = scale; + } + ); }; //-------------------------------------------------------------------------- From 2a1c695aa8135cc0b8fa5751ae634b4b9b68e3b0 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 23 Oct 2023 16:05:15 -0700 Subject: [PATCH 22/42] refactor invalid test and cleanup docs --- .../src/components/tab-nav/tab-nav.e2e.ts | 24 ++----------------- .../src/tests/commonTests.ts | 11 ++++----- 2 files changed, 7 insertions(+), 28 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index 2818550d50d..60df48dcfd8 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -5,9 +5,8 @@ import { html } from "../../../support/formatting"; describe("calcite-tab-nav", () => { const tabNavHtml = ""; - describe("defaults (immediate parent tabs or tab-nav)", () => { - defaults("calcite-tabs", [{ propertyName: "scale", defaultValue: "m" }]); - defaults(`${tabNavHtml}`, [{ propertyName: "scale", defaultValue: "m" }]); + describe("defaults", () => { + defaults(tabNavHtml, [{ propertyName: "scale", defaultValue: "m" }]); }); describe("renders", () => { @@ -83,25 +82,6 @@ describe("calcite-tab-nav", () => { }); }); - describe("scales", () => { - const scaleMinHeightPairs = { - s: "24px", - m: "32px", - l: "44px", - }; - - for (const [key, value] of Object.entries(scaleMinHeightPairs)) { - it(`${key} scale`, async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabNavHtml}`); - - const element = await page.find("calcite-tab-nav"); - expect((await element.getComputedStyle())["height"]).toEqual(value); - expect(await element.getProperty("scale")).toBe(`${key}`); - }); - } - }); - it("focuses on keyboard interaction", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index 9e6f2b19781..a21c2dc705f 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -194,7 +194,7 @@ function propToAttr(name: string): string { } /** - * Helper for asserting that a property's value is its default + * Helper for asserting that a property's value is its default. * * Note that this helper should be used within a describe block. * @@ -212,11 +212,10 @@ function propToAttr(name: string): string { * ]) * }) * - * @param {string} componentTagOrHTML - the component tag or HTML markup to test against - * @param componentTestSetup - * @param {object[]} propsToTest - the properties to test - * @param {string} propsToTest.propertyName - the property name - * @param {any} propsToTest.value - the property value + * @param {ComponentTestSetup} componentTestSetup - A component tag, html, or the tag and e2e page for setting up a test. + * @param {object[]} propsToTest - An array of objects to test. + * @param {string} propsToTest.propertyName - The property name. + * @param {any} propsToTest.value - The property value. */ export function defaults( componentTestSetup: ComponentTestSetup, From b4bfbdfe90ebb9249633514d7f4f4b52326f3b24 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 23 Oct 2023 17:26:22 -0700 Subject: [PATCH 23/42] cleanup --- .../src/components/tab-title/tab-title.e2e.ts | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index ded255fca17..f34c90a9658 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -379,22 +379,10 @@ describe("calcite-tab-title", () => { ]; for (const { scale, styles } of scaleStyles) { - describe("when immediate parent element is `tabs`", () => { - it(`should inherit ${scale || "default medium"} scale from parent`, async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabTitleSetHtml}`); - - await testTabTitleStyles(page, { scale, styles }); - }); - }); - - describe("when immediate parent element is `tab-nav`", () => { - it(`should inherit ${scale || "default medium"} scale down from 'tabs' parent`, async () => { - const page = await newE2EPage(); - await page.setContent(`${navWithTabTitleSetHtml}`); - - await testTabTitleStyles(page, { scale, styles }); - }); + it(`should inherit ${scale || "default medium"} scale down from 'tabs' parent`, async () => { + const page = await newE2EPage(); + await page.setContent(`${navWithTabTitleSetHtml}`); + await testTabTitleStyles(page, { scale, styles }); }); } }); From 9a96bcddf1e6364097739086df02a367a17c1315 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Oct 2023 10:22:38 -0700 Subject: [PATCH 24/42] allocate resources per component --- .../src/components/tab-nav/resources.ts | 3 +++ .../src/components/tab-nav/tab-nav.tsx | 2 +- .../src/components/tab-title/resources.ts | 15 +++++++++++++++ .../src/components/tab-title/tab-title.e2e.ts | 6 +++--- .../src/components/tab-title/tab-title.tsx | 2 +- .../src/components/tab/resources.ts | 3 +++ .../src/components/tab/tab.tsx | 3 ++- .../src/components/tabs/resources.ts | 18 ------------------ 8 files changed, 28 insertions(+), 24 deletions(-) create mode 100644 packages/calcite-components/src/components/tab-nav/resources.ts create mode 100644 packages/calcite-components/src/components/tab-title/resources.ts create mode 100644 packages/calcite-components/src/components/tab/resources.ts diff --git a/packages/calcite-components/src/components/tab-nav/resources.ts b/packages/calcite-components/src/components/tab-nav/resources.ts new file mode 100644 index 00000000000..08f39a8990f --- /dev/null +++ b/packages/calcite-components/src/components/tab-nav/resources.ts @@ -0,0 +1,3 @@ +export const CSS = { + tabNav: "tab-nav", +}; diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index b7482439be4..fd2027b8580 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -21,7 +21,7 @@ import { createObserver } from "../../utils/observers"; import { Scale } from "../interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces"; import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; -import { CSS } from "../tabs/resources"; +import { CSS } from "./resources"; /** * @slot - A slot for adding `calcite-tab-title`s. diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts new file mode 100644 index 00000000000..640874053e4 --- /dev/null +++ b/packages/calcite-components/src/components/tab-title/resources.ts @@ -0,0 +1,15 @@ +export const CSS = { + closeButton: "close-button", + container: "container", + content: "content", + contentHasText: "content--has-text", + iconEnd: "icon-end", + iconPresent: "icon-present", + iconStart: "icon-start", + tab: "tab", + titleIcon: "calcite-tab-title--icon", +}; + +export const ICONS = { + close: "x", +}; diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index f34c90a9658..ab4b56d9c86 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -1,7 +1,7 @@ import { newE2EPage, E2EPage, E2EElement } from "@stencil/core/testing"; import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { CSS } from "../tabs/resources"; +import { CSS } from "./resources"; describe("calcite-tab-title", () => { const tabTitleHtml = ""; @@ -347,7 +347,7 @@ describe("calcite-tab-title", () => { expect(activeEventSpy).toHaveReceivedEventTimes(2); }); - async function testTabTitleStyles(page: E2EPage, testCase: any) { + async function assertTabTitleStyles(page: E2EPage, testCase: any) { page.waitForChanges(); const tabTitleEl = await page.find(`calcite-tab-title`); @@ -382,7 +382,7 @@ describe("calcite-tab-title", () => { it(`should inherit ${scale || "default medium"} scale down from 'tabs' parent`, async () => { const page = await newE2EPage(); await page.setContent(`${navWithTabTitleSetHtml}`); - await testTabTitleStyles(page, { scale, styles }); + await assertTabTitleStyles(page, { scale, styles }); }); } }); diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 23c3afb474a..89ecddc91e2 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -24,7 +24,7 @@ import { import { createObserver } from "../../utils/observers"; import { FlipContext, Scale } from "../interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces"; -import { CSS, ICONS } from "../tabs/resources"; +import { CSS, ICONS } from "./resources"; import { TabID, TabLayout, TabPosition } from "../tabs/interfaces"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { diff --git a/packages/calcite-components/src/components/tab/resources.ts b/packages/calcite-components/src/components/tab/resources.ts new file mode 100644 index 00000000000..8ce4e2bdc7b --- /dev/null +++ b/packages/calcite-components/src/components/tab/resources.ts @@ -0,0 +1,3 @@ +export const CSS = { + container: "container", +}; diff --git a/packages/calcite-components/src/components/tab/tab.tsx b/packages/calcite-components/src/components/tab/tab.tsx index 78012320882..a84d0e2c9f3 100644 --- a/packages/calcite-components/src/components/tab/tab.tsx +++ b/packages/calcite-components/src/components/tab/tab.tsx @@ -11,11 +11,12 @@ import { State, VNode, } from "@stencil/core"; +import { CSS } from "./resources"; import { nodeListToArray } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { Scale } from "../interfaces"; import { TabChangeEventDetail } from "./interfaces"; -import { CSS } from "../tabs/resources"; + /** * @slot - A slot for adding custom content. */ diff --git a/packages/calcite-components/src/components/tabs/resources.ts b/packages/calcite-components/src/components/tabs/resources.ts index b56961d5ec2..325745e85ad 100644 --- a/packages/calcite-components/src/components/tabs/resources.ts +++ b/packages/calcite-components/src/components/tabs/resources.ts @@ -1,21 +1,3 @@ -export const CSS = { - closeButton: "close-button", - container: "container", - content: "content", - contentHasText: "content--has-text", - iconEnd: "icon-end", - iconStart: "icon-start", - iconPresent: "icon-present", - tab: "tab", - tabNav: "tab-nav", - tabTitle: "tab-title", - titleIcon: "calcite-tab-title--icon", -}; - -export const ICONS = { - close: "x", -}; - export const SLOTS = { titleGroup: "title-group", }; From d5af71454962983044a40e3e7db6f2edf888984f Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Oct 2023 10:34:30 -0700 Subject: [PATCH 25/42] use for...x loop since forEach is not async. --- packages/calcite-components/src/components/tabs/tabs.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index f80603e2f76..8b83b2dde2d 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -352,9 +352,9 @@ describe("calcite-tabs", () => { expect(await tabNav.getProperty("position")).toBe("bottom"); expect(await tabNav.getProperty("scale")).toBe("l"); - tabTitles.forEach(async (item) => { + for (const item of tabTitles) { expect(await item.getProperty("position")).toBe("bottom"); expect(await item.getProperty("scale")).toBe("l"); - }); + } }); }); From 55160f8494d78561a04181b7d3652f83cf2fc6f3 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Oct 2023 13:26:25 -0700 Subject: [PATCH 26/42] consolidate duplication in tests --- .../src/components/tabs/tabs.e2e.ts | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 8b83b2dde2d..670349876bb 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -2,6 +2,8 @@ import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests"; import { GlobalTestProps } from "../../tests/utils"; +import { Scale } from "../interfaces"; +import { TabPosition } from "../tabs/interfaces"; describe("calcite-tabs", () => { const tabsContent = html` @@ -124,21 +126,32 @@ describe("calcite-tabs", () => { expect(tab).toEqualAttribute("aria-labelledby", title.id); } }); - describe("calcite-tabs", () => { - const scales = ["s", "m", "l"]; - scales.forEach((scale) => { - const scaleName = scale === "m" ? "default medium" : scale; + function testCalciteTabs(scale: Scale, position: TabPosition) { + const scaleName = scale === "m" ? "default medium" : scale; + + it(`should render itself and child tab elements with corresponding scale (${scaleName}) and position (${position})`, async () => { + const page = await newE2EPage(); + await page.setContent(html`${tabsContent}`); + await page.waitForChanges(); + + expect(await page.find("calcite-tabs")).toEqualAttribute("scale", scale); + expect(await page.find("calcite-tabs")).toEqualAttribute("position", position); + expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe(scale); + expect(await (await page.find("calcite-tab-nav")).getProperty("position")).toBe(position); + expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe(scale); + expect(await (await page.find("calcite-tab-title")).getProperty("position")).toBe(position); + expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe(scale); + }); + } - it(`should render itself and child tab elements with corresponding scale (${scaleName})`, async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabsContent}`); - await page.waitForChanges(); + describe("calcite-tabs inheritable props", () => { + const scales: Scale[] = ["s", "m", "l"]; + const positions: TabPosition[] = ["top", "bottom"]; - expect(await page.find("calcite-tabs")).toEqualAttribute("scale", scale); - expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe(scale); - expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe(scale); - expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe(scale); + scales.forEach((scale) => { + positions.forEach((position) => { + testCalciteTabs(scale, position); }); }); }); @@ -342,19 +355,4 @@ describe("calcite-tabs", () => { expect(selectedTitleOnEmit).toBe("boats"); }); - - it("inheritable props `position` and `scale` get passed to `tab-nav` and `tab-titles`", async () => { - const page = await newE2EPage(); - await page.setContent(html`${tabsContent}`); - const tabNav = await page.find("calcite-tab-nav"); - const tabTitles = await page.findAll("calcite-tab-titles"); - - expect(await tabNav.getProperty("position")).toBe("bottom"); - expect(await tabNav.getProperty("scale")).toBe("l"); - - for (const item of tabTitles) { - expect(await item.getProperty("position")).toBe("bottom"); - expect(await item.getProperty("scale")).toBe("l"); - } - }); }); From 948907a84495e8ffe2f14b165763b14acc3a9165 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Oct 2023 15:59:07 -0700 Subject: [PATCH 27/42] update the mutation observer callback to bail if the mutation target is not a tab-related component --- .../src/components/tabs/tabs.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 3b2b6d0f280..2968d388375 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -53,7 +53,7 @@ export class Tabs { //-------------------------------------------------------------------------- connectedCallback(): void { - this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); + this.mutationObserver.observe(this.el, { childList: true }); this.updateItems(); } @@ -153,7 +153,19 @@ export class Tabs { */ @State() tabs: HTMLCalciteTabElement[] = []; - mutationObserver = createObserver("mutation", () => this.updateItems()); + mutationObserver = createObserver("mutation", (mutationsList: MutationRecord[]) => { + console.log("mutationsList", mutationsList); + for (const mutation of mutationsList) { + const target = mutation.target as HTMLElement; + if ( + target.nodeName === "CALCITE-TAB-NAV" || + target.nodeName === "CALCITE-TAB-TITLE" || + target.nodeName === "CALCITE-TAB" + ) { + this.updateItems(); + } + } + }); private updateItems = (): void => { const { position, scale } = this; From e29a71554e2c6f8faad02cfaa472c7d66ce96f45 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Oct 2023 16:11:32 -0700 Subject: [PATCH 28/42] query for a single tab-nav --- .../calcite-components/src/components/tabs/tabs.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 2968d388375..684b1965734 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -170,12 +170,12 @@ export class Tabs { private updateItems = (): void => { const { position, scale } = this; - Array.from(this.el.querySelectorAll("calcite-tab-nav")).forEach( - (nav: HTMLCalciteTabNavElement) => { - nav.position = position; - nav.scale = scale; - } - ); + const nav = this.el.querySelector("calcite-tab-nav"); + + if (nav) { + nav.position = position; + nav.scale = scale; + } Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; From 4084fec9dcf31e4f7a5a9c59caf794a9f4193056 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Oct 2023 16:22:17 -0700 Subject: [PATCH 29/42] update queries to ignore nested tabs --- packages/calcite-components/src/components/tabs/tabs.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 684b1965734..0daee16e67a 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -171,15 +171,16 @@ export class Tabs { const { position, scale } = this; const nav = this.el.querySelector("calcite-tab-nav"); - if (nav) { nav.position = position; nav.scale = scale; } - Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { - tab.scale = scale; - }); + Array.from(this.el.querySelectorAll("calcite-tab:not(.calcite-tab-nested)")).forEach( + (tab: HTMLCalciteTabElement) => { + tab.scale = scale; + } + ); Array.from(this.el.querySelectorAll("calcite-tab-title")).forEach( (title: HTMLCalciteTabTitleElement) => { From ba66370d0a5f2a49e7bd467feee4491d031b1cc4 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 25 Oct 2023 22:05:37 -0700 Subject: [PATCH 30/42] refactor out redundancies in the tests and resources --- .../src/components/tab-nav/resources.ts | 2 +- .../src/components/tab-nav/tab-nav.e2e.ts | 8 ++-- .../src/components/tab-nav/tab-nav.tsx | 2 +- .../src/components/tab-title/resources.ts | 1 - .../src/components/tab-title/tab-title.e2e.ts | 43 +------------------ .../src/components/tabs/tabs.e2e.ts | 23 ++++++---- .../src/components/tabs/tabs.tsx | 14 +++--- 7 files changed, 26 insertions(+), 67 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/resources.ts b/packages/calcite-components/src/components/tab-nav/resources.ts index 08f39a8990f..7f1cc8d7095 100644 --- a/packages/calcite-components/src/components/tab-nav/resources.ts +++ b/packages/calcite-components/src/components/tab-nav/resources.ts @@ -1,3 +1,3 @@ export const CSS = { - tabNav: "tab-nav", + container: "tab-nav", }; diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts index 60df48dcfd8..01ffed7f55f 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts @@ -3,14 +3,12 @@ import { accessible, defaults, renders, hidden } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; describe("calcite-tab-nav", () => { - const tabNavHtml = ""; - describe("defaults", () => { - defaults(tabNavHtml, [{ propertyName: "scale", defaultValue: "m" }]); + defaults("calcite-tab-nav", [{ propertyName: "scale", defaultValue: "m" }]); }); describe("renders", () => { - renders(tabNavHtml, { display: "flex" }); + renders("calcite-tab-nav", { display: "flex" }); }); describe("honors hidden attribute", () => { @@ -18,7 +16,7 @@ describe("calcite-tab-nav", () => { }); describe("accessible: checked", () => { - accessible(tabNavHtml); + accessible("calcite-tab-nav"); }); it("emits on user interaction", async () => { diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx index fd2027b8580..3ae7c6ab52a 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx @@ -173,7 +173,7 @@ export class TabNav {
{ - const tabTitleHtml = ""; const tabTitleClosableHtml = ""; const multiTabTitleClosableMarkup = ` @@ -42,7 +41,7 @@ describe("calcite-tab-title", () => { const closeSelector = `calcite-tab-title >>> .${CSS.closeButton}`; describe("renders", () => { - renders(tabTitleHtml, { display: "block" }); + renders("calcite-tab-title", { display: "block" }); renders(multiTabTitleClosableMarkup, { display: "flex" }); }); @@ -347,46 +346,6 @@ describe("calcite-tab-title", () => { expect(activeEventSpy).toHaveReceivedEventTimes(2); }); - async function assertTabTitleStyles(page: E2EPage, testCase: any) { - page.waitForChanges(); - - const tabTitleEl = await page.find(`calcite-tab-title`); - const content = await page.find(`calcite-tab-title >>> .${CSS.content}`); - - const contentStyles = await content.getComputedStyle(); - - expect(await tabTitleEl.getProperty("scale")).toBe(testCase.scale); - - expect(contentStyles.fontSize).toEqual(testCase.styles.fontSize); - expect(contentStyles.lineHeight).toEqual(testCase.styles.lineHeight); - } - - describe("scale property", () => { - const tabTitleSetHtml = html` - Tab 1 Title - Tab 2 Title - Tab 3 Title - Tab 4 Title - `; - - const navWithTabTitleSetHtml = html`${tabTitleSetHtml}`; - - const scaleStyles = [ - { scale: "", styles: { fontSize: "14px", lineHeight: "16px" } }, //default - { scale: "s", styles: { fontSize: "12px", lineHeight: "16px" } }, - { scale: "m", styles: { fontSize: "14px", lineHeight: "16px" } }, - { scale: "l", styles: { fontSize: "16px", lineHeight: "20px" } }, - ]; - - for (const { scale, styles } of scaleStyles) { - it(`should inherit ${scale || "default medium"} scale down from 'tabs' parent`, async () => { - const page = await newE2EPage(); - await page.setContent(`${navWithTabTitleSetHtml}`); - await assertTabTitleStyles(page, { scale, styles }); - }); - } - }); - describe("when the active tab-title changes", () => { it("should move the active tab nav indicator", async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts index 670349876bb..ef294223871 100644 --- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts +++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts @@ -127,7 +127,7 @@ describe("calcite-tabs", () => { } }); - function testCalciteTabs(scale: Scale, position: TabPosition) { + function testTabsScaleAndPosition(scale: Scale, position: TabPosition) { const scaleName = scale === "m" ? "default medium" : scale; it(`should render itself and child tab elements with corresponding scale (${scaleName}) and position (${position})`, async () => { @@ -135,13 +135,18 @@ describe("calcite-tabs", () => { await page.setContent(html`${tabsContent}`); await page.waitForChanges(); - expect(await page.find("calcite-tabs")).toEqualAttribute("scale", scale); - expect(await page.find("calcite-tabs")).toEqualAttribute("position", position); - expect(await (await page.find("calcite-tab-nav")).getProperty("scale")).toBe(scale); - expect(await (await page.find("calcite-tab-nav")).getProperty("position")).toBe(position); - expect(await (await page.find("calcite-tab-title")).getProperty("scale")).toBe(scale); - expect(await (await page.find("calcite-tab-title")).getProperty("position")).toBe(position); - expect(await (await page.find("calcite-tab")).getProperty("scale")).toBe(scale); + const tabs = await page.find("calcite-tabs"); + const tab = await page.find("calcite-tab"); + const tabTitle = await page.find("calcite-tab-title"); + const tabNav = await page.find("calcite-tab-nav"); + + expect(await tabs.getProperty("scale")).toBe(scale); + expect(await tabs.getProperty("position")).toBe(position); + expect(await tabNav.getProperty("scale")).toBe(scale); + expect(await tabNav.getProperty("position")).toBe(position); + expect(await tabTitle.getProperty("scale")).toBe(scale); + expect(await tabTitle.getProperty("position")).toBe(position); + expect(await tab.getProperty("scale")).toBe(scale); }); } @@ -151,7 +156,7 @@ describe("calcite-tabs", () => { scales.forEach((scale) => { positions.forEach((position) => { - testCalciteTabs(scale, position); + testTabsScaleAndPosition(scale, position); }); }); }); diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 0daee16e67a..2fb7420cf14 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -37,7 +37,7 @@ export class Tabs { @Watch("position") @Watch("scale") - handlePropsChange(): void { + handleInheritableProps(): void { this.updateItems(); } @@ -154,7 +154,6 @@ export class Tabs { @State() tabs: HTMLCalciteTabElement[] = []; mutationObserver = createObserver("mutation", (mutationsList: MutationRecord[]) => { - console.log("mutationsList", mutationsList); for (const mutation of mutationsList) { const target = mutation.target as HTMLElement; if ( @@ -176,13 +175,12 @@ export class Tabs { nav.scale = scale; } - Array.from(this.el.querySelectorAll("calcite-tab:not(.calcite-tab-nested)")).forEach( - (tab: HTMLCalciteTabElement) => { - tab.scale = scale; - } - ); + const tab = this.el.querySelector("calcite-tab"); + if (tab) { + tab.scale = scale; + } - Array.from(this.el.querySelectorAll("calcite-tab-title")).forEach( + Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach( (title: HTMLCalciteTabTitleElement) => { title.position = position; title.scale = scale; From 00d97cc9ea79b50a60e9aba76e07ef3dc695d96a Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 25 Oct 2023 23:15:02 -0700 Subject: [PATCH 31/42] doc editing --- .../calcite-components/src/components/tab-nav/usage/Basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tab-nav/usage/Basic.md b/packages/calcite-components/src/components/tab-nav/usage/Basic.md index 6a5874bfe9f..7cf407af314 100644 --- a/packages/calcite-components/src/components/tab-nav/usage/Basic.md +++ b/packages/calcite-components/src/components/tab-nav/usage/Basic.md @@ -1,4 +1,4 @@ -Tab-nav and tab-title inherit their `scale` and `position` from tabs parent. +Tabs `scale` and `position` properties are inherited by it's child components, tab-nav and tab-title. ```html From bb8aa60a2ed23d87d60cc70b79d0eaf44141fb82 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Oct 2023 12:24:30 -0700 Subject: [PATCH 32/42] adjust flex on center and inline with the new selectors --- .../src/components/tab-title/tab-title.scss | 14 ++++++++++---- .../calcite-components/src/components/tab/tab.scss | 3 +-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index aad12e0692e..798e5bfb50a 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -1,6 +1,15 @@ :host { - @apply block flex-initial outline-none; + @apply block outline-none; margin-inline-start: theme("margin.0"); +} + +:host([layout="inline"]) { + @apply flex-initial; + margin-inline-end: theme("margin.5"); +} + +:host([layout="center"]) { + @apply flex-auto; margin-inline-end: theme("margin.5"); } @@ -8,7 +17,6 @@ :host([layout="center"]) .scale-m, :host([layout="center"]) .scale-l { @apply my-0 text-center; - margin-inline-end: theme("margin.0"); flex-basis: theme("spacing.48"); .content { @apply m-auto; @@ -88,7 +96,6 @@ } .scale-s { - margin-inline-end: 1rem; .content { @apply text-n2h py-1; } @@ -101,7 +108,6 @@ } .scale-l { - margin-inline-end: 1.5rem; .content { @apply text-0h py-2.5; } diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss index 6ef7b8892c5..85cc9777d99 100644 --- a/packages/calcite-components/src/components/tab/tab.scss +++ b/packages/calcite-components/src/components/tab/tab.scss @@ -27,8 +27,7 @@ section, } .scale-l section { - @apply text-0h; - padding-block: 13px; + @apply text-0h py-2.5; } @include base-component(); From 4293d25516bef7cb6e0531afb1b75285a6fa5255 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Oct 2023 13:02:32 -0700 Subject: [PATCH 33/42] =?UTF-8?q?=F0=9F=8E=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/calcite-components/src/tests/commonTests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index a21c2dc705f..09f2b470801 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -194,7 +194,7 @@ function propToAttr(name: string): string { } /** - * Helper for asserting that a property's value is its default. + * Helper for asserting that a property's value is its default * * Note that this helper should be used within a describe block. * From 404cae5bcbbd501333da883d2ab35ad71253a315 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Oct 2023 13:29:26 -0700 Subject: [PATCH 34/42] drop any test checking visual changes, clean up duplication in css, and remove doc changes that are out of scope --- .../src/components/tab-title/tab-title.scss | 3 +-- .../src/components/tab/tab.e2e.ts | 23 ------------------- .../src/tests/commonTests.ts | 9 ++++---- 3 files changed, 6 insertions(+), 29 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 798e5bfb50a..215dde6d6e4 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -1,16 +1,15 @@ :host { @apply block outline-none; margin-inline-start: theme("margin.0"); + margin-inline-end: theme("margin.5"); } :host([layout="inline"]) { @apply flex-initial; - margin-inline-end: theme("margin.5"); } :host([layout="center"]) { @apply flex-auto; - margin-inline-end: theme("margin.5"); } :host([layout="center"]) .scale-s, diff --git a/packages/calcite-components/src/components/tab/tab.e2e.ts b/packages/calcite-components/src/components/tab/tab.e2e.ts index e7e204cb2de..1ff8bf0a3de 100644 --- a/packages/calcite-components/src/components/tab/tab.e2e.ts +++ b/packages/calcite-components/src/components/tab/tab.e2e.ts @@ -1,4 +1,3 @@ -import { newE2EPage } from "@stencil/core/testing"; import { defaults, renders, hidden } from "../../tests/commonTests"; describe("calcite-tab", () => { @@ -21,26 +20,4 @@ describe("calcite-tab", () => { { propertyName: "scale", defaultValue: "m" }, ]); }); - - describe("when nested within calcite-tabs component", () => { - const scales = [ - { name: "medium", scale: "m", fontSize: "14px", lineHeight: "16px" }, - { name: "small", scale: "s", fontSize: "12px", lineHeight: "16px" }, - { name: "large", scale: "l", fontSize: "16px", lineHeight: "20px" }, - ]; - - scales.forEach(({ name, scale, fontSize, lineHeight }) => { - it(`should render with ${name} scale`, async () => { - const page = await newE2EPage({ - html: `${tabHtml}`, - }); - const element = await page.find("calcite-tab"); - expect(await element.getProperty("scale")).toBe(scale); - - const section = await page.find(`calcite-tab >>> section`); - expect(await (await section.getComputedStyle())["font-size"]).toEqual(fontSize); - expect(await (await section.getComputedStyle())["line-height"]).toEqual(lineHeight); - }); - }); - }); }); diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index 09f2b470801..9e6f2b19781 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -212,10 +212,11 @@ function propToAttr(name: string): string { * ]) * }) * - * @param {ComponentTestSetup} componentTestSetup - A component tag, html, or the tag and e2e page for setting up a test. - * @param {object[]} propsToTest - An array of objects to test. - * @param {string} propsToTest.propertyName - The property name. - * @param {any} propsToTest.value - The property value. + * @param {string} componentTagOrHTML - the component tag or HTML markup to test against + * @param componentTestSetup + * @param {object[]} propsToTest - the properties to test + * @param {string} propsToTest.propertyName - the property name + * @param {any} propsToTest.value - the property value */ export function defaults( componentTestSetup: ComponentTestSetup, From d4e508e77e1b56a1a07238bf822f06277e7e98a5 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 27 Oct 2023 15:56:22 -0700 Subject: [PATCH 35/42] add screenshot coverage for simle center/inline/border scale variations --- .../src/components/tabs/tabs.stories.ts | 35 ++++++++++++++++--- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts index f7e8ac5ef76..b269c8d2384 100644 --- a/packages/calcite-components/src/components/tabs/tabs.stories.ts +++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts @@ -163,16 +163,41 @@ export const setWidth = (): string => html`
`; -export const justTabNav = (): string => html` - +const TabNavHTMLSimple = html` + Tab 1 Title Tab 2 Title Tab 3 Title Tab 4 Title +

Tab 1 Content

 +

Tab 2 Content

 +

Tab 3 Content

 +

Tab 4 Content

 +`; + +export const centerScale_TestOnly = (): string => html` + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} +`; + +export const centerBorderedScale_TestOnly = (): string => html` + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} +`; + +export const inlineScale_TestOnly = (): string => html` + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} +`; + +export const inlineBorderedScale_TestOnly = (): string => html` + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} `; export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html` From c1a9c9d764e0d43612539c9ac47816a3912bf2d5 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 27 Oct 2023 16:28:32 -0700 Subject: [PATCH 36/42] cleanup --- .../src/components/tabs/tabs.stories.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts index b269c8d2384..0f9115d4b2d 100644 --- a/packages/calcite-components/src/components/tabs/tabs.stories.ts +++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts @@ -170,34 +170,34 @@ const TabNavHTMLSimple = html` Tab 3 Title Tab 4 Title -

Tab 1 Content

 -

Tab 2 Content

 -

Tab 3 Content

 -

Tab 4 Content

 + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content `; export const centerScale_TestOnly = (): string => html` - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} `; export const centerBorderedScale_TestOnly = (): string => html` - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} `; export const inlineScale_TestOnly = (): string => html` - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} `; export const inlineBorderedScale_TestOnly = (): string => html` - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} - ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} + ${TabNavHTMLSimple} `; export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html` From d2b10fc591aed6f9831039145f66a74252db01f9 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 27 Oct 2023 21:28:04 -0700 Subject: [PATCH 37/42] make these styles more robust by using a class vs an element --- .../src/components/tab/resources.ts | 1 + .../src/components/tab/tab.scss | 16 ++++++++-------- .../src/components/tab/tab.tsx | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/tab/resources.ts b/packages/calcite-components/src/components/tab/resources.ts index 8ce4e2bdc7b..bf868fd865c 100644 --- a/packages/calcite-components/src/components/tab/resources.ts +++ b/packages/calcite-components/src/components/tab/resources.ts @@ -1,3 +1,4 @@ export const CSS = { container: "container", + content: "content", }; diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss index 85cc9777d99..1a794bcdf7b 100644 --- a/packages/calcite-components/src/components/tab/tab.scss +++ b/packages/calcite-components/src/components/tab/tab.scss @@ -13,21 +13,21 @@ @apply block h-full w-full overflow-auto; } -section, -.container { - @apply hidden h-full w-full; -} - -.scale-s section { +.scale-s .content { @apply text-n2h py-1; } -.scale-m section { +.scale-m .content { @apply text-n1h py-2; } -.scale-l section { +.scale-l .content { @apply text-0h py-2.5; } +section, +.container { + @apply hidden h-full w-full; +} + @include base-component(); diff --git a/packages/calcite-components/src/components/tab/tab.tsx b/packages/calcite-components/src/components/tab/tab.tsx index a84d0e2c9f3..3f0f456bdbc 100644 --- a/packages/calcite-components/src/components/tab/tab.tsx +++ b/packages/calcite-components/src/components/tab/tab.tsx @@ -69,7 +69,7 @@ export class Tab { role="tabpanel" tabIndex={this.selected ? 0 : -1} > -
+
From 92880525ac189b02cb7d83e6703e388d1ad70da1 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 27 Oct 2023 22:04:59 -0700 Subject: [PATCH 38/42] set of screenshot tests to cover various scenarios for scales --- .../src/components/tab-title/tab-title.scss | 4 ++ .../src/components/tabs/tabs.stories.ts | 53 +++++++++++++++++++ .../src/components/tabs/tabs.tsx | 5 +- 3 files changed, 59 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index 215dde6d6e4..ebe5b3040cf 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -12,6 +12,10 @@ @apply flex-auto; } +:host([layout="center"]:not([bordered])) { + margin-inline-start: theme("margin.5"); +} + :host([layout="center"]) .scale-s, :host([layout="center"]) .scale-m, :host([layout="center"]) .scale-l { diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts index 0f9115d4b2d..d7497dc1af1 100644 --- a/packages/calcite-components/src/components/tabs/tabs.stories.ts +++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts @@ -176,30 +176,83 @@ const TabNavHTMLSimple = html` Tab 4 Content `; +const TabNavHTMLVariedTabWidth = html` + + Tab 1 Title + Tab 2 Title + Tab 3 Title + Tab 4 Title + + Tab 1 Content + Tab 2 Content + Tab 3 Content + Tab 4 Content +`; + +const tabStyles = html` + +`; + export const centerScale_TestOnly = (): string => html` + ${tabStyles} ${TabNavHTMLSimple} ${TabNavHTMLSimple} ${TabNavHTMLSimple} `; +export const centerVariedTabWidthScale_TestOnly = (): string => html` + ${tabStyles} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} +`; + export const centerBorderedScale_TestOnly = (): string => html` + ${tabStyles} ${TabNavHTMLSimple} ${TabNavHTMLSimple} ${TabNavHTMLSimple} `; +export const centerBorderedVariedTabWidthScale_TestOnly = (): string => html` + ${tabStyles} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} +`; + export const inlineScale_TestOnly = (): string => html` + ${tabStyles} ${TabNavHTMLSimple} ${TabNavHTMLSimple} ${TabNavHTMLSimple} `; +export const inlineVariedTabWidthScale_TestOnly = (): string => html` + ${tabStyles} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} +`; + export const inlineBorderedScale_TestOnly = (): string => html` + ${tabStyles} ${TabNavHTMLSimple} ${TabNavHTMLSimple} ${TabNavHTMLSimple} `; +export const inlineBorderedVariedTabWidthScale_TestOnly = (): string => html` + ${tabStyles} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} + ${TabNavHTMLVariedTabWidth} +`; + export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 2fb7420cf14..37564070253 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -175,10 +175,9 @@ export class Tabs { nav.scale = scale; } - const tab = this.el.querySelector("calcite-tab"); - if (tab) { + Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { tab.scale = scale; - } + }); Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach( (title: HTMLCalciteTabTitleElement) => { From 468787e0914062241acd6ebc86d8028bc3f3b4bf Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 28 Oct 2023 13:01:29 -0700 Subject: [PATCH 39/42] use a class method vs an assigned-bound function --- packages/calcite-components/src/components/tabs/tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 37564070253..860e9163222 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -166,7 +166,7 @@ export class Tabs { } }); - private updateItems = (): void => { + private updateItems(): void { const { position, scale } = this; const nav = this.el.querySelector("calcite-tab-nav"); @@ -185,7 +185,7 @@ export class Tabs { title.scale = scale; } ); - }; + } //-------------------------------------------------------------------------- // From 6aa6c87d6c3c4017d9c7b74ad4ea3d906bcd41aa Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 28 Oct 2023 22:19:40 -0700 Subject: [PATCH 40/42] rework margin application based on new scale class selectors vs attribute --- .../src/components/tab-nav/tab-nav.scss | 30 +++++++++++++++++++ .../src/components/tab-title/tab-title.scss | 5 ---- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index 51fb41201e6..b5d8adfb429 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -14,6 +14,36 @@ min-block-size: theme("spacing.11"); } +// `tab-nav` in all scales in layout="center" has a padding of 20px on both ends +:host([layout="center"]:not([bordered])) { + padding-inline: theme("margin.5"); + + .scale-l { + ::slotted(calcite-tab-title) { + margin-inline-end: theme("margin.6"); + } + } + .scale-m { + ::slotted(calcite-tab-title) { + margin-inline-end: theme("margin.5"); + } + } + .scale-s { + ::slotted(calcite-tab-title) { + margin-inline-end: theme("margin.4"); + } + } +} + +//override margin-inline-end for the last child for tab-nav to implement the 20px padding on both ends instead +:host([layout="center"]:not([bordered])) { + .tab-nav { + ::slotted(calcite-tab-title:last-child) { + margin-inline-end: theme("margin.0"); + } + } +} + .tab-nav { @apply flex w-full diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss index ebe5b3040cf..9baf21af777 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.scss +++ b/packages/calcite-components/src/components/tab-title/tab-title.scss @@ -1,7 +1,6 @@ :host { @apply block outline-none; margin-inline-start: theme("margin.0"); - margin-inline-end: theme("margin.5"); } :host([layout="inline"]) { @@ -12,10 +11,6 @@ @apply flex-auto; } -:host([layout="center"]:not([bordered])) { - margin-inline-start: theme("margin.5"); -} - :host([layout="center"]) .scale-s, :host([layout="center"]) .scale-m, :host([layout="center"]) .scale-l { From 52ff51cde6377f1b8719f0914ff87a69bf0ff069 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 30 Oct 2023 10:59:02 -0700 Subject: [PATCH 41/42] fix to missing inline tab gap and make sure tabs doesn't push it's inherited props to other nested tab-titles --- .../src/components/tab-nav/tab-nav.scss | 20 +++++++++---------- .../src/components/tabs/tabs.tsx | 4 +++- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index b5d8adfb429..3822a8e8471 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -14,10 +14,17 @@ min-block-size: theme("spacing.11"); } -// `tab-nav` in all scales in layout="center" has a padding of 20px on both ends -:host([layout="center"]:not([bordered])) { +:host(:not([bordered])) { + // `tab-nav` in all scales in layout="center" has a padding of 20px on both ends padding-inline: theme("margin.5"); + //override margin-inline-end for the last child for tab-nav to implement the 20px padding on both ends instead + .tab-nav { + ::slotted(calcite-tab-title:last-child) { + margin-inline-end: theme("margin.0"); + } + } + .scale-l { ::slotted(calcite-tab-title) { margin-inline-end: theme("margin.6"); @@ -35,15 +42,6 @@ } } -//override margin-inline-end for the last child for tab-nav to implement the 20px padding on both ends instead -:host([layout="center"]:not([bordered])) { - .tab-nav { - ::slotted(calcite-tab-title:last-child) { - margin-inline-end: theme("margin.0"); - } - } -} - .tab-nav { @apply flex w-full diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx index 860e9163222..79002c559c6 100644 --- a/packages/calcite-components/src/components/tabs/tabs.tsx +++ b/packages/calcite-components/src/components/tabs/tabs.tsx @@ -176,7 +176,9 @@ export class Tabs { } Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab: HTMLCalciteTabElement) => { - tab.scale = scale; + if (tab.parentElement === this.el) { + tab.scale = scale; + } }); Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach( From ff3defbbb42431edd3780648f8fe3ea374ee3393 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 30 Oct 2023 11:25:50 -0700 Subject: [PATCH 42/42] fix omission --- .../calcite-components/src/components/tab-nav/tab-nav.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index 3822a8e8471..368fd06a1d1 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -14,7 +14,7 @@ min-block-size: theme("spacing.11"); } -:host(:not([bordered])) { +:host([layout="center"]:not([bordered])) { // `tab-nav` in all scales in layout="center" has a padding of 20px on both ends padding-inline: theme("margin.5"); @@ -24,7 +24,9 @@ margin-inline-end: theme("margin.0"); } } +} +:host(:not([bordered])) { .scale-l { ::slotted(calcite-tab-title) { margin-inline-end: theme("margin.6");