feat: Added Scrollbar component

.changeset/six-crews-pay.md → .changeset/six-tools-serve.md

@@ -2,4 +2,4 @@
 "@appsmithorg/design-system": patch
 ---
 
-fix: Updated popover content z-index
+feat: Added Scrollbar component

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

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",
@@ -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",

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<typeof ScrollArea>;
+
+type Story = StoryObj<typeof ScrollArea>;
+
+export const ScrollbarStory: Story = {
+  name: "Scrollbar",
+  args: {
+    size: "sm",
+    style: {
+      height: "200px",
+    },
+  },
+  render: (args) => (
+    <ScrollArea {...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).
+    </ScrollArea>
+  ),
+};

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<HTMLDivElement>(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 (
+    <div
+      className={clsx(
+        {
+          "scroll-sm": size === "sm",
+        },
+        className,
+      )}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+ScrollArea.displayName = "ScrollArea";
+
+export { ScrollArea };

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<HTMLDivElement> {
+  size?: Extract<Sizes, "sm" | "md">;
+  options?: UseOverlayScrollbarsParams["options"];
+}

packages/design-system/src/ScrollArea/index.ts

@@ -0,0 +1,2 @@
+export * from "./ScrollArea";
+export * from "./ScrollArea.types";

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;
+}

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";

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"