Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(tab): prevent vertical scrollbar on content pane when the height of outer elements are specified #8399

Merged
merged 3 commits into from
Dec 11, 2023
Merged

fix(tab): prevent vertical scrollbar on content pane when the height of outer elements are specified #8399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac50452
fix(tab): eliminate vertical scrolling when parent tabs element has a…
eriklharper Dec 11, 2023
a8d48b4
adding test only story
eriklharper Dec 11, 2023
39e0eb9
adding additional tabs story to test inside a shell panel
eriklharper Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/calcite-components/src/components/tab/tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
@apply block h-full w-full overflow-auto;
}

.content {
@apply box-border;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sidebar: @driskull Do you think we could split up https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/assets/styles/_host.scss for supporting/child components if they don't need background or other styles? Or if all components should be using %component-host, we can set up a rule to enforce it across all component style files.

}

.scale-s .content {
@apply text-n2h py-1;
}
Expand Down
68 changes: 68 additions & 0 deletions packages/calcite-components/src/components/tabs/tabs.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
Loading