Feat/app shell scrollbar gutter (skeletonlabs#2014)

Carlosg19 · Sep 8, 2023 · 50b73f0 · 50b73f0
1 parent 85002f4
commit 50b73f0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/eleven-taxis-warn.md b/.changeset/eleven-taxis-warn.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: App Shell now includes a scrollbarGutter property
diff --git a/packages/skeleton/src/lib/components/AppShell/AppShell.svelte b/packages/skeleton/src/lib/components/AppShell/AppShell.svelte
@@ -15,6 +15,10 @@
 		scroll: SvelteEvent<UIEvent, HTMLDivElement>;
 	}
 
+	// Props
+	/** Set `scrollbar-gutter` style. */
+	export let scrollbarGutter = 'auto';
+
 	// Props (regions)
 	/** Apply arbitrary classes to the entire `#page` region. */
 	export let regionPage: CssClasses = '';
@@ -65,7 +69,7 @@
 		{/if}
 
 		<!-- Page -->
-		<div id="page" class="{regionPage} {cPage}" on:scroll>
+		<div id="page" class="{regionPage} {cPage}" style:scrollbarGutter on:scroll>
 			<!-- Slot: Page Header -->
 			{#if $$slots.pageHeader}
 				<header id="page-header" class="flex-none {classesPageHeader}"><slot name="pageHeader">(slot:header)</slot></header>

diff --git a/sites/skeleton.dev/src/routes/(inner)/components/app-shell/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/app-shell/+page.svelte
@@ -231,6 +231,14 @@ function scrollHandler(event: ComponentEvents<AppShell>['scroll']) {
 			/>
 			<CodeBlock language="html" code={`<AppShell ... on:scroll={scrollHandler}>`} />
 		</section>
+		<section class="space-y-4">
+			<h2 class="h2">Scrollbar Gutter</h2>
+			<!-- prettier-ignore -->
+			<p>
+				Use the <a class="anchor" href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter" target="_blank">scrollbar gutter</a> property to adjust how the page region scrollbar gutters are handled. View a <a class="anchor" href="https://www.youtube.com/shorts/mg49F9qUs38" target="_blank">quick demo video</a>.
+			</p>
+			<CodeBlock language="ts" code={`<AppShell scrollGutter="auto">...</AppShell>`} />
+		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Accessibility</h2>
 			<p>