[Meta][CSS-in-JS] Component conversions

[Wiki Doc for How to Write Styles with Emotion](https://github.com/elastic/eui/blob/main/wiki/writing-styles-with-emotion.md)

### Completed

- [x] [Accordion](https://elastic.github.io/eui/#/layout/accordion) (#5826) @1Copenut 
- [x] [Bottom bar](https://elastic.github.io/eui/#/layout/bottom-bar) @breehall #5823 
- [x] [Flex](https://elastic.github.io/eui/#/layout/flex) @constancecchen #6270
- [x] [Flyout](https://elastic.github.io/eui/#/layout/flyout) @breehall #6213 
- [x] [Horizontal rule](https://elastic.github.io/eui/#/layout/horizontal-rule) (#5815)
- [x] [Page](https://elastic.github.io/eui/#/layout/page) @cchaos 
- [x] [Page header](https://elastic.github.io/eui/#/layout/page-header) @cchaos 
- [x] [Panel](https://elastic.github.io/eui/#/layout/panel) @cchaos #5891 
- [x] [Popover](https://elastic.github.io/eui/#/layout/popover) @cchaos #5977
- [x] [Spacer](https://elastic.github.io/eui/#/layout/spacer) (#5812) 
- [x] [Button](https://elastic.github.io/eui/#/navigation/button) 
  - #5989
  - #6150
- [x] [Facet](https://elastic.github.io/eui/#/navigation/facet) @miukimiu (#5878) 
- [x] [Link](https://elastic.github.io/eui/#/navigation/link) (#5856) @MichaelMarcialis 
- [x] [Pagination](https://elastic.github.io/eui/#/navigation/pagination) #6109
- [x] [Tabs](https://elastic.github.io/eui/#/navigation/tabs) #6311
- [x] [Aspect ratio](https://elastic.github.io/eui/#/display/aspect-ratio) (#5818)
- [x] [Avatar](https://elastic.github.io/eui/#/display/avatar) (#5670)
- [x] [Badge](https://elastic.github.io/eui/#/display/badge) (#6224, #6258)
- [x] [Callout](https://elastic.github.io/eui/#/display/callout) @cchaos #5870 
- [x] [Card](https://elastic.github.io/eui/#/display/card) #6110 
- [x] [Comment list](https://elastic.github.io/eui/#/display/comment-list) @miukimiu (#5692)
- [x] [Description list](https://elastic.github.io/eui/#/display/description-list) @breehall #5971 
- [x] [Health](https://elastic.github.io/eui/#/display/health) @constancecchen #5832
- [x] [Icons](https://elastic.github.io/eui/#/display/icons) @miukimiu #5967
- [x] [Token](https://elastic.github.io/eui/#/display/icons#tokens) @miukimiu #6067
- [x] [Image](https://elastic.github.io/eui/#/display/image) @miukimiu #5969 
- [x] [List group](https://elastic.github.io/eui/#/display/list-group) @miukimiu #6207
- [x] [Loading](https://elastic.github.io/eui/#/display/loading) @cchaos #5845 
  - [x] [Loading Chart](https://github.com/elastic/eui/blob/aff98287c04a8fae6b6137c25633ede1f10378d7/src/components/loading/_loading_chart.scss) (#5821) @cchaos
- [x] [Progress](https://elastic.github.io/eui/#/display/progress) @constancecchen #5986
- [x] [Range sliders](https://elastic.github.io/eui/#/forms/range-sliders) @miukimiu  #6092
- [x] [Stat](https://elastic.github.io/eui/#/display/stat) @constancecchen #5968
- [x] [Text](https://elastic.github.io/eui/#/display/text) @constancecchen #5895
- [x] [Title](https://elastic.github.io/eui/#/display/title) @constancecchen #5842
- [x] [Toast](https://elastic.github.io/eui/#/display/toast) #6068 
- [x] [Tooltip](https://elastic.github.io/eui/#/display/tooltip) #6104
- [x] [Tour](https://elastic.github.io/eui/#/display/tour) #6087
- [x] [Code](https://elastic.github.io/eui/#/editors-syntax/code) @miukimiu #6263
- [x] #6403 @miukimiu  (#6321) 

**Utilities**

- [x] [Accessibility](https://elastic.github.io/eui/#/utilities/accessibility)
  - [x] [Screen reader only](https://elastic.github.io/eui/#/utilities/accessibility#screen-reader-only) #5846 
  - [x] [Skip link](https://elastic.github.io/eui/#/utilities/accessibility#skip-link) #5851 
- [x] [Beacon](https://elastic.github.io/eui/#/utilities/beacon) @miukimiu (#5814)
- [x] [CSS utility classes](https://elastic.github.io/eui/#/utilities/css-utility-classes) #6124
- [x] [Error boundary](https://elastic.github.io/eui/#/utilities/error-boundary) #6053 
- [x] [Highlight and mark](https://elastic.github.io/eui/#/utilities/highlight-and-mark) (#4575)
- [x] [Overlay mask](https://elastic.github.io/eui/#/utilities/overlay-mask) #6090
- [x] [Portal](https://elastic.github.io/eui/#/utilities/portal) #6075
- [x] [Text diff](https://elastic.github.io/eui/#/utilities/text-diff) #6056

```[tasklist]
## Partially complete
- [x] https://github.com/elastic/eui/issues/6388
- [ ] https://github.com/elastic/eui/issues/6653
- [ ] #6386 
- [ ] #6408
- [ ] https://github.com/elastic/eui/issues/6406
```
```[tasklist]
## Display
- [ ] #6404
- [ ] #6397
- [ ] #6396
```
```[tasklist]
## Navigation
- [ ] #6389
- [ ] #6392
- [ ] #6393
- [ ] #6412
- [ ] #6416
- [ ] #6401
- [x] #6413
- [x] #6418
```
```[tasklist]
## Layout
- [ ] #6417
- [ ] https://github.com/elastic/eui/issues/6405
```
```[tasklist]
## Tables
- [ ] #6415 
- [ ] #6387
```
```[tasklist]
## Forms
- [x] https://github.com/elastic/eui/issues/6398
- [ ] https://github.com/elastic/eui/issues/6410
- [ ] https://github.com/elastic/eui/issues/6411
- [ ] https://github.com/elastic/eui/issues/6391
- [ ] https://github.com/elastic/eui/issues/6390
- [ ] #6400
```
```[tasklist]
## Low priority (3rd party components or components that may move out of EUI)
- [ ] #6395
- [ ] #6402 
- [ ] #6394 
- [ ] #6414
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Meta][CSS-in-JS] Component conversions #5685

Completed

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

[Meta][CSS-in-JS] Component conversions #5685

Description

Completed

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions