In the context of working on the Global Styles Sidebar, we're looking to move the prototype over to Gutenberg. One component that is used in the prototype is the g2 ColorCircle component, which currently only exists in the g2 repository.

The current situation

I had a look at ColorCircle in order to understand what functionality it packs. ColorCircle visually represents a single color, and can also be interactive. The component has a few props:

• The color prop (obviously), which internally seems to be any value that the tinycolor2 library can parse
• The variant prop has 2 values: when default, the component will be in the shape of a circle. When pill, the component will stretch to fill 100% of the available width (while keeping rounded ends)
• The size prop (small, medium, large)
• It can be static or interactive, depending on the value of the isInteractive prop. When interactive, the cursor changes to a pointer, and visually reacts to being clicked/pressed and focused
• When the isActive prop is true, it displays a "tick" icon in the middle
• It also accepts other props (e.g. onClick, which in the prototype is used to open a ColorPicker popover)

After that, I looked at what components with a similar "scope" are currently available in Gutenberg, and I found a few components of interest. In particular:

• ColorIndicator: a very simple component, which as of now just shows a color inside a little rectangular <span />. It doesn't offer any interactivity out of the box either.
• CircularOptionPicker: this seems to be what is currently being used in Gutenberg for color swatches. I'm not particularly a fan of this "family" of components for a few reasons:
  • CircularOptionPicker is quite an opinionated and high-level component
  • It’s not implemented using “g2” features like Emotion, Context, ...
  • Similarly to ColorCirle, its name hints at the circular shape, which makes it much less flexible in terms of design updates. It also doesn't hint at all at the fact that it's mainly used for colors either (and therefore difficult to discover in the library
  • Its set of subcomponents are exposed via namespacing, e.g. <CircularOptionPicker.Option >, which is not in line with other families of components

The next steps

Given all of the above, I'm not certain on what is the best way forward here:

1. Simply adding the g2 ColorCircle component over to Gutenberg would introduce too much overlap with existing components. On top of that, I don't believe that ColorCircle is a good name either, since it will prevent the component from ever taking a different visual shape.
2. Another option (also suggested by @tyxla ) would be to "enrich" ColorIndicator by replacing its implementation with the one from g2's ColorCirlce. We could tweak the variant prop and make the default value look and behave like the current implementation of the component (and introduce a circle variant, in addition to pill). But this would then introduce a significant overlap with the CircularOptionPicker component.
3. We could replace usages of ColorCircle in the prototype with CircularOptionPicker.Option — although I'm not a fan at all of the CircularOptionPicker components “family”, as highlighted above.
4. We could deprecate both ColorIndicator and CircularOptionPicker (as suggested by @griffbrad). We could either leave them as-is or refactor them to use ColorCircle internally (I doubt they're widely used outside of the higher-level palette and color picker components, so it's unlikely to both many 3rd-party devs)

...or any other approach that I haven't listed! What do folks think is the best way forward?