docs(scroll-area): add example for horizontal scroll area (shadcn-ui#…

…1515) Adds documentation to the `<ScrollArea>` component for creating a scroll area with a horizontal scrollbar. There is also a commit to fix the improper sizing of a horizontal scroll bars. Before: https://github.com/shadcn-ui/ui/assets/9381099/a8b512f1-37f7-4107-a9fa-42a26e124696 After: https://github.com/shadcn-ui/ui/assets/9381099/480f881c-b0fe-4b1b-9472-c533135e6769
artabr · Oct 21, 2023 · 89a3834 · 89a3834
1 parent 701a0f9
commit 89a3834
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 2 deletions.
diff --git a/__registry__/index.tsx b/__registry__/index.tsx
@@ -705,6 +705,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/scroll-area-demo")),
       files: ["registry/default/example/scroll-area-demo.tsx"],
     },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo")),
+      files: ["registry/default/example/scroll-area-horizontal-demo.tsx"],
+    },
     "select-demo": {
       name: "select-demo",
       type: "components:example",
@@ -1721,6 +1728,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo")),
       files: ["registry/new-york/example/scroll-area-demo.tsx"],
     },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-horizontal-demo")),
+      files: ["registry/new-york/example/scroll-area-horizontal-demo.tsx"],
+    },
     "select-demo": {
       name: "select-demo",
       type: "components:example",

diff --git a/content/docs/components/scroll-area.mdx b/content/docs/components/scroll-area.mdx
@@ -63,3 +63,9 @@ import { ScrollArea } from "@/components/ui/scroll-area"
   started laughing, they couldn't stop.
 </ScrollArea>
 ```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="scroll-area-horizontal-demo" />
diff --git a/registry/default/example/scroll-area-horizontal-demo.tsx b/registry/default/example/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/default/ui/scroll-area"
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/registry/default/ui/scroll-area.tsx b/registry/default/ui/scroll-area.tsx
@@ -35,7 +35,7 @@ const ScrollBar = React.forwardRef<
       orientation === "vertical" &&
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
-        "h-2.5 border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}

diff --git a/registry/new-york/example/scroll-area-horizontal-demo.tsx b/registry/new-york/example/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/registry/new-york/ui/scroll-area.tsx b/registry/new-york/ui/scroll-area.tsx
@@ -35,7 +35,7 @@ const ScrollBar = React.forwardRef<
       orientation === "vertical" &&
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
-        "h-2.5 border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}

diff --git a/registry/registry.ts b/registry/registry.ts
@@ -611,6 +611,12 @@ const example: Registry = [
     registryDependencies: ["scroll-area"],
     files: ["example/scroll-area-demo.tsx"],
   },
+  {
+    name: "scroll-area-horizontal-demo",
+    type: "components:example",
+    registryDependencies: ["scroll-area"],
+    files: ["example/scroll-area-horizontal-demo.tsx"],
+  },
   {
     name: "select-demo",
     type: "components:example",