refactor(tabs, tab, tab-nav, tab-title): getElementProp is refactored out in favor of inheritable props set directly on parent

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
-<calcite-tab-nav scale="l" position="bottom">
-  <calcite-tab-title>Layers</calcite-tab-title>
-  <calcite-tab-title>Maps</calcite-tab-title>
-  <calcite-tab-title selected>Data</calcite-tab-title>
-</calcite-tab-nav>
+<calcite-tabs scale="l" position="bottom">
+  <calcite-tab-nav>
+    <calcite-tab-title>Layers</calcite-tab-title>
+    <calcite-tab-title>Maps</calcite-tab-title>
+    <calcite-tab-title selected>Data</calcite-tab-title>
+  </calcite-tab-nav>
+</calcite-tabs>
 ```
 
 ## Properties

packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts

@@ -1,10 +1,15 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, hidden } from "../../tests/commonTests";
+import { accessible, defaults, renders, hidden } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 
 describe("calcite-tab-nav", () => {
   const tabNavHtml = "<calcite-tab-nav></calcite-tab-nav>";
 
+  describe("defaults (immediate parent tabs or tab-nav)", () => {
+    defaults("calcite-tabs", [{ propertyName: "scale", defaultValue: "m" }]);
+    defaults(`<calcite-tabs>${tabNavHtml}</calcite-tabs>`, [{ propertyName: "scale", defaultValue: "m" }]);
+  });
+
   describe("renders", () => {
     renders(tabNavHtml, { display: "flex" });
   });
@@ -78,94 +83,23 @@ describe("calcite-tab-nav", () => {
     });
   });
 
-  describe("scale property", () => {
-    describe("default", () => {
-      it("should render without scale", async () => {
-        const page = await newE2EPage({
-          html: `${tabNavHtml}`,
-        });
-        const element = await page.find("calcite-tab-nav");
-        expect(element).not.toHaveAttribute("scale");
-      });
-    });
+  describe("scales", () => {
+    const scaleMinHeightPairs = {
+      s: "24px",
+      m: "32px",
+      l: "44px",
+    };
 
-    describe("when scale is small", () => {
-      it("should render with small scale", async () => {
-        const page = await newE2EPage({
-          html: `<calcite-tab-nav scale='s'>
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>`,
-        });
-        const element = await page.find("calcite-tab-nav");
-        expect(await (await element.getComputedStyle())["minHeight"]).toEqual("24px");
-        expect(element).toEqualAttribute("scale", "s");
-      });
-    });
+    for (const [key, value] of Object.entries(scaleMinHeightPairs)) {
+      it(`${key} scale`, async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`<calcite-tabs scale="${key}">${tabNavHtml}</calcite-tabs>`);
 
-    describe("when scale is medium", () => {
-      it("should render with medium scale", async () => {
-        const page = await newE2EPage({
-          html: `<calcite-tab-nav scale='m'>
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>`,
-        });
         const element = await page.find("calcite-tab-nav");
-        expect(await (await element.getComputedStyle())["minHeight"]).toEqual("32px");
-        expect(element).toEqualAttribute("scale", "m");
+        expect((await element.getComputedStyle())["height"]).toEqual(value);
+        expect(await element.getProperty("scale")).toBe(`${key}`);
       });
-    });
-
-    describe("when scale is large", () => {
-      it("should render with medium scale", async () => {
-        const page = await newE2EPage({
-          html: `<calcite-tab-nav scale='l'>
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>`,
-        });
-        const element = await page.find("calcite-tab-nav");
-        expect(await (await element.getComputedStyle())["minHeight"]).toEqual("44px");
-        expect(element).toEqualAttribute("scale", "l");
-      });
-    });
-
-    describe("when nested within tabs parent", () => {
-      it("should render with default medium scale", async () => {
-        const page = await newE2EPage({
-          html: `<calcite-tabs>${tabNavHtml}</calcite-tabs>`,
-        });
-        const element = await page.find("calcite-tab-nav");
-        expect(element).toEqualAttribute("scale", "m");
-      });
-
-      describe("when tabs scale is small", () => {
-        it("should render with small scale", async () => {
-          const page = await newE2EPage({
-            html: `<calcite-tabs scale="s">${tabNavHtml}</calcite-tabs>`,
-          });
-          const element = await page.find("calcite-tab-nav");
-          expect(element).toEqualAttribute("scale", "s");
-        });
-      });
-
-      describe("when tabs scale is large", () => {
-        it("should render with large scale", async () => {
-          const page = await newE2EPage({
-            html: `<calcite-tabs scale="l">${tabNavHtml}</calcite-tabs>`,
-          });
-          const element = await page.find("calcite-tab-nav");
-          expect(element).toEqualAttribute("scale", "l");
-        });
-      });
-    });
+    }
   });
 
   it("focuses on keyboard interaction", async () => {

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;
 }

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.
@@ -55,19 +56,23 @@ 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
    */
   @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
@@ -121,10 +126,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)) {
@@ -137,8 +138,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) {
@@ -161,6 +160,10 @@ export class TabNav {
     }
   }
 
+  disconnectedCallback(): void {
+    this.resizeObserver?.disconnect();
+  }
+
   render(): VNode {
     const dir = getElementDir(this.el);
     const width = `${this.indicatorWidth}px`;
@@ -169,7 +172,11 @@ export class TabNav {
     return (
       <Host role="tablist">
         <div
-          class="tab-nav"
+          class={{
+            [CSS.tabNav]: true,
+            [`scale-${this.scale}`]: true,
+            [`position-${this.position}`]: true,
+          }}
           onScroll={this.handleContainerScroll}
           // 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)
           ref={(el: HTMLDivElement) => (this.tabNavEl = el)}

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 and tab-title inherit their `scale` and `position` from tabs parent.
 
 ```html
-<calcite-tab-nav scale="l" position="bottom">
-  <calcite-tab-title>Layers</calcite-tab-title>
-  <calcite-tab-title>Maps</calcite-tab-title>
-  <calcite-tab-title selected>Data</calcite-tab-title>
-</calcite-tab-nav>
+<calcite-tabs scale="l" position="bottom">
+  <calcite-tab-nav>
+    <calcite-tab-title>Layers</calcite-tab-title>
+    <calcite-tab-title>Maps</calcite-tab-title>
+    <calcite-tab-title selected>Data</calcite-tab-title>
+  </calcite-tab-nav>
+</calcite-tabs>
 ```