[Emotion] EuiCollapsibleNav

[daveyholler]

Acceptance criteria

• All SCSS files have been removed from the component(s) directory
• All SCSS overrides have been removed from the Amsterdam theme
• Changelog is updated
  - [ ] Breaking changes are identified and broadcast to consumers
  - [ ] Any dependent components are identified in a new issue

Checklists

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 ~
  ~ > NOTE: Class components wrapped in withEuiTheme need to pass true as the second argument to its propUtilityForPlayground in src-docs/src/views/{component}/playground.js

---

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
• Converted Enzyme tests to RTL
• Added Storybook stories

---

Sass/Emotion conversion process

• 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)
  - [ ] 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

---

CSS tech debt

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

---

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

• 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:
• Any test/query selectors that will need to be updated
  • 1 test query in use, none that needs updating
    - [ ] 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

---

Extras/nice-to-have

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

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.