Update roadmap
Cagatay Civici
parent
162ce3f04e
commit
a80b9a2aac
|
|
@ -28,45 +28,54 @@
|
|||
<div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">POC work for new theming.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
|
||||
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
|
||||
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Meter, Drawer, Content for Stepper.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">V4</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Next-Gen version with the new design token based theming.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Layout, Typography, Tab orientations, Navigation Drawer.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Form Library</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Built-in form library with validations.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
|
|
@ -81,17 +90,8 @@
|
|||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Experimental Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, Calendar.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
|
|
@ -100,56 +100,58 @@
|
|||
</div>
|
||||
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
|
||||
<div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 1</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div>
|
||||
<div class="bg-indigo-500 rounded" style="width: 50%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 2</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Build the infrastructure to generate themes from Figma.</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Build a Figma plugin to generate themes from UI Kit.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
|
||||
<div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Interative component viewer to explore tokens and pt sections.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
|
||||
<div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Port the entire Blocks to Tailwind.</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Migrate Blocks to Tailwind CSS.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-orange-500 rounded" style="width: 50%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,7 +165,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
|
||||
<div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
|
||||
|
|
@ -172,20 +173,22 @@
|
|||
<h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-pink-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue