[Emotion] Convert EuiContextMenu, EuiContextMenuPanel, and EuiContextMenuItem

[cee-chen]

Summary

closes #6392

Converting this component to CSS-in-JS also will also address elastic/kibana#169571 and elastic/kibana#169313 (comment) (once merged into Kibana main).

This is kind of a lot to review (especially tests, which I went in and edited judiciously), so I think I'd recommend sticking to QA only for reviewing this PR (as regression/QA testing is more important here)

Also while here, I removed an extra unnecessary <div> wrapper within EuiContextMenuItem. Div wrappers left me an orphan in a dark alley at a young age, and this is how I seek justice.

QA

• Go to https://eui.elastic.co/pr_7312/#/navigation/context-menu
• Regression test that all context menus look the same as production
  • ⚠️ NOTE: There is one (intentional) change, which is that context menu titles are now slightly less tall than before. This is expected, and due to changes in line-height from new euiTitle Emotion styles.
• Go to https://eui.elastic.co/pr_7312/#/layout/bottom-bar
• Click the first toggle example
• Click the Help button
• Confirm that the resulting context menu popover renders with the correct text color in both light and dark mode

General checklist

• Browser QA
  • Checked in both light and dark 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
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist - N/A

Emotion checklist

Kibana usage

• Pre-emptively check how your conversion will impact the next Kibana upgrade. This entails searching/grepping through Kibana (excluding **/target, **/*.snap, **/*.storyshot for less noise) for eui{Component} (case sensitive) to find:
• Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes - None
• Any test/query selectors that will need to be updated
  • ⚠️ 1 usage
• Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted - None
• Any direct className usages that will need to be refactored (e.g. someone calling the euiBadge class on a div instead of simply using the EuiBadge component)
  • ⚠️ Yes, 1 usage

---

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 No playground

---

Unit tests

• shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
• Enzyme tests converted to RTL

---

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
• Listed var/mixin removals in changelog
• [ ] Simplified calc() to mathWithUnits if possible (if mixing different unit types, this may not be possible)
• [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file
• All SCSS files have been removed from the component(s) directory
• [ ] All SCSS overrides have been removed from the Amsterdam theme 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) - Note: removed an entire child node/div wrapper
• SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana. - No usages

---

Extras/nice-to-have

• Reduced specificity where possible (usually by reducing nesting and class name chaining)
• [ ] Documentation pass
• [ ] 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

[kibanamachine]

Preview staging links for this PR:

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7c2c46f

[1Copenut]

👍 LGTM! I ran through your manual QA criteria on all four evergreen browsers in light and dark themes. No issues except the slightly shorter context menu title as noted in the description.