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/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

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"]) {

packages/calcite-components/src/components/tab/resources.ts

@@ -1,3 +1,4 @@
 export const CSS = {
   container: "container",
+  content: "content",
 };

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();

packages/calcite-components/src/components/tab/tab.tsx

@@ -69,7 +69,7 @@ export class Tab {
           role="tabpanel"
           tabIndex={this.selected ? 0 : -1}
         >
-          <section>
+          <section class={CSS.content}>
             <slot />
           </section>
         </div>

packages/calcite-components/src/components/tabs/tabs.stories.ts

@@ -163,16 +163,94 @@ export const setWidth = (): string => html`
   </div>
 `;
 
-export const justTabNav = (): string => html`
-  <calcite-tab-nav
-    position="${select("position", ["top", "bottom"], "top")}"
-    scale="${select("scale", ["s", "m", "l"], "l")}"
-  >
+const TabNavHTMLSimple = html`
+  <calcite-tab-nav slot="title-group">
     <calcite-tab-title>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 selected>Tab 4 Title</calcite-tab-title>
   </calcite-tab-nav>
+  <calcite-tab>Tab 1 Content</calcite-tab>
+  <calcite-tab>Tab 2 Content</calcite-tab>
+  <calcite-tab>Tab 3 Content</calcite-tab>
+  <calcite-tab selected>Tab 4 Content</calcite-tab>
+`;
+
+const TabNavHTMLVariedTabWidth = html`
+  <calcite-tab-nav slot="title-group">
+    <calcite-tab-title icon-start="arrow-left">Tab 1 Title</calcite-tab-title>
+    <calcite-tab-title icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+    <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+    <calcite-tab-title closable selected>Tab 4 Title</calcite-tab-title>
+  </calcite-tab-nav>
+  <calcite-tab>Tab 1 Content</calcite-tab>
+  <calcite-tab>Tab 2 Content</calcite-tab>
+  <calcite-tab>Tab 3 Content</calcite-tab>
+  <calcite-tab selected>Tab 4 Content</calcite-tab>
+`;
+
+const tabStyles = html`
+  <style>
+    calcite-tabs {
+      margin: 20px;
+    }
+  </style>
+`;
+
+export const centerScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="center" scale="s">${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="center" scale="m">${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="center" scale="l">${TabNavHTMLSimple}</calcite-tabs>
+`;
+
+export const centerVariedTabWidthScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="center" scale="s">${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="center" scale="m">${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="center" scale="l">${TabNavHTMLVariedTabWidth}</calcite-tabs>
+`;
+
+export const centerBorderedScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="center" scale="s" bordered>${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="center" scale="m" bordered>${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="center" scale="l" bordered>${TabNavHTMLSimple}</calcite-tabs>
+`;
+
+export const centerBorderedVariedTabWidthScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="center" scale="s" bordered>${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="center" scale="m" bordered>${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="center" scale="l" bordered>${TabNavHTMLVariedTabWidth}</calcite-tabs>
+`;
+
+export const inlineScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="inline" scale="s">${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="m">${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="l">${TabNavHTMLSimple}</calcite-tabs>
+`;
+
+export const inlineVariedTabWidthScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="inline" scale="s">${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="m">${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="l">${TabNavHTMLVariedTabWidth}</calcite-tabs>
+`;
+
+export const inlineBorderedScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="inline" scale="s" bordered>${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="m" bordered>${TabNavHTMLSimple}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="l" bordered>${TabNavHTMLSimple}</calcite-tabs>
+`;
+
+export const inlineBorderedVariedTabWidthScale_TestOnly = (): string => html`
+  ${tabStyles}
+  <calcite-tabs layout="inline" scale="s" bordered>${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="m" bordered>${TabNavHTMLVariedTabWidth}</calcite-tabs>
+  <calcite-tabs layout="inline" scale="l" bordered>${TabNavHTMLVariedTabWidth}</calcite-tabs>
 `;
 
 export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string => html`

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");
@@ -175,18 +175,17 @@ 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) => {
         title.position = position;
         title.scale = scale;
       }
     );
-  };
+  }
 
   //--------------------------------------------------------------------------
   //