ref(text-overflow): Update TextOverflow Component
diff --git a/docs-ui/components/textOverflow.stories.js b/docs-ui/components/textOverflow.stories.js
index 1bee66a89e19da..aa94836eb2277c 100644
--- a/docs-ui/components/textOverflow.stories.js
+++ b/docs-ui/components/textOverflow.stories.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import {withInfo} from '@storybook/addon-info';
+import {boolean, select} from '@storybook/addon-knobs';
 
 import TextOverflow from 'app/components/textOverflow';
 
@@ -11,7 +12,16 @@ export const _TextOverflow = withInfo(
   'Simple component that adds "text-overflow: ellipsis" and "overflow: hidden", still depends on container styles'
 )(() => (
   <div style={{width: 50}}>
-    <TextOverflow>AReallyLongTextString</TextOverflow>
+    <TextOverflow
+      isParagraph={boolean('isParagraph', false)}
+      ellipsisDirection={select(
+        'ellipsisDirection',
+        {right: 'right', left: 'left'},
+        'right'
+      )}
+    >
+      AReallyLongTextString
+    </TextOverflow>
   </div>
 ));
 
diff --git a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryDevice.tsx b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryDevice.tsx
index 54ac5fc64643d9..c8b8c64b7d4b2b 100644
--- a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryDevice.tsx
+++ b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryDevice.tsx
@@ -8,7 +8,7 @@ import {getMeta} from 'app/components/events/meta/metaProxy';
 import AnnotatedText from 'app/components/events/meta/annotatedText';
 import DeviceName from 'app/components/deviceName';
 import space from 'app/styles/space';
-import {ParagraphOverflow} from 'app/components/textOverflow';
+import TextOverflow from 'app/components/textOverflow';
 
 import generateClassName from './generateClassName';
 import ContextSummaryNoSummary from './contextSummaryNoSummary';
@@ -79,10 +79,10 @@ const ContextSummaryDevice = ({data}: Props) => {
     <Item className={className} icon={<span className="context-item-icon" />}>
       <h3>{renderName()}</h3>
       {subTitle && (
-        <ParagraphOverflow>
+        <TextOverflow isParagraph>
           <Subject>{subTitle.subject}</Subject>
           <AnnotatedText value={subTitle.value} meta={subTitle.meta} />
-        </ParagraphOverflow>
+        </TextOverflow>
       )}
     </Item>
   );
diff --git a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGPU.tsx b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGPU.tsx
index 3164ccc09f343d..e7d7fd105e82bd 100644
--- a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGPU.tsx
+++ b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGPU.tsx
@@ -7,7 +7,7 @@ import {Meta} from 'app/types';
 import {getMeta} from 'app/components/events/meta/metaProxy';
 import AnnotatedText from 'app/components/events/meta/annotatedText';
 import space from 'app/styles/space';
-import {ParagraphOverflow} from 'app/components/textOverflow';
+import TextOverflow from 'app/components/textOverflow';
 
 import ContextSummaryNoSummary from './contextSummaryNoSummary';
 import generateClassName from './generateClassName';
@@ -62,10 +62,10 @@ const ContextSummaryGPU = ({data}: Props) => {
   return (
     <Item className={className} icon={<span className="context-item-icon" />}>
       <h3>{renderName()}</h3>
-      <ParagraphOverflow>
+      <TextOverflow isParagraph>
         <Subject>{versionElement.subject}</Subject>
         <AnnotatedText value={versionElement.value} meta={versionElement.meta} />
-      </ParagraphOverflow>
+      </TextOverflow>
     </Item>
   );
 };
diff --git a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGeneric.tsx b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGeneric.tsx
index 7f6f117ac5b787..7e5d2cb1d85597 100644
--- a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGeneric.tsx
+++ b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryGeneric.tsx
@@ -5,7 +5,7 @@ import {t} from 'app/locale';
 import {getMeta} from 'app/components/events/meta/metaProxy';
 import AnnotatedText from 'app/components/events/meta/annotatedText';
 import space from 'app/styles/space';
-import {ParagraphOverflow} from 'app/components/textOverflow';
+import TextOverflow from 'app/components/textOverflow';
 
 import ContextSummaryNoSummary from './contextSummaryNoSummary';
 import generateClassName from './generateClassName';
@@ -36,10 +36,10 @@ const ContextSummaryGeneric = ({data, unknownTitle}: Props) => {
   return (
     <Item className={className} icon={<span className="context-item-icon" />}>
       <h3>{renderValue('name')}</h3>
-      <ParagraphOverflow>
+      <TextOverflow isParagraph>
         <Subject>{t('Version:')}</Subject>
         {!data.version ? t('Unknown') : renderValue('version')}
-      </ParagraphOverflow>
+      </TextOverflow>
     </Item>
   );
 };
diff --git a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryOS.tsx b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryOS.tsx
index c7da5b194f1ef4..b4b9e438fa27ef 100644
--- a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryOS.tsx
+++ b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryOS.tsx
@@ -7,7 +7,7 @@ import {Meta} from 'app/types';
 import {getMeta} from 'app/components/events/meta/metaProxy';
 import AnnotatedText from 'app/components/events/meta/annotatedText';
 import space from 'app/styles/space';
-import {ParagraphOverflow} from 'app/components/textOverflow';
+import TextOverflow from 'app/components/textOverflow';
 
 import ContextSummaryNoSummary from './contextSummaryNoSummary';
 import generateClassName from './generateClassName';
@@ -68,10 +68,10 @@ const ContextSummaryOS = ({data}: Props) => {
   return (
     <Item className={className} icon={<span className="context-item-icon" />}>
       <h3>{renderName()}</h3>
-      <ParagraphOverflow>
+      <TextOverflow isParagraph>
         <Subject>{versionElement.subject}</Subject>
         <AnnotatedText value={versionElement.value} meta={versionElement.meta} />
-      </ParagraphOverflow>
+      </TextOverflow>
     </Item>
   );
 };
diff --git a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryUser.tsx b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryUser.tsx
index a2287f78da898c..7147c929f02ccf 100644
--- a/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryUser.tsx
+++ b/src/sentry/static/sentry/app/components/events/contextSummary/contextSummaryUser.tsx
@@ -8,7 +8,7 @@ import UserAvatar from 'app/components/avatar/userAvatar';
 import {getMeta} from 'app/components/events/meta/metaProxy';
 import AnnotatedText from 'app/components/events/meta/annotatedText';
 import space from 'app/styles/space';
-import {ParagraphOverflow} from 'app/components/textOverflow';
+import TextOverflow from 'app/components/textOverflow';
 
 import ContextSummaryNoSummary from './contextSummaryNoSummary';
 import Item from './item';
@@ -49,10 +49,10 @@ const ContextSummaryUser = ({data}: Props) => {
     }
 
     return (
-      <ParagraphOverflow>
+      <TextOverflow isParagraph>
         <Subject>{userDetails.subject}</Subject>
         <AnnotatedText value={userDetails.value} meta={userDetails.meta} />
-      </ParagraphOverflow>
+      </TextOverflow>
     );
   };
 
diff --git a/src/sentry/static/sentry/app/components/textOverflow.tsx b/src/sentry/static/sentry/app/components/textOverflow.tsx
index 05d1828efca500..ee2d0266533a3f 100644
--- a/src/sentry/static/sentry/app/components/textOverflow.tsx
+++ b/src/sentry/static/sentry/app/components/textOverflow.tsx
@@ -1,18 +1,27 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
-const overflow = `
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`;
+import overflowEllipsisLeft from 'app/styles/overflowEllipsisLeft';
+import overflowEllipsis from 'app/styles/overflowEllipsis';
 
-const TextOverflow = styled('div')`
-  ${overflow}
-`;
+type Props = {
+  children: React.ReactNode;
+  isParagraph?: boolean;
+  ellipsisDirection?: 'left' | 'right';
+  className?: string;
+};
 
-const ParagraphOverflow = styled('p')`
-  ${overflow}
+const TextOverflow = styled(({isParagraph, className, children}: Props) => {
+  const Component = isParagraph ? 'p' : 'div';
+  return <Component className={className}>{children}</Component>;
+})`
+  ${p => (p.ellipsisDirection === 'right' ? overflowEllipsis : overflowEllipsisLeft)};
+  width: auto;
 `;
 
-export {TextOverflow, ParagraphOverflow};
+TextOverflow.defaultProps = {
+  ellipsisDirection: 'right',
+  isParagraph: false,
+};
+
 export default TextOverflow;

Unites the `ParagraphOverflow` and `TextOverflow` components
Introduce the prop `ellipsisDirection` which can be `left` or `right`

![image](https://user-images.githubusercontent.com/29228205/98688301-fcd11b00-236a-11eb-851e-f8f858aa7b1f.png)


![image](https://user-images.githubusercontent.com/29228205/98688327-065a8300-236b-11eb-86b4-b4413f745d12.png)
