[Emotion] Convert EuiCallOut (#5870)

* Fixed position logicals 😬
* [EuiCallOut] Converted to Emotion
  - Using EuiPanel and EuiTitle directly, changed default heading to `<p>`
* Increased default text contrast value to `4.85`

src-docs/src/views/call_out/call_out_example.js

@@ -75,7 +75,7 @@ export const CallOutExample = {
             <EuiCode>s</EuiCode> (small).
           </li>
           <li>
-            Use an <EuiCode>icon</EuiCode> prop if it adds context.
+            Use an <EuiCode>iconType</EuiCode> if it adds context.
           </li>
         </ul>
       </EuiText>
@@ -86,7 +86,7 @@ export const CallOutExample = {
       title: 'Info',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: infoSource,
         },
       ],
@@ -107,7 +107,7 @@ export const CallOutExample = {
       title: 'Success',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: successSource,
         },
       ],
@@ -125,7 +125,7 @@ export const CallOutExample = {
       title: 'Warning',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: warningSource,
         },
       ],
@@ -141,7 +141,7 @@ export const CallOutExample = {
       title: 'Danger',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: dangerSource,
         },
       ],

src-docs/src/views/call_out/danger.js → src-docs/src/views/call_out/danger.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiCallOut, EuiLink } from '../../../../src/components';
+import { EuiCallOut, EuiLink } from '../../../../src';
 
 export default () => (
   <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">

src-docs/src/views/call_out/info.js → src-docs/src/views/call_out/info.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiCallOut, EuiLink, EuiSpacer } from '../../../../src/components';
+import { EuiCallOut, EuiLink, EuiSpacer } from '../../../../src';
 
 export default () => (
   <div>

src-docs/src/views/call_out/success.js → src-docs/src/views/call_out/success.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiCallOut, EuiLink } from '../../../../src/components';
+import { EuiCallOut, EuiLink } from '../../../../src';
 
 export default () => (
   <EuiCallOut title="Good news, everyone!" color="success" iconType="user">

src-docs/src/views/call_out/warning.js → src-docs/src/views/call_out/warning.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiCallOut, EuiLink, EuiButton } from '../../../../src/components';
+import { EuiCallOut, EuiLink, EuiButton } from '../../../../src';
 
 export default () => (
   <EuiCallOut title="Proceed with caution!" color="warning" iconType="help">

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="euiCallOut euiCallOut--primary testClass1 testClass2"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary testClass1 testClass2 css-1flvw80-euiCallOut"
   data-test-subj="test subject string"
 >
   <div
-    class="euiText euiText--small"
+    class="euiText euiText--small css-i7i3v9-euiCallOut__description"
   >
     <div
       class="euiTextColor euiTextColor--default"
@@ -20,91 +20,87 @@ exports[`EuiCallOut is rendered 1`] = `
 
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--danger"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--danger euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--danger css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color primary is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color success is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--success"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--success euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--success css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props color warning is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--warning"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--warning euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--warning css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h1 is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h2 is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h3 is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h4 is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h5 is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading h6 is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props heading p is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props iconType is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 />
 `;
 
 exports[`EuiCallOut props title is rendered 1`] = `
 <div
-  class="euiCallOut euiCallOut--primary"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--primary euiPanel--noShadow euiPanel--noBorder euiCallOut euiCallOut--primary css-1flvw80-euiCallOut"
 >
-  <div
-    class="euiCallOutHeader"
+  <p
+    class="euiTitle euiCallOutHeader__title css-1ps1ss5-euiTitle-xs-euiCallOutHeader-primary"
   >
-    <span
-      class="euiCallOutHeader__title"
-    >
-      Title
-    </span>
-  </div>
+    Title
+  </p>
   <div
-    class="euiText euiText--small"
+    class="euiText euiText--small css-i7i3v9-euiCallOut__description"
   >
     <div
       class="euiTextColor euiTextColor--default"

src/components/call_out/_index.scss

@@ -1,4 +1,3 @@
 @import 'variables';
 @import 'mixins';
 
-@import 'call_out';

src/components/call_out/_mixins.scss

@@ -1,4 +1,10 @@
+// Kibana's Ace Editor uses this function, can't remove yet
+// https://github.com/elastic/kibana/blob/main/src/core/public/styles/_ace_overrides.scss
+// As well as deprecation notices
+// https://github.com/elastic/kibana/blob/main/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss
 @function euiCallOutColor($type: 'primary', $returnBackgroundOrForeground: 'background') {
+  @warn 'euiCallOutColor() is set for deprecation. Please consider using EuiCallOut directly.';
+
   @if (map-has-key($euiCallOutTypes, $type)) {
     $color: map-get($euiCallOutTypes, $type);
     $backgroundColor: tintOrShade($color, 90%, 70%);
@@ -15,13 +21,3 @@
     @warn 'Incorrect type of call out provided. See the $euiCallOutTypes map for allowed values.';
   }
 }
-
-@mixin euiCallOutTitle($size: null) {
-  @if ($size == 's') {
-    @include euiTitle('xxs');
-    font-weight: $euiFontWeightRegular;
-  } @else {
-    @include euiTitle('xs');
-    font-weight: $euiFontWeightRegular;
-  }
-}

src/components/call_out/_variables.scss

@@ -1,4 +1,4 @@
-// Modifier naming and colors.
+// Used in mixin that's used in Kibana
 $euiCallOutTypes: (
   primary: $euiColorPrimary,
   success: $euiColorSuccess,

src/components/call_out/call_out.styles.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+export const euiCallOutStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiCallOut: css``,
+    euiCallOut__icon: css`
+      position: relative;
+      ${logicalCSS('top', '-1px')};
+      ${logicalCSS('margin-right', euiTheme.size.s)};
+    `,
+    euiCallOut__description: css`
+      ${logicalCSS('margin-top', euiTheme.size.s)};
+    `,
+  };
+};
+
+export const euiCallOutHeadingStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiCallOutHeader: css`
+      font-weight: ${euiTheme.font.weight.medium};
+      margin-bottom: 0 !important; // In case it's nested inside EuiText
+    `,
+
+    primary: css`
+      color: ${euiTheme.colors.primaryText};
+    `,
+    success: css`
+      color: ${euiTheme.colors.successText};
+    `,
+    warning: css`
+      color: ${euiTheme.colors.warningText};
+    `,
+    danger: css`
+      color: ${euiTheme.colors.dangerText};
+    `,
+  };
+};