core: remove a couple of styled(flex) calls

Author: JonasBa

static/app/components/commandPalette/ui/content.tsx

@@ -1,5 +1,5 @@
 import {Fragment, useCallback, useLayoutEffect, useMemo, useRef} from 'react';
-import styled from '@emotion/styled';
+import {useTheme} from '@emotion/react';
 import {Item, Section} from '@react-stately/collections';
 
 import {Flex} from '@sentry/scraps/layout';
@@ -10,6 +10,7 @@ import {COMMAND_PALETTE_GROUP_KEY_CONFIG} from 'sentry/components/commandPalette
 import {CommandPaletteList} from 'sentry/components/commandPalette/ui/list';
 import {useCommandPaletteState} from 'sentry/components/commandPalette/ui/useCommandPaletteState';
 import type {MenuListItemProps} from 'sentry/components/core/menuListItem';
+import type {Theme} from 'sentry/utils/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
@@ -21,23 +22,31 @@ type CommandPaletteActionMenuItem = MenuListItemProps & {
 };
 
 function actionToMenuItem(
-  action: CommandPaletteActionWithKey
+  action: CommandPaletteActionWithKey,
+  theme: Theme
 ): CommandPaletteActionMenuItem {
   return {
     key: action.key,
     label: action.display.label,
     details: action.display.details,
     leadingItems: action.display.icon ? (
-      <IconWrap align="center" justify="center">
+      <Flex
+        align="center"
+        justify="center"
+        width={theme.iconSizes.md}
+        height={theme.iconSizes.md}
+      >
         {action.display.icon}
-      </IconWrap>
+      </Flex>
     ) : undefined,
-    children: action.type === 'group' ? action.actions.map(actionToMenuItem) : [],
+    children:
+      action.type === 'group' ? action.actions.map(a => actionToMenuItem(a, theme)) : [],
     hideCheck: true,
   };
 }
 
 export function CommandPaletteContent() {
+  const theme = useTheme();
   const {actions, selectedAction, selectAction, clearSelection, query, setQuery} =
     useCommandPaletteState();
   const navigate = useNavigate();
@@ -50,7 +59,7 @@ export function CommandPaletteContent() {
         ? (COMMAND_PALETTE_GROUP_KEY_CONFIG[action.groupingKey]?.label ?? '')
         : '';
       const list = itemsBySection.get(sectionLabel) ?? [];
-      list.push(actionToMenuItem(action));
+      list.push(actionToMenuItem(action, theme));
       itemsBySection.set(sectionLabel, list);
     }
 
@@ -64,7 +73,7 @@ export function CommandPaletteContent() {
         };
       })
       .filter(section => section.children.length > 0);
-  }, [actions]);
+  }, [actions, theme]);
 
   const handleSelect = useCallback(
     (action: CommandPaletteActionWithKey) => {
@@ -132,8 +141,3 @@ export function CommandPaletteContent() {
     </Fragment>
   );
 }
-
-const IconWrap = styled(Flex)`
-  width: ${p => p.theme.iconSizes.md};
-  height: ${p => p.theme.iconSizes.md};
-`;

static/app/components/core/layout/flex.tsx

@@ -17,6 +17,8 @@ const omitFlexProps = new Set<keyof FlexLayoutProps | 'as'>([
   'wrap',
 ]);
 
+type PlaceItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
 interface FlexLayoutProps {
   /**
    * Aligns flex items along the cross axis of the current line of flex items.
@@ -39,13 +41,19 @@ interface FlexLayoutProps {
    * Specifies the spacing between flex items.
    */
   gap?: Responsive<SpacingSize | `${SpacingSize} ${SpacingSize}`>;
+
   /**
    * Aligns flex items along the block axis of the current line of flex items.
    * Uses CSS justify-content property.
    */
   justify?: Responsive<
     'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'left' | 'right'
   >;
+  /**
+   * Shorthand property for align-items and justify-items.
+   *
+   */
+  placeItems?: Responsive<PlaceItems | `${PlaceItems} ${PlaceItems}`>;
   /**
    * Specifies the wrapping behavior of the flex items.
    */
@@ -70,6 +78,7 @@ export const Flex = styled(Container, {
   ${p => rc('flex-direction', p.direction, p.theme)};
   ${p => rc('flex-wrap', p.wrap, p.theme)};
   ${p => rc('flex', p.flex, p.theme)};
+  ${p => rc('place-items', p.placeItems, p.theme)};
   ${p =>
     rc('justify-content', p.justify, p.theme, (value, _breakpoint, _theme) => {
       switch (value) {

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

@@ -1,7 +1,8 @@
 import {Fragment, useState} from 'react';
-import styled from '@emotion/styled';
 
-import {Flex} from 'sentry/components/core/layout';
+import {Flex} from '@sentry/scraps/layout';
+import {Separator} from '@sentry/scraps/separator';
+
 import {SegmentedControl} from 'sentry/components/core/segmentedControl';
 import {GroupInfoSummary} from 'sentry/components/events/groupingInfo/groupingSummary';
 import {useEventGroupingInfo} from 'sentry/components/events/groupingInfo/useEventGroupingInfo';
@@ -70,7 +71,7 @@ export default function GroupingInfo({
 
   return (
     <Fragment>
-      <ConfigHeader>
+      <Flex justify="between" gap="md" marginBottom="2xs">
         {hasStreamlinedUI && (
           <GroupInfoSummary
             event={event}
@@ -86,8 +87,8 @@ export default function GroupingInfo({
             {feedbackComponent}
           </div>
         )}
-      </ConfigHeader>
-      <ToggleContainer>
+      </Flex>
+      <Flex justify="start" paddingBottom="lg">
         <SegmentedControl
           aria-label={t('Filter by contribution')}
           size="xs"
@@ -99,7 +100,7 @@ export default function GroupingInfo({
           </SegmentedControl.Item>
           <SegmentedControl.Item key="all">{t('All Values')}</SegmentedControl.Item>
         </SegmentedControl>
-      </ToggleContainer>
+      </Flex>
       {isError ? <LoadingError message={t('Failed to fetch grouping info.')} /> : null}
       {isPending && !hasPerformanceGrouping ? <LoadingIndicator /> : null}
       {hasPerformanceGrouping || isSuccess
@@ -112,27 +113,12 @@ export default function GroupingInfo({
                   variant={variant}
                   showNonContributing={showNonContributing}
                 />
-                {index < filteredVariants.length - 1 && <VariantDivider />}
+                {index < filteredVariants.length - 1 && (
+                  <Separator orientation="horizontal" />
+                )}
               </Fragment>
             ))
         : null}
     </Fragment>
   );
 }
-
-const ConfigHeader = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  gap: ${p => p.theme.space.md};
-  margin-bottom: ${p => p.theme.space['2xs']};
-`;
-
-const ToggleContainer = styled(Flex)`
-  justify-content: flex-start;
-  padding-bottom: ${p => p.theme.space.lg};
-`;
-
-const VariantDivider = styled('hr')`
-  padding-top: ${p => p.theme.space.md};
-  border-top: 1px solid ${p => p.theme.border};
-`;

static/app/components/events/interfaces/crashContent/exception/content.tsx

@@ -206,15 +206,15 @@ function InnerContent({
         {...{hiddenExceptions, toggleRelatedExceptions, values, exception}}
       />
       {exception.mechanism || hasCoverageData ? (
-        <RowWrapper direction="row" justify="between">
+        <Flex direction="row" justify="between" margin="xl 0 xs 0">
           {exception.mechanism && (
             <Mechanism
               data={exception.mechanism}
               meta={meta?.[exceptionIdx]?.mechanism}
             />
           )}
           {hasCoverageData ? <LineCoverageLegend /> : null}
-        </RowWrapper>
+        </Flex>
       ) : null}
       <RelatedExceptions
         mechanism={exception.mechanism}
@@ -411,7 +411,3 @@ const StyledFoldSection = styled(FoldSection)`
     margin-right: ${p => p.theme.space.xl};
   }
 `;
-
-const RowWrapper = styled(Flex)`
-  margin: ${p => p.theme.space.xl} 0 ${p => p.theme.space.xs} 0;
-`;

static/app/components/events/interfaces/threads/threadSelector/index.tsx

@@ -1,8 +1,9 @@
 import {useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Flex, type FlexProps} from '@sentry/scraps/layout';
+
 import {CompactSelect} from 'sentry/components/core/compactSelect';
-import {Flex} from 'sentry/components/core/layout';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -264,10 +265,15 @@ const SortableThreadSelectorGridCell = styled(ThreadSelectorGridCell)`
   }
 `;
 
-const HeaderText = styled(Flex)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: ${space(0.5)};
-  padding: 0 ${space(0.5)};
-`;
+function HeaderText(props: FlexProps) {
+  return (
+    <Flex
+      gap="xs"
+      display="flex"
+      align="center"
+      justify="start"
+      padding="0 xs"
+      {...props}
+    />
+  );
+}

static/app/components/feedback/list/feedbackListItem.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
 import {Checkbox} from 'sentry/components/core/checkbox';
 import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
-import {Flex} from 'sentry/components/core/layout';
+import {Flex, type FlexProps} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import IssueTrackingSignals from 'sentry/components/feedback/list/issueTrackingSignals';
@@ -202,9 +202,9 @@ const LinkedFeedbackCard = styled(Link)`
   align-items: center;
 `;
 
-const Row = styled(Flex)`
-  place-items: center;
-`;
+function Row(props: FlexProps) {
+  return <Flex place-items="center" {...props} />;
+}
 
 const BottomGrid = styled('div')`
   display: grid;

static/app/components/profiling/flamegraph/flamegraphContextMenu.tsx

@@ -642,10 +642,10 @@ function ProfileIdsSubMenu(props: {
           setIsOpen(true);
         }}
       >
-        <FullWidthFlex justify="between" align="center">
+        <Flex justify="between" align="center" width="100%">
           <div>{t('Appears in %s profiles', props.profileIds.length)}</div>
           <IconChevron direction="right" size="xs" />
-        </FullWidthFlex>
+        </Flex>
       </ProfilingContextMenuItemButton>
       {isOpen &&
         props.subMenuPortalRef &&
@@ -712,7 +712,3 @@ function ProfileIdsSubMenu(props: {
     </Fragment>
   );
 }
-
-const FullWidthFlex = styled(Flex)`
-  width: 100%;
-`;

static/app/components/replays/list/__stories__/replayListItem.tsx

@@ -1,3 +1,4 @@
+import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import invariant from 'invariant';
 
@@ -25,6 +26,7 @@ interface Props {
 }
 
 export default function ReplayListItem({replay, onClick}: Props) {
+  const theme = useTheme();
   const organization = useOrganization();
   const project = useProjectFromId({project_id: replay.project_id ?? undefined});
 
@@ -36,9 +38,9 @@ export default function ReplayListItem({replay, onClick}: Props) {
   if (replay.is_archived) {
     return (
       <Flex gap="md" align="center" justify="center">
-        <ArchivedWrapper>
+        <Flex justify="center" align="center" width={theme.space['2xl']}>
           <IconDelete color="gray500" size="md" />
-        </ArchivedWrapper>
+        </Flex>
 
         <Flex direction="column" gap="xs">
           <DisplayName>{t('Deleted Replay')}</DisplayName>
@@ -105,12 +107,6 @@ const CardSpacing = styled('div')`
   padding: ${space(0.5)} ${space(0.5)} 0 ${space(0.5)};
 `;
 
-const ArchivedWrapper = styled(Flex)`
-  width: ${p => p.theme.space['2xl']};
-  align-items: center;
-  justify-content: center;
-`;
-
 const SubText = styled('div')`
   font-size: 0.875em;
   line-height: normal;

static/app/components/replays/table/replayTableColumns.tsx

@@ -6,7 +6,7 @@ import {PlatformIcon} from 'platformicons';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Checkbox} from 'sentry/components/core/checkbox';
-import {Flex} from 'sentry/components/core/layout/flex';
+import {Flex, type FlexProps} from 'sentry/components/core/layout/flex';
 import {ExternalLink, Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import Duration from 'sentry/components/duration/duration';
@@ -588,11 +588,9 @@ const DetailsLink = styled(Link)`
   line-height: 0;
 `;
 
-const DropdownContainer = styled(Flex)`
-  position: relative;
-  flex-direction: column;
-  justify-content: center;
-`;
+function DropdownContainer(props: FlexProps) {
+  return <Flex position="relative" direction="column" justify="center" {...props} />;
+}
 
 const TabularNumber = styled('div')`
   font-variant-numeric: tabular-nums;

static/app/views/automations/components/automationBuilder.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {fetchOrgMembers} from 'sentry/actionCreators/members';
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
-import {Flex} from 'sentry/components/core/layout';
+import {Flex, Stack, type FlexProps} from 'sentry/components/core/layout';
 import {Select} from 'sentry/components/core/select';
 import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
 import {PurpleTextButton} from 'sentry/components/workflowEngine/ui/purpleTextButton';
@@ -234,16 +234,13 @@ function ActionFilterBlock({actionFilter}: ActionFilterBlockProps) {
   );
 }
 
-const Step = styled(Flex)`
-  flex-direction: column;
-  gap: ${p => p.theme.space.sm};
-`;
+function Step(props: FlexProps) {
+  return <Stack gap="sm" {...props} />;
+}
 
-const StepLead = styled(Flex)`
-  align-items: center;
-  gap: ${p => p.theme.space.xs};
-  margin-bottom: ${p => p.theme.space.xs};
-`;
+function StepLead(props: FlexProps) {
+  return <Flex align="center" gap="xs" marginBottom="xs" {...props} />;
+}
 
 const EmbeddedSelectField = styled(Select)`
   padding: 0;