chevron: remove custom chevron (#88675)

JonasBa · web-flow · commit d905eaf3f235 · 2025-04-04T10:17:11.000-04:00
Removes custom chevron components, as it does not fit well with the rest of the dashboard. It also means that we have two ways to use a chevron, and given that nobody knows the difference, we end up with different chevrons in the app. There are also other issues with animations that make this feel odd, as the dropwdowns open without a transition while the chevron still animates long after the dropdown is open. https://github.com/user-attachments/assets/7eb3f6ed-c468-406f-8142-87b46e825345 Also fixes a small issue where the chevrons are using a different color ![CleanShot 2025-04-03 at 11 16 59@2x](https://github.com/user-attachments/assets/2576db26-67bc-49a8-9926-cfbbc7e382a0)
diff --git a/static/app/components/actions/archive.tsx b/static/app/components/actions/archive.tsx
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
 import {getIgnoreActions} from 'sentry/components/actions/ignore';
-import {Chevron} from 'sentry/components/chevron';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import ExternalLink from 'sentry/components/links/externalLink';
+import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import type {GroupStatusResolution} from 'sentry/types/group';
 import {GroupStatus, GroupSubstatus} from 'sentry/types/group';
@@ -162,12 +162,7 @@ function ArchiveActions({
             aria-label={t('Archive options')}
             size={size}
             icon={
-              <Chevron
-                light
-                color="subText"
-                weight="medium"
-                direction={isOpen ? 'up' : 'down'}
-              />
+              <IconChevron color="subText" direction={isOpen ? 'up' : 'down'} size="xs" />
             }
             disabled={disabled}
           />
diff --git a/static/app/components/actions/resolve.tsx b/static/app/components/actions/resolve.tsx
@@ -3,7 +3,6 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {openModal} from 'sentry/actionCreators/modal';
-import {Chevron} from 'sentry/components/chevron';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {Button, LinkButton} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
@@ -12,7 +11,7 @@ import CustomResolutionModal from 'sentry/components/customResolutionModal';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {Tooltip} from 'sentry/components/tooltip';
-import {IconReleases} from 'sentry/icons';
+import {IconChevron, IconReleases} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {GroupStatusResolution, ResolvedStatusDetails} from 'sentry/types/group';
@@ -272,14 +271,7 @@ function ResolveActions({
             size={size}
             priority={priority}
             aria-label={t('More resolve options')}
-            icon={
-              <Chevron
-                light
-                color="subText"
-                weight="medium"
-                direction={isOpen ? 'up' : 'down'}
-              />
-            }
+            icon={<IconChevron direction={isOpen ? 'up' : 'down'} size="xs" />}
             disabled={isDisabled}
           />
         )}
diff --git a/static/app/components/assigneeBadge.tsx b/static/app/components/assigneeBadge.tsx
@@ -2,13 +2,13 @@ import {Fragment} from 'react';
 import {type DO_NOT_USE_ChonkTheme, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Chevron} from 'sentry/components/chevron';
 import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
 import {Tag} from 'sentry/components/core/badge/tag';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Placeholder from 'sentry/components/placeholder';
 import {Tooltip} from 'sentry/components/tooltip';
+import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Actor} from 'sentry/types/core';
@@ -66,7 +66,7 @@ export function AssigneeBadge({
             style={{color: theme.textColor}}
           >{`${actor.type === 'team' ? '#' : ''}${actor.name}`}</div>
         )}
-        <Chevron light color="subText" direction={chevronDirection} size="small" />
+        <IconChevron color="subText" direction={chevronDirection} size="xs" />
       </Fragment>
     );
   };
@@ -75,7 +75,7 @@ export function AssigneeBadge({
     <Fragment>
       <StyledLoadingIndicator mini relative size={AVATAR_SIZE} />
       {showLabel && 'Loading...'}
-      <Chevron light color="subText" direction={chevronDirection} size="small" />
+      <IconChevron color="subText" direction={chevronDirection} size="xs" />
     </Fragment>
   );
 
@@ -88,7 +88,7 @@ export function AssigneeBadge({
         height={`${AVATAR_SIZE}px`}
       />
       {showLabel && <Fragment>Unassigned</Fragment>}
-      <Chevron light color="subText" direction={chevronDirection} size="small" />
+      <IconChevron color="subText" direction={chevronDirection} size="xs" />
     </Fragment>
   );
 
diff --git a/static/app/components/badge/groupPriority.tsx b/static/app/components/badge/groupPriority.tsx
@@ -6,7 +6,6 @@ import bannerStar from 'sentry-images/spot/banner-star.svg';
 
 import {usePrompt} from 'sentry/actionCreators/prompts';
 import {IconCellSignal} from 'sentry/components/badge/iconCellSignal';
-import {Chevron} from 'sentry/components/chevron';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button, LinkButton} from 'sentry/components/core/button';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
@@ -15,7 +14,7 @@ import {DropdownMenuFooter} from 'sentry/components/dropdownMenu/footer';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import Placeholder from 'sentry/components/placeholder';
 import {Tooltip} from 'sentry/components/tooltip';
-import {IconClose} from 'sentry/icons';
+import {IconChevron, IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Activity} from 'sentry/types/group';
@@ -206,7 +205,7 @@ export function GroupPriorityDropdown({
           size="zero"
         >
           <GroupPriorityBadge showLabel={false} priority={value}>
-            <Chevron light direction={isOpen ? 'up' : 'down'} size="small" />
+            <IconChevron direction={isOpen ? 'up' : 'down'} size="xs" color="subText" />
           </GroupPriorityBadge>
         </DropdownButton>
       )}
diff --git a/static/app/components/core/select/index.chonk.tsx b/static/app/components/core/select/index.chonk.tsx
@@ -1,11 +1,10 @@
 import type {DO_NOT_USE_ChonkTheme} from '@emotion/react';
 import omit from 'lodash/omit';
 
-import {Chevron} from 'sentry/components/chevron';
 import {Button} from 'sentry/components/core/button';
 import type {StylesConfig as ReactSelectStylesConfig} from 'sentry/components/forms/controls/reactSelectWrapper';
 import {components as selectComponents} from 'sentry/components/forms/controls/reactSelectWrapper';
-import {IconClose} from 'sentry/icons';
+import {IconChevron, IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {FormSize} from 'sentry/utils/theme';
@@ -257,7 +256,7 @@ export function ChonkDropdownIndicator(
 ) {
   return (
     <selectComponents.DropdownIndicator {...props}>
-      <Chevron direction="down" size="medium" />
+      <IconChevron direction="down" size="xs" />
     </selectComponents.DropdownIndicator>
   );
 }
diff --git a/static/app/components/core/select/index.tsx b/static/app/components/core/select/index.tsx
@@ -7,7 +7,6 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
-import {Chevron} from 'sentry/components/chevron';
 import {
   ChonkClearIndicator,
   ChonkDropdownIndicator,
@@ -27,7 +26,7 @@ import {
   ReactSelect,
 } from 'sentry/components/forms/controls/reactSelectWrapper';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import {IconClose} from 'sentry/icons';
+import {IconChevron, IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Choices, SelectValue} from 'sentry/types/core';
@@ -70,7 +69,7 @@ function DropdownIndicator(
 ) {
   return (
     <selectComponents.DropdownIndicator {...props}>
-      <Chevron light color="subText" direction="down" size="medium" />
+      <IconChevron color="subText" direction="down" size="xs" />
     </selectComponents.DropdownIndicator>
   );
 }
diff --git a/static/app/components/dropdownButton.tsx b/static/app/components/dropdownButton.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import {Chevron} from 'sentry/components/chevron';
 import type {ButtonProps} from 'sentry/components/core/button';
 import {Button, ButtonLabel} from 'sentry/components/core/button';
+import {IconChevron} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 
 export interface DropdownButtonProps extends Omit<ButtonProps, 'type' | 'prefix'> {
@@ -49,13 +49,10 @@ function DropdownButton({
       {children}
       {showChevron && (
         <ChevronWrap>
-          <Chevron
-            light
+          <IconChevron
             color="subText"
-            size={size === 'xs' ? 'small' : 'medium'}
-            weight="medium"
             direction={isOpen ? 'up' : 'down'}
-            aria-hidden="true"
+            size={size === 'zero' || size === 'xs' ? 'xs' : 'sm'}
           />
         </ChevronWrap>
       )}
diff --git a/static/app/components/events/interfaces/frame/deprecatedLine.tsx b/static/app/components/events/interfaces/frame/deprecatedLine.tsx
@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import classNames from 'classnames';
 
 import {openModal} from 'sentry/actionCreators/modal';
-import {Chevron} from 'sentry/components/chevron';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -16,7 +15,7 @@ import {SourceMapsDebuggerModal} from 'sentry/components/events/interfaces/sourc
 import {getThreadById} from 'sentry/components/events/interfaces/utils';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import StrictClick from 'sentry/components/strictClick';
-import {IconFix, IconRefresh} from 'sentry/icons';
+import {IconChevron, IconFix, IconRefresh} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event, Frame} from 'sentry/types/event';
@@ -322,7 +321,7 @@ function DeprecatedLine({
                 onClick={toggleContext}
                 borderless
               >
-                <Chevron direction={isExpanded ? 'up' : 'down'} size="medium" />
+                <IconChevron direction={isExpanded ? 'up' : 'down'} size="sm" />
               </ToggleContextButton>
             ) : (
               <div style={{width: 20, height: 20}} />
diff --git a/static/app/components/events/interfaces/nativeFrame.tsx b/static/app/components/events/interfaces/nativeFrame.tsx
@@ -2,7 +2,6 @@ import type {MouseEvent} from 'react';
 import {Fragment, useContext, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {Chevron} from 'sentry/components/chevron';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -24,6 +23,7 @@ import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import StrictClick from 'sentry/components/strictClick';
 import {Tooltip} from 'sentry/components/tooltip';
 import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
+import {IconChevron} from 'sentry/icons';
 import {IconFileBroken} from 'sentry/icons/iconFileBroken';
 import {IconRefresh} from 'sentry/icons/iconRefresh';
 import {IconWarning} from 'sentry/icons/iconWarning';
@@ -419,7 +419,7 @@ function NativeFrame({
                 size="zero"
                 borderless
                 aria-label={expanded ? t('Collapse Context') : t('Expand Context')}
-                icon={<Chevron size="medium" direction={expanded ? 'up' : 'down'} />}
+                icon={<IconChevron size="sm" direction={expanded ? 'up' : 'down'} />}
               />
             )}
           </ExpandCell>
diff --git a/static/app/components/group/assignedTo.tsx b/static/app/components/group/assignedTo.tsx
@@ -7,7 +7,6 @@ import {openIssueOwnershipRuleModal} from 'sentry/actionCreators/modal';
 import Access from 'sentry/components/acl/access';
 import AssigneeSelectorDropdown from 'sentry/components/assigneeSelectorDropdown';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {Chevron} from 'sentry/components/chevron';
 import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
 import {Button} from 'sentry/components/core/button';
 import {
@@ -16,7 +15,7 @@ import {
 } from 'sentry/components/group/assigneeSelector';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import * as SidebarSection from 'sentry/components/sidebarSection';
-import {IconSettings, IconUser} from 'sentry/icons';
+import {IconChevron, IconSettings, IconUser} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import MemberListStore from 'sentry/stores/memberListStore';
 import TeamStore from 'sentry/stores/teamStore';
@@ -256,9 +255,9 @@ function AssignedTo({
           <ActorName>{getAssignedToDisplayName(group) ?? t('No one')}</ActorName>
         </ActorWrapper>
         {!disableDropdown && (
-          <Chevron
+          <IconChevron
             data-test-id="assigned-to-chevron-icon"
-            size="large"
+            size="md"
             direction={isOpen ? 'up' : 'down'}
           />
         )}
diff --git a/static/app/components/onboardingWizard/content.tsx b/static/app/components/onboardingWizard/content.tsx
@@ -7,7 +7,6 @@ import partition from 'lodash/partition';
 import {openHelpSearchModal} from 'sentry/actionCreators/modal';
 import {navigateTo} from 'sentry/actionCreators/navigation';
 import {useUpdateOnboardingTasks} from 'sentry/actionCreators/onboardingTasks';
-import {Chevron} from 'sentry/components/chevron';
 import {Button} from 'sentry/components/core/button';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
@@ -562,7 +561,7 @@ function TaskGroup({
         }
         actions={
           <Button
-            icon={<Chevron direction={isExpanded ? 'up' : 'down'} />}
+            icon={<IconChevron direction={isExpanded ? 'up' : 'down'} size="sm" />}
             aria-label={isExpanded ? t('Collapse') : t('Expand')}
             aria-expanded={isExpanded}
             size="zero"
diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx
@@ -5,7 +5,6 @@ import styled from '@emotion/styled';
 import {hideSidebar, showSidebar} from 'sentry/actionCreators/preferences';
 import Feature from 'sentry/components/acl/feature';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {Chevron} from 'sentry/components/chevron';
 import FeatureFlagOnboardingSidebar from 'sentry/components/events/featureFlags/featureFlagOnboardingSidebar';
 import FeedbackOnboardingSidebar from 'sentry/components/feedback/feedbackOnboarding/sidebar';
 import Hook from 'sentry/components/hook';
@@ -23,6 +22,7 @@ import {
 } from 'sentry/components/sidebar/expandedContextProvider';
 import {OnboardingStatus} from 'sentry/components/sidebar/onboardingStatus';
 import {
+  IconChevron,
   IconDashboard,
   IconGraph,
   IconIssues,
@@ -582,7 +582,9 @@ function Sidebar() {
                   id="collapse"
                   data-test-id="sidebar-collapse"
                   {...sidebarItemProps}
-                  icon={<Chevron direction={collapsed ? 'right' : 'left'} />}
+                  icon={
+                    <IconChevron direction={collapsed ? 'right' : 'left'} size="sm" />
+                  }
                   label={collapsed ? t('Expand') : t('Collapse')}
                   onClick={toggleCollapse}
                 />
diff --git a/static/app/components/sidebar/sidebarAccordion.tsx b/static/app/components/sidebar/sidebarAccordion.tsx
@@ -9,14 +9,14 @@ import {
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Chevron} from 'sentry/components/chevron';
 import {Button} from 'sentry/components/core/button';
 import {Overlay} from 'sentry/components/overlay';
 import {
   SIDEBAR_COLLAPSED_WIDTH,
   SIDEBAR_MOBILE_HEIGHT,
 } from 'sentry/components/sidebar/constants';
 import {ExpandedContext} from 'sentry/components/sidebar/expandedContextProvider';
+import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
@@ -143,7 +143,11 @@ function SidebarAccordion({
                 aria-label={expanded ? t('Collapse') : t('Expand')}
                 sidebarCollapsed={sidebarCollapsed}
               >
-                <Chevron direction={expanded ? 'up' : 'down'} role="presentation" />
+                <IconChevron
+                  direction={expanded ? 'up' : 'down'}
+                  role="presentation"
+                  size="sm"
+                />
               </SidebarAccordionExpandButton>
             }
           />
diff --git a/static/app/components/workflowEngine/form/control/priorityControl.tsx b/static/app/components/workflowEngine/form/control/priorityControl.tsx
@@ -2,13 +2,12 @@ import {useCallback, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {GroupPriorityBadge} from 'sentry/components/badge/groupPriority';
-import {Chevron} from 'sentry/components/chevron';
 import {Flex} from 'sentry/components/container/flex';
 import {CompactSelect, type SelectOption} from 'sentry/components/core/compactSelect';
 import {FieldWrapper} from 'sentry/components/forms/fieldGroup/fieldWrapper';
 import NumberField from 'sentry/components/forms/fields/numberField';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
-import {IconArrow} from 'sentry/icons';
+import {IconArrow, IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {PriorityLevel} from 'sentry/types/group';
@@ -166,7 +165,7 @@ function PrioritySelect({
           <EmptyButton {...props}>
             <GroupPriorityBadge showLabel priority={value}>
               <InteractionStateLayer isPressed={isOpen} />
-              <Chevron light direction={isOpen ? 'up' : 'down'} size="small" />
+              <IconChevron direction={isOpen ? 'up' : 'down'} size="xs" />
             </GroupPriorityBadge>
           </EmptyButton>
         );
diff --git a/static/app/icons/iconChevron.tsx b/static/app/icons/iconChevron.tsx
@@ -69,7 +69,6 @@ function IconChevron({isDouble, isCircled, direction = 'up', ...props}: Props) {
       css={
         direction
           ? css`
-              transition: transform 120ms ease-in-out;
               transform: rotate(${theme.iconDirections[direction]}deg);
             `
           : undefined
diff --git a/static/app/views/insights/crons/components/processingErrors/monitorProcessingErrors.tsx b/static/app/views/insights/crons/components/processingErrors/monitorProcessingErrors.tsx
diff --git a/static/app/views/issueDetails/shortIdBreadcrumb.tsx b/static/app/views/issueDetails/shortIdBreadcrumb.tsx
diff --git a/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx b/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx
diff --git a/static/app/views/issueDetails/streamline/sidebar/toggleSidebar.tsx b/static/app/views/issueDetails/streamline/sidebar/toggleSidebar.tsx
diff --git a/static/gsApp/views/amCheckout/steps/stepHeader.tsx b/static/gsApp/views/amCheckout/steps/stepHeader.tsx

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,6 @@ function IconChevron({isDouble, isCircled, direction = 'up', ...props}: Props) {`
`69`	`69`	`css={`
`70`	`70`	`direction`
`71`	`71`	? css`
`72`		`- transition: transform 120ms ease-in-out;`
`73`	`72`	`transform: rotate(${theme.iconDirections[direction]}deg);`
`74`	`73`	`
`75`	`74`	`: undefined`