From 075eefe1a5bf5c3035bac7d508534d242fed3bb2 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Mon, 17 Feb 2025 15:15:45 +0530 Subject: [PATCH] [WEB-2278] dev: scroll area enhancement (#6612) * 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 --- packages/tailwind-config/tailwind.config.js | 5 ++ packages/ui/package.json | 1 + packages/ui/src/index.ts | 1 + packages/ui/src/scroll-area.tsx | 66 +++++++++++++++++++ .../workspace/sidebar/project-navigation.tsx | 2 +- yarn.lock | 56 ++++++++-------- 6 files changed, 102 insertions(+), 29 deletions(-) create mode 100644 packages/ui/src/scroll-area.tsx diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index 0731894f06..3e34ca1f04 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -203,6 +203,11 @@ module.exports = { }, }, backdrop: "rgba(0, 0, 0, 0.25)", + scrollbar: { + neutral: "rgba(96, 100, 108, 0.1)", + hover: "rgba(96, 100, 108, 0.25)", + active: "rgba(96, 100, 108, 0.7)", + }, }, onboarding: { background: { diff --git a/packages/ui/package.json b/packages/ui/package.json index 580225477f..fff80ee84b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -34,6 +34,7 @@ "@plane/hooks": "*", "@plane/utils": "*", "@popperjs/core": "^2.11.8", + "@radix-ui/react-scroll-area": "^1.2.3", "clsx": "^2.0.0", "emoji-picker-react": "^4.5.16", "lodash": "^4.17.21", diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 279e19a3e3..f583178ddd 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -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"; diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx new file mode 100644 index 0000000000..0f6cc33c63 --- /dev/null +++ b/packages/ui/src/scroll-area.tsx @@ -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 = (props) => { + const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props; + + return ( + + {children} + + + + + + + + ); +}; diff --git a/web/core/components/workspace/sidebar/project-navigation.tsx b/web/core/components/workspace/sidebar/project-navigation.tsx index a8a76ad608..0d500a8a09 100644 --- a/web/core/components/workspace/sidebar/project-navigation.tsx +++ b/web/core/components/workspace/sidebar/project-navigation.tsx @@ -154,7 +154,7 @@ export const ProjectNavigation: FC = observer((props) => {