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

[gamegee]

DLS-476

• Adapt docs, and simplify it
• Add utility to extract slottable
• Change simple API to composite API:

Results

Implementation API

BEFORE

<Tile
  title="Item with Trailing Content"
  description="Additional information"
  leadingContent={<Spot appearance="icon" icon={Settings} />}
  trailingContent={<Tag label="New" appearance="base" />}
  secondaryAction={(
    <InteractiveIcon
      iconType="stroked"
      aria-label="More actions"
      onClick={() => console.log('secondary action clicked')}
    >
      <MoreVertical />
    </InteractiveIcon>
  )}
  className="max-w-256"
/>

AFTER Web

 <Tile className='max-w-160'>
   <TileSecondaryAction
     icon={MoreVertical}
     onClick={() => console.log('secondary action clicked')}
   />
   <TileSpot appearance='icon' icon={User} />
   <TileContent>
     <TileTitle>User</TileTitle>
     <TileDescription>With description</TileDescription>
   </TileContent>
   <Text className='text-success body-2-semi-bold'>
     +7.87%
   </Text>
 </Tile>

AFTER RN

<Tile
  lx={{ maxWidth: 's160' }}
  onLongPress={() => alert('Long press - secondary action triggered!')}
>
  <TileSpot appearance='icon' icon={Settings} />
  <TileContent>
    <TileTitle>Long Press Me</TileTitle>
    <TileDescription>Try long pressing this tile</TileDescription>
  </TileContent>
  <Text typography='body2SemiBold' lx={{ color: 'success' }}>
    +7.87%
  </Text>
</Tile>

Fix the focus outline

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
ldls	Ready	Preview, Comment	Jan 7, 2026 3:07pm
ldls-react-native	Ready	Preview, Comment	Jan 7, 2026 3:07pm

[Copilot]

Pull request overview

This PR refactors the Tile component from a prop-based API to a composite component pattern for both React and React Native implementations. The refactor introduces TileSpot, TileContent, TileTitle, and TileDescription sub-components (plus TileSecondaryAction for React) that compose together, providing greater flexibility for customization.

Key changes:

• Converts from prop-based API (title, description, leadingContent, trailingContent) to a children-based composite pattern
• Introduces a context provider to propagate the disabled state to all sub-components
• Updates padding from uniform s8 to horizontal s8 and vertical s12 for improved visual balance

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
libs/ui-rnative/src/lib/Components/Tile/types.ts	Removes prop-based types, adds composite sub-component types and context type
libs/ui-rnative/src/lib/Components/Tile/index.ts	Updates exports to include all new sub-components
libs/ui-rnative/src/lib/Components/Tile/Tile.tsx	Refactors to composite pattern with context-based state sharing
libs/ui-rnative/src/lib/Components/Tile/Tile.test.tsx	Updates tests to use composite API, adds context propagation tests
libs/ui-rnative/src/lib/Components/Tile/Tile.stories.tsx	Updates all stories to demonstrate composite pattern usage
libs/ui-rnative/src/lib/Components/Tile/Tile.mdx	Updates documentation to reflect composite API
libs/ui-rnative/src/lib/Components/Tile/Tile.figma.tsx	Updates Figma integration to use composite components
libs/ui-react/src/lib/Components/Tile/types.ts	Removes prop-based types, adds composite sub-component types including TileSecondaryAction
libs/ui-react/src/lib/Components/Tile/index.ts	Updates exports to include all new sub-components
libs/ui-react/src/lib/Components/Tile/Tile.tsx	Refactors to composite pattern, adds TileSecondaryAction for hover actions
libs/ui-react/src/lib/Components/Tile/Tile.test.tsx	Comprehensive test updates for composite API and context propagation
libs/ui-react/src/lib/Components/Tile/Tile.stories.tsx	Updates all stories to demonstrate composite pattern including secondary actions
libs/ui-react/src/lib/Components/Tile/Tile.mdx	Updates documentation with advanced patterns and examples
libs/ui-react/src/lib/Components/Tile/Tile.figma.tsx	Updates Figma integration to use composite components

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.