[Emotion] Convert EuiCode and EuiCodeBlock (#6263)

* Splitting components and adding styles.ts files

* Splitting code block virtualized as a component

* Adjusting paddings

* Add fullscreen styles

* Fixing lint errors. Adding CL

* Adding euiCodeSyntaxStyles to emotion global

* Uncommenting test

* Remove Global Emotion CSS

- which removes useLayoutEffect warnings in tests

* Fix code block mounted tests

- because they're mounted, there's now a million Emotion wrappers with repeated props and we have to specify the non-emotion ones

- also remove mounted snapshot

* Removed unnecessary Emotion styles

* Use `@emotion/css` to flatten euiCodeBlock__line CSS

* [Architectural refactor]

Move hooks and sub-components to files organized by concept/feature

+ other misc cleanup

* Clean up styles further

- went down a bit of a rabbit hole with this, sorry - especially w/ refactoring `mathWithUnits` to accept multiple args (been on my radar for some time)

- the major bug that this work fixes is that we *can't* use a dynamic `paddingSize` based on isFullScreen because the fullscreen code block and non-fullscreen code block need separate and non-connected padding sizes

- in the end i'm still not 100% convinced the code is less 'ugly' with the new `generatePaddingCss` util but our Emotion styles are now more static at least :/ which, considering perf is already a little questionable with the tokens mixin, I thought was worth the tradeoff

* Clean up line CSS further

- no need for extra `style` + calculation - just use flex
- allows removing static reference to euiSizeS

* Fix virtualized code blocks not respecting paddingSize

+ dry out tabIndex prop

* [misc] style logical property

* Added `shouldRenderCustomStyles`

Co-authored-by: Constance Chen <[email protected]>

Author: elizabetdev

src-docs/src/views/code/virtualized_flyout.tsx

@@ -25,7 +25,7 @@ export default () => {
             <h2 id="flyoutTitle">A flyout with just code</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
-        <div style={{ height: '100%' }}>
+        <div style={{ blockSize: '100%' }}>
           <EuiCodeBlock
             language="json"
             overflowHeight={'100%'}

src/components/code/__snapshots__/code.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiCode renders a code snippet 1`] = `
 <code
   aria-label="aria-label"
-  class="euiCode testClass1 testClass2"
+  class="euiCode testClass1 testClass2 emotion-euiCode"
   data-code-language="text"
   data-test-subj="test subject string"
 >
@@ -15,7 +15,7 @@ console.log(some);
 exports[`EuiCode renders languages 1`] = `
 <code
   aria-label="aria-label"
-  class="euiCode testClass1 testClass2"
+  class="euiCode testClass1 testClass2 emotion-euiCode"
   data-code-language="js"
   data-test-subj="test subject string"
 >
@@ -80,7 +80,7 @@ exports[`EuiCode renders languages 1`] = `
 exports[`EuiCode renders transparent backgrounds 1`] = `
 <code
   aria-label="aria-label"
-  class="euiCode euiCode--transparentBackground testClass1 testClass2"
+  class="euiCode testClass1 testClass2 emotion-euiCode-transparentBackground"
   data-code-language="text"
   data-test-subj="test subject string"
 >