fix(scraps): align leadingItems in compactSelect with check box/icon

static/app/components/core/compactSelect/compactSelect.stories.tsx

@@ -561,6 +561,8 @@ const arrayToOptions = (array: string[]) =>
   array.map(item => ({
     value: item,
     label: item,
+    details: 'Details',
+    leadingItems: <IconSiren size="xs" />,
   }));
 
 const COUNTRY_NAMES = Object.keys(countryNameToCode).sort();

static/app/components/core/compactSelect/gridList/option.tsx

@@ -8,7 +8,7 @@ import type {ListState} from '@react-stately/list';
 import type {Node} from '@react-types/shared';
 
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {CheckWrap} from 'sentry/components/core/compactSelect/styles';
+import {LeadWrap} from 'sentry/components/core/compactSelect/styles';
 import {InnerWrap, MenuListItem} from 'sentry/components/core/menuListItem';
 import {IconCheckmark} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
@@ -84,34 +84,35 @@ export function GridListOption({node, listState, size}: GridListOptionProps) {
   const leadingItemsMemo = useMemo(() => {
     const checkboxSize = size === 'xs' ? 'xs' : 'sm';
 
-    if (hideCheck && !leadingItems) {
-      return null;
+    const leading =
+      typeof leadingItems === 'function'
+        ? leadingItems({disabled: isDisabled, isFocused, isSelected})
+        : leadingItems;
+
+    if (hideCheck) {
+      return leading;
     }
 
     return (
       <Fragment>
-        {!hideCheck && (
-          <CheckWrap multiple={multiple} isSelected={isSelected} role="presentation">
-            {multiple ? (
-              <Checkbox
-                {...checkboxProps}
-                size={checkboxSize}
-                checked={isSelected}
-                disabled={isDisabled}
-                readOnly
-              />
-            ) : (
-              isSelected && <IconCheckmark size={checkboxSize} {...checkboxProps} />
-            )}
-          </CheckWrap>
-        )}
-        {typeof leadingItems === 'function'
-          ? leadingItems({disabled: isDisabled, isFocused, isSelected})
-          : leadingItems}
+        <LeadWrap role="presentation">
+          {multiple ? (
+            <Checkbox
+              {...checkboxProps}
+              size={checkboxSize}
+              checked={isSelected}
+              disabled={isDisabled}
+              readOnly
+            />
+          ) : (
+            isSelected && <IconCheckmark size={checkboxSize} {...checkboxProps} />
+          )}
+        </LeadWrap>
+        {leading ? <LeadWrap role="presentation">{leading}</LeadWrap> : null}
       </Fragment>
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [multiple, isSelected, isDisabled, size, leadingItems, hideCheck]);
+  }, [multiple, isSelected, isDisabled, isFocused, size, leadingItems, hideCheck]);
 
   return (
     <StyledMenuListItem

static/app/components/core/compactSelect/listBox/option.tsx

@@ -7,7 +7,7 @@ import type {ListState} from '@react-stately/list';
 import type {Node} from '@react-types/shared';
 
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {CheckWrap} from 'sentry/components/core/compactSelect/styles';
+import {LeadWrap} from 'sentry/components/core/compactSelect/styles';
 import {
   InnerWrap,
   MenuListItem,
@@ -73,30 +73,33 @@ export function ListBoxOption({
   const leadingItemsMemo = useMemo(() => {
     const checkboxSize = size === 'xs' ? 'xs' : 'sm';
 
-    if (hideCheck && !leadingItems) {
-      return null;
+    const leading =
+      typeof leadingItems === 'function'
+        ? leadingItems({disabled: isDisabled, isFocused, isSelected})
+        : leadingItems;
+
+    if (hideCheck) {
+      return leading;
     }
 
     return (
       <Fragment>
-        {!hideCheck && (
-          <CheckWrap multiple={multiple} isSelected={isSelected} aria-hidden="true">
-            {multiple ? (
-              <Checkbox
-                size={checkboxSize}
-                checked={isSelected}
-                disabled={isDisabled}
-                readOnly
-              />
-            ) : (
-              isSelected && <IconCheckmark size={checkboxSize} />
-            )}
-          </CheckWrap>
-        )}
-        {leadingItems}
+        <LeadWrap aria-hidden="true">
+          {multiple ? (
+            <Checkbox
+              size={checkboxSize}
+              checked={isSelected}
+              disabled={isDisabled}
+              readOnly
+            />
+          ) : (
+            isSelected && <IconCheckmark size={checkboxSize} />
+          )}
+        </LeadWrap>
+        {leading ? <LeadWrap aria-hidden="true">{leading}</LeadWrap> : null}
       </Fragment>
     );
-  }, [multiple, isSelected, isDisabled, size, leadingItems, hideCheck]);
+  }, [size, leadingItems, isDisabled, isFocused, isSelected, hideCheck, multiple]);
 
   return (
     <StyledMenuListItem

static/app/components/core/compactSelect/styles.tsx

@@ -5,6 +5,8 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Flex, type FlexProps} from '@sentry/scraps/layout';
+
 import {Button} from 'sentry/components/core/button';
 import {space} from 'sentry/styles/space';
 
@@ -150,15 +152,18 @@ export const SectionGroup = styled('ul')`
   padding: 0;
 `;
 
-export const CheckWrap = styled('div')<{isSelected: boolean; multiple: boolean}>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 1em;
-  height: 1.4em;
-  padding-bottom: 1px;
-  pointer-events: none;
-`;
+export function LeadWrap(props: FlexProps) {
+  return (
+    <Flex
+      justify="center"
+      align="center"
+      minWidth="1em"
+      height="1.4em"
+      pointerEvents="none"
+      {...props}
+    />
+  );
+}
 
 export const EmptyMessage = styled('p')`
   text-align: center;

static/app/components/events/breadcrumbs/utils.tsx

@@ -58,6 +58,7 @@ export const BREADCRUMB_TIME_DISPLAY_LOCALSTORAGE_KEY = 'event-breadcrumb-time-d
 const Color = styled('span')<{
   colorConfig: NonNullable<TimelineItemProps['colorConfig']>;
 }>`
+  display: flex;
   color: ${p => p.colorConfig.icon};
 `;
 

static/app/components/organizations/hybridFilter.spec.tsx

@@ -1,3 +1,5 @@
+import {useState} from 'react';
+
 import {
   fireEvent,
   render,
@@ -57,9 +59,23 @@ describe('ProjectPageFilter', () => {
 
   it('handles multiple selection', async () => {
     const onChange = jest.fn();
-    const {rerender} = render(
-      <HybridFilter {...props} value={[]} defaultValue={[]} onChange={onChange} />
-    );
+    function ControlledHybridFilter() {
+      const [value, setValue] = useState<string[]>([]);
+
+      return (
+        <HybridFilter
+          {...props}
+          defaultValue={[]}
+          value={value}
+          onChange={newValue => {
+            onChange(newValue);
+            setValue(newValue);
+          }}
+        />
+      );
+    }
+
+    render(<ControlledHybridFilter />);
 
     // Clicking on the checkboxes in Option One & Option Two _adds_ the options to the
     // current selection state (multiple selection mode)
@@ -73,15 +89,6 @@ describe('ProjectPageFilter', () => {
     await userEvent.click(screen.getByRole('button', {name: 'Apply'}));
     expect(onChange).toHaveBeenCalledWith(expect.arrayContaining(['one', 'two']));
 
-    // HybridFilter is controlled-only, so we need to rerender it with new value
-    rerender(
-      <HybridFilter
-        {...props}
-        value={['one', 'two']}
-        defaultValue={[]}
-        onChange={onChange}
-      />
-    );
     await userEvent.click(screen.getByRole('button', {expanded: false}));
 
     // Ctrl-clicking on Option One & Option Two _removes_ them to the current selection

static/app/views/dashboards/editAccessSelector.tsx

@@ -14,7 +14,6 @@ import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
-import {CheckWrap} from 'sentry/components/core/compactSelect/styles';
 import {InnerWrap, LeadingItems} from 'sentry/components/core/menuListItem';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import UserBadge from 'sentry/components/idBadge/userBadge';
@@ -412,10 +411,6 @@ const StyledCompactSelect = styled(CompactSelect)`
   ${LeadingItems} {
     margin-top: 0;
   }
-
-  ${CheckWrap} {
-    padding-bottom: 0;
-  }
 `;
 
 const StyledDisplayName = styled('div')`