From ebbdb71cede867e1928a0bbe8fd75f54b76645ba Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 4 Apr 2023 12:08:12 +0200 Subject: [PATCH] Scroll area (#1360) ## Description 1. Add scroll area to the to ds 2. Add scroll area to add components panel ## Code Review - [ ] hi @TrySound , I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory --- .../panels/components/components.tsx | 10 ++- packages/design-system/package.json | 1 + .../src/components/scroll-area.tsx | 77 +++++++++++++++++++ packages/design-system/src/index.ts | 1 + pnpm-lock.yaml | 37 ++++++++- 5 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 packages/design-system/src/components/scroll-area.tsx diff --git a/apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx b/apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx index db0c9a29fe..4bdbd39248 100644 --- a/apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx +++ b/apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx @@ -13,6 +13,7 @@ import { ComponentCard, Tooltip, ArrowFocus, + ScrollArea, } from "@webstudio-is/design-system"; import { PlusIcon } from "@webstudio-is/icons"; import type { Publish } from "~/shared/pubsub"; @@ -78,12 +79,15 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => { }); return ( - +
onSetActiveTab("none")} />} /> -
+ {Array.from(componentCategories).map((category) => ( { /> ))} -
+ ); }; diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 21f3531cf8..12ead87e9d 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -55,6 +55,7 @@ "@radix-ui/react-portal": "^1.0.0", "@radix-ui/react-progress": "^1.0.0", "@radix-ui/react-radio-group": "^1.0.0", + "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^1.0.0", "@radix-ui/react-separator": "^1.0.0", "@radix-ui/react-slider": "^1.0.0", diff --git a/packages/design-system/src/components/scroll-area.tsx b/packages/design-system/src/components/scroll-area.tsx new file mode 100644 index 0000000000..110264484b --- /dev/null +++ b/packages/design-system/src/components/scroll-area.tsx @@ -0,0 +1,77 @@ +import { styled } from "../stitches.config"; +import { Root, Viewport, Scrollbar, Thumb } from "@radix-ui/react-scroll-area"; + +const SCROLLBAR_SIZE = 15; + +const ScrollAreaRoot = styled(Root, { + boxSizing: "border-box", + overflow: "hidden", +}); + +const ScrollAreaViewport = styled(Viewport, { + boxSizing: "border-box", + width: "100%", + height: "100%", + borderRadius: "inherit", +}); + +const ScrollAreaThumb = styled(Thumb, { + boxSizing: "border-box", + flex: 1, + background: "rgba(0, 0, 0, 0.5)", + borderRadius: 10, + // increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html + position: "relative", + "&::before": { + content: '""', + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: "100%", + height: "100%", + minWidth: 44, + minHeight: 44, + }, +}); + +const ScrollAreaScrollbar = styled(Scrollbar, { + boxSizing: "border-box", + display: "flex", + // ensures no selection + userSelect: "none", + // disable browser handling of all panning and zooming gestures on touch devices + touchAction: "none", + paddingRight: 2, + paddingLeft: 6, + background: "rgba(248, 248, 248, 0.76)", + transition: "all 160ms ease-out", + "&:hover": { + paddingRight: 2, + paddingLeft: 2, + borderLeft: `1px solid #e8e8e8`, + }, + '&[data-orientation="vertical"]': { + width: SCROLLBAR_SIZE, + }, + '&[data-orientation="horizontal"]': { + flexDirection: "column", + height: SCROLLBAR_SIZE, + }, +}); + +type ScrollAreaProps = { children: JSX.Element | Array }; + +export const ScrollArea = ({ children }: ScrollAreaProps) => { + return ( + + {children} + + + + + + + + ); +}; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 7be179368a..717868722b 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -32,6 +32,7 @@ export * from "./components/radio"; export * from "./components/checkbox"; export * from "./components/component-card"; export * from "./components/primitives/arrow-focus"; +export * from "./components/scroll-area"; // Not aligned diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd2785178a..52b794ac5f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -635,6 +635,9 @@ importers: '@radix-ui/react-radio-group': specifier: ^1.0.0 version: 1.0.0(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-scroll-area': + specifier: ^1.0.3 + version: 1.0.3(react-dom@17.0.2)(react@17.0.2) '@radix-ui/react-select': specifier: ^1.0.0 version: 1.0.0(@types/react@17.0.47)(react-dom@17.0.2)(react@17.0.2) @@ -5619,6 +5622,18 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-primitive@1.0.2(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + '@radix-ui/react-slot': 1.0.1(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-progress@1.0.0(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-j+JHtTuDpIhF0eOolNug+8hpZqNXcXp2GhTtwz+lnFzhY2a8+LXRSU79iy0r0WUs7UqCXCEeIJIrhg7NS/vPGA==} peerDependencies: @@ -5694,6 +5709,26 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-scroll-area@1.0.3(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-sBX9j8Q+0/jReNObEAveKIGXJtk3xUoSIx4cMKygGtO128QJyVDn01XNOFsyvihKDCTcu7SINzQ2jPAZEhIQtw==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.20.13 + '@radix-ui/number': 1.0.0 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0(react@17.0.2) + '@radix-ui/react-context': 1.0.0(react@17.0.2) + '@radix-ui/react-direction': 1.0.0(react@17.0.2) + '@radix-ui/react-presence': 1.0.0(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.2(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-callback-ref': 1.0.0(react@17.0.2) + '@radix-ui/react-use-layout-effect': 1.0.0(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-select@1.0.0(@types/react@17.0.47)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-GfbVBxx7JPvytNT+0XYCFCOImEMmpl0Vg7hhifLaLV7p5zRottFMgQ7qrrxw8v6B8buKXz41kWYMrdRrWqsZaQ==} peerDependencies: @@ -5967,7 +6002,7 @@ packages: peerDependencies: react: ^16.8 || ^17.0 || ^18.0 dependencies: - '@babel/runtime': 7.19.4 + '@babel/runtime': 7.20.13 react: 17.0.2 dev: false