Add AlphaPicker #11728

kyledurand · 2024-03-13T20:16:58Z

WHY are these changes introduced?

Closes: https://github.com/Shopify/polaris-internal/issues/1510

WHAT is this pull request doing?

Introduces a new picker, undocumented and prefixed with Alpha until it's better tested in the admin.
Only single select / filtering needs to be working for the first release

How to 🎩

Change / add vendors here

🎩 checklist

Tested a snapshot
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

kyledurand · 2024-03-20T22:16:29Z

/snapit

github-actions · 2024-03-20T22:19:38Z

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

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

yarn add @shopify/polaris-migrator@0.0.0-snapshot-20240320221814

yarn add @shopify/polaris@0.0.0-snapshot-20240320221814

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-20240320221814

sophschneider

Nice! Tophatted on firefox (safari isn't working with spin for some reason?) and also with VoiceOver on Chrome, it looks great!

Have some minor comments about the custom TextField and focus returning to the activator on close

polaris-react/src/components/Picker/Picker.tsx

sophschneider · 2024-03-25T13:37:48Z

polaris-react/src/components/Picker/components/SearchField/SearchField.tsx

@@ -0,0 +1,109 @@
+import React, {useMemo, useId, useCallback, useEffect} from 'react';


Could we use the borderless TextField here instead of a custom component?

We want a more subtle focus state and other minor details. Until this becomes a more prominent pattern I'd prefer to leave this as a custom component that extends textfield props

sophschneider · 2024-03-25T13:41:53Z

polaris-react/src/components/Picker/Picker.tsx

+        />
+      }
+      autofocusTarget="none"
+      preventFocusOnClose


Should we focus the activator on close? right now focus is returning to the top of the page

Excellent catch. I fully expected this to just work but there was some conflicting focus management going on. Fixed now 👍

kyledurand · 2024-03-27T13:27:50Z

/snapit

github-actions · 2024-03-27T13:31:02Z

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

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

yarn add @shopify/polaris-icons@0.0.0-snapshot-20240327132942

yarn add @shopify/polaris@0.0.0-snapshot-20240327132942

@sam-b-rose

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@12.24.0 ### Minor Changes - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Applied semantic type styles using the `Text` component - [#11728](#11728) [`281c8f8e9`](281c8f8) Thanks [@kyledurand](https://github.com/kyledurand)! - Added new AlphaPicker component - [#11645](#11645) [`b726dadbb`](b726dad) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines - [#11780](#11780) [`4fffc2dcc`](4fffc2d) Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - allows icons to be displayed on primary actions on Page component - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added `base`,`inherit`, `disabled`, and `text-inverse` tone options for Text component - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated plain/monochrome Button text size to bodySm for micro ### Patch Changes - [#11789](#11789) [`36df1aa6c`](36df1aa) Thanks [@laurkim](https://github.com/laurkim)! - Fixed logo spacing on `ContextualSaveBar` - [#11794](#11794) [`ffdcf1df7`](ffdcf1d) Thanks [@kyledurand](https://github.com/kyledurand)! - Set default scrollbar width to thin on scrollable - [#11804](#11804) [`d1b46c25c`](d1b46c2) Thanks [@laurkim](https://github.com/laurkim)! - Fixed layout shift on `EmptyState` when image is loading with skeleton image ## @shopify/stylelint-polaris@15.5.0 ### Minor Changes - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added warning for `font-size`, `line-height`, and `font-weight` properties. Use the `Text` component as a preferred option. ## @shopify/polaris-migrator@0.28.4 ### Patch Changes - Updated dependencies \[[`df5276317`](df52763)]: - @shopify/stylelint-polaris@15.5.0 ## polaris.shopify.com@0.67.0 ### Minor Changes - [#11779](#11779) [`86a6ba44a`](86a6ba4) Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added examples for `Card` and `Page` with icon actions ### Patch Changes - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added page for `typography/property-disallow-list` Stylelint rule - Updated dependencies \[[`df5276317`](df52763), [`281c8f8e9`](281c8f8), [`b726dadbb`](b726dad), [`4fffc2dcc`](4fffc2d), [`df5276317`](df52763), [`36df1aa6c`](36df1aa), [`df5276317`](df52763), [`ffdcf1df7`](ffdcf1d), [`d1b46c25c`](d1b46c2)]: - @shopify/polaris@12.24.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### WHY are these changes introduced? Closes: https://github.com/Shopify/polaris-internal/issues/1510  ### WHAT is this pull request doing? Introduces a new picker, undocumented and prefixed with Alpha until it's better tested in the admin. Only single select / filtering needs to be working for the first release  ### How to 🎩 Change / add vendors [here](https://admin.web.web-17ze.kyle-durand.us.spin.dev/store/shop1/products/5) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] 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

kyledurand force-pushed the add-new-picker-component branch from d125cc8 to d78f5e6 Compare March 13, 2024 21:32

Shopify deleted a comment from github-actions bot Mar 13, 2024

kyledurand force-pushed the add-new-picker-component branch 3 times, most recently from d1d12d4 to fb543bb Compare March 15, 2024 17:37

Shopify deleted a comment from github-actions bot Mar 15, 2024

kyledurand force-pushed the add-new-picker-component branch from 4019b65 to edb59cf Compare March 16, 2024 03:17

Shopify deleted a comment from github-actions bot Mar 16, 2024

kyledurand force-pushed the add-new-picker-component branch from edb59cf to 1638997 Compare March 16, 2024 17:25

Shopify deleted a comment from github-actions bot Mar 16, 2024

kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from e1bb2f8 to 31fc7ff Compare March 19, 2024 01:31

Shopify deleted a comment from github-actions bot Mar 19, 2024

kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from 5a76c2f to c02e145 Compare March 20, 2024 18:46

kyledurand changed the title ~~Picker~~ Add AlphaPicker Mar 20, 2024

Shopify deleted a comment from github-actions bot Mar 20, 2024

kyledurand force-pushed the add-new-picker-component branch from 979e51c to d71c012 Compare March 20, 2024 19:23

kyledurand marked this pull request as ready for review March 20, 2024 20:41

kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from 50b410d to 04b48e4 Compare March 20, 2024 20:46

kyledurand requested review from sophschneider, alex-page and laurkim March 20, 2024 22:26

kyledurand added 9 commits March 25, 2024 08:42

style textfield

c7157e5

fix border radius

921a86c

convert sass to css, fix maths

488916b

wire up listbox props

8a8dbe9

add addAction

b1fd35d

add disabled state, show first option text if react node

e6efbc7

Remove searchfield ref, add tests

ce91990

changeset

f0e1636

add manual focus back

9d79ef1

kyledurand force-pushed the add-new-picker-component branch from 05bab3a to 095f8e1 Compare March 25, 2024 13:11

clear query and reset options

927c0a0

kyledurand force-pushed the add-new-picker-component branch from 095f8e1 to 927c0a0 Compare March 25, 2024 13:13

sophschneider approved these changes Mar 25, 2024

View reviewed changes

kyledurand added 2 commits March 26, 2024 10:14

fix: focus bug

e34e33e

fix: return focus to activator

c0d1f53

kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from 2caa9ad to c1b9dde Compare March 27, 2024 13:27

kyledurand force-pushed the add-new-picker-component branch 4 times, most recently from 880413b to d1c9a71 Compare March 27, 2024 18:19

manage focus manually

d4f6b65

kyledurand force-pushed the add-new-picker-component branch from d1c9a71 to d4f6b65 Compare March 27, 2024 19:42

kyledurand merged commit 281c8f8 into main Mar 27, 2024
13 of 14 checks passed

kyledurand deleted the add-new-picker-component branch March 27, 2024 20:07

shopify-github-actions-access bot mentioned this pull request Mar 27, 2024

Version Packages #11793

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add AlphaPicker #11728

Add AlphaPicker #11728

kyledurand commented Mar 13, 2024 •

edited

Loading

kyledurand commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

sophschneider left a comment

sophschneider Mar 25, 2024

kyledurand Mar 27, 2024

sophschneider Mar 25, 2024

kyledurand Mar 27, 2024

kyledurand commented Mar 27, 2024

github-actions bot commented Mar 27, 2024

		@@ -0,0 +1,109 @@
		import React, {useMemo, useId, useCallback, useEffect} from 'react';

Add AlphaPicker #11728

Add AlphaPicker #11728

Conversation

kyledurand commented Mar 13, 2024 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

kyledurand commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

sophschneider left a comment

Choose a reason for hiding this comment

sophschneider Mar 25, 2024

Choose a reason for hiding this comment

kyledurand Mar 27, 2024

Choose a reason for hiding this comment

sophschneider Mar 25, 2024

Choose a reason for hiding this comment

kyledurand Mar 27, 2024

Choose a reason for hiding this comment

kyledurand commented Mar 27, 2024

github-actions bot commented Mar 27, 2024

kyledurand commented Mar 13, 2024 •

edited

Loading