[Emotion] Convert EuiSplitPanel

[cee-chen]

Summary

closes #6406

Really quick and simple conversion of EuiSplitPanel to Emotion. There's no theme tokens being used so their styles can just be a static object.

This PR also removes an unused Sass file that apparently did not get deleted in the original EuiPanel conversion. There's likely more EuiPanel cleanup work to be done (e.g. removing modifier classes, removing global mixins/variables), but that should likely happen after all current Sass components using panel variables are converted to Emotion.

QA

• gh pr checkout 7172 && yarn storybook
• Go to http://localhost:6006/?path=/story/euisplitpanel--split-panel-inner and confirm that each props control toggle behaves as you would expect / doesn't look broken
• Go to http://localhost:6006/?path=/story/euisplitpanel--split-panel-outer and set the column type to row (horizontal panels)
• Resize the viewport down to small mobile and confirm that it collapses to vertically stacked panels

General checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• A changelog entry exists and is marked appropriately

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 - No modifier usage
• Any test/query selectors that will need to be updated - Non
• 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) - None

---

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, but added Storybooks

---

Unit tests

• shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)

---

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
• [ ] 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)
• [ ] 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)
• SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana.

---

Extras/nice-to-have

• Reduced specificity where possible (usually by reducing nesting and class name chaining)
  • Note that this wasn't fully possible for all scenarios, e.g. when hovering a parent affects a child, or for affecting the fill color of SVG icons
• [ ] 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 documentation changes for this PR: https://eui.elastic.co/pr_7172/

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 103fadd

History

• 💚 Build #564 succeeded b094674
• 💔 Build #560 failed 5e3907e

[breehall]

This is good to go! This seems like a fairly easy Emotion conversion without tons of caveats (for once 😅). Double checked the Storybook examples and all props, including responsive ones, toggle as expected.