From 576d747a81d78260b26c0985fa444e1b8d39ee3e Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 2 Mar 2022 11:45:00 -0600
Subject: [PATCH] remove legacy theme styles and override (faux inner border)

---
 .../avatar/__snapshots__/avatar.test.tsx.snap | 306 ------------------
 src/components/avatar/avatar.styles.ts        |  22 --
 .../__snapshots__/comment.test.tsx.snap       |  17 -
 .../comment_timeline.test.tsx.snap            |  17 -
 src/global_styling/mixins/_helpers.ts         |  28 +-
 5 files changed, 11 insertions(+), 379 deletions(-)

diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
index eb285856d881..7b167a2bbeb4 100644
--- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap
+++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -27,26 +27,9 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="aria-label"
   class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 emotion-0"
@@ -90,24 +73,7 @@ exports[`EuiAvatar is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -153,26 +119,9 @@ exports[`EuiAvatar props color as null is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-0"
@@ -214,27 +163,10 @@ exports[`EuiAvatar props color as plain is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
   background-color: #FFF;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar--plain emotion-0"
@@ -276,26 +208,9 @@ exports[`EuiAvatar props color as string is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-0"
@@ -338,26 +253,9 @@ exports[`EuiAvatar props iconType and iconColor as null is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-0"
@@ -400,24 +298,7 @@ exports[`EuiAvatar props iconType and iconColor is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -463,24 +344,7 @@ exports[`EuiAvatar props iconType and iconSize is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -526,24 +390,7 @@ exports[`EuiAvatar props iconType is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -589,26 +436,9 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-0"
@@ -645,24 +475,7 @@ exports[`EuiAvatar props initials is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -707,26 +520,9 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-0"
@@ -769,29 +565,12 @@ exports[`EuiAvatar props isDisabled is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
   cursor: not-allowed;
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled emotion-0"
   role="presentation"
@@ -833,26 +612,9 @@ exports[`EuiAvatar props size l is rendered 1`] = `
   height: 40px;
   line-height: 40px;
   font-size: calc(24px * .8);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--l euiAvatar--user emotion-0"
@@ -895,26 +657,9 @@ exports[`EuiAvatar props size m is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-0"
@@ -957,24 +702,7 @@ exports[`EuiAvatar props size s is rendered 1`] = `
   height: 24px;
   line-height: 24px;
   font-size: 12px;
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -1019,24 +747,7 @@ exports[`EuiAvatar props size xl is rendered 1`] = `
   height: calc(16px * 4);
   line-height: calc(16px * 4);
   font-size: calc(32px * .8);
-  position: relative;
-  border-radius: 50%;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
@@ -1081,24 +792,7 @@ exports[`EuiAvatar props type is rendered 1`] = `
   height: 32px;
   line-height: 32px;
   font-size: calc(16px * .9);
-  position: relative;
-  border-radius: 6px;
-}
-
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   border-radius: 6px;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
 }
 
 <div
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 6cd4406e51ce..3577c357063f 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -8,7 +8,6 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { innerBorder } from '../../global_styling/mixins/_helpers';
 import { size } from '../../global_styling/mixins/_size';
 
 export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => {
@@ -44,36 +43,15 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => {
       overflow-x: hidden;
       font-weight: ${euiTheme.font.weight
         .medium}; // Explicitly state so it doesn't get overridden by inheritance
-
-      // Remove faux outline
-      &:after {
-        display: none;
-      }
     `,
     // Variants
     plain: css`
       background-color: ${euiTheme.colors.emptyShade};
     `,
     user: css`
-      ${innerBorder(
-        {
-          type: 'dark',
-          borderRadius: '50%',
-          alpha: 0.05,
-        },
-        euiTheme
-      )}
       border-radius: 50%;
     `,
     space: css`
-      ${innerBorder(
-        {
-          type: 'dark',
-          borderRadius: euiTheme.border.radius.medium,
-          alpha: 0.05,
-        },
-        euiTheme
-      )}
       border-radius: ${euiTheme.border.radius.medium};
     `,
     // States
diff --git a/src/components/comment_list/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
index 02f352e018dd..03a62384e668 100644
--- a/src/components/comment_list/__snapshots__/comment.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment.test.tsx.snap
@@ -115,26 +115,9 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
   height: 40px;
   line-height: 40px;
   font-size: calc(24px * .8);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   class="euiComment"
 >
diff --git a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
index 714718ab567a..5ecbca9dc96f 100644
--- a/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
+++ b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap
@@ -45,26 +45,9 @@ exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = `
   height: 40px;
   line-height: 40px;
   font-size: calc(24px * .8);
-  position: relative;
   border-radius: 50%;
 }
 
-.emotion-0:after {
-  display: none;
-}
-
-.emotion-0:after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 50%;
-  content: '';
-  pointer-events: none;
-  border: 1px solid rgba(52,55,65,0.05);
-}
-
 <div
   class="euiCommentTimeline"
 >
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index 5f4abc6fea85..2a9ffb9bb36d 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -7,7 +7,7 @@
  */
 
 import chroma from 'chroma-js';
-import { UseEuiTheme, useEuiTheme } from '../../services/theme/hooks';
+import { useEuiTheme } from '../../services/theme/hooks';
 import { transparentize } from '../../services/color';
 import { useOverflowShadow } from './_shadow';
 import { CSSProperties } from 'react';
@@ -82,16 +82,18 @@ export const useScrollBar = ({
  */
 
 // Useful border shade when dealing with images of unknown color.
-interface InnerBorderInterface {
+export const useInnerBorder = ({
+  type = 'dark',
+  borderRadius = 0,
+  alpha = 0.1,
+}: {
   type?: 'light' | 'dark';
-  borderRadius?: number | string;
+  borderRadius?: number;
   alpha?: number;
-}
-export const innerBorder = (
-  { type = 'dark', borderRadius = 0, alpha = 0.1 }: InnerBorderInterface,
-  euiTheme: UseEuiTheme['euiTheme']
-) => {
-  const { colors } = euiTheme;
+}) => {
+  const {
+    euiTheme: { colors },
+  } = useEuiTheme();
   const color = chroma(
     type === 'dark' ? colors.darkestShade : colors.emptyShade
   )
@@ -114,14 +116,6 @@ export const innerBorder = (
     }
   `;
 };
-export const useInnerBorder = ({
-  type = 'dark',
-  borderRadius = 0,
-  alpha = 0.1,
-}: InnerBorderInterface) => {
-  const { euiTheme } = useEuiTheme();
-  return innerBorder({ type, borderRadius, alpha }, euiTheme);
-};
 
 /**
  * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.