Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AlphaPicker #11728

Merged
merged 16 commits into from
Mar 27, 2024
Merged

Add AlphaPicker #11728

merged 16 commits into from
Mar 27, 2024

Conversation

kyledurand
Copy link
Contributor

@kyledurand kyledurand commented Mar 13, 2024

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

@Shopify Shopify deleted a comment from github-actions bot Mar 13, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 13, 2024
@kyledurand kyledurand force-pushed the add-new-picker-component branch 3 times, most recently from d1d12d4 to fb543bb Compare March 15, 2024 17:37
@Shopify Shopify deleted a comment from github-actions bot Mar 15, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 15, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 16, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 16, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 16, 2024
@kyledurand kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from e1bb2f8 to 31fc7ff Compare March 19, 2024 01:31
@Shopify Shopify deleted a comment from github-actions bot Mar 19, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 19, 2024
@kyledurand kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from 5a76c2f to c02e145 Compare March 20, 2024 18:46
@kyledurand kyledurand changed the title Picker Add AlphaPicker Mar 20, 2024
@Shopify Shopify deleted a comment from github-actions bot Mar 20, 2024
@kyledurand kyledurand marked this pull request as ready for review March 20, 2024 20:41
@kyledurand kyledurand force-pushed the add-new-picker-component branch 2 times, most recently from 50b410d to 04b48e4 Compare March 20, 2024 20:46
@kyledurand
Copy link
Contributor Author

/snapit

Copy link
Contributor

🫰✨ 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/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

Copy link
Contributor

@sophschneider sophschneider left a comment

Choose a reason for hiding this comment

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

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 Outdated Show resolved Hide resolved
@@ -0,0 +1,109 @@
import React, {useMemo, useId, useCallback, useEffect} from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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
image

/>
}
autofocusTarget="none"
preventFocusOnClose
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

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

/snapit

Copy link
Contributor

🫰✨ 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/[email protected]
yarn add @shopify/[email protected]

@kyledurand kyledurand force-pushed the add-new-picker-component branch 4 times, most recently from 880413b to d1c9a71 Compare March 27, 2024 18:19
@kyledurand kyledurand merged commit 281c8f8 into main Mar 27, 2024
13 of 14 checks passed
@kyledurand kyledurand deleted the add-new-picker-component branch March 27, 2024 20:07
sam-b-rose pushed a commit that referenced this pull request Apr 1, 2024
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/[email protected]

### 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/[email protected]

### 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/[email protected]

### Patch Changes

- Updated dependencies
\[[`df5276317`](df52763)]:
    -   @shopify/[email protected]

## [email protected]

### 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/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
### WHY are these changes introduced?

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

<!--
  Context about the problem that’s being addressed.
-->

### 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

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:38419 Pickers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants