ref(ui): Enforce IconSize enum usage (#42910)

static/app/components/assigneeSelectorDropdown.tsx

@@ -387,7 +387,7 @@ export class AssigneeSelectorDropdown extends Component<
       >
         <MenuItemFooterWrapper>
           <IconContainer>
-            <IconAdd color="activeText" isCircled size="14px" />
+            <IconAdd color="activeText" isCircled legacySize="14px" />
           </IconContainer>
           <Label>{t('Invite Member')}</Label>
         </MenuItemFooterWrapper>
@@ -464,7 +464,7 @@ export class AssigneeSelectorDropdown extends Component<
             <div>
               <MenuItemFooterWrapper role="button" onClick={this.clearAssignTo} py={0}>
                 <IconContainer>
-                  <IconClose color="activeText" isCircled size="14px" />
+                  <IconClose color="activeText" isCircled legacySize="14px" />
                 </IconContainer>
                 <Label>{t('Clear Assignee')}</Label>
               </MenuItemFooterWrapper>

static/app/components/avatar/sentryAppAvatar.tsx

@@ -12,7 +12,7 @@ const SentryAppAvatar = ({isColor = true, sentryApp, isDefault, ...props}: Props
   const avatarDetails = sentryApp?.avatars?.find(({color}) => color === isColor);
   const defaultSentryAppAvatar = (
     <IconGeneric
-      size={`${props.size}`}
+      legacySize={`${props.size}`}
       className={props.className}
       data-test-id="default-sentry-app-avatar"
     />

static/app/components/checkbox.tsx

@@ -23,12 +23,18 @@ interface Props extends Omit<CheckboxProps, 'checked' | 'size'> {
   size?: FormSize;
 }
 
-type CheckboxConfig = {borderRadius: string; box: string; icon: string};
+type CheckboxConfig = {
+  borderRadius: string;
+  box: string;
+  // TODO: We should use IconSize here, but the `xs` checkmark needs the
+  // smaller icon size right now, so we use legacySize
+  icon: string;
+};
 
 const checkboxSizeMap: Record<FormSize, CheckboxConfig> = {
-  xs: {box: '12px', icon: '10px', borderRadius: '2px'},
-  sm: {box: '16px', icon: '12px', borderRadius: '4px'},
-  md: {box: '22px', icon: '16px', borderRadius: '6px'},
+  xs: {box: '12px', borderRadius: '2px', icon: '10px'},
+  sm: {box: '16px', borderRadius: '4px', icon: '12px'},
+  md: {box: '22px', borderRadius: '6px', icon: '16px'},
 };
 
 const Checkbox = ({
@@ -57,9 +63,9 @@ const Checkbox = ({
         {...props}
       />
       <StyledCheckbox aria-hidden checked={checked} size={size}>
-        {checked === true && <IconCheckmark size={checkboxSizeMap[size].icon} />}
+        {checked === true && <IconCheckmark legacySize={checkboxSizeMap[size].icon} />}
         {checked === 'indeterminate' && (
-          <IconSubtract size={checkboxSizeMap[size].icon} />
+          <IconSubtract legacySize={checkboxSizeMap[size].icon} />
         )}
       </StyledCheckbox>
       {!props.disabled && (

static/app/components/checkboxFancy/checkboxFancy.tsx

@@ -35,8 +35,8 @@ const CheckboxFancy = styled(
       aria-checked={isIndeterminate ? 'mixed' : isChecked}
       {...props}
     >
-      {isIndeterminate && <IconSubtract size="70%" color="white" />}
-      {!isIndeterminate && isChecked && <IconCheckmark size="70%" color="white" />}
+      {isIndeterminate && <IconSubtract legacySize="70%" color="white" />}
+      {!isIndeterminate && isChecked && <IconCheckmark legacySize="70%" color="white" />}
     </div>
   )
 )`

static/app/components/contextData/toggle.tsx

@@ -34,9 +34,9 @@ function Toggle({highUp, wrapClassName, children}: Props) {
         }}
       >
         {isExpanded ? (
-          <IconSubtract size="9px" color="white" />
+          <IconSubtract legacySize="10px" color="white" />
         ) : (
-          <IconAdd size="9px" color="white" />
+          <IconAdd legacySize="10px" color="white" />
         )}
       </IconWrapper>
       {isExpanded && wrappedChildren}

static/app/components/emptyStateWarning.tsx

@@ -26,7 +26,7 @@ const EmptyStateWarning = ({
     </EmptyMessage>
   ) : (
     <EmptyStreamWrapper data-test-id="empty-state" className={className}>
-      {withIcon && <IconSearch size="54px" />}
+      {withIcon && <IconSearch legacySize="54px" />}
       {children}
     </EmptyStreamWrapper>
   );

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

@@ -51,7 +51,7 @@ class GroupingComponentFrames extends Component<Props, State> {
                 <ToggleCollapse
                   size="sm"
                   priority="link"
-                  icon={<IconAdd size="8px" />}
+                  icon={<IconAdd legacySize="8px" />}
                   onClick={() => this.setState({collapsed: false})}
                 >
                   {tct('show [numberOfFrames] similar', {
@@ -70,7 +70,7 @@ class GroupingComponentFrames extends Component<Props, State> {
             <ToggleCollapse
               size="sm"
               priority="link"
-              icon={<IconSubtract size="8px" />}
+              icon={<IconSubtract legacySize="8px" />}
               onClick={() => this.setState({collapsed: true})}
             >
               {tct('collapse [numberOfFrames] similar', {

static/app/components/events/interfaces/frame/line.tsx

@@ -193,7 +193,7 @@ export class Line extends Component<Props, State> {
           tooltipProps={isHoverPreviewed ? {delay: SLOW_TOOLTIP_DELAY} : undefined}
           onClick={this.toggleContext}
         >
-          <IconChevron direction={isExpanded ? 'up' : 'down'} size="8px" />
+          <IconChevron direction={isExpanded ? 'up' : 'down'} legacySize="8px" />
         </ToggleContextButton>
       </ToggleContextButtonWrapper>
     );

static/app/components/events/interfaces/frame/lineV2/expander.tsx

@@ -37,7 +37,7 @@ function Expander({
       tooltipProps={isHoverPreviewed ? {delay: SLOW_TOOLTIP_DELAY} : undefined}
       onClick={onToggleContext}
     >
-      <IconChevron direction={isExpanded ? 'up' : 'down'} size="8px" />
+      <IconChevron direction={isExpanded ? 'up' : 'down'} legacySize="8px" />
     </StyledButton>
   );
 }

static/app/components/events/interfaces/nativeFrame.tsx

@@ -330,7 +330,9 @@ function NativeFrame({
                 title={t('Toggle Context')}
                 aria-label={t('Toggle Context')}
                 tooltipProps={isHoverPreviewed ? {delay: SLOW_TOOLTIP_DELAY} : undefined}
-                icon={<IconChevron size="8px" direction={expanded ? 'up' : 'down'} />}
+                icon={
+                  <IconChevron legacySize="8px" direction={expanded ? 'up' : 'down'} />
+                }
               />
             )}
           </ExpandCell>