ref(theme): Move overflowEllipsis to theme (#33924)

* ref(theme): Move overflowEllipsis to theme

* ref(arrayLinks): Use overflowEllipsis from theme

* ref(theme): Return overflowEllipsis.tsx with deprecation tag

static/app/components/actions/menuItemActionLink.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 import ActionLink from 'sentry/components/actions/actionLink';
 import MenuItem from 'sentry/components/menuItem';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 
 function MenuItemActionLink({
   className,
@@ -16,7 +15,7 @@ function MenuItemActionLink({
 }
 const InnerActionLink = styled(ActionLink)`
   color: ${p => p.theme.textColor};
-  ${overflowEllipsis}
+  ${p => p.theme.overflowEllipsis}
   &:hover {
     color: ${p => p.theme.textColor};
   }

static/app/components/breadcrumbs.tsx

@@ -5,7 +5,6 @@ import {LocationDescriptor} from 'history';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 import Link, {LinkProps} from 'sentry/components/links/link';
 import {IconChevron} from 'sentry/icons';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {Theme} from 'sentry/utils/theme';
 import BreadcrumbDropdown, {
@@ -138,8 +137,8 @@ const Breadcrumbs = ({crumbs, linkLastItem = false, ...props}: Props) => {
 };
 
 const getBreadcrumbListItemStyles = (p: {theme: Theme}) => `
+  ${p.theme.overflowEllipsis};
   color: ${p.theme.gray300};
-  ${overflowEllipsis};
   width: auto;
 
   &:last-child {

static/app/components/discover/performanceCardTable.tsx

@@ -12,7 +12,6 @@ import {PanelItem} from 'sentry/components/panels';
 import PanelTable from 'sentry/components/panels/panelTable';
 import {IconArrow} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {Organization, ReleaseProject} from 'sentry/types';
 import DiscoverQuery, {TableData} from 'sentry/utils/discover/discoverQuery';
@@ -794,7 +793,7 @@ const Cell = styled('div')<{align: 'left' | 'right'}>`
   text-align: ${p => p.align};
   margin-left: ${p => p.align === 'left' && space(2)};
   padding-right: ${p => p.align === 'right' && space(2)};
-  ${overflowEllipsis}
+  ${p => p.theme.overflowEllipsis}
 `;
 
 const StyledAlert = styled(Alert)`

static/app/components/discover/transactionsTable.tsx

@@ -8,7 +8,6 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import PanelTable from 'sentry/components/panels/panelTable';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {t} from 'sentry/locale';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
@@ -230,7 +229,7 @@ const HeadCellContainer = styled('div')`
 
 const BodyCellContainer = styled('div')`
   padding: ${space(1)} ${space(2)};
-  ${overflowEllipsis};
+  ${p => p.theme.overflowEllipsis};
 `;
 
 const StyledIconQuestion = styled(QuestionTooltip)`

static/app/components/eventOrGroupTitle.tsx

@@ -2,7 +2,6 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import {BaseGroup, GroupTombstone, Organization} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import {getTitle} from 'sentry/utils/events';
@@ -94,7 +93,7 @@ const StyledStacktracePreview = styled(StackTracePreview)<{
       overflow: hidden;
       height: 100%;
       > span:first-child {
-        ${overflowEllipsis}
+        ${p.theme.overflowEllipsis}
       }
     `}
 `;
@@ -109,7 +108,7 @@ const Wrapper = styled('span')<{hasGroupingTreeUI: boolean}>`
       line-height: 100%;
 
       ${Subtitle} {
-        ${overflowEllipsis};
+        ${p.theme.overflowEllipsis};
         display: inline-block;
         height: 100%;
       }

static/app/components/eventTitleTreeLabel.tsx

@@ -1,7 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {TreeLabelPart} from 'sentry/types';
 import {getTreeLabelPartDetails} from 'sentry/utils/events';
@@ -66,12 +65,12 @@ const Label = styled('div')`
 `;
 
 const PriorityLabel = styled(Label)`
-  ${overflowEllipsis}
+  ${p => p.theme.overflowEllipsis}
   display: inline-block;
 `;
 
 const RemainingLabels = styled('div')`
-  ${overflowEllipsis}
+  ${p => p.theme.overflowEllipsis}
   display: inline-block;
   min-width: 50px;
 `;

static/app/components/events/eventAttachments.tsx

@@ -12,7 +12,6 @@ import EventDataSection from 'sentry/components/events/eventDataSection';
 import FileSize from 'sentry/components/fileSize';
 import {PanelTable} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import {IssueAttachment} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import AttachmentUrl from 'sentry/utils/attachmentUrl';
@@ -178,7 +177,7 @@ const StyledPanelTable = styled(PanelTable)`
 `;
 
 const Name = styled('div')`
-  ${overflowEllipsis};
+  ${p => p.theme.overflowEllipsis};
 `;
 
 const Size = styled('div')`

static/app/components/events/eventMessage.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
 import ErrorLevel from 'sentry/components/events/errorLevel';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {Level} from 'sentry/types';
 
@@ -47,7 +46,7 @@ const StyledErrorLevel = styled(ErrorLevel)`
 `;
 
 const Message = styled('span')`
-  ${overflowEllipsis}
+  ${p => p.theme.overflowEllipsis}
   width: auto;
   max-height: 38px;
 `;

static/app/components/events/groupingInfo/groupingVariant.tsx

@@ -9,7 +9,6 @@ import QuestionTooltip from 'sentry/components/questionTooltip';
 import Tooltip from 'sentry/components/tooltip';
 import {IconCheckmark, IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {
   EventGroupComponent,
@@ -301,7 +300,7 @@ const TextWithQuestionTooltip = styled('div')`
 
 const Hash = styled('span')`
   @media (max-width: ${p => p.theme.breakpoints[0]}) {
-    ${overflowEllipsis};
+    ${p => p.theme.overflowEllipsis};
     width: 210px;
   }
 `;

static/app/components/events/interfaces/debugMeta-v2/index.tsx

@@ -18,7 +18,6 @@ import {PanelTable} from 'sentry/components/panels';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {t} from 'sentry/locale';
 import DebugMetaStore, {DebugMetaActions} from 'sentry/stores/debugMetaStore';
-import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {Group, Organization, Project} from 'sentry/types';
 import {Image, ImageStatus} from 'sentry/types/debugImage';
@@ -593,7 +592,7 @@ const StyledPanelTable = styled(PanelTable)<{scrollbarWidth?: number}>`
   overflow: hidden;
   > * {
     :nth-child(-n + 5) {
-      ${overflowEllipsis};
+      ${p => p.theme.overflowEllipsis};
       border-bottom: 1px solid ${p => p.theme.border};
       :nth-child(5n) {
         height: 100%;