more docs

huntabyte · Jul 26, 2024 · 56eb7de · 56eb7de
1 parent 361992a
commit 56eb7de
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 11 deletions.
diff --git a/sites/docs/content/components/scroll-area.md b/sites/docs/content/components/scroll-area.md
@@ -4,7 +4,7 @@ description: Consistent scroll area across platforms.
 ---
 
 <script>
-	import { APISection, ComponentPreviewV2, ScrollAreaDemo } from '$lib/components'
+	import { APISection, ComponentPreviewV2, ScrollAreaDemo, ScrollAreaDemoScroll, ScrollAreaDemoAlways, ScrollAreaDemoAuto, ComponentPreviewMin } from '$lib/components'
 	export let schemas;
 </script>
 
@@ -25,9 +25,7 @@ description: Consistent scroll area across platforms.
 
 <ScrollArea.Root>
 	<ScrollArea.Viewport>
-		<ScrollArea.Content>
-			<!-- ... -->
-		</ScrollArea.Content>
+		<!-- Scrollable content here -->
 	</ScrollArea.Viewport>
 	<ScrollArea.Scrollbar orientation="vertical">
 		<ScrollArea.Thumb />
@@ -39,4 +37,64 @@ description: Consistent scroll area across platforms.
 </ScrollArea.Root>
 ```
 
+## Scroll Area Types
+
+### Hover
+
+The `hover` type is the default type of the scroll area, demonstrated in the featured example above. It only shows scrollbars when the user hovers over the scroll area and the content is larger than the viewport.
+
+### Scroll
+
+The `scroll` type displays the scrollbars when the user scrolls the content. This is similar to the behavior of MacOS.
+
+```svelte
+<ScrollArea.Root type="scroll">
+	<!-- ... -->
+</ScrollArea.Root>
+```
+
+<ComponentPreviewV2 name="scroll-area-demo-scroll" comp="Scroll Area">
+
+{#snippet preview()}
+<ScrollAreaDemoScroll />
+{/snippet}
+
+</ComponentPreviewV2>
+
+### Auto
+
+The `auto` type behaves similarly to your typical browser scrollbars. When the content is larger than the viewport, the scrollbars will appear and remain visible at all times.
+
+```svelte
+<ScrollArea.Root type="auto">
+	<!-- ... -->
+</ScrollArea.Root>
+```
+
+<ComponentPreviewV2 name="scroll-area-demo-auto" comp="Scroll Area">
+
+{#snippet preview()}
+<ScrollAreaDemoAuto />
+{/snippet}
+
+</ComponentPreviewV2>
+
+### Always
+
+The `always` type behaves as if you set `overflow: scroll` on the scroll area. Scrollbars will always be visible, even when the content is smaller than the viewport.
+
+```svelte
+<ScrollArea.Root type="always">
+	<!-- ... -->
+</ScrollArea.Root>
+```
+
+<ComponentPreviewV2 name="scroll-area-demo-always" comp="Scroll Area">
+
+{#snippet preview()}
+<ScrollAreaDemoAlways />
+{/snippet}
+
+</ComponentPreviewV2>
+
 <APISection {schemas} />
diff --git a/sites/docs/src/lib/components/component-preview-min.svelte b/sites/docs/src/lib/components/component-preview-min.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { Collapsible } from "bits-ui";
+	import DemoContainer from "./demo-container.svelte";
+	import DemoCodeContainer from "./demo-code-container.svelte";
+
+	type Props = {
+		preview: Snippet;
+		children: Snippet;
+		class?: string;
+	};
+
+	let { preview, children, class: className }: Props = $props();
+</script>
+
+<DemoContainer>
+	{@render preview?.()}
+</DemoContainer>
+<Collapsible.Root>
+	<Collapsible.Trigger>Show code</Collapsible.Trigger>
+	<Collapsible.Content>
+		<DemoCodeContainer class={className}>
+			{@render children?.()}
+		</DemoCodeContainer>
+	</Collapsible.Content>
+</Collapsible.Root>
diff --git a/sites/docs/src/lib/components/component-preview-v2.svelte b/sites/docs/src/lib/components/component-preview-v2.svelte
@@ -6,14 +6,15 @@
 	type Props = {
 		preview: Snippet;
 		children: Snippet;
+		class?: string;
 	};
 
-	let { preview, children }: Props = $props();
+	let { preview, children, class: className }: Props = $props();
 </script>
 
 <DemoContainer>
 	{@render preview()}
 </DemoContainer>
-<DemoCodeContainer>
+<DemoCodeContainer class={className}>
 	{@render children()}
 </DemoCodeContainer>
diff --git a/sites/docs/src/lib/components/demo-code-container.svelte b/sites/docs/src/lib/components/demo-code-container.svelte
@@ -8,8 +8,9 @@
 
 	type Props = {
 		children: Snippet;
+		class?: string;
 	};
-	let { children }: Props = $props();
+	let { children, class: className }: Props = $props();
 
 	const items = [
 		{
@@ -40,7 +41,8 @@
 					<div
 						class={cn(
 							"w-full [&_pre]:!my-0 [&_pre]:!mt-0 [&_pre]:max-h-[800px] [&_pre]:min-h-80 [&_pre]:overflow-auto [&_pre]:!rounded-none [&_pre]:!rounded-b-none [&_pre]:!rounded-tl-none [&_pre]:!rounded-tr-none [&_pre]:!border-t-0 [&_pre]:!border-none [&_pre]:!px-2 [&_pre]:!pb-5 [&_pre]:!pt-2",
-							!open && "[&_pre]:!max-h-80"
+							!open && "[&_pre]:!max-h-80",
+							className
 						)}
 					>
 						{#if item.value === "App.svelte"}

diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts
@@ -26,6 +26,9 @@ export { default as ProgressDemo } from "./progress-demo.svelte";
 export { default as RadioGroupDemo } from "./radio-group-demo.svelte";
 export { default as RangeCalendarDemo } from "./range-calendar-demo.svelte";
 export { default as ScrollAreaDemo } from "./scroll-area-demo.svelte";
+export { default as ScrollAreaDemoAlways } from "./scroll-area-demo-always.svelte";
+export { default as ScrollAreaDemoAuto } from "./scroll-area-demo-auto.svelte";
+export { default as ScrollAreaDemoScroll } from "./scroll-area-demo-scroll.svelte";
 export { default as SelectDemo } from "./select-demo.svelte";
 export { default as SeparatorDemo } from "./separator-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";

diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo-always.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo-always.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ScrollArea } from "bits-ui";
+</script>
+
+<ScrollArea.Root
+	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
+	type="always"
+>
+	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
+			Scroll Area
+		</h4>
+		<p class="text-wrap text-sm leading-5 text-foreground-alt">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem,
+			repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet
+			incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet
+			consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
+			excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti
+			autem? Dolorem, sit voluptatum.
+		</p>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar
+		orientation="vertical"
+		class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Scrollbar
+		orientation="horizontal"
+		class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo-auto.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo-auto.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ScrollArea } from "bits-ui";
+</script>
+
+<ScrollArea.Root
+	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
+	type="auto"
+>
+	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
+			Scroll Area
+		</h4>
+		<p class="text-wrap text-sm leading-5 text-foreground-alt">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem,
+			repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet
+			incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet
+			consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
+			excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti
+			autem? Dolorem, sit voluptatum.
+		</p>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar
+		orientation="vertical"
+		class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Scrollbar
+		orientation="horizontal"
+		class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo-scroll.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo-scroll.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ScrollArea } from "bits-ui";
+</script>
+
+<ScrollArea.Root
+	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
+	type="scroll"
+>
+	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
+			Scroll Area
+		</h4>
+		<p class="text-wrap text-sm leading-5 text-foreground-alt">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem,
+			repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet
+			incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet
+			consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
+			excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti
+			autem? Dolorem, sit voluptatum.
+		</p>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar
+		orientation="vertical"
+		class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Scrollbar
+		orientation="horizontal"
+		class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo.svelte
@@ -6,9 +6,7 @@
 	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
 >
 	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
-		<h4
-			class="mb-4 mt-2 text-[20px] font-semibold leading-none tracking-[-0.01em] text-foreground"
-		>
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
 			Scroll Area
 		</h4>
 		<p class="text-wrap text-sm leading-5 text-foreground-alt">

diff --git a/sites/docs/src/lib/components/index.ts b/sites/docs/src/lib/components/index.ts
@@ -15,3 +15,4 @@ export { default as ComponentPreview } from "./component-preview.svelte";
 export { default as LightSwitch } from "./light-switch.svelte";
 export { default as Metadata } from "./metadata.svelte";
 export { default as ComponentPreviewV2 } from "./component-preview-v2.svelte";
+export { default as ComponentPreviewMin } from "./component-preview-min.svelte";