Hack Days 34 Unified Color Picker

[acmertz]

WHY are these changes introduced?

The current <ColorPicker /> in Polaris only contains elements for visual point-and-click color selection, but since we often need to include a text field for the hex code when displaying a color picker we have ended up with a variety of implementations that all function similarly to each other.

Examples:

This PR builds upon the ideas introduced in #8294.

WHAT is this pull request doing?

Brings the hex code text field functionality into the <ColorPicker /> component itself and adds a boolean option for displaying it so existing implementations that use the color picker aren't adversely affected and can opt into the new functionality when they're ready.

To do: add an option to display a list of color swatches in the color picker so that this functionality doesn't have to be separately implemented by consumers of the <ColorPicker /> component.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[acmertz]

/snapit

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[natachalevesque]

/snapit

[github-actions]

🫰✨ Thanks @natachalevesque! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[ruairiphackett]

/snapit

[github-actions]

🫰✨ Thanks @ruairiphackett! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[runmad]

/snapit

[acmertz]

/snapit

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[natachalevesque]

/snapit

[github-actions]

🫰✨ Thanks @natachalevesque! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[natachalevesque]

/snapit

[github-actions]

🫰✨ Thanks @natachalevesque! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]