flex: use core component (#99790)

Replace some usages of styled(div) with core Flex component

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

static/app/components/badge/groupPriority.tsx

@@ -10,6 +10,7 @@ import {IconCellSignal} from 'sentry/components/badge/iconCellSignal';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
@@ -193,9 +194,9 @@ export function GroupPriorityDropdown({
     <DropdownMenu
       size="sm"
       menuTitle={
-        <MenuTitleContainer>
+        <Flex align="end" justify="between">
           <div>{t('Set Priority')}</div>
-        </MenuTitleContainer>
+        </Flex>
       }
       minMenuWidth={230}
       trigger={(triggerProps, isOpen) => (
@@ -269,12 +270,6 @@ const InlinePlaceholder = styled(Placeholder)`
   vertical-align: middle;
 `;
 
-const MenuTitleContainer = styled('div')`
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-`;
-
 const StyledFooter = styled(DropdownMenuFooter)`
   max-width: 230px;
   ${p => p.theme.overflowEllipsis};

static/app/components/timeRangeSelector/index.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Button} from 'sentry/components/core/button';
 import type {SelectOption, SingleSelectProps} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {Flex} from 'sentry/components/core/layout';
 import DropdownButton from 'sentry/components/dropdownButton';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {DesyncedFilterIndicator} from 'sentry/components/organizations/pageFilters/desyncedFilter';
@@ -451,7 +452,7 @@ export function TimeRangeSelector({
                     <FooterWrap>
                       <FooterInnerWrap>{menuFooter as React.ReactNode}</FooterInnerWrap>
                       {showAbsoluteSelector && (
-                        <AbsoluteSelectorFooter>
+                        <Flex gap="md" justify="end">
                           {showRelative && (
                             <Button
                               size="xs"
@@ -473,7 +474,7 @@ export function TimeRangeSelector({
                           >
                             {t('Apply')}
                           </Button>
-                        </AbsoluteSelectorFooter>
+                        </Flex>
                       )}
                     </FooterWrap>
                   </Fragment>
@@ -520,12 +521,6 @@ const StyledDateRangeHook = styled(DateRangeHook)`
   width: max-content;
 `;
 
-const AbsoluteSelectorFooter = styled('div')`
-  display: flex;
-  gap: ${space(1)};
-  justify-content: flex-end;
-`;
-
 const FooterMessage = styled('p')`
   padding: ${space(0.75)} ${space(1)};
   margin: ${space(0.5)} 0;

static/app/data/forms/projectGeneralSettings.tsx

@@ -4,6 +4,7 @@ import {PlatformIcon} from 'platformicons';
 import {hasEveryAccess} from 'sentry/components/acl/access';
 import {CodeSnippet} from 'sentry/components/codeSnippet';
 import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
 import {createFilter} from 'sentry/components/forms/controls/reactSelectWrapper';
 import type {Field} from 'sentry/components/forms/types';
@@ -44,10 +45,6 @@ const ORG_DISABLED_REASON = t(
   "This option is enforced by your organization's settings and cannot be customized per-project."
 );
 
-const PlatformWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-`;
 const StyledPlatformIcon = styled(PlatformIcon)`
   margin-right: ${space(1)};
 `;
@@ -82,10 +79,10 @@ export const fields = {
     options: platforms.map(({id, name}) => ({
       value: id,
       label: (
-        <PlatformWrapper key={id}>
+        <Flex align="center" key={id}>
           <StyledPlatformIcon platform={id} />
           {name}
-        </PlatformWrapper>
+        </Flex>
       ),
     })),
     help: t('The primary platform for this project'),

static/app/plugins/components/settings.tsx

@@ -1,9 +1,9 @@
 import {css} from '@emotion/react';
-import styled from '@emotion/styled';
 import isEqual from 'lodash/isEqual';
 
 import {Alert} from 'sentry/components/core/alert';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Flex} from 'sentry/components/core/layout';
 import Form from 'sentry/components/deprecatedforms/form';
 import FormState from 'sentry/components/forms/state';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -223,7 +223,7 @@ class PluginSettings<
         onSubmit={this.onSubmit}
         submitDisabled={isSaving || !hasChanges}
       >
-        <Flex>
+        <Flex direction="column">
           {this.state.errors.__all__ && (
             <Alert type="error" showIcon={false}>
               <ul>
@@ -245,9 +245,4 @@ class PluginSettings<
   }
 }
 
-const Flex = styled('div')`
-  display: flex;
-  flex-direction: column;
-`;
-
 export default PluginSettings;

static/app/stories/apiReference.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/core/button';
 import {InputGroup} from 'sentry/components/core/input/inputGroup';
+import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {IconChevron} from 'sentry/icons';
 import {IconSearch} from 'sentry/icons/iconSearch';
@@ -109,7 +110,7 @@ function StoryDefinitionFilePath(props: {node: PropTreeNode}) {
     <Fragment>
       <tr>
         <StoryTypesTableDefinitionCell colSpan={2}>
-          <StoryTypesTableDefinitionCellContent>
+          <Flex align="center">
             <Button
               borderless
               icon={<IconChevron direction={expanded ? 'down' : 'right'} />}
@@ -122,7 +123,7 @@ function StoryDefinitionFilePath(props: {node: PropTreeNode}) {
             />{' '}
             <span>{props.node.prop.parent?.name}</span> (
             {stripNodeModulesPrefix(props.node.prop.definitionFilePath)})
-          </StoryTypesTableDefinitionCellContent>
+          </Flex>
         </StoryTypesTableDefinitionCell>
       </tr>
       {expanded ? (
@@ -412,11 +413,6 @@ const StoryTypesTableDefinitionCell = styled('td')`
   }
 `;
 
-const StoryTypesTableDefinitionCellContent = styled('div')`
-  display: flex;
-  align-items: center;
-`;
-
 const StoryType = styled('div')`
   font-family: ${p => p.theme.text.familyMono};
 `;

static/app/stories/layout.tsx

@@ -1,15 +1,23 @@
 import styled from '@emotion/styled';
 
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
+import {Flex} from 'sentry/components/core/layout';
 import {space} from 'sentry/styles/space';
 
-export const SideBySide = styled('div')<{vertical?: boolean}>`
-  display: flex;
-  gap: ${space(2)};
-  flex-wrap: wrap;
-  align-items: flex-start;
-  flex-direction: ${p => (p.vertical ? 'column' : 'row')};
-`;
+export const SideBySide = styled(
+  (props: {children: React.ReactNode; vertical?: boolean}) => {
+    return (
+      <Flex
+        gap="xl"
+        align="start"
+        wrap="wrap"
+        direction={props.vertical ? 'column' : 'row'}
+      >
+        {props.children}
+      </Flex>
+    );
+  }
+)``;
 
 export const Grid = styled('div')<{columns?: number}>`
   display: grid;

static/app/utils/discover/styles.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import {Flex} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
 import {DateTime} from 'sentry/components/dateTime';
 import ShortId, {StyledAutoSelectText} from 'sentry/components/shortId';
@@ -68,7 +69,6 @@ export const UserIcon = styled(IconUser)`
   color: ${p => p.theme.gray400};
 `;
 
-export const IconContainer = styled('div')`
-  display: flex;
-  gap: ${p => p.theme.space.md};
-`;
+export const IconContainer = styled((props: {children: React.ReactNode}) => {
+  return <Flex gap="md">{props.children}</Flex>;
+})``;

static/app/views/integrationPipeline/githubInstallationSelect.tsx

@@ -9,6 +9,7 @@ import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import type {SelectKey, SelectOption} from 'sentry/components/core/compactSelect';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {Flex} from 'sentry/components/core/layout';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import {IconAdd, IconLightning} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -107,7 +108,7 @@ export function GithubInstallationSelect({
       value: installation.installation_id,
       textValue: installation.github_account,
       label: (
-        <OptionLabelWrapper>
+        <Flex align="center" gap="md">
           {installation.installation_id === '-1' ? (
             <IconAdd />
           ) : (
@@ -122,7 +123,7 @@ export function GithubInstallationSelect({
           {!doesntRequireUpgrade(installation.installation_id) && (
             <IconLightning size="xs" />
           )}
-        </OptionLabelWrapper>
+        </Flex>
       ),
     })
   );
@@ -219,12 +220,6 @@ const StyledHeader = styled('h3')`
   width: 100%;
 `;
 
-const OptionLabelWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: ${space(1)};
-`;
-
 const StyledAvatar = styled(BaseAvatar)`
   flex-shrink: 0;
 `;