Why It’s Discontinued
The decision to discontinue the nv-stack component is based on several factors:
- Flexibility: Tailwind CSS offers a utility-first approach, allowing for more granular control over styling without the need for custom components.
- Consistency: By using Tailwind CSS, we ensure a consistent styling approach across all elements, reducing the need for component-specific styles.
- Maintenance: Reducing the number of custom components simplifies the codebase, making it easier to maintain and update.
Component Migrations
Basic Stack with Fill
<NVStack Fill Gutter="2" Padding="4" Height="200px">
<NVPanel>Panel</NVPanel>
<NVPanel>Panel</NVPanel>
<NVPanel>Panel</NVPanel>
</NVStack>
Nova V2
<div class="flex h-full space-x-2 p-4" style="height:200px">
<div class="h-full">Panel</div>
<div class="h-full">Panel</div>
<div class="h-full">Panel</div>
</div>
Nova V3
Vertical Stack with Fill
<NVStack Fill Vertical Gutter="2" Padding="4">
<NVPanel>Panel</NVPanel>
<NVPanel>Panel</NVPanel>
<NVPanel>Panel</NVPanel>
</NVStack>
Nova V2
<div class="flex flex-col w-full space-y-2 p-4">
<div class="w-full">Panel</div>
<div class="w-full">Panel</div>
<div class="w-full">Panel</div>
</div>
Nova V3
Flex Stack
<NVStack Flex Gutter="2" Padding="4">
<NVPanel>Panel</NVPanel>
<NVPanel>Panel</NVPanel>
<NVPanel>Panel</NVPanel>
</NVStack>
Nova V2
<div class="flex space-x-2 p-4">
<div class="flex-1">Panel</div>
<div class="flex-1">Panel</div>
<div class="flex-1">Panel</div>
</div>
Nova V3
Stack with Lead/Tail Items
<NVStack Gutter="2" Padding="3">
<NVPanel StackItemLead>Panel</NVPanel>
<NVStackItemFlex>
<NVPanel>Panel</NVPanel>
</NVStackItemFlex>
<NVPanel StackItemTail>Panel</NVPanel>
</NVStack>
Nova V2
<div class="flex items-center space-x-2 p-3">
<div class="justify-start">Panel</div>
<div class="flex-1">Panel</div>
<div class="justify-end">Panel</div>
</div>
Nova V3
Property Mapping Table
|
Nova V2 Stack Property |
Tailwind CSS Class |
|---|---|
|
Fill |
h-full (horizontal) or w-full (vertical) |
|
Flex |
flex-1 |
|
Full |
w-full |
|
Vertical |
flex flex-col |
|
Gutter="2" |
space-x-2 (horizontal) or space-y-2 (vertical) |
|
StackItemLead |
justify-start |
|
StackItemTail |
justify-end |
|
StackItemFlex |
flex-1 |
Important Notes
- The Gutter property translates to:
- space-x-{size} for horizontal stacks
- space-y-{size} for vertical stacks
- When using Fill:
- In horizontal stacks, children get h-full
- In vertical stacks, children get w-full
- Stack container always needs flex as base class
- For vertical stacks, always add flex-col to the container
Migration Steps
- Replace all NVStack components with div elements
- Add base flex class to all stack containers
- Convert properties using the mapping table above
- Replace all NVPanel components with appropriate elements
- Test layout and spacing after conversion
This migration guide provides direct mappings from the actual Nova Stack implementation to Tailwind CSS classes. For complex layouts, you may need to combine multiple Tailwind utilities to achieve the exact same behaviour.