Skip to content

Conversation

@renerbaffa
Copy link
Contributor

@renerbaffa renerbaffa commented Sep 12, 2022

WHY are these changes introduced?

Fixes #6656

WHAT is this pull request doing?

image

Added an example of Hex code TextField to ColorPicker story

  1. Navigate to /?path=/story/all-components-colorpicker--with-hex-text-field
  2. Use your mouse to change the color
  3. Validate if the hex color code is getting updated
  4. Change the value in the TextField to a valid hex color
  5. Move the focus out of the TextField (blur)
  6. Validate if the ColorPickerSelectable in getting updated accordingly

PS: The example does not cover hex color with alpha

🎩 checklist

@renerbaffa
Copy link
Contributor Author

Waiting for #7140 to get published

@github-actions
Copy link
Contributor

github-actions bot commented Sep 12, 2022

size-limit report 📦

Path Size
polaris-react-cjs 202.01 KB (0%)
polaris-react-esm 129.23 KB (0%)
polaris-react-esnext 183.37 KB (0%)
polaris-react-css 40.62 KB (0%)

Co-authored-by: Kyle Durand <kyle.durand@shopify.com>
@kyledurand kyledurand force-pushed the add-hex-color-textfield-to-colorpicker-story branch 2 times, most recently from 40db161 to 67e2074 Compare September 13, 2022 21:37
@kyledurand kyledurand force-pushed the add-hex-color-textfield-to-colorpicker-story branch from 67e2074 to b5e4b75 Compare September 13, 2022 21:38
Copy link
Member

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adjusted the layout a bit and removed the magic numbers @renerbaffa b5e4b75 :shipit:

@kyledurand kyledurand merged commit 8e16d15 into main Sep 14, 2022
@kyledurand kyledurand deleted the add-hex-color-textfield-to-colorpicker-story branch September 14, 2022 12:31
@github-actions github-actions bot mentioned this pull request Sep 14, 2022
laurkim pushed a commit that referenced this pull request Sep 15, 2022
### WHY are these changes introduced?

Fixes #6656

### WHAT is this pull request doing?

Added an example of Hex code TextField to ColorPicker story

1. Navigate to
[`/?path=/story/all-components-colorpicker--with-hex-text-field`](https://5d559397bae39100201eedc1-misfpaqyvm.chromatic.com/?path=/story/all-components-colorpicker--with-hex-text-field)
2. Use your mouse to change the color
3. Validate if the hex color code is getting updated
4. Change the value in the TextField to a valid hex color
5. Move the focus out of the TextField (blur)
6. Validate if the ColorPickerSelectable in getting updated accordingly

PS: The example does not cover hex color with alpha

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Kyle Durand <kyle.durand@shopify.com>
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
sam-b-rose pushed a commit that referenced this pull request Sep 15, 2022
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@6.2.0

### Minor Changes

- [#7128](#7128)
[`9d6497970`](9d64979)
Thanks [@james-a-c](https://github.com/james-a-c)! - Add new icon
`FilterMinor`

## @shopify/polaris-migrator@0.1.0

### Minor Changes

- [#7153](#7153)
[`17d5bd0e8`](17d5bd0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add
migration for legacy static breakpoint mixins

## @shopify/polaris@10.3.0

### Minor Changes

- [#7181](#7181)
[`577796691`](5777966)
Thanks [@laurkim](https://github.com/laurkim)! - Added stories for
`Text` component


- [#7140](#7140)
[`9eff83ea6`](9eff83e)
Thanks [@renerbaffa](https://github.com/renerbaffa)! - Export hexToRgb
from color-transformers


- [#7050](#7050)
[`0ccc981fc`](0ccc981)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Exposes
useBreakpoint as a named export from @shopify/polaris-react


- [#7178](#7178)
[`2ce4503f5`](2ce4503)
Thanks [@IrinaLipovaya](https://github.com/IrinaLipovaya)! - Add
`ariaLabelledBy` prop to `ProgressBar` component to allow ids of
description elements for accessibility

### Patch Changes

- [#7132](#7132)
[`c31402639`](c314026)
Thanks [@martenbjork](https://github.com/martenbjork)! - Clarified the
naming of SkeletonTabs props (from "Props" to "SkeletonTabsProps")


- [#7141](#7141)
[`8e16d15d1`](8e16d15)
Thanks [@renerbaffa](https://github.com/renerbaffa)! - Added an example
of Hex code TextField to ColorPicker


- [#7179](#7179)
[`3911a45a8`](3911a45)
Thanks [@laurkim](https://github.com/laurkim)! - Updated `Text`
component to use `semibold` for `headingXs` variant


- [#7111](#7111)
[`69faaa41d`](69faaa4)
Thanks [@nneubarth](https://github.com/nneubarth)! - Fixed bug in which
deleted elements or clicks inside other portal-based elements were
inappropriately closing popovers

- Updated dependencies
\[[`9d6497970`](9d64979)]:
    -   @shopify/polaris-icons@6.2.0

## @shopify/plugin-polaris@0.0.1

### Patch Changes

- [#7166](#7166)
[`1a3d54dc3`](1a3d54d)
Thanks [@samrose3](https://github.com/samrose3)! - Initial release 🚀

- Updated dependencies
\[[`17d5bd0e8`](17d5bd0)]:
    -   @shopify/polaris-migrator@0.1.0

## polaris-for-figma@0.0.15

### Patch Changes

- Updated dependencies
\[[`c31402639`](c314026),
[`577796691`](5777966),
[`8e16d15d1`](8e16d15),
[`9eff83ea6`](9eff83e),
[`0ccc981fc`](0ccc981),
[`3911a45a8`](3911a45),
[`69faaa41d`](69faaa4),
[`2ce4503f5`](2ce4503)]:
    -   @shopify/polaris@10.3.0

## polaris.shopify.com@0.17.1

### Patch Changes

- [#7050](#7050)
[`0ccc981fc`](0ccc981)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix data-table
with-fixed-first-columns example referencing useMedia hook. Replace with
useBreakpoint export from polaris-react


- [#7177](#7177)
[`b79e64e2c`](b79e64e)
Thanks [@sarahill](https://github.com/sarahill)! - Updated typography
guidance to clarify number alignment

- Updated dependencies
\[[`c31402639`](c314026),
[`577796691`](5777966),
[`8e16d15d1`](8e16d15),
[`9d6497970`](9d64979),
[`9eff83ea6`](9eff83e),
[`0ccc981fc`](0ccc981),
[`3911a45a8`](3911a45),
[`69faaa41d`](69faaa4),
[`2ce4503f5`](2ce4503)]:
    -   @shopify/polaris@10.3.0
    -   @shopify/polaris-icons@6.2.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Extend the ColorPicker component to support a textfield for a Hex color

2 participants