RFC: migrate from FuelUI to UI Primitives #1059
pedronauck
started this conversation in
Ideas
Replies: 1 comment
-
Looks good. Don't we have a pagination component that we use on the explorer? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
This RFC proposes the adoption of the newly developed ui-primitives package, specifically designed for the explorer, across our main products: Wallet, Portal, and Bridge. This shift from the existing fuel-ui framework is motivated by the advanced features of the new UI package, which leverages RadixUI Themes and TailwindCSS. Unlike FuelUI, which is built on Stitches and RadixUI Primitives and predominantly employs CSS with style objects, the new ui-primitives package utilizes a class-based approach, as seen in TailwindCSS. This transition is expected to update our UI design and development process significantly.
📋 Breaking Changes
Below is a comprehensive list of the most significant changes we must address to migrate our products to the new UI framework successfully. This includes adaptations and modifications essential for the transition.
Biggest tasks
@tabler-icons/react
directly as the new package<GlobalStyle />
in the legacy codeTokens that changed
$snakeCase
tokekab-case
accent
color scale was removed. No more$accent9
or$accent8
, now is justaccent
intents
related props changed tocolor
props as RadixUIcrimson → red
bodyBg → background
bodyColor → color
bodyInverse → ❌
dialogBg → panel-solid
input<intents><scale> → ❌
intentsBase<scale> → gray-<scale>
intentsError<scale> → error
intentsInfo<scale> → info
intentsSuccess<scale> → success
intentsPrimary<scale> → accent
intentsSecondary<scale> → ❌
intentsWarning<scale> → warning
scales<color><scale> → <color>-<scale>
semantic<variant><intent>* → ❌
textColor → color
textHeading → heading
textActive → ❌
textIcon → icon
textInverse → ❌
textLink → link
textLinkActive → ❌
textLinkDisabled → ❌
textLinkHover → ❌
textLinkVisisted → ❌
textMuted → muted
textSubtext → secondary
Missing components
ButtonLink
(should be replaced byButton
usingas
a prop)ContentLoader
Form
InputAmount
Menu
(changed in the new package toDropdown
)Pagination
PasswordStrengh
Props/Components that changed
css
property for styling removed ❌Box.Centered
removed ❌<Box.* />
Grid.Item
removedBox.Stack
removed ❌<Icon />
now received aReactComponent
aticon
prop instead ofstring
🎯 Planning
The optimal approach for executing this migration involves breaking down the major tasks and managing them on Linear, tracking the entire process as a milestone. Given the extensive nature of this project, taking incremental steps will promote a more effective and controlled transition.
A considerable portion of this migration centers on transforming the existing style object CSS into a TailwindCSS format using
tailwind-variants
, a methodology successfully implemented in the explorer. To facilitate this, certain automation scripts and tools can be employed. Notable among these are:The script for this conversion process could follow these steps:
style
objects within components intotv()
format.cssObj()
into TailwindCSS class declarations.css={}
properties withtailwind-variants
.By systematically following these steps, we can ensure a smooth and efficient transition to the new UI framework.
Beta Was this translation helpful? Give feedback.
All reactions