This is an extension of Implementing a Component System

Context ✨

The FontSizePicker component was first to receive the upgrade to use the new Components System.

We opted for a strategy (proposed by @gziolo) that imports and uses the various system parts via npm dependencies, rather than migrating the code by copying/pasting them over.

This was largely to expedite us figuring out the process for integration.
Using the new Component System code via external packages is not the end goal.

Back Filling 🔙

@gziolo has identified the component dependencies of FontSizePicker in a comment.

We're in a place where we can work on "back filling" these components so that

• FontSizePicker would no longer depend on external component dependencies
• We'll establish the new foundation for the Component System

Components List 📦

Below is the list of components we'll need to integrate into @wordpress/components from the new component system library.

These have been ranked in dependency order, as well as complexity:

• View (#28176)
• Truncate (#28176)
• ControlGroup
• VisuallyHidden
• Flex
• Text
• Icon
• Grid
• HStack
• VStack
• ControlLabel
• FormGroup
• Slider
• BaseButton
• Button
• BaseField
• TextInput
• Surface
• Elevation
• Card
• Menu
• Divider
• Separator
• Dropdown
• SelectDropdown

I've added this to the running G2 Components integration spreadsheet to help track the progress:
https://docs.google.com/spreadsheets/d/1gfzznyJtTr3hHoGkGRdeBRjhuZVMRalF9NuLrxkl4Nk/edit?usp=sharing

To get a visual sense of how these components are composed together, you can check out this visual flow map:
https://miro.com/app/board/o9J_khVkF9A=/?moveToWidget=3074457351837142359&cot=14

Contribution 🙏

Help in this effort is definitely welcome!

I recognize that there's a lot that goes into the new Component System.

I've recorded a walkthrough of it on the project blog:
https://g2components.wordpress.com/2020/12/02/walkthrough-integration-ideas/

If you're interested in helping and you're having trouble navigating the space, please let me know!
I'd be happy to help however I can.