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 (Components: Add truncate #28176)
• Truncate (Components: Add truncate #28176)
• VisuallyHidden (Components: Add hooks based VisuallyHidden #28887)
• Grid(Component System: Add Grid Component #28531)
• Icon (Components: Add next Icon component #28978)
• Text (Components: Integrate "next" Text component #28475)
• Flex (Components: Update Flex #28609)
• HStack (Components: Add HStack #28707)
• VStack (Components: Add VStack #28798)
• FormGroup (Component System: Add FormGroup + ControlLabel components #28568)
• ControlLabel (Component System: Add FormGroup + ControlLabel components #28568)
• ControlGroup (Components: Add ControlGroup #28982)
• Elevation (Component System: Add Elevation Component #28593)
• Surface (Component System: Add Surface Component #28596)
• Scrollable (Components: Add hooks based Scrollable component wrapper #28979)
• Portal (Components: Add Portal #28981)
• Spinner (Components: Add spinner #29146)
• Card (Components: Add Popover #29084)
• Popover (Components: Add Popover #29084)
• Tooltip (Components: Add Tooltip and Shortcut #29385)
• Heading (Components: Add Heading #29592)
• Menu Replaced by ItemGroup
• Dropdown (BLOCKED by Card work)
• Divider (Components: Add Divider #29433)
• Separator
• Slider (BLOCKED by TextInput as they depend on the same useControlledValue hook)
• BaseButton (Components: Add next Button, ButtonGroup #29230)
• Button (Components: Add next Button, ButtonGroup #29230)
• ButtonGroup (Components: Add next Button, ButtonGroup #29230)
• BaseField (components: Add BaseField #32250)
• TextInput (Components: Integrate TextInput component [WIP] #32381)
• 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.

I recorded a walkthrough tutorial on how we're moving these components (note: some of the things may be outdated. I'll need to re-record this, but it may help as a starting point)
https://g2components.wordpress.com/2021/01/27/moving-components-to-gutenberg-walkthrough/