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

[alex-page]

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

Beta Give feedback

1. Add HoverCard component to @Shopify/web shared components directory #11743
   #gsd:38846 +1
   

   
2. Set up beta flag for HoverCard in @Shopify/web #11744
   2 of 2
   #gsd:38846 +1
   
3. Add HoverCard to Destination column in orders index #11746
   2 of 3
   no-issue-activity +1
   
4. [Bug] Moving from one column to another does not open HoverCard #11769
   no-issue-activity +1
5. Update PositionedOverlay with original AlphaHovercard changes and release independently #11748
   0 of 3
   no-issue-activity +1
   
6. Implement accessibility fixes to the new HoverCard in shopify/web #11749
   +0
   
7. Implement HoverCard in each cell of the OrdersIndexEditableTable. #11750
   no-issue-activity +1
8. Address tech debt introduced by inlining ShadowBevel styles in HoverCard #11737
   no-issue-activity +1
9. Revert Popoover integration in the IndexTableCell implementation
10. Find a way to port keyboard accessbility changes from Popoover implementation to base implementation
11. Add a debounce to the onMouseEnterCell event listener (so there's a delay in HoverCard activation on hover for perf. reasons)
12. Create prototype of HoverCard usage in Orders Index #11768
    #gsd:38846 +1
    
13. Use this snapshot for prototype yarn add @shopify/polaris@0.0.0-snapshot-20240319162906

Pending decisions

Beta Give feedback

1. Who owns the HoverCard going forward?
2. Should we be using diminished animation styles for preferred-reduce-motion or no animations at all? #11742
   no-issue-activity +1
   

Decisions

Beta Give feedback

1. 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]

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

global-hover-thingies.mp4

[yesenia-perezcruz]

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]

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]

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

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.