[Emotion] Convert EuiPanel (#5891)

* Move amsterdam panel overrides to global
* [EuiPanel] Initial conversion complete
  - Removed explicit `paddingSize` and `borderRadius` classnames.
  - Fixed `useEuiPaddingCSS` and `useEuiBackgroundColorCSS` to render `css` blocks so consuming components render the key name in the class
  - Fixed default size value of `euiShadow`
  - Moved `panelPaddingValues` to be declared in resizable_panel
* [EuiSplitPanel] Fix border radius by just setting `overflow: hidden`
* [EuiPanel] Renamed `PanelPaddingSize` to `PanelPaddingSize_Deprecated` and added comment
  - Fixes popovers and cards
- Fixed EuiCallOut description margin when only child

src-docs/src/views/theme/color/_color_js.tsx

@@ -292,7 +292,7 @@ export const UtilsJS = () => {
         }
         example={
           <p css={[useEuiBackgroundColorCSS().accent, useEuiPaddingCSS().l]}>
-            <code>{useEuiBackgroundColorCSS().accent}</code>
+            <code>background-color: {useEuiBackgroundColor('accent')}</code>
           </p>
         }
         snippetLanguage="tsx"

src-docs/src/views/theme/sizing/_sizing_js.tsx

@@ -295,7 +295,9 @@ side?: '${LOGICAL_SIDES.join("' | '")}';`}
               useEuiPaddingCSS('left').l,
             ]}
           >
-            <code>{useEuiPaddingCSS('left').l}</code>
+            <code>
+              {logicals['padding-left']}: {useEuiPaddingSize('l')}
+            </code>
           </p>
         }
         snippetLanguage="tsx"

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

@@ -3,11 +3,11 @@
 exports[`EuiCallOut is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary testClass1 testClass2 css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary testClass1 testClass2 css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
   data-test-subj="test subject string"
 >
   <div
-    class="euiText euiText--small css-i7i3v9-euiCallOut__description"
+    class="euiText euiText--small css-1vr4wuv-euiCallOut__description"
   >
     <div
       class="euiTextColor euiTextColor--default"
@@ -20,87 +20,87 @@ exports[`EuiCallOut is rendered 1`] = `
 
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--danger euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--danger css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--danger euiCallOut euiCallOut--danger css-1u13ow-euiPanel-grow-none-m-danger-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color primary is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color success is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--success euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--success css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--success euiCallOut euiCallOut--success css-1ga2k31-euiPanel-grow-none-m-success-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color warning is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--warning euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--warning css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--warning euiCallOut euiCallOut--warning css-1fure2l-euiPanel-grow-none-m-warning-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h1 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h2 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h3 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h4 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h5 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h6 is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading p is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props iconType is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props title is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
+  class="euiPanel euiPanel--primary euiCallOut euiCallOut--primary css-hsxldi-euiPanel-grow-none-m-primary-euiCallOut"
 >
   <p
     class="euiTitle euiCallOutHeader__title css-1ps1ss5-euiTitle-xs-euiCallOutHeader-primary"
   >
     Title
   </p>
   <div
-    class="euiText euiText--small css-i7i3v9-euiCallOut__description"
+    class="euiText euiText--small css-1vr4wuv-euiCallOut__description"
   >
     <div
       class="euiTextColor euiTextColor--default"

src/components/call_out/call_out.styles.ts

@@ -19,7 +19,9 @@ export const euiCallOutStyles = ({ euiTheme }: UseEuiTheme) => {
       ${logicalCSS('margin-right', euiTheme.size.s)};
     `,
     euiCallOut__description: css`
-      ${logicalCSS('margin-top', euiTheme.size.s)};
+      :not(:only-child) {
+        ${logicalCSS('margin-top', euiTheme.size.s)};
+      }
     `,
   };
 };