diff --git a/.changeset/six-tools-serve.md b/.changeset/six-tools-serve.md new file mode 100644 index 000000000..ed12cbcc6 --- /dev/null +++ b/.changeset/six-tools-serve.md @@ -0,0 +1,5 @@ +--- +"@appsmithorg/design-system": patch +--- + +feat: Added Scrollbar component diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 02421791d..f3cb524be 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -137,6 +137,8 @@ "csstype": "^3.1.2", "date-fns": "^2.29.3", "loglevel": "^1.8.1", + "overlayscrollbars": "^2.7.2", + "overlayscrollbars-react": "^0.5.6", "rc-select": "^14.4.3", "rc-table": "^7.35.2", "rc-tooltip": "^5.3.1", diff --git a/packages/design-system/src/ScrollArea/ScrollArea.stories.tsx b/packages/design-system/src/ScrollArea/ScrollArea.stories.tsx new file mode 100644 index 000000000..c7d51bb94 --- /dev/null +++ b/packages/design-system/src/ScrollArea/ScrollArea.stories.tsx @@ -0,0 +1,92 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { ScrollArea } from "./ScrollArea"; + +export default { + title: "Design System/Scrollbar", + component: ScrollArea, +} as Meta; + +type Story = StoryObj; + +export const ScrollbarStory: Story = { + name: "Scrollbar", + args: { + size: "sm", + style: { + height: "200px", + }, + }, + render: (args) => ( + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industrys standard dummy text ever since the + 1500s, when an unknown printer took a galley of type and scrambled it to + make a type specimen book. It has survived not only five centuries, but + also the leap into electronic typesetting, remaining essentially + unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem + Ipsum.It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using Content here, content here, making it look + like readable English. Many desktop publishing packages and web page + editors now use Lorem Ipsum as their default model text, and a search for + lorem ipsum will uncover many web sites still in their infancy. Various + versions have evolved over the years, sometimes by accident, sometimes on + purpose (injected humour and the like).Lorem Ipsum is simply dummy text of + the printing and typesetting industry. Lorem Ipsum has been the industrys + standard dummy text ever since the 1500s, when an unknown printer took a + galley of type and scrambled it to make a type specimen book. It has + survived not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in the + 1960s with the release of Letraset sheets containing Lorem Ipsum passages, + and more recently with desktop publishing software like Aldus PageMaker + including versions of Lorem Ipsum.It is a long established fact that a + reader will be distracted by the readable content of a page when looking + at its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using Content + here, content here, making it look like readable English. Many desktop + publishing packages and web page editors now use Lorem Ipsum as their + default model text, and a search for lorem ipsum will uncover many web + sites still in their infancy. Various versions have evolved over the + years, sometimes by accident, sometimes on purpose (injected humour and + the like).Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industrys standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only five + centuries, but also the leap into electronic typesetting, remaining + essentially unchanged. It was popularised in the 1960s with the release of + Letraset sheets containing Lorem Ipsum passages, and more recently with + desktop publishing software like Aldus PageMaker including versions of + Lorem Ipsum.It is a long established fact that a reader will be distracted + by the readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using Content here, content here, making it look + like readable English. Many desktop publishing packages and web page + editors now use Lorem Ipsum as their default model text, and a search for + lorem ipsum will uncover many web sites still in their infancy. Various + versions have evolved over the years, sometimes by accident, sometimes on + purpose (injected humour and the like).Lorem Ipsum is simply dummy text of + the printing and typesetting industry. Lorem Ipsum has been the industrys + standard dummy text ever since the 1500s, when an unknown printer took a + galley of type and scrambled it to make a type specimen book. It has + survived not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in the + 1960s with the release of Letraset sheets containing Lorem Ipsum passages, + and more recently with desktop publishing software like Aldus PageMaker + including versions of Lorem Ipsum.It is a long established fact that a + reader will be distracted by the readable content of a page when looking + at its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using Content + here, content here, making it look like readable English. Many desktop + publishing packages and web page editors now use Lorem Ipsum as their + default model text, and a search for lorem ipsum will uncover many web + sites still in their infancy. Various versions have evolved over the + years, sometimes by accident, sometimes on purpose (injected humour and + the like). + + ), +}; diff --git a/packages/design-system/src/ScrollArea/ScrollArea.tsx b/packages/design-system/src/ScrollArea/ScrollArea.tsx new file mode 100644 index 000000000..14edff7bc --- /dev/null +++ b/packages/design-system/src/ScrollArea/ScrollArea.tsx @@ -0,0 +1,45 @@ +import React, { useEffect, useRef } from "react"; +import { useOverlayScrollbars } from "overlayscrollbars-react"; +import type { UseOverlayScrollbarsParams } from "overlayscrollbars-react"; +import clsx from "classnames"; + +import "overlayscrollbars/overlayscrollbars.css"; +import "./styles.css"; + +import { ScrollAreaProps } from "./ScrollArea.types"; + +function ScrollArea(props: ScrollAreaProps) { + const ref = useRef(null); + const { children, className, options, size = "md", ...rest } = props; + const defaultOptions: UseOverlayScrollbarsParams["options"] = { + scrollbars: { + theme: "ads-v2-scroll-theme", + autoHide: "scroll", + }, + ...options, + }; + const [initialize] = useOverlayScrollbars({ options: defaultOptions }); + + useEffect(() => { + if (ref.current) initialize(ref.current); + }, [initialize]); + + return ( +
+ {children} +
+ ); +} + +ScrollArea.displayName = "ScrollArea"; + +export { ScrollArea }; diff --git a/packages/design-system/src/ScrollArea/ScrollArea.types.ts b/packages/design-system/src/ScrollArea/ScrollArea.types.ts new file mode 100644 index 000000000..560b675d8 --- /dev/null +++ b/packages/design-system/src/ScrollArea/ScrollArea.types.ts @@ -0,0 +1,9 @@ +import type { UseOverlayScrollbarsParams } from "overlayscrollbars-react"; + +import { Sizes } from "__config__/types"; + +// ScrollArea props +export interface ScrollAreaProps extends React.HTMLAttributes { + size?: Extract; + options?: UseOverlayScrollbarsParams["options"]; +} diff --git a/packages/design-system/src/ScrollArea/index.ts b/packages/design-system/src/ScrollArea/index.ts new file mode 100644 index 000000000..755a2e005 --- /dev/null +++ b/packages/design-system/src/ScrollArea/index.ts @@ -0,0 +1,2 @@ +export * from "./ScrollArea"; +export * from "./ScrollArea.types"; diff --git a/packages/design-system/src/ScrollArea/styles.css b/packages/design-system/src/ScrollArea/styles.css new file mode 100644 index 000000000..bb80bd8fa --- /dev/null +++ b/packages/design-system/src/ScrollArea/styles.css @@ -0,0 +1,17 @@ +.ads-v2-scroll-theme { + --os-size: 8px !important; + --os-handle-border-radius: 4px !important; + --os-handle-bg: var(--ads-v2-color-bg-emphasis-plus) !important; +} + +.scroll-sm .ads-v2-scroll-theme{ + --os-size: 4px !important; +} + +.os-scrollbar-horizontal { + bottom: 2px !important; +} + +.os-scrollbar-vertical { + right: 2px !important; +} \ No newline at end of file diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 440469630..173d11907 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -22,6 +22,7 @@ export * from "./Modal"; export * from "./NumberInput"; export * from "./Popover"; export * from "./Radio"; +export * from "./ScrollArea"; export * from "./SearchInput"; export * from "./SegmentedControl"; export * from "./Select"; diff --git a/yarn.lock b/yarn.lock index e493ae090..83b12707e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16251,6 +16251,16 @@ outdent@^0.5.0: resolved "https://registry.npmjs.org/outdent/-/outdent-0.5.0.tgz" integrity sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q== +overlayscrollbars-react@^0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/overlayscrollbars-react/-/overlayscrollbars-react-0.5.6.tgz#e9779f9fc2c1a3288570a45c83f8e42518bfb8c1" + integrity sha512-E5To04bL5brn9GVCZ36SnfGanxa2I2MDkWoa4Cjo5wol7l+diAgi4DBc983V7l2nOk/OLJ6Feg4kySspQEGDBw== + +overlayscrollbars@^2.7.2: + version "2.7.2" + resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-2.7.2.tgz#c25186649cb7d131d897e36ed42bee31168b48cf" + integrity sha512-wc5RWeObKo6aIYG5pDohoiWh2nMX1LZ1/9nJpaicM7tGgyXupf6gvbaodnPg8mIfxg0Q+BnPbt4Q5qiL1isb0A== + p-all@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/p-all/-/p-all-2.1.0.tgz"