feat(vara-ui): add ScrollArea component (#1713)

utils/vara-ui/src/components/index-deprecated.ts

@@ -6,6 +6,8 @@ import { Checkbox, CheckboxProps, checkboxStyles } from './checkbox';
 import { Radio, RadioProps, radioStyles } from './radio';
 import { Alert, AlertProps, alertStyles } from './alert';
 import { Modal, ModalProps, modalStyles } from './modal';
+import { LabelContainer, LabelContainerProps, labelContainerStyles } from './label-container';
+import { ScrollArea, ScrollAreaProps, scrollAreaStyles } from './scroll-area';
 
 import '../assets/styles/index-deprecated.css';
 
@@ -26,6 +28,21 @@ export {
   alertStyles,
   Modal,
   modalStyles,
+  LabelContainer,
+  labelContainerStyles,
+  ScrollArea,
+  scrollAreaStyles,
 };
 
-export type { ButtonProps, InputProps, TextareaProps, SelectProps, CheckboxProps, RadioProps, AlertProps, ModalProps };
+export type {
+  ButtonProps,
+  InputProps,
+  TextareaProps,
+  SelectProps,
+  CheckboxProps,
+  RadioProps,
+  AlertProps,
+  ModalProps,
+  LabelContainerProps,
+  ScrollAreaProps,
+};

utils/vara-ui/src/components/index.ts

@@ -7,6 +7,7 @@ import { Radio, RadioProps, radioStyles } from './radio';
 import { Alert, AlertProps, alertStyles } from './alert';
 import { Modal, ModalProps, modalStyles } from './modal';
 import { LabelContainer, LabelContainerProps, labelContainerStyles } from './label-container';
+import { ScrollArea, ScrollAreaProps, scrollAreaStyles } from './scroll-area';
 
 import '../assets/styles/index.css';
 
@@ -29,6 +30,8 @@ export {
   modalStyles,
   LabelContainer,
   labelContainerStyles,
+  ScrollArea,
+  scrollAreaStyles,
 };
 
 export type {
@@ -41,4 +44,5 @@ export type {
   AlertProps,
   ModalProps,
   LabelContainerProps,
+  ScrollAreaProps,
 };

utils/vara-ui/src/components/modal/modal.module.scss

@@ -30,42 +30,6 @@
   }
 }
 
-.customScroll {
-  /* TODO: same as in gear-js/ui  */
-  /* TODO: temp solution specifically for modal,
-  take a closer look to simplebar-react */
-  overflow-y: auto;
-
-  /* firefox */
-  @-moz-document url-prefix() {
-    scrollbar-width: thin;
-    scrollbar-color: #a2a2a2 rgba(0, 0, 0, 0.1);
-  }
-
-  /* chrome */
-  &::-webkit-scrollbar {
-    width: 19px;
-  }
-
-  &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border-style: solid;
-    border-color: transparent;
-  }
-
-  &::-webkit-scrollbar-track {
-    border-width: 0 9px;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-width: 0 8px;
-    background-color: #a2a2a2;
-    border-radius: 1px;
-  }
-}
-
 .overlay {
   position: fixed;
   top: 0;
@@ -100,6 +64,7 @@
 
   width: 100%;
   max-width: var(--max-width);
+  max-height: calc(100vh - 32px * 2);
   padding: 32px 0;
 
   border-radius: 8px;

utils/vara-ui/src/components/modal/modal.tsx

@@ -1,9 +1,10 @@
-import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';
+import { ReactNode, useEffect, useState, MouseEvent } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'clsx';
 
 import CrossSVG from '../../assets/images/cross.svg?react';
 import { Button } from '../button';
+import { ScrollArea } from '../scroll-area';
 import styles from './modal.module.scss';
 
 type Props = {
@@ -16,30 +17,8 @@ type Props = {
   maxWidth?: 'small' | 'medium' | 'large' | (string & NonNullable<unknown>);
 };
 
-// TODO: same as in gear-js/ui
-function useHeight() {
-  const [height, setHeight] = useState(0);
-
-  const ref = useCallback((node: HTMLDivElement | null) => {
-    if (node) setHeight(node.getBoundingClientRect().height);
-  }, []);
-
-  return [height, ref] as const;
-}
-
-function useMaxHeight() {
-  const [modalHeight, modalRef] = useHeight();
-  const [bodyHeight, bodyRef] = useHeight();
-
-  const padding = 32;
-  const bodyStyle = { maxHeight: `calc(100vh - ${modalHeight - bodyHeight + 2 * padding}px)` };
-
-  return { bodyStyle, modalRef, bodyRef };
-}
-
 const Modal = ({ heading, close, children, className, headerAddon, footer, maxWidth = 'small' }: Props) => {
   const [root, setRoot] = useState<HTMLDivElement>();
-  const { bodyStyle, modalRef, bodyRef } = useMaxHeight();
 
   const handleOverlayClick = ({ target, currentTarget }: MouseEvent) => {
     if (target === currentTarget) close();
@@ -62,8 +41,7 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
     <div className={styles.overlay} onClick={handleOverlayClick}>
       <div
         className={cx(styles.modal, !isCustomMaxWidth && styles[maxWidth])}
-        style={isCustomMaxWidth ? { maxWidth } : undefined}
-        ref={modalRef}>
+        style={isCustomMaxWidth ? { maxWidth } : undefined}>
         <header className={styles.header}>
           <div className={styles.headingContainer}>
             <h3 className={styles.heading}>{heading}</h3>
@@ -73,11 +51,7 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
           <Button icon={CrossSVG} color="transparent" onClick={close} className={styles.button} />
         </header>
 
-        {children && (
-          <div className={cx(styles.body, styles.customScroll, className)} style={bodyStyle} ref={bodyRef}>
-            {children}
-          </div>
-        )}
+        {children && <ScrollArea className={cx(styles.body, className)}>{children}</ScrollArea>}
 
         {footer && <footer className={styles.footer}>{footer}</footer>}
       </div>

utils/vara-ui/src/components/scroll-area/index.ts

@@ -0,0 +1,5 @@
+import { ScrollArea, ScrollAreaProps } from './scroll-area';
+import scrollAreaStyles from './scroll-area.module.scss';
+
+export { ScrollArea, scrollAreaStyles };
+export type { ScrollAreaProps };

utils/vara-ui/src/components/scroll-area/scroll-area.module.scss

@@ -0,0 +1,38 @@
+@use '../../utils' as *;
+
+.container {
+  @include lightDark(--thumb-color, #e5e5e7, rgba(255, 255, 255, 0.1));
+
+  overflow: auto;
+
+  /* firefox */
+  @-moz-document url-prefix() {
+    scrollbar-color: var(--thumb-color) transparent;
+    scrollbar-width: thin;
+  }
+
+  /* chrome */
+  &::-webkit-scrollbar {
+    height: 16px;
+    width: 16px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    border: 4px solid transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--thumb-color);
+    border-radius: 8px;
+
+    &:hover {
+      @include lightDark(--thumb-color, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15));
+    }
+  }
+}

utils/vara-ui/src/components/scroll-area/scroll-area.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ScrollArea } from './scroll-area';
+
+type Type = typeof ScrollArea;
+type Story = StoryObj<Type>;
+
+const LONG_TEXT =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc ultricies ultricies. Nullam nec purus nec nunc. Loremipsumdolorsitamet.';
+
+const meta: Meta<Type> = {
+  title: 'ScrollArea',
+  component: () => <ScrollArea style={{ maxWidth: '512px', maxHeight: '128px' }}>{LONG_TEXT}</ScrollArea>,
+  args: {},
+};
+
+const Default: Story = {
+  args: {},
+};
+
+export default meta;
+export { Default };

utils/vara-ui/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,23 @@
+import cx from 'clsx';
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
+
+import styles from './scroll-area.module.scss';
+
+type Props<T extends ElementType> = PropsWithChildren &
+  ComponentPropsWithoutRef<T> & {
+    as?: T;
+    className?: string;
+  };
+
+function ScrollArea<T extends ElementType = 'div'>({ as, children, className, ...attrs }: Props<T>) {
+  const Element = as || 'div';
+
+  return (
+    <Element className={cx(styles.container, className)} {...attrs}>
+      {children}
+    </Element>
+  );
+}
+
+export { ScrollArea };
+export type { Props as ScrollAreaProps };