fix(tab-nav): justify centered tab-titles evenly to extend across t…

…he width of `tab-nav` (#7047) **Related Issue:** #7025 ## Summary Follow-up to fix to #7026. Centered `tabs` should spread the `tab-titles` evenly to extend across the entire width of `tab-nav`, as opposed to `inline tab-titles` that only justify against the start of `tab-nav` width. Added coverage for both `centeredTabsAreEvenlyJustifiedAcrossNavWidth` and `inlineTabsJustifyAgainstTheStartOfTheNavWidth`.
Esri · May 27, 2023 · 8ef0421 · 8ef0421
1 parent c2d8c79
commit 8ef0421
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/src/components/tab-nav/tab-nav.scss b/src/components/tab-nav/tab-nav.scss
@@ -41,6 +41,10 @@
     ease-out;
 }
 
+:host([layout="center"]) .tab-nav {
+  @apply justify-evenly;
+}
+
 :host([position="bottom"]) .tab-nav-active-indicator {
   inset-block-end: unset;
   @apply top-0;

diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss
@@ -4,8 +4,11 @@
   margin-inline-end: theme("margin.5");
 }
 
-:host([layout="center"]) {
-  @apply my-0 mx-5 text-center;
+: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");
   .content {
     @apply m-auto;

diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
@@ -233,6 +233,36 @@ export const centeredBorderedClosable_TestOnly = (): string => html`
   </calcite-tabs>
 `;
 
+export const centeredTabsAreEvenlyJustifiedAcrossNavWidth_TestOnly = (): string => html`
+  <calcite-tabs layout="center">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title icon-end="arrow-right" closable>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" closable selected
+        >Tab 3 Title</calcite-tab-title
+      >
+    </calcite-tab-nav>
+    <calcite-tab><p>Tab 1 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+
+export const inlineTabsJustifyAgainstTheStartOfTheNavWidth_TestOnly = (): string => html`
+  <calcite-tabs layout="inline">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title icon-end="arrow-right" closable>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" closable selected
+        >Tab 3 Title</calcite-tab-title
+      >
+    </calcite-tab-nav>
+    <calcite-tab><p>Tab 1 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+
 export const TabChildrenWithPercentageHeights = (): string => html`
   <calcite-tabs style="height: 250px;">
     <calcite-tab-nav slot="title-group">