[Colorpicker] Add hex/alpha text fields

[ruairiphackett]

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-ux-archive/issues/276 [archived issue].

Replacement for #2186

There was some interest by @alex-page in having this work revisited & I had been meaning to rework #2186 when I got a chance.

Some of the work in #2186 was already added in #4152.

This PR adds hex and transparency text fields to the ColorPicker to make colour picking functionality more accessible.

The specific a11y issues it tries to solve are:

• The component requires the use of the mouse or touch, since it is implemented with mouse-only events on elements that are not natively interactive (elements).
• The component is skipped over by screen readers, since there are no semantic elements or roles available.

WHAT is this pull request doing?

Before:

After:

Adds a new optional prop textEditor to ColorPicker.

When textEditor is true 2 new text fields are added to the ColorPicker that allow the user to adjust the colour and alpha values by entering text values for each.

There are also some new examples added to the ColorPicker storybook.

Below is a description of allowed values for both fields:

TextPicker

Accepted values:

Text field that allows user to enter hex or rgb values for the colour. The value will be entered when focus moves from the field or the user presses the enter key. The value is then converted and displayed as a 6 digit hex code.

3 & 6 digit hex codes:

• #000000
• 000000
• #000
• 000

rgb colours:

• rgb(255,255,255)

Recording

AlphaField

Text field that allows user to enter a value between 0 and 100 for the colour's alpha value.

Pressing the up and down arrows while this field is in focus will increase and decrease the value by 1 respectively.

Holding the shift key and pressing the up and down arrows while this field is in focus will increase and decrease the value by 5 respectively.

Recording

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useState} from 'react';

import {ColorPicker, Page} from '../src';

export function Playground() {
  const [color, setColor] = useState({
    hue: 300,
    brightness: 1,
    saturation: 0.7,
    alpha: 0.7,
  });

  return (
    <Page title="Playground">
      <ColorPicker onChange={setColor} color={color} allowAlpha textEditor />
    </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

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	218.85 KB (+0.55% 🔺)
polaris-react-esm	139.73 KB (+0.77% 🔺)
polaris-react-esnext	194.98 KB (+0.64% 🔺)
polaris-react-css	41.63 KB (+0.33% 🔺)

[ruairiphackett]

@alex-page I recreated this from #2186 following this discussion: #2186 (comment)

Apologies for the delay in returning to this work. Hopefully it will still be of use, if not it was still a good learning experience returning to it.

[alex-page]

@ruairiphackett this component is challenging and might be better suited as a pattern. The missing UX that you are building is not essential for every use case of the color picker. It's definitely useful but it's a composition of parts to create a solution. Take a look at patterns, we plan to add these as component code alongside our components. https://polaris.shopify.com/patterns

If you do still want to ship this we would have to rewrite the layout using our new layout primitive components. https://polaris.shopify.com/components/layout-and-structure

[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]

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[pama1999]

this needs to be merged asap :) 👍🏽 +1

[alex-page]

@pama1999 no it doesn't.

[pama1999]

@pama1999 no it doesn't.

Okey then how about updating the docs of polaris and replacing the deprecated components with the new ones ;)

[translation-platform]

Localization quality issue found

The following issues may affect the quality of localized translations if they are not addressed:

• The value HEX color for key Polaris.ColorPicker.textPickerAccessibilityLabel is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.

[translation-platform]

Localization quality issue found

The following issues may affect the quality of localized translations if they are not addressed:

• The value Alpha for key Polaris.ColorPicker.alphaFieldAccessibilityLabel is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.