[Emotion] Memoize styles + opinionated clean up more components

packages/eui/src/components/comment_list/__snapshots__/comment.test.tsx.snap

@@ -10,19 +10,15 @@ exports[`EuiComment is rendered 1`] = `
     class="emotion-euiTimelineItemIcon-center"
   >
     <div
-      class="emotion-euiTimelineItemIcon__content"
+      aria-label=""
+      class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+      role="img"
+      title=""
     >
-      <div
-        aria-label=""
-        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-        role="img"
-        title=""
-      >
-        <span
-          class="euiAvatar__icon"
-          data-euiicon-type="userAvatar"
-        />
-      </div>
+      <span
+        class="euiAvatar__icon"
+        data-euiicon-type="userAvatar"
+      />
     </div>
   </div>
   <div
@@ -44,19 +40,15 @@ exports[`EuiComment props event is rendered 1`] = `
     class="emotion-euiTimelineItemIcon-center"
   >
     <div
-      class="emotion-euiTimelineItemIcon__content"
+      aria-label=""
+      class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+      role="img"
+      title=""
     >
-      <div
-        aria-label=""
-        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-        role="img"
-        title=""
-      >
-        <span
-          class="euiAvatar__icon"
-          data-euiicon-type="userAvatar"
-        />
-      </div>
+      <span
+        class="euiAvatar__icon"
+        data-euiicon-type="userAvatar"
+      />
     </div>
   </div>
   <div
@@ -105,19 +97,15 @@ exports[`EuiComment props timestamp is rendered 1`] = `
     class="emotion-euiTimelineItemIcon-center"
   >
     <div
-      class="emotion-euiTimelineItemIcon__content"
+      aria-label=""
+      class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+      role="img"
+      title=""
     >
-      <div
-        aria-label=""
-        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-        role="img"
-        title=""
-      >
-        <span
-          class="euiAvatar__icon"
-          data-euiicon-type="userAvatar"
-        />
-      </div>
+      <span
+        class="euiAvatar__icon"
+        data-euiicon-type="userAvatar"
+      />
     </div>
   </div>
   <div
@@ -168,19 +156,15 @@ exports[`EuiComment renders a body 1`] = `
     class="emotion-euiTimelineItemIcon-top"
   >
     <div
-      class="emotion-euiTimelineItemIcon__content"
+      aria-label=""
+      class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+      role="img"
+      title=""
     >
-      <div
-        aria-label=""
-        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-        role="img"
-        title=""
-      >
-        <span
-          class="euiAvatar__icon"
-          data-euiicon-type="userAvatar"
-        />
-      </div>
+      <span
+        class="euiAvatar__icon"
+        data-euiicon-type="userAvatar"
+      />
     </div>
   </div>
   <div
@@ -210,19 +194,15 @@ exports[`EuiComment renders a timeline icon 1`] = `
     class="emotion-euiTimelineItemIcon-top"
   >
     <div
-      class="emotion-euiTimelineItemIcon__content"
+      aria-label=""
+      class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+      role="img"
+      title=""
     >
-      <div
-        aria-label=""
-        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-        role="img"
-        title=""
-      >
-        <span
-          class="euiAvatar__icon"
-          data-euiicon-type="dot"
-        />
-      </div>
+      <span
+        class="euiAvatar__icon"
+        data-euiicon-type="dot"
+      />
     </div>
   </div>
   <div

packages/eui/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap

@@ -14,19 +14,15 @@ exports[`EuiCommentList is rendered 1`] = `
       class="emotion-euiTimelineItemIcon-center"
     >
       <div
-        class="emotion-euiTimelineItemIcon__content"
+        aria-label=""
+        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+        role="img"
+        title=""
       >
-        <div
-          aria-label=""
-          class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-          role="img"
-          title=""
-        >
-          <span
-            class="euiAvatar__icon"
-            data-euiicon-type="userAvatar"
-          />
-        </div>
+        <span
+          class="euiAvatar__icon"
+          data-euiicon-type="userAvatar"
+        />
       </div>
     </div>
     <div
@@ -53,19 +49,15 @@ exports[`EuiCommentList props gutterSize l is rendered 1`] = `
       class="emotion-euiTimelineItemIcon-center"
     >
       <div
-        class="emotion-euiTimelineItemIcon__content"
+        aria-label=""
+        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+        role="img"
+        title=""
       >
-        <div
-          aria-label=""
-          class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-          role="img"
-          title=""
-        >
-          <span
-            class="euiAvatar__icon"
-            data-euiicon-type="userAvatar"
-          />
-        </div>
+        <span
+          class="euiAvatar__icon"
+          data-euiicon-type="userAvatar"
+        />
       </div>
     </div>
     <div
@@ -92,19 +84,15 @@ exports[`EuiCommentList props gutterSize m is rendered 1`] = `
       class="emotion-euiTimelineItemIcon-center"
     >
       <div
-        class="emotion-euiTimelineItemIcon__content"
+        aria-label=""
+        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+        role="img"
+        title=""
       >
-        <div
-          aria-label=""
-          class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-          role="img"
-          title=""
-        >
-          <span
-            class="euiAvatar__icon"
-            data-euiicon-type="userAvatar"
-          />
-        </div>
+        <span
+          class="euiAvatar__icon"
+          data-euiicon-type="userAvatar"
+        />
       </div>
     </div>
     <div
@@ -131,19 +119,15 @@ exports[`EuiCommentList props gutterSize xl is rendered 1`] = `
       class="emotion-euiTimelineItemIcon-center"
     >
       <div
-        class="emotion-euiTimelineItemIcon__content"
+        aria-label=""
+        class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
+        role="img"
+        title=""
       >
-        <div
-          aria-label=""
-          class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
-          role="img"
-          title=""
-        >
-          <span
-            class="euiAvatar__icon"
-            data-euiicon-type="userAvatar"
-          />
-        </div>
+        <span
+          class="euiAvatar__icon"
+          data-euiicon-type="userAvatar"
+        />
       </div>
     </div>
     <div

packages/eui/src/components/expression/expression.styles.ts

@@ -161,18 +161,16 @@ export const euiExpressionDescriptionStyles = ({ euiTheme }: UseEuiTheme) => {
   };
 };
 
-export const euiExpressionValueStyles = ({}: UseEuiTheme) => {
-  return {
-    euiExpression__value: css``,
-    truncate: css`
-      ${euiTextTruncate()}
-      display: inline-block;
-      vertical-align: bottom;
-    `,
-    columns: css`
-      flex-grow: 1;
-    `,
-  };
+export const euiExpressionValueStyles = {
+  euiExpression__value: css``,
+  truncate: css`
+    ${euiTextTruncate()}
+    display: inline-block;
+    vertical-align: bottom;
+  `,
+  columns: css`
+    flex-grow: 1;
+  `,
 };
 
 export const euiExpressionIconStyles = ({ euiTheme }: UseEuiTheme) => {

packages/eui/src/components/expression/expression.tsx

@@ -14,14 +14,15 @@ import React, {
   FunctionComponent,
 } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { EuiIcon } from '../icon';
-import { useEuiTheme } from '../../services';
 
 import {
   euiExpressionStyles,
   euiExpressionDescriptionStyles,
-  euiExpressionValueStyles,
+  euiExpressionValueStyles as valueStyles,
   euiExpressionIconStyles,
 } from './expression.styles';
 
@@ -112,8 +113,7 @@ export const EuiExpression: FunctionComponent<
 }) => {
   const calculatedColor = isInvalid ? 'danger' : color;
 
-  const theme = useEuiTheme();
-  const styles = euiExpressionStyles(theme);
+  const styles = useEuiMemoizedStyles(euiExpressionStyles);
   const cssStyles = [
     styles.euiExpression,
     onClick && styles.isClickable,
@@ -123,22 +123,23 @@ export const EuiExpression: FunctionComponent<
     display === 'columns' && styles.columns,
     textWrap === 'truncate' && styles.truncate,
   ];
-  const descriptionStyles = euiExpressionDescriptionStyles(theme);
+  const descriptionStyles = useEuiMemoizedStyles(
+    euiExpressionDescriptionStyles
+  );
   const cssDescriptionStyles = [
     descriptionStyles.euiExpression__description,
     isInvalid ? descriptionStyles.danger : descriptionStyles[color],
     uppercase && descriptionStyles.isUppercase,
     textWrap === 'truncate' && descriptionStyles.truncate,
     display === 'columns' && descriptionStyles.columns,
   ];
-  const valueStyles = euiExpressionValueStyles(theme);
   const cssValueStyles = [
     valueStyles.euiExpression__value,
     textWrap === 'truncate' && valueStyles.truncate,
     display === 'columns' && valueStyles.columns,
   ];
 
-  const iconStyles = euiExpressionIconStyles(theme);
+  const iconStyles = useEuiMemoizedStyles(euiExpressionIconStyles);
   const cssIconStyles = [
     iconStyles.euiExpression__icon,
     display === 'columns' && iconStyles.columns,
@@ -153,15 +154,6 @@ export const EuiExpression: FunctionComponent<
       ? { flexBasis: descriptionWidth }
       : undefined;
 
-  const invalidIcon = isInvalid ? (
-    <EuiIcon
-      className="euiExpression__icon"
-      type="warning"
-      css={cssIconStyles}
-      color={calculatedColor}
-    />
-  ) : undefined;
-
   return (
     <Component css={cssStyles} className={classes} onClick={onClick} {...rest}>
       <span
@@ -184,7 +176,14 @@ export const EuiExpression: FunctionComponent<
           {value}
         </span>
       )}
-      {invalidIcon}
+      {isInvalid && (
+        <EuiIcon
+          className="euiExpression__icon"
+          type="warning"
+          css={cssIconStyles}
+          color={calculatedColor}
+        />
+      )}
     </Component>
   );
 };