Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.82k stars 1.17k forks source link

[EPIC] Implement new `HoverCard` on Orders index table in the admin #8931

Closed alex-page closed 1 month ago

alex-page commented 1 year ago
  1. Look into what Chloe has shipped so far
  2. Read context below
  3. Scope out work to actually ship the action tooltip to web
  4. Ship

=== context ===

Prototype: https://tooltip-prototype.shopifycloud.com/6/action Figma: https://www.figma.com/file/64twmvaeh0gEXs3pZcueRe/Tooltips?node-id=461-11097&viewport=-417%2C318%2C0.15 Parent issue: https://github.com/Shopify/web/issues/78351. Raised by: @Shopify/core-operate-workflows-quality-crew

### Remaining Tasks
- [ ] https://github.com/Shopify/polaris/issues/11743
- [ ] https://github.com/Shopify/polaris/issues/11744
- [ ] https://github.com/Shopify/polaris/issues/11746
- [ ] https://github.com/Shopify/polaris/issues/11769
- [ ] https://github.com/Shopify/polaris/issues/11748
- [ ] https://github.com/Shopify/polaris/issues/11749
- [ ] https://github.com/Shopify/polaris/issues/11750
- [ ] https://github.com/Shopify/polaris/issues/11737
- [x] Revert Popoover integration in the IndexTableCell implementation
- [ ] Find a way to port keyboard accessbility changes from Popoover implementation to base implementation
- [x] Add a debounce to the onMouseEnterCell event listener (so there's a delay in HoverCard activation on hover for perf. reasons)
- [x] https://github.com/Shopify/polaris/issues/11768
- [ ] Use this snapshot for prototype `yarn add @shopify/polaris@0.0.0-snapshot-20240319162906`
### Pending decisions
- [ ] Who owns the HoverCard going forward?
- [ ] https://github.com/Shopify/polaris/issues/11742
### Decisions
- [ ] Retain hover behaviour for the HoverCard activation in IndexTable.**

** Caveat: If we require a delay for queries, it needs to be consistent across all hover cards. We can't have some that open instantly, some that are delayed Demo the above and confirm alignment

martenbjork commented 1 year ago

I have a take on this :)

TLDR: The admin needs a global hover card component that takes care of all the heavy lifting. That way, we can add hover cards across the admin in a consistent and scalable way. CodeSandbox that's mentioned in the video

https://user-images.githubusercontent.com/875708/231511143-27405b1f-f02c-48c0-a63e-fef85d371085.mp4

yesenia-perezcruz commented 1 year ago

I really love that proposal @martenbjork. It's a great example of a solution that's scaleable but also specific to Shopify's admin. I also like that you're looking at the problem with another zoom level.

@chloerice @alex-page How do you think this would impact the near-term work? We had talked about shipping the IndexTable tooltip in one place and then asking teams to adopt it in their IndexTables.

Do you think we should continue with that plan and then later ask teams to adopt the hover card pattern? Or do you think we should roll it out ourselves throughout IndexTables and then later ask teams to adopt the hover card pattern? For me the question comes down to how many times we'd ask teams to adopt a new pattern, but if the near-term and long-term solutions are spaced out enough, it might be fine.

alex-page commented 1 year ago

I think we should continue with the above plan focusing on one IndexTable. We should ensure that the "link" that opens the tooltip can be used in multiple places across the admin and not be a one-off solution inside the IndexTable component.

alex-page commented 9 months ago

@chloerice @lgriffee lets ship this in shopify/web first then follow up shipping this to Polaris. Shipping this new component to Polaris will require API alignment and we don't need to block shipping this with that alignment right now.

github-actions[bot] commented 1 month ago

Hi! We noticed there hasn’t been activity on this issue 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.