[High Contrast Mode] Tables and data grid

[cee-chen]

Summary

Note

This PR merges into a feature branch.

Saving my least favorite for last, as is tradition 😂

PR contains many VRT updates, but they've been split out into their own commits to make checking for visual diffs easier for singular changes.

QA

QA should generally consist of reviewing docs/stories in both light/dark modes and Windows/Mac high contrast modes and verifying that the updated components generally look non-broken/non-buggy in both.

• EuiBasicTable
  
• EuiDataGrid

General checklist

• Browser QA - N/A
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
  • Checked in mobile
    - [ ] Checked in Chrome, Safari, Edge, and Firefox
    - [ ] Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA - N/A
• Code quality checklist
  - [ ] Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist - N/A, feature branch
• Designer checklist - N/A

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8226/
• Storybook: https://eui.elastic.co/pr_8226/storybook
• New docs: https://eui.elastic.co/pr_8226/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7b0d477

[acstll]

I couldn't find anything buggy or broken, looks good (to my new-hire eyes)!

Just to double check, there's also fixes not strictly related to HCM like the spacing in the expanded row (screenshot below).

---

TIL VRT refers to visual regression testing 😛
Also first time I see clip-path used like that, nice! 👌

[mgadewoll]

🚢 🐈‍⬛ The changes look and work great 🎉
I just left two non-blocking comments.

[mgadewoll]

Non blocking, likely unrelated (just attaching it here):
I noticed that the mobile actions seem to be placed differently between color modes.
It seems like the inset-block-start doesn't always apply. Maybe we could change to margin-block-start? 🤔

storybook

Screen.Recording.2024-12-12.at.14.45.00.mov

EUI docs

Screen.Recording.2024-12-12.at.14.52.51.mov

[cee-chen]

haha what the heck

[cee-chen]

I think this is a bizarre Storybook/rendering thing. If I start the story in light mode, the opposite effect happens in dark mode. And if you refresh the page, it fixes itself again. I'm going to leave it alone for now to not break production styles 🤷 (couldn't get top: 0/margin-top to work either)

[mgadewoll]

Huh, weird indeed. I was able to reproduce it in EUI docs as well. 🫤
I'm ok not touching it here, as it's not related to the changes done here. 👍

[cee-chen]

Oooh I missed that in the second screencap, apologies. I can repro it in production EUI docs as well. With that in mind (since it's not caused by high contrast mode), can we file a separate issue for this bug? It's honestly bonkers haha, I don't think I've ever seen anything like it. I wonder if it's something to do with tables being tables 🫠

[mgadewoll]

🔗 I added an issue for it.

[cee-chen]

Just to double check, there's also fixes not strictly related to HCM like the spacing in the expanded row (screenshot below).

Yes, this was noted as a separate change/cleanup in my git commit history: edf83a2

Normally I write a bit longer commit messages explaining my rationale + add a PR description line informing devs to review by commit, but in this case I was very tired last night and also spoiled by Lene being used to my process 😅

I also didn't bother adding a changelog to it as it doesn't affect consumer usage or end-user functionality (it just looks a bit nicer).