fix(tab): prevent vertical scrollbar on content pane when the height …

…of outer elements are specified (#8399) **Related Issue:** #8139 ## Summary This PR fixes an issue where applying a fixed CSS height on the `calcite-tabs` element or using tabs inside a shell panel caused child `tab`s to sometimes show a vertical scrollbar. --------- Co-authored-by: Erik Harper <[email protected]>
Esri · Dec 11, 2023 · 9e6d901 · 9e6d901
1 parent 89517ea
commit 9e6d901
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
@@ -13,6 +13,10 @@
   @apply block h-full w-full overflow-auto;
 }
 
+.content {
+  @apply box-border;
+}
+
 .scale-s .content {
   @apply text-n2h py-1;
 }

diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -378,3 +378,71 @@ export const updateIndicatorOffset_TestOnly = (): string => html`<calcite-tabs>
 updateIndicatorOffset_TestOnly.parameters = {
   chromatic: { delay: 1000 },
 };
+
+export const fixedHeightNoVerticalScrollbar_TestOnly = (): string => html`
+  <calcite-tabs style="height: 400px">
+    <calcite-tab-nav slot="title-group">
+      <calcite-tab-title selected> Watercraft </calcite-tab-title>
+      <calcite-tab-title>Automobiles</calcite-tab-title>
+      <calcite-tab-title>Aircrafts</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab selected>
+      <calcite-notice icon="embark" open>
+        <div slot="message">Recommended for coastal use</div>
+      </calcite-notice>
+      <calcite-notice icon="embark" open>
+        <div slot="message">Why is there a vertical scroll bar in this panel?</div>
+      </calcite-notice>
+    </calcite-tab>
+    <calcite-tab>
+      <calcite-notice icon="car" open>
+        <div slot="message">A good choice for inland adventure</div>
+      </calcite-notice>
+      <calcite-notice icon="car" open>
+        <div slot="message">A good choice for inland adventure 2</div>
+      </calcite-notice>
+    </calcite-tab>
+    <calcite-tab>
+      <calcite-notice icon="plane" open>
+        <div slot="message">Cross continents quickly</div>
+      </calcite-notice>
+    </calcite-tab>
+  </calcite-tabs>
+`;
+
+export const noVerticalScrollbarInsideShellPanel_TestOnly = (): string => html`
+  <calcite-shell content-behind>
+    <calcite-shell-panel slot="panel-end" width-scale="l" position="end" display-mode="float">
+      <calcite-panel heading="Panel with Tabs >> vertical scrollbar">
+        <calcite-tabs>
+          <calcite-tab-nav slot="title-group">
+            <calcite-tab-title selected> Watercraft </calcite-tab-title>
+            <calcite-tab-title>Automobiles</calcite-tab-title>
+            <calcite-tab-title>Aircrafts</calcite-tab-title>
+          </calcite-tab-nav>
+          <calcite-tab selected>
+            <calcite-notice icon="embark" open>
+              <div slot="message">Recommended for coastal use</div>
+            </calcite-notice>
+            <calcite-notice icon="embark" open>
+              <div slot="message">Why is there a vertical scroll bar in this panel?</div>
+            </calcite-notice>
+          </calcite-tab>
+          <calcite-tab>
+            <calcite-notice icon="car" open>
+              <div slot="message">A good choice for inland adventure</div>
+            </calcite-notice>
+            <calcite-notice icon="car" open>
+              <div slot="message">A good choice for inland adventure 2</div>
+            </calcite-notice>
+          </calcite-tab>
+          <calcite-tab>
+            <calcite-notice icon="plane" open>
+              <div slot="message">Cross continents quickly</div>
+            </calcite-notice>
+          </calcite-tab>
+        </calcite-tabs>
+      </calcite-panel>
+    </calcite-shell-panel>
+  </calcite-shell>
+`;