refactor(ui-react): make Tile a composite component - DLS-476

.cursor/rules/structure-rules.mdc

@@ -17,9 +17,9 @@ alwaysApply: true
   - '/index.ts' For barrel that expose public API
 
 # Other file structure
-- Other files should use dash-case
+- Other files should use camelCase
 - Organize code into different file:
-  - '/use-controllable-state' Folder name
-  - '/use-controllable-state.ts' For implementation
-  - '/use-controllable-state.test.ts' For test
+  - '/useControllableState' Folder name
+  - '/useControllableState.ts' For implementation
+  - '/useControllableState.test.ts' For test
   - '/index.ts' For barrel that expose public API

apps/app-sandbox-rnative/src/app/blocks/Tiles.tsx

@@ -1,23 +1,37 @@
-import { Box, Spot, Tag, Tile } from '@ledgerhq/lumen-ui-rnative';
+import {
+  Box,
+  Tile,
+  TileContent,
+  TileDescription,
+  TileSpot,
+  TileTitle,
+} from '@ledgerhq/lumen-ui-rnative';
 import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
 
 export const Tiles = () => {
   return (
     <Box lx={{ width: 'full', alignItems: 'center', gap: 's8' }}>
-      <Tile
-        lx={{ width: 's256' }}
-        title='Tile'
-        description='Tile description'
-        leadingContent={<Spot appearance='icon' icon={Settings} />}
-        trailingContent={<Tag label='Tag' appearance='accent' />}
-      />
-      <Tile
-        lx={{ width: 's256' }}
-        title='Long Title that should truncate appropriately and not be break off'
-        description='lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.'
-        leadingContent={<Spot appearance='icon' icon={Settings} />}
-        trailingContent={<Tag label='Tag' appearance='accent' />}
-      />
+      <Tile>
+        <TileSpot appearance='icon' icon={Settings} />
+        <TileContent>
+          <TileTitle>Tile</TileTitle>
+          <TileDescription>Tile description</TileDescription>
+        </TileContent>
+      </Tile>
+
+      <Tile>
+        <TileSpot appearance='icon' icon={Settings} />
+        <TileContent>
+          <TileTitle>
+            Long Title that should truncate appropriately and not be break off
+          </TileTitle>
+          <TileDescription>
+            lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quisquam, quos.
+          </TileDescription>
+        </TileContent>
+      </Tile>
     </Box>
   );
 };

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

@@ -12,7 +12,7 @@ import {
 } from '../ListItem';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { Spot } from '../Spot';
-import { Tile } from '../Tile';
+import { Tile, TileContent, TileSpot, TileTitle } from '../Tile';
 import {
   Dialog,
   DialogBody,
@@ -535,13 +535,12 @@ export const WithListsContent: Story = {
               <h4 className='heading-4-semi-bold'>Quick Actions</h4>
               <div className='-mx-24 flex gap-8 overflow-x-auto px-24'>
                 {Array.from({ length: 12 }).map((_, i) => (
-                  <Tile
-                    key={i}
-                    appearance='card'
-                    leadingContent={<Spot appearance='icon' icon={Apps} />}
-                    title={`Action ${i + 1}`}
-                    className='min-w-96'
-                  />
+                  <Tile>
+                    <TileSpot appearance='icon' icon={Apps} />
+                    <TileContent>
+                      <TileTitle>Action {i + 1}</TileTitle>
+                    </TileContent>
+                  </Tile>
                 ))}
               </div>
             </div>

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

@@ -19,8 +19,8 @@ const DialogContext = React.createContext<{ height: DialogHeight }>({
 
 const dialogContentVariants = cva(
   [
-    'flex w-400 max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl bg-canvas-sheet pb-24',
-    'fixed left-[50%] top-[50%] z-dialog-content translate-x-[-50%] translate-y-[-50%]',
+    'w-400 bg-canvas-sheet flex max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl pb-24',
+    'z-dialog-content fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]',
     'data-[state=closed]:animate-content-hide data-[state=open]:animate-content-show',
   ],
   {
@@ -140,7 +140,7 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(
         data-slot='dialog-overlay'
         className={cn(
           className,
-          'fixed inset-0 z-dialog-overlay bg-canvas-overlay backdrop-blur-sm data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in',
+          'z-dialog-overlay bg-canvas-overlay data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in fixed inset-0 backdrop-blur-sm',
         )}
         {...props}
       />
@@ -217,13 +217,14 @@ export function DialogContent({
  * </DialogContent>
  */
 export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
-  ({ className, children, ...props }, ref) => {
+  ({ className, children, scrollbarWidth = 'none', style, ...props }, ref) => {
     return (
       <div
         ref={ref}
         data-slot='dialog-body'
+        style={{ scrollbarWidth, ...style }}
         className={cn(
-          '-mb-24 flex min-h-0 grow basis-0 flex-col overflow-y-auto px-24 pb-24',
+          '-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24',
           className,
         )}
         {...props}

libs/ui-react/src/lib/Components/Dialog/types.ts

@@ -136,6 +136,12 @@ export type DialogBodyProps = {
    * Additional custom CSS classes to apply.
    */
   className?: string;
+  /**
+   * The width of the scrollbar
+   * 'none' will keep the same DialogBody width and hide the scrollbar.
+   * @default 'none'
+   */
+  scrollbarWidth?: 'none' | 'auto';
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export type DialogFooterProps = {

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

@@ -32,11 +32,11 @@ export const Base: Story = {
             : 'flex w-full flex-col gap-16'
         }
       >
-        <div className='body-2 text-base'>
+        <div className='text-base body-2'>
           {isVertical ? 'Left content' : 'Content above'}
         </div>
         <Divider {...args} className={isVertical ? 'h-48' : undefined} />
-        <div className='body-2 text-base'>
+        <div className='text-base body-2'>
           {isVertical ? 'Right content' : 'Content below'}
         </div>
       </div>
@@ -59,18 +59,18 @@ export const OrientationShowcase: Story = {
       <div className='flex flex-col gap-8'>
         <span className='text-muted body-3'>Horizontal (default)</span>
         <div className='flex w-full flex-col gap-16'>
-          <div className='body-2 text-base'>Content above</div>
+          <div className='text-base body-2'>Content above</div>
           <Divider orientation='horizontal' />
-          <div className='body-2 text-base'>Content below</div>
+          <div className='text-base body-2'>Content below</div>
         </div>
       </div>
 
       <div className='flex flex-col gap-8'>
         <span className='text-muted body-3'>Vertical</span>
         <div className='flex items-center gap-16'>
-          <div className='body-2 text-base'>Left content</div>
+          <div className='text-base body-2'>Left content</div>
           <Divider orientation='vertical' className='h-48' />
-          <div className='body-2 text-base'>Right content</div>
+          <div className='text-base body-2'>Right content</div>
         </div>
       </div>
     </div>
@@ -92,19 +92,19 @@ export const OrientationShowcase: Story = {
 
 export const InList: Story = {
   render: () => (
-    <div className='max-w-400 border-muted bg-canvas flex w-full flex-col rounded-lg border'>
+    <div className='flex w-full max-w-400 flex-col rounded-lg border border-muted bg-canvas'>
       <div className='flex items-center justify-between p-16'>
-        <span className='body-2 text-base'>Item 1</span>
+        <span className='text-base body-2'>Item 1</span>
         <span className='text-muted body-3'>$100</span>
       </div>
       <Divider />
       <div className='flex items-center justify-between p-16'>
-        <span className='body-2 text-base'>Item 2</span>
+        <span className='text-base body-2'>Item 2</span>
         <span className='text-muted body-3'>$200</span>
       </div>
       <Divider />
       <div className='flex items-center justify-between p-16'>
-        <span className='body-2 text-base'>Item 3</span>
+        <span className='text-base body-2'>Item 3</span>
         <span className='text-muted body-3'>$300</span>
       </div>
     </div>

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

@@ -86,7 +86,7 @@ export const VariantsShowcase: Story = {
     const [selected, setSelected] = useState(false);
 
     return (
-      <div className='max-w-320 flex flex-col gap-4'>
+      <div className='flex max-w-320 flex-col gap-4'>
         <ListItem>
           <ListItemLeading>
             <ListItemSpot appearance='icon' icon={Settings} />
@@ -266,7 +266,7 @@ export const DisabledState: Story = {
     disabled: true,
   },
   render: (args) => (
-    <div className='w-320 flex flex-col gap-4'>
+    <div className='flex w-320 flex-col gap-4'>
       <ListItem {...args}>
         <ListItemLeading>
           <ListItemSpot appearance='icon' icon={Settings} />
@@ -344,7 +344,7 @@ export const DisabledState: Story = {
 
 export const ResponsiveLayout: Story = {
   render: () => (
-    <div className='w-400 border-muted-subtle grid grid-cols-1 gap-4 border p-16'>
+    <div className='grid w-400 grid-cols-1 gap-4 border border-muted-subtle p-16'>
       <div className='text-muted body-4-semi-bold'>Container: 320px wide</div>
       <div>
         <ListItem>

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

@@ -55,9 +55,9 @@ export const ListItem = React.forwardRef<HTMLButtonElement, ListItemProps>(
           type='button'
           disabled={disabled}
           className={cn(
-            'bg-base-transparent flex h-64 w-full cursor-pointer items-center gap-16 rounded-md px-8 py-12 text-base transition-colors',
-            'hover:bg-base-transparent-hover focus-visible:outline-focus active:bg-base-transparent-pressed focus-visible:outline-2',
-            'disabled:bg-base-transparent disabled:text-disabled disabled:cursor-default',
+            'flex h-64 w-full cursor-pointer items-center gap-16 rounded-md bg-base-transparent px-8 py-12 text-base transition-colors',
+            'hover:bg-base-transparent-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-base-transparent-pressed',
+            'disabled:cursor-default disabled:bg-base-transparent disabled:text-disabled',
             className,
           )}
           {...buttonProps}
@@ -126,7 +126,7 @@ export const ListItemTitle = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'body-2-semi-bold w-full truncate',
+        'w-full truncate body-2-semi-bold',
         isInTrailing ? 'justify-end text-end' : 'justify-start text-start',
         className,
       )}
@@ -159,7 +159,7 @@ export const ListItemDescription = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'text-muted body-3 w-full items-center truncate',
+        'w-full items-center truncate text-muted body-3',
         isInTrailing ? 'justify-end text-end' : 'justify-start text-start',
         disabled && 'text-disabled',
         className,

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

@@ -19,7 +19,7 @@ import type {
 } from './types';
 
 const contentStyles = cn(
-  'z-menu min-w-160 bg-muted overflow-hidden rounded-sm p-8',
+  'z-menu min-w-160 overflow-hidden rounded-sm bg-muted p-8',
   'shadow-sm',
   'data-[state=open]:animate-fade-in',
   'data-[state=closed]:animate-fade-out',
@@ -28,14 +28,14 @@ const contentStyles = cn(
 const itemStyles = cn(
   'relative flex cursor-default select-none items-center gap-12',
   'h-44 rounded-sm px-8 outline-none',
-  'body-2-semi-bold text-base',
+  'text-base body-2-semi-bold',
   'transition-colors',
   'focus:bg-base-transparent-hover',
   'active:bg-base-transparent-pressed',
-  'data-[disabled]:text-disabled data-[disabled]:pointer-events-none',
+  'data-[disabled]:pointer-events-none data-[disabled]:text-disabled',
 );
 
-const labelStyles = cn('text-muted body-3-semi-bold px-8 py-4');
+const labelStyles = cn('px-8 py-4 text-muted body-3-semi-bold');
 
 const subTriggerStyles = cn(
   itemStyles,
@@ -91,7 +91,7 @@ const MenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight size={20} className='text-muted ml-auto' />
+    <ChevronRight size={20} className='ml-auto text-muted' />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 MenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;

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

@@ -25,17 +25,17 @@ function SelectGroup({ ...props }: SelectGroupProps) {
 
 const triggerStyles = cn(
   'group relative flex h-48 w-full items-center justify-between gap-8',
-  'bg-muted rounded-sm px-16',
-  'body-2 text-base',
+  'rounded-sm bg-muted px-16',
+  'text-base body-2',
   'hover:bg-muted-hover',
-  'focus:ring-focus transition-colors duration-200 focus:outline-none focus:ring-2',
-  'disabled:text-disabled disabled:cursor-not-allowed',
+  'transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-focus',
+  'disabled:cursor-not-allowed disabled:text-disabled',
 );
 
 const labelStyles = cn(
-  'text-muted pointer-events-none absolute left-16 origin-left transition-all duration-300',
-  'body-4 top-10 -translate-y-4',
-  'group-data-[placeholder]:body-2 group-data-[placeholder]:top-14 group-data-[placeholder]:translate-y-0',
+  'pointer-events-none absolute left-16 origin-left text-muted transition-all duration-300',
+  'top-10 -translate-y-4 body-4',
+  'group-data-[placeholder]:top-14 group-data-[placeholder]:translate-y-0 group-data-[placeholder]:body-2',
   'group-data-[:disabled]:text-disabled disabled:text-disabled group-data-[disabled]:text-disabled group-data-[placeholder][disabled]:text-disabled',
   'max-w-[calc(100%-var(--size-56))] truncate',
 );
@@ -66,7 +66,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Icon asChild>
       <ChevronDown
         size={20}
-        className='text-muted group-data-[disabled]:text-disabled shrink-0'
+        className='shrink-0 text-muted group-data-[disabled]:text-disabled'
       />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
@@ -75,8 +75,8 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const contentStyles = cva(
   [
-    'z-select relative max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden',
-    'bg-muted rounded-sm',
+    'relative z-select max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden',
+    'rounded-sm bg-muted',
     'shadow-md',
     'data-[side=bottom]:animate-slide-in-from-top-8',
     'data-[side=top]:animate-slide-in-from-bottom-8',
@@ -139,20 +139,20 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     data-slot='select-label'
-    className={cn('text-muted body-3-semi-bold mb-4 px-8 pb-0 pt-8', className)}
+    className={cn('mb-4 px-8 pb-0 pt-8 text-muted body-3-semi-bold', className)}
     {...props}
   />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const itemStyles = cn(
-  'bg-base-transparent relative flex w-full cursor-default select-none items-center',
+  'relative flex w-full cursor-default select-none items-center bg-base-transparent',
   'rounded-sm p-8',
-  'body-2 text-base',
+  'text-base body-2',
   'outline-none',
   'focus:bg-base-transparent-hover',
   'active:bg-base-transparent-pressed',
-  'data-[disabled]:text-disabled data-[disabled]:cursor-not-allowed',
+  'data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled',
 );
 
 const SelectItem = React.forwardRef<
@@ -207,7 +207,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot='select-scroll-up-button'
       className={cn(
-        'text-muted flex cursor-default items-center justify-center py-1',
+        'flex cursor-default items-center justify-center py-1 text-muted',
         className,
       )}
       {...props}
@@ -225,7 +225,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot='select-scroll-down-button'
       className={cn(
-        'text-muted flex cursor-default items-center justify-center py-1',
+        'flex cursor-default items-center justify-center py-1 text-muted',
         className,
       )}
       {...props}