ref(ui): Replaced Warning icon in AlertBadge (#31654)

* ref(ui): added Exclamation icon

* added exclamation icon to index

* replaced warning with exclamation and fixed the size of AlertBadge

* Update static/app/icons/iconExclamation.tsx

Co-authored-by: Scott Cooper <scttcper@gmail.com>

* fixed test

* fixed more tests

* ref(ui): added Exclamation icon

* added exclamation icon to index

* replaced warning with exclamation and fixed the size of AlertBadge

* fixed test

* Update static/app/icons/iconExclamation.tsx

Co-authored-by: Scott Cooper <scttcper@gmail.com>

* fixed more tests

Co-authored-by: Scott Cooper <scttcper@gmail.com>

static/app/icons/iconExclamation.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import SvgIcon, {SVGIconProps} from './svgIcon';
+
+const IconExclamation = React.forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref}>
+      <g>
+        <path d="M8.88588 1.41773L8.88588 10.0778C8.88588 10.4386 8.53153 10.6552 8.05907 10.6552C7.5866 10.6552 7.11414 10.4386 7.11414 10.0778L7.11414 1.41773C7.11414 1.12906 7.46848 0.840389 8.05907 0.840388C8.64965 0.840388 8.88588 1.12906 8.88588 1.41773Z" />
+        <path d="M7.99999 12.9559C7.32513 12.9559 6.77805 13.5018 6.77805 14.1752C6.77805 14.8485 7.32513 15.3944 7.99998 15.3944C8.67484 15.3944 9.22192 14.8485 9.22192 14.1752C9.22192 13.5018 8.67484 12.9559 7.99999 12.9559Z" />
+      </g>
+    </SvgIcon>
+  );
+});
+
+IconExclamation.displayName = 'IconExclamation';
+
+export {IconExclamation};

static/app/icons/index.tsx

@@ -25,6 +25,7 @@ export {IconDocs} from './iconDocs';
 export {IconDownload} from './iconDownload';
 export {IconEdit} from './iconEdit';
 export {IconEllipsis} from './iconEllipsis';
+export {IconExclamation} from './iconExclamation';
 export {IconFatal} from './iconFatal';
 export {IconFile} from './iconFile';
 export {IconFilter} from './iconFilter';

static/app/views/alerts/alertBadge.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import {IconCheckmark, IconFire, IconIssues, IconWarning} from 'sentry/icons';
+import {IconCheckmark, IconExclamation, IconFire, IconIssues} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Color} from 'sentry/utils/theme';
@@ -27,7 +27,7 @@ function AlertBadge({status, hideText = false, isIssue}: Props) {
     color = 'red300';
   } else if (status === IncidentStatus.WARNING) {
     statusText = t('Warning');
-    Icon = IconWarning;
+    Icon = IconExclamation;
     color = 'yellow300';
   }
 
@@ -54,23 +54,21 @@ const AlertIconWrapper = styled('div')<{color: Color; icon: React.ReactNode}>`
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  /* icon warning needs to be treated differently to look visually centered */
-  line-height: ${p => (p.icon === IconWarning ? undefined : 1)};
   left: 3px;
   min-width: 30px;
 
   &:before {
     content: '';
     position: absolute;
-    width: 22px;
-    height: 22px;
+    width: 28px;
+    height: 28px;
     border-radius: ${p => p.theme.borderRadius};
     background-color: ${p => p.theme[p.color]};
     transform: rotate(45deg);
   }
 
   svg {
-    width: ${p => (p.icon === IconIssues ? '11px' : '13px')};
+    width: ${p => (p.icon === IconIssues ? '13px' : '16px')};
     z-index: 1;
   }
 `;

static/app/views/alerts/rules/row.tsx

@@ -275,7 +275,7 @@ const AlertNameWrapper = styled(FlexCenter)<{isIssueAlert?: boolean}>`
 
 const AlertNameAndStatus = styled('div')`
   ${overflowEllipsis}
-  margin-left: ${space(1.5)};
+  margin-left: ${space(2)};
   line-height: 1.35;
 `;
 

static/app/views/projectDetail/projectLatestAlerts.tsx

@@ -9,7 +9,7 @@ import Link from 'sentry/components/links/link';
 import Placeholder from 'sentry/components/placeholder';
 import TimeSince from 'sentry/components/timeSince';
 import {URL_PARAM} from 'sentry/constants/pageFilters';
-import {IconCheckmark, IconFire, IconOpen, IconWarning} from 'sentry/icons';
+import {IconCheckmark, IconExclamation, IconFire, IconOpen} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
@@ -143,7 +143,7 @@ class ProjectLatestAlerts extends AsyncComponent<Props, State> {
     const isResolved = status === IncidentStatus.CLOSED;
     const isWarning = status === IncidentStatus.WARNING;
 
-    const Icon = isResolved ? IconCheckmark : isWarning ? IconWarning : IconFire;
+    const Icon = isResolved ? IconCheckmark : isWarning ? IconExclamation : IconFire;
 
     const statusProps = {isResolved, isWarning};
 
@@ -255,7 +255,7 @@ const AlertBadge = styled('div')<{icon: React.ReactNode} & StatusColorProps>`
   justify-content: center;
   flex-shrink: 0;
   /* icon warning needs to be treated differently to look visually centered */
-  line-height: ${p => (p.icon === IconWarning ? undefined : 1)};
+  line-height: ${p => (p.icon === IconExclamation ? undefined : 1)};
 
   &:before {
     content: '';
@@ -275,6 +275,7 @@ const AlertDetails = styled('div')`
   font-size: ${p => p.theme.fontSizeMedium};
   margin-left: ${space(2)};
   ${overflowEllipsis}
+  line-height: 1.35;
 `;
 
 const AlertTitle = styled('div')`

tests/js/spec/views/projectDetail/projectLatestAlerts.spec.jsx

@@ -63,8 +63,12 @@ describe('ProjectDetail > ProjectLatestAlerts', function () {
     );
 
     expect(wrapper.find('AlertRowLink').at(0).find('IconFire').exists()).toBeTruthy();
-    expect(wrapper.find('AlertRowLink').at(0).find('IconWarning').exists()).toBeFalsy();
-    expect(wrapper.find('AlertRowLink').at(1).find('IconWarning').exists()).toBeTruthy();
+    expect(
+      wrapper.find('AlertRowLink').at(0).find('IconExclamation').exists()
+    ).toBeFalsy();
+    expect(
+      wrapper.find('AlertRowLink').at(1).find('IconExclamation').exists()
+    ).toBeTruthy();
     expect(
       wrapper.find('AlertRowLink').at(2).find('IconCheckmark').exists()
     ).toBeTruthy();