feat(Dialog): add custom scrollbar styling and new dialog story (#536)

* feat(Dialog): add custom scrollbar styling and new dialog story

* feat(Scrollbar): add new story for scrollbar styles with customizable options

* feat(version-plan): add version plan for custom scrollbar utility and update dependencies

Author: aammami-ledger

.nx/version-plans/version-plan-1772701196529.md

@@ -0,0 +1,6 @@
+---
+'@ledgerhq/lumen-design-core': patch
+'@ledgerhq/lumen-ui-react': patch
+---
+
+feat: add custom scrollbar utility: `scrollbar-custom` and use it in Dialog.

libs/design-core/src/utils/createCustomPlugin.ts

@@ -401,6 +401,30 @@ export function createScrollbarPlugin(): TailwindPlugin {
           display: 'none',
         },
       },
+      '.scrollbar-custom': {
+        'scrollbar-width': 'thin',
+        'scrollbar-color': 'var(--background-muted-strong) transparent',
+        '&::-webkit-scrollbar': {
+          width: 'var(--size-10)',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          'background-color': 'var(--background-muted-strong)',
+          'border-radius': 'var(--border-radius-full)',
+          border: 'var(--size-2) solid transparent',
+          'background-clip': 'padding-box',
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          'background-color': 'var(--background-muted-strong-hover)',
+          border: 'var(--size-2) solid transparent',
+        },
+        '&::-webkit-scrollbar-thumb:active': {
+          'background-color': 'var(--background-muted-strong-hover)',
+          border: 'var(--size-2) solid transparent',
+        },
+      },
     });
   });
 }

libs/ui-react/src/lib/Components/Design-tokens/styles/scrollbar.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SectionHeader } from '../shared';
+
+const meta: Meta = {
+  title: 'Foundations/Styles/Scrollbar',
+};
+
+export default meta;
+type Story = StoryObj;
+
+const PLACEHOLDER_ITEMS = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);
+
+const ScrollableBox = ({
+  title,
+  utilityClass,
+  description,
+}: {
+  title: string;
+  utilityClass: string;
+  description?: string;
+}) => (
+  <div>
+    <div
+      className={`h-224 overflow-y-auto rounded-lg border border-muted-subtle bg-canvas p-16 ${utilityClass}`}
+    >
+      {PLACEHOLDER_ITEMS.map((item) => (
+        <div
+          key={item}
+          className='border-b border-muted-subtle py-12 body-2 text-base'
+        >
+          {item}
+        </div>
+      ))}
+    </div>
+    <div className='mt-8 body-2 text-base'>{title}</div>
+    <div className='mt-4 body-4 text-muted'>
+      <code>{utilityClass}</code> {description}
+    </div>
+  </div>
+);
+
+export const Scrollbar: Story = {
+  render: () => (
+    <div className='p-24'>
+      <SectionHeader
+        title='Scrollbar'
+        description='Tailwind utilities for controlling the scrollbar appearance of scrollable elements.'
+      />
+      <div className='grid grid-cols-1 gap-40 lg:grid-cols-3'>
+        <ScrollableBox
+          title='Default'
+          utilityClass=''
+          description='Browser default scrollbar'
+        />
+        <ScrollableBox title='Custom' utilityClass='scrollbar-custom' />
+        <ScrollableBox title='None' utilityClass='scrollbar-none' />
+      </div>
+    </div>
+  ),
+};

libs/ui-react/src/lib/Components/Dialog/Dialog.stories.tsx

@@ -10,7 +10,7 @@ import {
   ListItemSpot,
   ListItemTitle,
 } from '../ListItem';
-import { SearchInput } from '../SearchInput/SearchInput';
+import { SearchInput } from '../SearchInput';
 import { Spot } from '../Spot';
 import { Tile, TileContent, TileSpot, TileTitle } from '../Tile';
 import {
@@ -600,6 +600,38 @@ export const WithListsContent: Story = {
   },
 };
 
+export const WithScrollbar: Story = {
+  render: () => (
+    <Dialog height='fixed'>
+      <DialogTrigger asChild>
+        <Button appearance='base'>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader
+          appearance='compact'
+          title='Custom Scrollbar'
+          description='Fixed height with styled scrollbar'
+        />
+        <DialogBody scrollbarWidth='auto'>
+          <div className='-mx-8 flex flex-col gap-4'>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <ListItem key={i}>
+                <ListItemLeading>
+                  <ListItemSpot appearance='icon' icon={Chart1} />
+                  <ListItemContent>
+                    <ListItemTitle>Content item</ListItemTitle>
+                    <ListItemDescription>{`item ${i + 1}.`}</ListItemDescription>
+                  </ListItemContent>
+                </ListItemLeading>
+              </ListItem>
+            ))}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
 export const InfoStateVariants: Story = {
   render: () => {
     return (

libs/ui-react/src/lib/Components/Dialog/Dialog.tsx

@@ -235,11 +235,12 @@ export const DialogBody = ({
     <div
       ref={ref}
       data-slot='dialog-body'
-      style={{ scrollbarWidth, ...style }}
+      style={style}
       className={cn(
         '-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24',
         height === 'hug' ? 'basis-auto' : 'basis-0',
         className,
+        scrollbarWidth === 'auto' ? 'scrollbar-custom' : 'scrollbar-none',
       )}
       {...props}
     >