[EuiTable][EuiBasicTable][EuiInMemoryTable] Convert to Emotion + style-related updates & cleanups

[cee-chen]

Summary

closes #6415

Note

This is a feature branch. All preceding PRs (listed below) have already been thoroughly code reviewed, QA'd, etc. The only thing this PR should need is a final quick smoke test before it merges in.

• Remove unused EuiTableHeaderButton component #7621
• [EuiTable] Initial table styles setup #7622
• [EuiTable] New responsiveBreakpoint prop + initial setup for mobile vs desktop styles #7625
• [EuiTableRow] Convert to Emotion #7628
• Convert cell styles to Emotion (row cells, header/footer cells, & cell checkboxes) #7631
• [EuiTable][EuiBasicTable][EuiInMemoryTable] Remove responsive prop completely in favor of responsiveBreakpoint #7633
• [EuiBasicTable][EuiInMemoryTable] Remove need for isSelectable, isExpandable, and hasActions props #7632
• Convert table actions hover UX/behavior #7640
• DRY out new EuiTableCellContent internal subcomponent & convert to Emotion #7641
• Final tables PR: cleanup, tests, stories #7642

QA

Storybooks smoke check:

• EuiInMemoryTable
• EuiTable
• EuiTableRow

Docs smoke check:

• https://eui.elastic.co/pr_7654/#/tabular-content/tables
• https://eui.elastic.co/pr_7654/#/tabular-content/in-memory-tables

General checklist

Individual checklist steps should have been completed as part of the constituent PRs.

Emotion checklist

Kibana usage

• Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes
  • [ ] If usage exists, consider converting to a data attribute so that consumers still have something to hook into

---

General

• Output CSS matches the previous CSS (works as expected in all browsers)
• Rendered className(s) read as expected in snapshots and browsers
• [ ] Checked component playground

---

Unit tests

• shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
• [ ] Removed any mount()ed snapshots in favor of render() or a more specific assertion

---

Sass/Emotion conversion process

• Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
• [ ] Removed or converted component-specific Sass vars/mixins to exported JS versions Did not export JS versions (opt instead to remove them)
• Listed var/mixin removals in changelog
• [ ] Ran yarn compile-scss to update var/mixin JSON files
• [ ] Simplified calc() to mathWithUnits if possible (if mixing different unit types, this may not be possible) - No usages
• [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file
• Removed component from src/components/index.scss
• [ ] Deleted any src/amsterdam/overrides/{component}.scss files (styles within should have been converted to the baseline Emotion styles) - No overrides

---

CSS tech debt

• Wrapped all animations or transitions in euiCanAnimate
• Used gap property to add margin between items if using flex
• Converted side specific padding, margin, and position to -inline and -block logical properties (check inline styles as well as CSS)

---

DOM Cleanup

• Did NOT remove any block/element classNames (e.g. euiComponent, euiComponent__child)
• SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana.

---

Kibana due diligence

See below checklist/details section

---

Extras/nice-to-have

• [ ] Documentation pass:
• Reduced specificity where possible (usually by reducing nesting and class name chaining)
• [ ] Check for issues in the backlog that could be a quick fix for that component
• Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about

⚠️ Kibana updates that will be needed for this PR

Prop changes:

• responsive->responsiveBreakpoint (10 found instances):
  • basic/memory tables, responsive={false}
• isSelectable removal
• hasActions removal (remove completely)
• isExpandable removal (remove completely)
• [textOnly removal] - 1, 2 - examples folder only
• (columns / table cell prop change) - showOnHover
  • 2 usages (1, 2) in an Observability table. Will need to convert these to actions columns with showOnHover

Test selector updates

• .euiTableRow-isSelectable
• .euiTableCellContent__hoverItem should be updated to .euiBasicTableAction-showOnHover
• ⚠️ Mobile only DOM no longer rendering at all on desktop may affect test assertions that relied on the DOM being there (but hidden via display: none)

EuiTableRowCell DOM className changes (1065b0b): (4 usages to manually QA during the upgrade):

• result_field.tsx (4 total classNames in file)
• unified_doc_viewer table.tsx (3 total classNames in file)
• source_content.tsx (2 total classNames in file)
• index_table.js (1 className usage in file)
• To consider also: usages that apply inline styles instead of CSS to the cell - can be converted to CSS now?

className removals:

• .euiTable--auto (no usages in Kibana)
• .euiTable--compressed (no usages in Kibana)
• .expandedItemActions__completelyHide
  • 1 usage. Changing their API to use the new actions.showOnHover API will let us remove the className usage
• .euiTableCellContent__hoverItem
  • Same usage as above in Obs table

Direct className usages (e.g. someone calling the euiBadge class on a div instead of simply using the EuiBadge component):

• 1 fleet usage (should be able to just remove the classNames)
• 2 observability & security usages (replace with EuiTableHeaderCell)
• 1 ML usage
• 1 cloud security posture usage

Important

This feature branch is large enough, and the component has high enough usage, that it should have its own release and Kibana upgrade.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7654/
• Storybook: https://eui.elastic.co/pr_7654/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: bf82960

[cee-chen]

Celebratory gif!! 🎉 🥳 🎊

[cee-chen]

Going to try and sneak in one more enhancement into this feature branch before merge #7656 EDIT: Nope, that's not getting in to this feature branch.

[cee-chen]

Going to go ahead and merge this in and start a new release. This is a feature branch and all prior PRs have been approved, so skipping the approval for this PR