[CSS-in-JS] Convert EuiAvatar (#5670)

* style with emotion

* remove theme vars

* snapshot updates

* remove legacy theme styles and override (faux inner border)

* CL

* fix snapshots

* refactor

* clean up

* WIP: relocate css array

* CL

* fix CL

* add renderWithStyles test; update snapshots

* wiki

* Tried: Moved sizing to an external function
It removed the size `-m` from the class ☹️

* Option 2: just size
Fixes class name output but is it worth it?

* Option 3: Ensure css`` is the value of the key

Adds a typically unecessary extra css`` wrapper but keeps the keys

* refactor sizes

* remove isPlain className

* add wiki

Co-authored-by: cchaos <caroline.horn@elastic.co>

src-docs/src/views/theme/_json/eui_theme_dark.json

@@ -6,24 +6,6 @@
     "l": "24px",
     "xl": "32px"
   },
-  "avatarSizing": {
-    "s": {
-      "size": "24px",
-      "font-size": "12px"
-    },
-    "m": {
-      "size": "32px",
-      "font-size": "14.4px"
-    },
-    "l": {
-      "size": "40px",
-      "font-size": "19.200000000000003px"
-    },
-    "xl": {
-      "size": "64px",
-      "font-size": "25.6px"
-    }
-  },
   "euiBadgeGroupGutterTypes": {
     "gutterExtraSmall": "4px",
     "gutterSmall": "8px"

src-docs/src/views/theme/_json/eui_theme_light.json

@@ -6,24 +6,6 @@
     "l": "24px",
     "xl": "32px"
   },
-  "avatarSizing": {
-    "s": {
-      "size": "24px",
-      "font-size": "12px"
-    },
-    "m": {
-      "size": "32px",
-      "font-size": "14.4px"
-    },
-    "l": {
-      "size": "40px",
-      "font-size": "19.200000000000003px"
-    },
-    "xl": {
-      "size": "64px",
-      "font-size": "25.6px"
-    }
-  },
   "euiBadgeGroupGutterTypes": {
     "gutterExtraSmall": "4px",
     "gutterSmall": "8px"

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

@@ -3,7 +3,7 @@
 exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
+  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 css-yd7f8d-euiAvatar-m-user"
   data-test-subj="test subject string"
   role="img"
   style="background-color:#ee789d;color:#000000"
@@ -20,7 +20,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
 exports[`EuiAvatar is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2"
+  class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 css-yd7f8d-euiAvatar-m-user"
   data-test-subj="test subject string"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
@@ -37,7 +37,7 @@ exports[`EuiAvatar is rendered 1`] = `
 exports[`EuiAvatar props color as null is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   title="name"
 >
@@ -52,7 +52,7 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
 exports[`EuiAvatar props color as plain is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar--plain"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-16zsvx6-euiAvatar-m-user-plain"
   role="img"
   title="name"
 >
@@ -67,7 +67,7 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
 exports[`EuiAvatar props color as string is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#000;color:#FFFFFF"
   title="name"
@@ -83,7 +83,7 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
 exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -100,7 +100,7 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
 exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -118,7 +118,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
 exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -136,7 +136,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
 exports[`EuiAvatar props iconType is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -154,7 +154,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
 exports[`EuiAvatar props imageUrl is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000;background-image:url(image url)"
   title="name"
@@ -164,7 +164,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
 exports[`EuiAvatar props initials is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -180,7 +180,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
 exports[`EuiAvatar props initialsLength is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -195,7 +195,7 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
 
 exports[`EuiAvatar props isDisabled is rendered 1`] = `
 <div
-  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled"
+  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled css-1m6lajy-euiAvatar-m-user-isDisabled"
   role="presentation"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -211,7 +211,7 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
 exports[`EuiAvatar props size l is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--l euiAvatar--user"
+  class="euiAvatar euiAvatar--l euiAvatar--user css-d4s9pe-euiAvatar-l-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -227,7 +227,7 @@ exports[`EuiAvatar props size l is rendered 1`] = `
 exports[`EuiAvatar props size m is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -243,7 +243,7 @@ exports[`EuiAvatar props size m is rendered 1`] = `
 exports[`EuiAvatar props size s is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--s euiAvatar--user"
+  class="euiAvatar euiAvatar--s euiAvatar--user css-1e7wq2y-euiAvatar-s-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -259,7 +259,7 @@ exports[`EuiAvatar props size s is rendered 1`] = `
 exports[`EuiAvatar props size xl is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--xl euiAvatar--user"
+  class="euiAvatar euiAvatar--xl euiAvatar--user css-tifdxf-euiAvatar-xl-user"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -275,7 +275,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
 exports[`EuiAvatar props type is rendered 1`] = `
 <div
   aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--space"
+  class="euiAvatar euiAvatar--m euiAvatar--space css-1vuomnm-euiAvatar-m-space"
   role="img"
   style="background-color:#e4a6c7;color:#000000"
   title="name"
@@ -289,3 +289,48 @@ exports[`EuiAvatar props type is rendered 1`] = `
 `;
 
 exports[`EuiAvatar should throw error if color is not a hex 1`] = `"EuiAvatar needs to pass a valid color. This can either be a three or six character hex value"`;
+
+exports[`EuiAvatar should throw error if color is not a hex: renders with emotion styles 1`] = `
+.css-yd7f8d-euiAvatar-m-user {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  text-align: center;
+  vertical-align: middle;
+  overflow-x: hidden;
+  font-weight: 500;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  font-size: calc(16px * 0.9);
+  border-radius: 50%;
+}
+
+<div
+  aria-label="name"
+  class="euiAvatar euiAvatar--m euiAvatar--user css-yd7f8d-euiAvatar-m-user"
+  role="img"
+  style="background-color:#e4a6c7;color:#000000"
+  title="name"
+>
+  <span
+    aria-hidden="true"
+  >
+    n
+  </span>
+</div>
+`;