Inline Documentation and Performance Updates

Hi friends!

It’s been a little quiet on this blog. Rest assured, a lot of interesting and important work is being done within G2! The two major updates include adding support for inline documentation (for supported editors) as well as a bunch of performance optimizations. Both of which are in service of making G2 Components easier to use.

Context Systems

Creating a Context System

One of the more “abstract” but important and powerful systems within G2 Components is it’s “Context” system. Given the name, those familiar with libraries like React may immediately think of React.Context. It’s kinda close, but it’s much much more than that.

The goal of G2’s Context system is to provide “awareness” to the components. Components that are “connected” to this system can become “aware” of each other, and can modify their behaviours depending on how they’re composed together. A simple example would be how a MenuItem may automatically render a right chevron icon when it is used within a link, because it knows that it should render as link.

Styles Systems

Creating a Style System

One of the biggest and most important challenges for the G2 Components project was defining and creating the Style system. The Style system is one of the core system that’s responsible for managing and powering the entire UI layer for the library. G2’s styles had a handful of truly unique requirements – Features that are often only subtly addressed or even omitted from existing solutions. For this post, I hope to touch upon some of the important mechanics and considerations for the G2 Style system (without drilling down into the possibly boring nitty gritty details).


Creating Avatars

In today’s Zoom session, I streamed the design and creation process for creating a new Avatar component for G2. This Avatar goes beyond air-bending an image in a circle. Earlier on in the session (but also throughout), we detailed some flexible, intelligent, and DX (designer/developer experience) features, including:

  • Name to initial rendering (e.g. Eileen V. to EV)
  • A range of default (preferred) sizes, which can be customized
  • A set of shape variations (e.g. Circle or Rounded Square)
  • The ability to render a “status dot” in the top corner
  • Tooltip that appears to display the full user name
  • An AvatarGroup that will stack and layer Avatars within

Let’s Create: Avatars (Zoom Session Announcement)

Hi all! I’m planning on hosting another create/code-along Zoom session. For the session, I’m hoping to create an Avatar component (along with a couple of supporting sub-components).

(FYI, you may be pleasantly surprised how detailed Avatars can get.)

I’m planning on starting the call today (August 24th) at 12:30PM EDT. The call may last 60-75 mins or so.

These Zoom hangouts sessions are very free-form! Everyone is welcome to join, engage, ask questions, and play! For those who can’t make it, no worries. I’ll be recording the call and uploading it to YouTube.

I’ll share the Zoom link in this post (and on Slack) before the time of the call.

See you then!


New Documentation Site

I’m extremely excited to announce the brand new G2 Components documentation site! At the time of writing this post, it is still very much a work-in-progress. However, it contains several docs for core/common components from the library, as well as handful of features to make it easier to learn and use G2.

For those who prefer video (I’m one of those), I’ve recorded a screencast that introduces the documentation site and goes over some of it’s features.

For you eager beavers out there, here’s a link to the documentation site:

(Just a heads up, there will be a bunch of animated demo GIFs below)


Animation Interpolations

In other words… smoothly transitioning from one thing to another thing! In traditional animation (think the good ol’ hand drawn stuff), this process of transitioning between two key poses (or key frames) is known as inbetweening. We can use this principle from the wonderful world of animation and apply it to the web interfaces we’re building to achieve some really amazing effects!


Start Prototyping

With some of the recent updates in G2 components, it’s become clear that the library has become a phenomenal tool for rapid prototyping. With the fundamental systems in place (in particular styling and a healthy collection of primitive components), I’ve been able to experiment and create pretty feature-rich experiences. (Some of this was demonstrated in a recent Zoom session.)

For the purposes of prototyping and testing… If you’re interested in giving these G2 Components a try, I’ve prepared some resources for you!

Components Systems

Designing Draggables, Droppables, and Sortables

Drag gestures are becoming increasingly more popular in Web UIs – and for good reason! They’re super easy to use! They extend the fluid “life-like” experience we’ve become accustomed to from the mobile/tablet world. Therefore, it’s important that this library includes a solid and flexible drag / drop / sort system.

The funny thing is… Drag/Sort systems are almost always excluded from Component libraries. The main reason is… well… because they’re heavy and complicated (aka. really hard!). I believe taking on this complexity is worth it as we’ll be able to provide users with an easy to use + powerful way to create highly interactive experiences – be that in Gutenberg’s UI, custom Block controls, WP Admin, and beyond.


Creating Smart Layout Components (HStack, VStack, and ZStack)

In today’s Zoom session, I streamed the design and creation process for creating a handful of SwiftUI inspired layout components for G2: HStack, VStack, and ZStack. These components are designed to enable users to create many layout UI variations with very little code.

What are these stacks?

Source: Design+Code

HStack aligns items in a horizontal fashion.

VStack aligns items in a vertical fashion.

ZStack stacks items in a layered fashion.

Each layout stack component renders with smart defaults to accommodate the most common use-cases for each layout type.

HStack and VStack provide a property called spacing, allowing the user to add (you guessed it) spacing in-between each item as needed.