From 5f7836b9cdd5116d34fc4ac3c42a9453fe4367ae Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 15 Apr 2024 10:09:03 +0000 Subject: [PATCH 1/9] ci(changesets): version packages --- .changeset/six-crews-pay.md | 5 ----- packages/design-system/CHANGELOG.md | 6 ++++++ packages/design-system/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/six-crews-pay.md diff --git a/.changeset/six-crews-pay.md b/.changeset/six-crews-pay.md deleted file mode 100644 index 4f11bb335..000000000 --- a/.changeset/six-crews-pay.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@appsmithorg/design-system": patch ---- - -fix: Updated popover content z-index diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index b1679ae6f..4f37ce9ea 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,11 @@ # @appsmithorg/design-system +## 2.1.38 + +### Patch Changes + +- [#725](https://github.com/appsmithorg/design-system/pull/725) [`f14136ed`](https://github.com/appsmithorg/design-system/commit/f14136edd6dc91f252c4cd7c4fbb95acdc52f393) Thanks [@albinAppsmith](https://github.com/albinAppsmith)! - fix: Updated popover content z-index + ## 2.1.37 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 957dd060a..02421791d 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@appsmithorg/design-system", - "version": "2.1.37", + "version": "2.1.38", "description": "This is the package for the design system that powers the Appsmith platform", "module": "build/index.js", "types": "build/index.d.ts", From a304767daa624cad0ee6eda9616e4ffd75a03453 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Mon, 22 Apr 2024 17:36:29 +0530 Subject: [PATCH 2/9] feat: added scrollbbar component --- packages/design-system/package.json | 2 + .../src/Scrollbar/Scrollbar.stories.tsx | 92 +++++++++++++++++++ .../design-system/src/Scrollbar/Scrollbar.tsx | 32 +++++++ .../src/Scrollbar/Scrollbar.types.ts | 8 ++ packages/design-system/src/Scrollbar/index.ts | 2 + .../design-system/src/Scrollbar/styles.css | 9 ++ packages/design-system/src/index.ts | 1 + yarn.lock | 10 ++ 8 files changed, 156 insertions(+) create mode 100644 packages/design-system/src/Scrollbar/Scrollbar.stories.tsx create mode 100644 packages/design-system/src/Scrollbar/Scrollbar.tsx create mode 100644 packages/design-system/src/Scrollbar/Scrollbar.types.ts create mode 100644 packages/design-system/src/Scrollbar/index.ts create mode 100644 packages/design-system/src/Scrollbar/styles.css 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/Scrollbar/Scrollbar.stories.tsx b/packages/design-system/src/Scrollbar/Scrollbar.stories.tsx new file mode 100644 index 000000000..0ef976b9b --- /dev/null +++ b/packages/design-system/src/Scrollbar/Scrollbar.stories.tsx @@ -0,0 +1,92 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { Scrollbar } from "./Scrollbar"; + +export default { + title: "Design System/Scrollbar", + component: Scrollbar, +} 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/Scrollbar/Scrollbar.tsx b/packages/design-system/src/Scrollbar/Scrollbar.tsx new file mode 100644 index 000000000..5a23765b9 --- /dev/null +++ b/packages/design-system/src/Scrollbar/Scrollbar.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; +import clsx from "classnames"; + +import "overlayscrollbars/overlayscrollbars.css"; +import "./styles.css"; + +import { ScrollbarProps } from "./Scrollbar.types"; + +function Scrollbar({ children, size = "md", ...rest }: ScrollbarProps) { + return ( + + {children} + + ); +} + +Scrollbar.displayName = "Scrollbar"; + +export { Scrollbar }; diff --git a/packages/design-system/src/Scrollbar/Scrollbar.types.ts b/packages/design-system/src/Scrollbar/Scrollbar.types.ts new file mode 100644 index 000000000..ab737b6ee --- /dev/null +++ b/packages/design-system/src/Scrollbar/Scrollbar.types.ts @@ -0,0 +1,8 @@ +import { OverlayScrollbarsComponentProps } from "overlayscrollbars-react"; + +import { Sizes } from "__config__/types"; + +// Scrollbar props +export interface ScrollbarProps extends OverlayScrollbarsComponentProps { + size?: Extract; +} diff --git a/packages/design-system/src/Scrollbar/index.ts b/packages/design-system/src/Scrollbar/index.ts new file mode 100644 index 000000000..30a701d34 --- /dev/null +++ b/packages/design-system/src/Scrollbar/index.ts @@ -0,0 +1,2 @@ +export * from "./Scrollbar"; +export * from "./Scrollbar.types"; diff --git a/packages/design-system/src/Scrollbar/styles.css b/packages/design-system/src/Scrollbar/styles.css new file mode 100644 index 000000000..1c79e6371 --- /dev/null +++ b/packages/design-system/src/Scrollbar/styles.css @@ -0,0 +1,9 @@ +.ads-v2-scroll-theme { + --os-size: 8px; + --os-handle-border-radius: 4px; + --os-handle-bg: var(--ads-v2-color-bg-emphasis-plus); +} + +.scroll-sm .ads-v2-scroll-theme{ + --os-size: 4px; +} \ No newline at end of file diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 440469630..51ae84286 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 "./Scrollbar"; 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" From d40db1a45da6e2a6adba9cf05859f2bb599acd32 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Mon, 22 Apr 2024 17:40:06 +0530 Subject: [PATCH 3/9] Create six-tools-serve.md --- .changeset/six-tools-serve.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/six-tools-serve.md 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 From 9cfc5ff170519acb3b7b2999d1af23f41afb711a Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 23 Apr 2024 00:07:47 +0530 Subject: [PATCH 4/9] fix: renamed component --- .../ScrollArea.stories.tsx} | 12 ++++++------ .../Scrollbar.tsx => ScrollArea/ScrollArea.tsx} | 8 ++++---- .../ScrollArea.types.ts} | 4 ++-- packages/design-system/src/ScrollArea/index.ts | 2 ++ .../src/{Scrollbar => ScrollArea}/styles.css | 0 packages/design-system/src/Scrollbar/index.ts | 2 -- packages/design-system/src/index.ts | 2 +- 7 files changed, 15 insertions(+), 15 deletions(-) rename packages/design-system/src/{Scrollbar/Scrollbar.stories.tsx => ScrollArea/ScrollArea.stories.tsx} (96%) rename packages/design-system/src/{Scrollbar/Scrollbar.tsx => ScrollArea/ScrollArea.tsx} (73%) rename packages/design-system/src/{Scrollbar/Scrollbar.types.ts => ScrollArea/ScrollArea.types.ts} (62%) create mode 100644 packages/design-system/src/ScrollArea/index.ts rename packages/design-system/src/{Scrollbar => ScrollArea}/styles.css (100%) delete mode 100644 packages/design-system/src/Scrollbar/index.ts diff --git a/packages/design-system/src/Scrollbar/Scrollbar.stories.tsx b/packages/design-system/src/ScrollArea/ScrollArea.stories.tsx similarity index 96% rename from packages/design-system/src/Scrollbar/Scrollbar.stories.tsx rename to packages/design-system/src/ScrollArea/ScrollArea.stories.tsx index 0ef976b9b..c7d51bb94 100644 --- a/packages/design-system/src/Scrollbar/Scrollbar.stories.tsx +++ b/packages/design-system/src/ScrollArea/ScrollArea.stories.tsx @@ -1,14 +1,14 @@ import React from "react"; import { Meta, StoryObj } from "@storybook/react"; -import { Scrollbar } from "./Scrollbar"; +import { ScrollArea } from "./ScrollArea"; export default { title: "Design System/Scrollbar", - component: Scrollbar, -} as Meta; + component: ScrollArea, +} as Meta; -type Story = StoryObj; +type Story = StoryObj; export const ScrollbarStory: Story = { name: "Scrollbar", @@ -19,7 +19,7 @@ export const ScrollbarStory: Story = { }, }, 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 @@ -87,6 +87,6 @@ export const ScrollbarStory: Story = { 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/Scrollbar/Scrollbar.tsx b/packages/design-system/src/ScrollArea/ScrollArea.tsx similarity index 73% rename from packages/design-system/src/Scrollbar/Scrollbar.tsx rename to packages/design-system/src/ScrollArea/ScrollArea.tsx index 5a23765b9..27f9f849a 100644 --- a/packages/design-system/src/Scrollbar/Scrollbar.tsx +++ b/packages/design-system/src/ScrollArea/ScrollArea.tsx @@ -5,9 +5,9 @@ import clsx from "classnames"; import "overlayscrollbars/overlayscrollbars.css"; import "./styles.css"; -import { ScrollbarProps } from "./Scrollbar.types"; +import { ScrollAreaProps } from "./ScrollArea.types"; -function Scrollbar({ children, size = "md", ...rest }: ScrollbarProps) { +function ScrollArea({ children, size = "md", ...rest }: ScrollAreaProps) { return ( ; } 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/Scrollbar/styles.css b/packages/design-system/src/ScrollArea/styles.css similarity index 100% rename from packages/design-system/src/Scrollbar/styles.css rename to packages/design-system/src/ScrollArea/styles.css diff --git a/packages/design-system/src/Scrollbar/index.ts b/packages/design-system/src/Scrollbar/index.ts deleted file mode 100644 index 30a701d34..000000000 --- a/packages/design-system/src/Scrollbar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Scrollbar"; -export * from "./Scrollbar.types"; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 51ae84286..173d11907 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -22,7 +22,7 @@ export * from "./Modal"; export * from "./NumberInput"; export * from "./Popover"; export * from "./Radio"; -export * from "./Scrollbar"; +export * from "./ScrollArea"; export * from "./SearchInput"; export * from "./SegmentedControl"; export * from "./Select"; From 50bf4db4bbb0e14965df35c84342e9f8f5c13984 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 23 Apr 2024 00:40:54 +0530 Subject: [PATCH 5/9] fix: style --- packages/design-system/src/ScrollArea/styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/ScrollArea/styles.css b/packages/design-system/src/ScrollArea/styles.css index 1c79e6371..5f5a72531 100644 --- a/packages/design-system/src/ScrollArea/styles.css +++ b/packages/design-system/src/ScrollArea/styles.css @@ -1,9 +1,9 @@ .ads-v2-scroll-theme { - --os-size: 8px; - --os-handle-border-radius: 4px; - --os-handle-bg: var(--ads-v2-color-bg-emphasis-plus); + --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; + --os-size: 4px !important; } \ No newline at end of file From a1fc69a00ecf6fe6636543a583da3516f316a0f5 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 23 Apr 2024 01:00:14 +0530 Subject: [PATCH 6/9] fix: options extraction --- .../src/ScrollArea/ScrollArea.tsx | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/design-system/src/ScrollArea/ScrollArea.tsx b/packages/design-system/src/ScrollArea/ScrollArea.tsx index 27f9f849a..80da52156 100644 --- a/packages/design-system/src/ScrollArea/ScrollArea.tsx +++ b/packages/design-system/src/ScrollArea/ScrollArea.tsx @@ -7,19 +7,28 @@ import "./styles.css"; import { ScrollAreaProps } from "./ScrollArea.types"; -function ScrollArea({ children, size = "md", ...rest }: ScrollAreaProps) { +function ScrollArea({ + children, + options, + size = "md", + ...rest +}: ScrollAreaProps) { + const defaultOptions: Pick = { + options: { + scrollbars: { + theme: "ads-v2-scroll-theme", + autoHide: "scroll", + }, + ...options, + }, + }; return ( {children} From c30b74c71a712d2e43470ddf4393b95d1b030aae Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 23 Apr 2024 01:15:38 +0530 Subject: [PATCH 7/9] fix: passing classname issue fixed --- packages/design-system/src/ScrollArea/ScrollArea.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/design-system/src/ScrollArea/ScrollArea.tsx b/packages/design-system/src/ScrollArea/ScrollArea.tsx index 80da52156..679553e74 100644 --- a/packages/design-system/src/ScrollArea/ScrollArea.tsx +++ b/packages/design-system/src/ScrollArea/ScrollArea.tsx @@ -9,6 +9,7 @@ import { ScrollAreaProps } from "./ScrollArea.types"; function ScrollArea({ children, + className, options, size = "md", ...rest @@ -26,6 +27,7 @@ function ScrollArea({ Date: Thu, 25 Apr 2024 01:52:16 +0530 Subject: [PATCH 8/9] fiex: changed scrollbar implementation to use hooks --- .../src/ScrollArea/ScrollArea.tsx | 48 ++++++++++--------- .../src/ScrollArea/ScrollArea.types.ts | 5 +- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/packages/design-system/src/ScrollArea/ScrollArea.tsx b/packages/design-system/src/ScrollArea/ScrollArea.tsx index 679553e74..14edff7bc 100644 --- a/packages/design-system/src/ScrollArea/ScrollArea.tsx +++ b/packages/design-system/src/ScrollArea/ScrollArea.tsx @@ -1,5 +1,6 @@ -import React from "react"; -import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; +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"; @@ -7,34 +8,35 @@ import "./styles.css"; import { ScrollAreaProps } from "./ScrollArea.types"; -function ScrollArea({ - children, - className, - options, - size = "md", - ...rest -}: ScrollAreaProps) { - const defaultOptions: Pick = { - options: { - scrollbars: { - theme: "ads-v2-scroll-theme", - autoHide: "scroll", - }, - ...options, +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} - + ); } diff --git a/packages/design-system/src/ScrollArea/ScrollArea.types.ts b/packages/design-system/src/ScrollArea/ScrollArea.types.ts index 6dbb7b765..560b675d8 100644 --- a/packages/design-system/src/ScrollArea/ScrollArea.types.ts +++ b/packages/design-system/src/ScrollArea/ScrollArea.types.ts @@ -1,8 +1,9 @@ -import { OverlayScrollbarsComponentProps } from "overlayscrollbars-react"; +import type { UseOverlayScrollbarsParams } from "overlayscrollbars-react"; import { Sizes } from "__config__/types"; // ScrollArea props -export interface ScrollAreaProps extends OverlayScrollbarsComponentProps { +export interface ScrollAreaProps extends React.HTMLAttributes { size?: Extract; + options?: UseOverlayScrollbarsParams["options"]; } From 89e4b4e913461382e1adb091c4a55f45da4fafc6 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Thu, 25 Apr 2024 02:08:39 +0530 Subject: [PATCH 9/9] fix: added space between scroll thumb and border --- packages/design-system/src/ScrollArea/styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/design-system/src/ScrollArea/styles.css b/packages/design-system/src/ScrollArea/styles.css index 5f5a72531..bb80bd8fa 100644 --- a/packages/design-system/src/ScrollArea/styles.css +++ b/packages/design-system/src/ScrollArea/styles.css @@ -6,4 +6,12 @@ .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