[IndexTable] fix sticky cell borders in Chrome v91+

[brendanrygus]

WHY are these changes introduced?

Issue

• Fixes Recently, I found that the indextable component of Polaris has problems when displaying, how can I solve it? #4247
  • Thanks @lauramann for the original patch in web's polaris-next
  • We are receiving many bug reports about IndexTables in SFN, so I'd like to promote this fix into public Polaris.

Context

• Chrome v91 features a rewrite of tables, which improves support for sticky headers and footers.
• In the process, they introduced regressions with how box-shadows render on these sticky elements.
  See [css-tables] Collapsed table borders don't follow sticky rows/cells when they stick w3c/csswg-drafts#3136
• This causes the borders to disappear for the first two "sticky" cells of the IndexTable.

WHAT is this pull request doing?

Restores missing borders for the non-scrolling view of the IndexTable cells, by using border instead of box-shadow.

Before, missing borders:

After, borders restored:

This does not fix the more complex behaviour where box shadows were used for scrolling sticky cells.
I did some quick testing and it doesn't look like we can swap in borders 1:1 for box-shadows here. I don't think I have the bandwidth to explore a full solution, but if anyone wants to pair on it, let me know.

Chrome:

Safari:

How to 🎩

• Open Google Chrome v91+
• yarn storybook and navigate to any IndexTable example

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

size-limit report

Path	Size
cjs	142.05 KB (0%)
esm	95.68 KB (0%)
esnext	138.96 KB (+0.01% 🔺)
css	33.82 KB (+0.01% 🔺)

[pamelahicks]

Hi @brendanrygus 👋 what about the right border/box-shadow that you can see separating those first sticky table cells in your Safari screenshot? Those seem to be missing in Chrome as well. Is that something you could add as part of this PR?

[brendanrygus]

Hi @brendanrygus 👋 what about the right border/box-shadow that you can see separating those first sticky table cells in your Safari screenshot? Those seem to be missing in Chrome as well. Is that something you could add as part of this PR?

I did explicitly mention this in the PR body:

This does not fix the more complex behaviour where box shadows were used for scrolling sticky cells.
I did some quick testing and it doesn't look like we can swap in borders 1:1 for box-shadows here. I don't think I have the bandwidth to explore a full solution, but if anyone wants to pair on it, let me know.

I think the partial solution is better than none, given how prominent these tables are in our apps. I would not be able to investigate the rest until sometime next week at the earliest, but am open to other contributions on this branch.

[pamelahicks]

I think the partial solution is better than none, given how prominent these tables are in our apps. I would not be able to investigate the rest until sometime next week at the earliest, but am open to other contributions on this branch.

Sounds good, I have a solution for this that I will add to the branch I'm working on.

[brendanrygus]

Closing in favour of the more comprehensive solution in #4150
Thanks @pamelahicks!