Fela Migration

[jwineman]

Lets track the migration of these components here. Call out what you're working on and I'll keep this thread up to date.

8 / 33 ( 24% ) complete.

• cf-component-button @tajo CSS in JS Transition: First Step #77
• cf-component-callout
• cf-component-card
• cf-component-checkbox
• cf-component-code
• cf-component-copyable-textarea
• cf-component-dropdown
• cf-component-dynamic-content
• cf-component-flex
• cf-component-form @tajo Convert cf-component-form to Fela #133
• cf-component-heading @sejoker migrate cf-component-heading to support Fela #97
• cf-component-icon @koddsson
• cf-component-input
• cf-component-label @manatarms
• cf-component-layout
• cf-component-link @manatarms
• cf-component-list
• cf-component-loading
• cf-component-modal
• cf-component-notifications
• cf-component-page @manatarms Updates Page and PageHeader components to use Fela #102
• cf-component-pagination @sejoker cf-component-pagination migration to Fela #135
• cf-component-progress
• cf-component-radio
• cf-component-select
• cf-component-table
• cf-component-tabs
• cf-component-text @sejoker cf-component-text to fela migration #98
• cf-component-textarea
• cf-component-toggle
• cf-component-tooltip
• cf-component-typography
• cf-component-viewport

[manatarms]

cf-component-page please!

[wyuenho]

Please stop merging into master for now. We agree on how to support a "stable" version of cf-ui and work on big changes like this.

[manatarms]

cf-component-label in PR #103

[tajo]

Afaik, it should be fine to merge things. Just don't forget to major bump the new components when you are publishing them for the first time. We can still do bug fix releases of older versions.

[tajo]

Please check out this on our wiki: WWW / JavaScripts / How to update cf-ui components to Fela

[tajo]

Note

List of all cf-component cross-dependencies (fortunately it's not that common)

• cf-component-card -> cf-component-link
• cf-component-copyable-textarea -> cf-component-textarea
• cf-component-dropdown -> cf-component-dropdown
• cf-component-loading -> cf-component-icon
• cf-component-modal -> cf-component-heading and cf-component-icon
• cf-component-pagination -> cf-component-icon
• cf-component-progress -> cf-component-link
• cf-component-tabs -> cf-component-select and cf-component-viewport

This means that for components

• cf-component-link
• cf-component-textarea
• cf-component-dropdown
• cf-component-icon
• cf-component-heading
• cf-component-select
• cf-component-viewport

we need to be extra careful that they are not broken once released because they will "silently" appear in our projects everywhere where the card, dropdown... etc are used. So keep an extra eye on them and make sure they match our current styles!

The rest of components will (or can) be introduced slowly by replacing imports like cf-component-xxx with @cloudflare/cf-component-xxx. That can be even done on instance by instance basis.

[koddsson]

I updated the description directly. Hope that's cool.

[grimunit]

Please check out this on our wiki: WWW / JavaScripts / How to update cf-ui components to Fela

Hey @tajo I'm probably just dumb and missing something obvious but I can't seem to find what wiki you're referring to. I'd like to look at that documentation.

[koddsson]

@grimunit @tajo is referring to our internal wiki at Cloudflare :)

[grimunit]

@koddsson ok haha, that makes sense. Just interested in how you guys are reconciling existing components with Fela. Looking through your commits on the ones you've converted so far. Implementing something like the cf-style-container will probably make passing custom fela class rules to existing material-ui components a much smoother process. You guys are doing some cool work with Fela 😄

[koddsson]

In order for to track better I've generated a indvidual issue for each of the remaining components to migrate and the a "Fela Migration" milestone so we don't have to manually update this issue :)