binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2278] dev: scroll area enhancement (#6612)

Browse source 
* chore: radix-ui react-scroll-area added to plane ui package

* chore: scrollbar color token added to tailwind config

* dev: scroll area component

* chore-scroll-area-component-improvement

* fix: build error

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-02-17 15:15:45 +05:30 • committed by GitHub
parent 54bdd62d0c
commit 075eefe1a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 102 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/ui/src/index.ts
View file

@ -25,6 +25,7 @@ export * from "./popovers";
export * from "./tables";
export * from "./header";
export * from "./row";
export * from "./scroll-area";
export * from "./content-wrapper";
export * from "./card";
export * from "./tag";

66
packages/ui/src/scroll-area.tsx Normal file
View file

@ -0,0 +1,66 @@
"use client";
import * as RadixScrollArea from "@radix-ui/react-scroll-area";
import React, { FC } from "react";
import { cn } from "../helpers";
type TScrollAreaProps = {
type?: "auto" | "always" | "scroll" | "hover";
className?: string;
scrollHideDelay?: number;
size?: "sm" | "md" | "lg";
children: React.ReactNode;
};
const sizeStyles = {
sm: "p-[0.112rem] data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5",
md: "p-[0.152rem] data-[orientation=vertical]:w-3 data-[orientation=horizontal]:h-3",
lg: "p-[0.225rem] data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4",
};
const thumbSizeStyles = {
sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2",
lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
};
export const ScrollArea: FC<TScrollAreaProps> = (props) => {
const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props;
return (
<RadixScrollArea.Root
type={type}
className={cn("group overflow-hidden", className)}
scrollHideDelay={scrollHideDelay}
>
<RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
<RadixScrollArea.Scrollbar
className={cn(
"group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out",
sizeStyles[size]
)}
orientation="vertical"
>
<RadixScrollArea.Thumb
className={cn(
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
thumbSizeStyles[size]
)}
/>
</RadixScrollArea.Scrollbar>
<RadixScrollArea.Scrollbar
className={cn(
"group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out",
sizeStyles[size]
)}
orientation="horizontal"
>
<RadixScrollArea.Thumb
className={cn(
"relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
thumbSizeStyles[size]
)}
/>
</RadixScrollArea.Scrollbar>
</RadixScrollArea.Root>
);
};