Component System: Continue Integration

[ItsJonQ]

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/

[gziolo]

I'm copying over some issues I raised while working on #28624::

• FontSizeControl isn't typed and therefore it can't be included in the export in packages/components/src/ui/index.js
• FontSizeControl and View don't have stories
• FonteSizeControl and View don't have unit tests
• All React hooks included for G2 components aren't covered with unit tests
  • useFontSizeControl
  • useGrid
  • useText
  • useTruncate
  • useView
• It would be great to cover general-purpose utils (createComponents, getOptimalTextShade) with unit tests
• Should individual utils be covered with unit tests as well?

I also opened #28661 that proposes the removal of the temporary feature flag that excludes G2 components codebase from the upcoming WordPress release.

[ItsJonQ]

@gziolo +100 on concerns for testing. We need to go back to add tests for these component hooks 👍 (as well as new things coming into Gutenberg)

[sarayourfriend]

Added several missing components from here that are dependencies of FontSizeControl, this list keeps growing 😱

[ItsJonQ]

Alrighty! We have another batch of updates ready for merge (thanks a bunch @sarayourfriend !)

• Surface (Component System: Add Surface Component #28596)
• ControlGroup (Components: Add ControlGroup #28982)
• Portal (Components: Add Portal #28981)

I think they should be merged in that order.
Although they don't depend on each other, I think it'll make it easier (from a package.json/package-lock.json perspective).

---

According to the status site, we're currently at ~16% integrated.

This is great!

[sarayourfriend]

Removing the Good First Issue label because this is no longer a good first issue as demonstrated by @ramonjd and @ntsekouras's attempts to integrate some components.

[sarayourfriend]

Closing this issue in favor of the bigger tracking issue at #30503

All the remaining components from this issue have been moved over to that tracking issue under the "Finish the FontSizePicker integration" heading