fix(tab-title): tabs center when set to layout='center' (#7026)

**Related Issue:** #7025 ## Summary Enhancement to `tab-title` to make it optionally `closable` introduced structural changes that caused a regression in the tab alignment when centered.
Esri · May 26, 2023 · 0bd677b · 0bd677b
1 parent acfd08d
commit 0bd677b
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 2 deletions.
diff --git a/src/components/tab-title/tab-title.scss b/src/components/tab-title/tab-title.scss
@@ -7,7 +7,40 @@
 :host([layout="center"]) {
   @apply my-0 mx-5 text-center;
   flex-basis: theme("spacing.48");
-  margin: auto;
+  .content {
+    @apply m-auto;
+  }
+}
+
+// center the text visually and not affected by the x button so as to avoid moving when on or off
+:host([layout="center"][closable]) {
+  .content {
+    padding-inline-start: 32px; //28px button width + 0.25rem padding
+  }
+}
+
+: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"]) {
+  .content {
+    padding-inline-start: 40px; //28px button width + 0.75rem padding
+  }
+}
+
+:host([layout="center"][closable][scale="l"]) {
+  .content {
+    padding-inline-start: 40px; //36px button width + .25 padding
+  }
+}
+
+:host([layout="center"][closable][bordered][scale="l"]) {
+  .content {
+    padding-inline-start: 52px; //36px button width + 1rem padding
+  }
 }
 
 :host([position="bottom"]) .container {
@@ -192,9 +225,15 @@
 
 :host([closable]) .container,
 :host([bordered]) .container {
-  border-block-end-style: unset;
   border-inline-start: 1px solid transparent;
   border-inline-end: 1px solid transparent;
+  .close-button {
+    margin-inline: 0;
+  }
+}
+
+:host([closable]) .content {
+  @apply h-full box-border border-b-color-transparent;
 }
 
 :host([closable][position="bottom"]) .container,

diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
@@ -184,6 +184,55 @@ export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string =
   </calcite-tabs>
 `;
 
+export const centered_TestOnly = (): string => html`
+  <calcite-tabs layout="center">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 4 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-tab><p>Tab 4 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+
+export const centeredClosable_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-start="arrow-left" closable>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title icon-end="arrow-right" closable>Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" closable selected
+        >Tab 4 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-tab><p>Tab 4 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+
+export const centeredBorderedClosable_TestOnly = (): string => html`
+  <calcite-tabs layout="center" bordered>
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title closable>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" closable>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title icon-end="arrow-right" closable>Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" closable selected
+        >Tab 4 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-tab><p>Tab 4 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+
 export const TabChildrenWithPercentageHeights = (): string => html`
   <calcite-tabs style="height: 250px;">
     <calcite-tab-nav slot="title-group">