Skip to content

Commit ecbf17b

Browse files
authored
feat(block): improve block's content layout to allow scrolling (#7367)
**Related Issue:** #5686 ## Summary This applies @nwhittaker's [suggestion](#5686 (comment)) (belated thanks! 🎉) to make scrolling setup easier within blocks.
1 parent 763b7ce commit ecbf17b

File tree

2 files changed

+36
-1
lines changed

2 files changed

+36
-1
lines changed

packages/calcite-components/src/components/block/block.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ calcite-handle {
139139
}
140140

141141
.content {
142-
@apply animate-in flex-1 relative;
142+
@apply animate-in flex-1 relative min-h-0;
143143
padding-block: var(--calcite-block-padding, theme("spacing.2"));
144144
padding-inline: var(--calcite-block-padding, theme("spacing[2.5]"));
145145
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,3 +243,38 @@ export const loadingWithStatusIcon_TestOnly = (): string =>
243243
244244
<calcite-block heading="Invalid status" description="summary" status="invalid"> </calcite-block>
245245
`;
246+
247+
export const scrollingContainerSetup_TestOnly = (): string => html`<style>
248+
calcite-block {
249+
height: 250px;
250+
overflow: hidden;
251+
}
252+
253+
.scroll-container {
254+
height: 100%;
255+
overflow-y: scroll;
256+
}
257+
258+
p {
259+
background: linear-gradient(to bottom, red, transparent);
260+
height: 500px;
261+
margin: 0;
262+
}
263+
</style>
264+
<calcite-block heading="Should scroll to the gradient at the bottom" open>
265+
<div class="scroll-container">
266+
<p></p>
267+
</div>
268+
</calcite-block>
269+
<script>
270+
(async () => {
271+
const block = document.querySelector("calcite-block");
272+
await customElements.whenDefined("calcite-block");
273+
await block.componentOnReady();
274+
275+
const scrollContainer = document.querySelector(".scroll-container");
276+
scrollContainer.scrollTo(0, 500);
277+
})();
278+
</script>`;
279+
280+
scrollingContainerSetup_TestOnly.parameters = { chromatic: { delay: 500 } };

0 commit comments

Comments
 (0)