From 89a3834345bdc4b7b9798cbeaadc02e47252847c Mon Sep 17 00:00:00 2001
From: Greg <greg@studable.com>
Date: Sat, 21 Oct 2023 09:54:16 -0400
Subject: [PATCH] docs(scroll-area): add example for horizontal scroll area
 (#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
---
 __registry__/index.tsx                        | 14 +++++
 content/docs/components/scroll-area.mdx       |  6 +++
 .../example/scroll-area-horizontal-demo.tsx   | 53 +++++++++++++++++++
 registry/default/ui/scroll-area.tsx           |  2 +-
 .../example/scroll-area-horizontal-demo.tsx   | 53 +++++++++++++++++++
 registry/new-york/ui/scroll-area.tsx          |  2 +-
 registry/registry.ts                          |  6 +++
 7 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 registry/default/example/scroll-area-horizontal-demo.tsx
 create mode 100644 registry/new-york/example/scroll-area-horizontal-demo.tsx

diff --git a/__registry__/index.tsx b/__registry__/index.tsx
index 5648c92e91e..453d9b08b66 100644
--- 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
index 1244e4cc9ba..e84d626cf02 100644
--- 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
new file mode 100644
index 00000000000..fad6de53485
--- /dev/null
+++ 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
index 590cec7fa18..2426616498a 100644
--- 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
new file mode 100644
index 00000000000..d837e0a81f3
--- /dev/null
+++ 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
index 590cec7fa18..2426616498a 100644
--- 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
index e7e8a366eaa..ee818d33ac7 100644
--- 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",