diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 0e9cc0dc42a4..ea379c9ae697 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -73,12 +73,11 @@ "devDependencies": { "@chromaui/addon-visual-tests": "^0.0.77", "@popperjs/core": "^2.6.0", + "@radix-ui/react-scroll-area": "^1.0.5", "@storybook/icons": "^1.1.6", "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", - "overlayscrollbars": "2.2.1", - "overlayscrollbars-react": "^0.5.0", "polished": "^4.2.2", "prettier": "^2.8.0", "react-popper-tooltip": "^4.4.2", diff --git a/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx deleted file mode 100644 index a7650a8f922f..000000000000 --- a/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx +++ /dev/null @@ -1,497 +0,0 @@ -import React from 'react'; -import { Global } from '@storybook/theming'; -import type { Theme, CSSObject } from '@storybook/theming'; - -export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => - ({ - '.os-size-observer,\n.os-size-observer-listener': { - direction: 'inherit', - pointerEvents: 'none', - overflow: 'hidden', - visibility: 'hidden', - boxSizing: 'border-box', - }, - '.os-size-observer,\n.os-size-observer-listener,\n.os-size-observer-listener-item,\n.os-size-observer-listener-item-final': - { - writingMode: 'horizontal-tb', - position: 'absolute', - left: '0', - top: '0', - }, - '.os-size-observer': { - zIndex: -1, - contain: 'strict', - display: 'flex', - flexDirection: 'row', - flexWrap: 'nowrap', - padding: 'inherit', - border: 'inherit', - boxSizing: 'inherit', - margin: '-133px', - top: '0', - right: '0', - bottom: '0', - left: '0', - transform: 'scale(0.1)', - }, - '.os-size-observer::before': { - content: '""', - flex: 'none', - boxSizing: 'inherit', - padding: '10px', - width: '10px', - height: '10px', - }, - '.os-size-observer-appear': { - animation: 'os-size-observer-appear-animation 1ms forwards', - }, - '.os-size-observer-listener': { - boxSizing: 'border-box', - position: 'relative', - flex: 'auto', - padding: 'inherit', - border: 'inherit', - margin: '-133px', - transform: 'scale(10)', - }, - '.os-size-observer-listener.ltr': { marginRight: '-266px', marginLeft: '0' }, - '.os-size-observer-listener.rtl': { marginLeft: '-266px', marginRight: '0' }, - '.os-size-observer-listener:empty::before': { - content: '""', - width: '100%', - height: '100%', - }, - '.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item': - { - display: 'block', - position: 'relative', - padding: 'inherit', - border: 'inherit', - boxSizing: 'content-box', - flex: 'auto', - }, - '.os-size-observer-listener-scroll': { - boxSizing: 'border-box', - display: 'flex', - }, - '.os-size-observer-listener-item': { - right: '0', - bottom: '0', - overflow: 'hidden', - direction: 'ltr', - flex: 'none', - }, - '.os-size-observer-listener-item-final': { transition: 'none' }, - '@keyframes os-size-observer-appear-animation': { - from: { cursor: 'auto' }, - to: { cursor: 'none' }, - }, - '.os-trinsic-observer': { - flex: 'none', - boxSizing: 'border-box', - position: 'relative', - maxWidth: '0px', - maxHeight: '1px', - padding: '0', - margin: '0', - border: 'none', - overflow: 'hidden', - zIndex: -1, - height: '0', - top: 'calc(100% + 1px)', - contain: 'strict', - }, - '.os-trinsic-observer:not(:empty)': { - height: 'calc(100% + 1px)', - top: '-1px', - }, - '.os-trinsic-observer:not(:empty) > .os-size-observer': { - width: '1000%', - height: '1000%', - minHeight: '1px', - minWidth: '1px', - }, - '.os-environment': { - '--os-custom-prop': '-1', - position: 'fixed', - opacity: 0, - visibility: 'hidden', - overflow: 'scroll', - height: '200px', - width: '200px', - zIndex: 'var(--os-custom-prop)', - }, - '.os-environment div': { width: '200%', height: '200%', margin: '10px 0' }, - '.os-environment.os-environment-flexbox-glue': { - display: 'flex', - flexDirection: 'row', - flexWrap: 'nowrap', - height: 'auto', - width: 'auto', - minHeight: '200px', - minWidth: '200px', - }, - '.os-environment.os-environment-flexbox-glue div': { - flex: 'auto', - width: 'auto', - height: 'auto', - maxHeight: '100%', - maxWidth: '100%', - margin: '0', - }, - '.os-environment.os-environment-flexbox-glue-max': { maxHeight: '200px' }, - '.os-environment.os-environment-flexbox-glue-max div': { - overflow: 'visible', - }, - '.os-environment.os-environment-flexbox-glue-max div::before': { - content: '""', - display: 'block', - height: '999px', - width: '999px', - }, - '.os-environment,\n[data-overlayscrollbars-viewport]': { - msOverflowStyle: 'scrollbar !important', - }, - '[data-overlayscrollbars-initialize],\n[data-overlayscrollbars~=scrollbarHidden],\n[data-overlayscrollbars-viewport~=scrollbarHidden],\n.os-scrollbar-hidden.os-environment': - { - scrollbarWidth: 'none !important', - }, - '[data-overlayscrollbars-initialize]::-webkit-scrollbar,\n[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar-corner': - { - WebkitAppearance: 'none !important', - appearance: 'none !important', - display: 'none !important', - width: '0 !important', - height: '0 !important', - }, - '[data-overlayscrollbars-initialize]': { overflow: 'auto' }, - 'html[data-overlayscrollbars],\nhtml.os-scrollbar-hidden,\nhtml.os-scrollbar-hidden > body': { - boxSizing: 'border-box', - margin: '0', - width: '100%', - height: '100%', - }, - 'html[data-overlayscrollbars] > body': { overflow: 'visible' }, - '[data-overlayscrollbars~=host]': { position: 'relative' }, - '[data-overlayscrollbars~=host],\n[data-overlayscrollbars-padding]': { - display: 'flex', - flexDirection: 'row !important', - flexWrap: 'nowrap !important', - }, - '[data-overlayscrollbars-padding],\n[data-overlayscrollbars-viewport]': { - boxSizing: 'inherit', - position: 'relative', - flex: 'auto !important', - height: 'auto', - width: '100%', - padding: '0', - margin: '0', - border: 'none', - zIndex: 0, - overflow: 'hidden', - }, - '[data-overlayscrollbars-viewport]': { '--os-vaw': '0', '--os-vah': '0' }, - '[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before': { - content: '""', - position: 'absolute', - pointerEvents: 'none', - zIndex: -1, - minWidth: '1px', - minHeight: '1px', - width: 'var(--os-vaw)', - height: 'var(--os-vah)', - }, - '[data-overlayscrollbars~=host],\n[data-overlayscrollbars~=viewport]': { - overflow: 'hidden', - }, - '[data-overlayscrollbars~=overflowVisible],\n[data-overlayscrollbars-padding~=overflowVisible],\n[data-overlayscrollbars-viewport~=overflowVisible]': - { - overflow: 'visible', - }, - '[data-overlayscrollbars-overflow-x=hidden]': { - overflowX: 'hidden', - overflowY: 'hidden', - }, - '[data-overlayscrollbars-overflow-x=scroll]': { overflowX: 'scroll' }, - '[data-overlayscrollbars-overflow-y=scroll]': { overflowY: 'scroll' }, - '[data-overlayscrollbars~=scrollbarPressed],\n[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]': - { - scrollBehavior: 'auto !important', - }, - '[data-overlayscrollbars-content]': { boxSizing: 'inherit' }, - '[data-overlayscrollbars-grid],\n[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]': - { - display: 'grid', - gridTemplate: '1fr/1fr', - }, - '[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport]': - { - height: 'auto !important', - width: 'auto !important', - }, - '.os-scrollbar': { - contain: ['size layout', 'size layout style'], - transition: - 'opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s', - pointerEvents: 'none', - position: 'absolute', - opacity: 0, - visibility: 'hidden', - '--os-size': '0', - '--os-padding-perpendicular': '0', - '--os-padding-axis': '0', - '--os-track-border-radius': '0', - '--os-track-bg': 'none', - '--os-track-bg-hover': 'none', - '--os-track-bg-active': 'none', - '--os-track-border': 'none', - '--os-track-border-hover': 'none', - '--os-track-border-active': 'none', - '--os-handle-border-radius': '0', - '--os-handle-bg': 'none', - '--os-handle-bg-hover': 'none', - '--os-handle-bg-active': 'none', - '--os-handle-border': 'none', - '--os-handle-border-hover': 'none', - '--os-handle-border-active': 'none', - '--os-handle-min-size': '33px', - '--os-handle-max-size': 'none', - '--os-handle-perpendicular-size': '100%', - '--os-handle-perpendicular-size-hover': '100%', - '--os-handle-perpendicular-size-active': '100%', - '--os-handle-interactive-area-offset': '0', - }, - 'body > .os-scrollbar': { position: 'fixed', zIndex: 99999 }, - '.os-scrollbar-transitionless': { transition: 'none' }, - '.os-scrollbar-track': { - position: 'relative', - direction: 'ltr !important', - padding: '0 !important', - border: 'none !important', - }, - '.os-scrollbar-handle': { position: 'absolute' }, - '.os-scrollbar-track,\n.os-scrollbar-handle': { - pointerEvents: 'none', - width: '100%', - height: '100%', - }, - '.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,\n.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle': - { - pointerEvents: 'auto', - touchAction: 'none', - }, - '.os-scrollbar-horizontal': { - bottom: '0', - left: '0', - padding: 'var(--os-padding-perpendicular) var(--os-padding-axis)', - right: 'var(--os-size)', - height: 'var(--os-size)', - }, - '.os-scrollbar-vertical': { - top: '0', - right: '0', - padding: 'var(--os-padding-axis) var(--os-padding-perpendicular)', - bottom: 'var(--os-size)', - width: 'var(--os-size)', - }, - '.os-scrollbar-rtl.os-scrollbar-horizontal': { right: '0' }, - '.os-scrollbar-rtl.os-scrollbar-vertical': { right: 'auto', left: '0' }, - '.os-scrollbar-visible,\n.os-scrollbar-interaction.os-scrollbar-visible': { - opacity: 1, - visibility: 'visible', - }, - '.os-scrollbar-auto-hidden': { opacity: 0, visibility: 'hidden' }, - '.os-scrollbar-unusable,\n.os-scrollbar-unusable *,\n.os-scrollbar-wheel,\n.os-scrollbar-wheel *': - { - pointerEvents: 'none !important', - }, - '.os-scrollbar-unusable .os-scrollbar-handle': { opacity: '0 !important' }, - '.os-scrollbar-horizontal .os-scrollbar-handle': { - bottom: '0', - minWidth: 'var(--os-handle-min-size)', - maxWidth: 'var(--os-handle-max-size)', - height: 'var(--os-handle-perpendicular-size)', - transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s', - }, - '.os-scrollbar-vertical .os-scrollbar-handle': { - right: '0', - minHeight: 'var(--os-handle-min-size)', - maxHeight: 'var(--os-handle-max-size)', - width: 'var(--os-handle-perpendicular-size)', - transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s', - }, - '.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle': { - right: 'auto', - left: '0', - }, - '.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl': - { - left: '0', - right: '0', - }, - '.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl': - { - top: '0', - bottom: '0', - }, - '.os-scrollbar .os-scrollbar-track': { - border: 'var(--os-track-border)', - borderRadius: 'var(--os-track-border-radius)', - background: 'var(--os-track-bg)', - transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s', - }, - '.os-scrollbar .os-scrollbar-track:hover': { - border: 'var(--os-track-border-hover)', - background: 'var(--os-track-bg-hover)', - }, - '.os-scrollbar .os-scrollbar-track:active': { - border: 'var(--os-track-border-active)', - background: 'var(--os-track-bg-active)', - }, - '.os-scrollbar .os-scrollbar-handle': { - border: 'var(--os-handle-border)', - borderRadius: 'var(--os-handle-border-radius)', - background: theme.textMutedColor, - opacity: 0.5, - }, - '.os-scrollbar .os-scrollbar-handle:before': { - content: '""', - position: 'absolute', - left: '0', - right: '0', - top: '0', - bottom: '0', - display: 'block', - }, - '.os-scrollbar .os-scrollbar-handle:hover': { - border: 'var(--os-handle-border-hover)', - opacity: 0.6, - }, - '.os-scrollbar .os-scrollbar-handle:active': { - border: 'var(--os-handle-border-active)', - background: 'var(--os-handle-bg-active)', - }, - '.os-scrollbar-horizontal.os-scrollbar-rtl': { - left: 'var(--os-size)', - right: '0', - }, - '.os-scrollbar-horizontal .os-scrollbar-handle:before': { - top: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', - bottom: 'calc(var(--os-padding-perpendicular) * -1)', - }, - '.os-scrollbar-horizontal:hover .os-scrollbar-handle': { - height: 'var(--os-handle-perpendicular-size-hover)', - }, - '.os-scrollbar-horizontal:active .os-scrollbar-handle': { - height: 'var(--os-handle-perpendicular-size-active)', - }, - '.os-scrollbar-vertical .os-scrollbar-handle:before': { - left: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', - right: 'calc(var(--os-padding-perpendicular) * -1)', - }, - '.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': { - right: - 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', - left: 'calc(var(--os-padding-perpendicular) * -1)', - }, - '.os-scrollbar-vertical:hover .os-scrollbar-handle': { - width: 'var(--os-handle-perpendicular-size-hover)', - }, - '.os-scrollbar-vertical:active .os-scrollbar-handle': { - width: 'var(--os-handle-perpendicular-size-active)', - }, - '[data-overlayscrollbars~=updating] > .os-scrollbar,\n.os-theme-none.os-scrollbar': { - display: 'none !important', - }, - '.os-theme-dark,\n.os-theme-light': { - boxSizing: 'border-box', - '--os-size': '10px', - '--os-padding-perpendicular': '2px', - '--os-padding-axis': '2px', - '--os-track-border-radius': '10px', - '--os-handle-interactive-area-offset': '4px', - '--os-handle-border-radius': '10px', - }, - '.os-theme-dark': { - '--os-handle-bg': 'rgba(0, 0, 0, 0.44)', - '--os-handle-bg-hover': 'rgba(0, 0, 0, 0.55)', - '--os-handle-bg-active': 'rgba(0, 0, 0, 0.66)', - }, - '.os-theme-light': { - '--os-handle-bg': 'rgba(255, 255, 255, 0.44)', - '--os-handle-bg-hover': 'rgba(255, 255, 255, 0.55)', - '--os-handle-bg-active': 'rgba(255, 255, 255, 0.66)', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle': - { - borderRadius: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track': - { - borderRadius: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal': - { - padding: '2px 2px', - right: '10px', - height: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl': - { - left: '10px', - right: '0', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle': - { - minWidth: '33px', - maxWidth: 'none', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before': - { - top: 'calc((\n 2px + 4px\n ) * -1)', - bottom: 'calc(2px * -1)', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical': - { - padding: '2px 2px', - bottom: '10px', - width: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle': - { - minHeight: '33px', - maxHeight: 'none', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before': - { - left: 'calc((\n 2px + 4px\n ) * -1)', - right: 'calc(2px * -1)', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': - { - right: 'calc((\n 2px + 4px\n ) * -1)', - left: 'calc(2px * -1)', - }, - '.os-no-css-vars.os-theme-dark .os-scrollbar-handle': { - background: 'rgba(0, 0, 0, 0.44)', - }, - '.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle': { - background: 'rgba(0, 0, 0, 0.55)', - }, - '.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle': { - background: 'rgba(0, 0, 0, 0.66)', - }, - '.os-no-css-vars.os-theme-light .os-scrollbar-handle': { - background: 'rgba(255, 255, 255, 0.44)', - }, - '.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle': { - background: 'rgba(255, 255, 255, 0.55)', - }, - '.os-no-css-vars.os-theme-light:active .os-scrollbar-handle': { - background: 'rgba(255, 255, 255, 0.66)', - }, - } as any as CSSObject); - -const GlobalScrollAreaStyles = () => ; - -export default GlobalScrollAreaStyles; diff --git a/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx deleted file mode 100644 index c5043032448c..000000000000 --- a/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; - -export const OverlayScrollbars = OverlayScrollbarsComponent; - -export default OverlayScrollbarsComponent; diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx index e4a7a09e7dc2..59eabd84925d 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx @@ -84,3 +84,29 @@ export const WithOuterBorder = () => ( /> ); + +export const CustomOffset = () => ( + + {list((i) => ( + + {list((ii) => ( + {ii * i} + ))} +
+ + ))} + +); + +export const CustomSize = () => ( + + {list((i) => ( + + {list((ii) => ( + {ii * i} + ))} +
+ + ))} + +); diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index 51a0f5786679..3bb523dddcda 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -1,34 +1,112 @@ import type { FC } from 'react'; -import React, { lazy, Suspense } from 'react'; +import React from 'react'; import { styled } from '@storybook/theming'; - -const GlobalScrollAreaStyles = lazy(() => import('./GlobalScrollAreaStyles')); -const OverlayScrollbars = lazy(() => import('./OverlayScrollbars')); - -const Scroller: FC = ({ horizontal, vertical, ...props }) => ( - }> - - - -); +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; export interface ScrollAreaProps { children?: React.ReactNode; horizontal?: boolean; vertical?: boolean; className?: string; + offset?: number; + scrollbarSize?: number; } -export const ScrollArea: FC = styled(Scroller)( - ({ vertical }) => (!vertical ? { overflowY: 'hidden' } : { overflowY: 'auto', height: '100%' }), - ({ horizontal }) => (!horizontal ? { overflowX: 'hidden' } : { overflowX: 'auto', width: '100%' }) +const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarsize: number; offset: number }>( + ({ scrollbarsize, offset }) => ({ + width: '100%', + height: '100%', + overflow: 'hidden', + '--scrollbar-size': `${scrollbarsize + offset}px`, + '--radix-scroll-area-thumb-width': `${scrollbarsize}px`, + }) ); -ScrollArea.defaultProps = { - horizontal: false, - vertical: false, -}; +const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)({ + width: '100%', + height: '100%', +}); + +const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{ + offset: number; + horizontal: string; + vertical: string; +}>(({ offset, horizontal, vertical }) => ({ + display: 'flex', + userSelect: 'none', // ensures no selection + touchAction: 'none', // disable browser handling of all panning and zooming gestures on touch devices + background: 'transparent', + transition: 'all 0.2s ease-out', + borderRadius: 'var(--scrollbar-size)', + + '&[data-orientation="vertical"]': { + width: 'var(--scrollbar-size)', + paddingRight: offset, + marginTop: offset, + marginBottom: horizontal === 'true' && vertical === 'true' ? 0 : offset, + }, + '&[data-orientation="horizontal"]': { + flexDirection: 'column', + height: 'var(--scrollbar-size)', + paddingBottom: offset, + marginLeft: offset, + marginRight: horizontal === 'true' && vertical === 'true' ? 0 : offset, + }, +})); + +const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({ + flex: 1, + background: theme.textMutedColor, + opacity: 0.5, + borderRadius: `var(--scrollbar-size)`, + position: 'relative', + transition: 'opacity 0.2s ease-out', + + '&:hover': { opacity: 0.8 }, + + /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */ + '::before': { + content: '""', + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%,-50%)', + width: '100%', + height: '100%', + minWidth: 44, + minHeight: 44, + }, +})); + +export const ScrollArea: FC = ({ + children, + horizontal = false, + vertical = false, + offset = 2, + scrollbarSize = 6, +}) => ( + + {children} + {horizontal && ( + + + + )} + {vertical && ( + + + + )} + {horizontal && vertical && } + +); diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index d9d03217db38..c8c71ae659cd 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -85,6 +85,8 @@ const Input = styled.input(({ theme }) => ({ fontFamily: 'inherit', transition: 'all 150ms', color: theme.color.defaultText, + width: '100%', + '&:focus, &:active': { outline: 0, borderColor: theme.color.secondary, diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 23aacc19f099..072603211c21 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -53,15 +53,6 @@ const Bottom = styled.div(({ theme }) => ({ }, })); -const CustomScrollArea = styled(ScrollArea)({ - '&&&&& .os-scrollbar-handle:before': { - left: -12, - }, - '&&&&& .os-scrollbar-vertical': { - right: 5, - }, -}); - const Swap = React.memo(function Swap({ children, condition, @@ -130,7 +121,7 @@ export const Sidebar = React.memo(function Sidebar({ return ( - + - + {isLoading ? null : ( {bottom.map(({ id, render: Render }) => ( diff --git a/code/yarn.lock b/code/yarn.lock index 3ec46c6397a8..3c200a7a8a38 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5234,6 +5234,27 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-presence@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-presence@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 90780618b265fe794a8f1ddaa5bfd3c71a1127fa79330a14d32722e6265b44452a9dd36efe4e769129d33e57f979f6b8713e2cbf2e2755326aa3b0f337185b6e + languageName: node + linkType: hard + "@radix-ui/react-primitive@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-primitive@npm:1.0.3" @@ -5282,6 +5303,34 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-scroll-area@npm:^1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-scroll-area@npm:1.0.5" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/number": 1.0.1 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-direction": 1.0.1 + "@radix-ui/react-presence": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: a08818aeeb15920a02e708699a8bdc85c26eab0579ab741129b464a799b5d9a04f81810a2d200f1cf4aef03452067770e87b0f81593a689350fcd7e51819e4cb + languageName: node + linkType: hard + "@radix-ui/react-select@npm:^1.2.2": version: 1.2.2 resolution: "@radix-ui/react-select@npm:1.2.2" @@ -6744,6 +6793,7 @@ __metadata: dependencies: "@chromaui/addon-visual-tests": ^0.0.77 "@popperjs/core": ^2.6.0 + "@radix-ui/react-scroll-area": ^1.0.5 "@radix-ui/react-select": ^1.2.2 "@radix-ui/react-toolbar": ^1.0.4 "@storybook/client-logger": "workspace:*" @@ -6756,8 +6806,6 @@ __metadata: "@types/util-deprecate": ^1.0.0 css: ^3.0.0 memoizerific: ^1.11.3 - overlayscrollbars: 2.2.1 - overlayscrollbars-react: ^0.5.0 polished: ^4.2.2 prettier: ^2.8.0 react-popper-tooltip: ^4.4.2 @@ -24976,23 +25024,6 @@ __metadata: languageName: node linkType: hard -"overlayscrollbars-react@npm:^0.5.0": - version: 0.5.2 - resolution: "overlayscrollbars-react@npm:0.5.2" - peerDependencies: - overlayscrollbars: ^2.0.0 - react: ">=16.8.0" - checksum: 56e8df609f589cd38c97408d743ebd9112047c60da340c8f121b10418beabd1b5411396f4c1fd27b46dd0e663e7675ae72df1c531feb1e3f6bf1342dbafa21ef - languageName: node - linkType: hard - -"overlayscrollbars@npm:2.2.1": - version: 2.2.1 - resolution: "overlayscrollbars@npm:2.2.1" - checksum: 718dd563ee17a8c92a54f0b67989806edadd5b999e36d2ab322e7813b369d1cf0198d7267ca42ca9e879023f0658825e2b050d2845e751d876285d1d3549cb5e - languageName: node - linkType: hard - "override-require@npm:^1.1.1": version: 1.1.1 resolution: "override-require@npm:1.1.1"