[Emotion] Convert EuiIcon (#5967)

* Attempt to convert EuiIcon class comp to functional comp

* Reverting to class comp. Better styles. Deleting sass icon files.

* Adding css class name in use

* Update test

* Removing sass-lint important comments

* Adding shouldRenderCustomStyles

* Fix/imporve appendIconComponentCache tests

- by checking for loading state rather than a basic component check

* Showing props table

* Renaming icon map and better `named_colors` types

* Fix playground

* Removing `console.log({ docgenInfo });`

* Passing custom color to Emotion

* Removing background color on `focus`

* Remove need for IconProps docs workaround

* [PR feedback] Clean up ghost/text selectors as well as Elastic-logo specific CSS

* [PR feedback] comment cleanup

* [PR feedback] Export simplification

* Re-adding custom colors as `style`

* Renamed `euiIconSizes` to `euiFormControlIconSizes` and moved to form variables file

* Removing underscore from functions and variables

* Removing unused  `.euiIcon:focus` styles. Adding comments.

* Adding `data-is-loaded` and `data-is-loading` attributes

* Update upcoming_changelogs/5967.md

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* Update src/components/icon/icon.tsx

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* Adding `customColor` to show in className

* Fixing path in `creating-icons` wiki

Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
Co-authored-by: Constance <constancecchen@users.noreply.github.com>

src-docs/src/views/icon/playground.js

@@ -9,7 +9,8 @@ export default () => {
   const docgenInfo = Array.isArray(EuiIcon.__docgenInfo)
     ? EuiIcon.__docgenInfo[0]
     : EuiIcon.__docgenInfo;
-  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  const propsToUse = propUtilityForPlayground(docgenInfo.props, true);
 
   propsToUse.type = iconValidator({ ...propsToUse.type }, 'grid');
 

src/components/badge/badge.tsx

@@ -84,7 +84,7 @@ export type EuiBadgeProps = {
   /**
    * Props passed to the close button.
    */
-  closeButtonProps?: Partial<PropsOf<EuiIcon>>;
+  closeButtonProps?: Partial<PropsOf<typeof EuiIcon>>;
 } & CommonProps &
   ExclusiveUnion<WithIconOnClick, {}> &
   ExclusiveUnion<

src/components/form/form_control_layout/_form_control_layout.scss

@@ -1,10 +1,8 @@
-@import '../../icon/variables';
-
 .euiFormControlLayout {
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);
 
-  $iconSize: map-get($euiIconSizes, 'medium');
+  $iconSize: map-get($euiFormControlIconSizes, 'medium');
   $iconPadding: $euiFormControlPadding;
   $marginBetweenIcons: $euiFormControlPadding / 2;
 
@@ -16,7 +14,7 @@
       padding-right: $iconPadding + ($iconSize + $marginBetweenIcons) * $i;
 
       &[class*='compressed'] {
-        $iconSizeCompressed: map-get($euiIconSizes, 'small');
+        $iconSizeCompressed: map-get($euiFormControlIconSizes, 'small');
         $iconPaddingCompressed: $euiFormControlCompressedPadding;
 
         padding-right: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i;