ref(reflexbox): Remove from PanelItem (#25534)

static/app/components/events/attachmentViewers/imageViewer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from '@emotion/styled';
 
 import {
   getAttachmentUrl,
@@ -8,8 +9,12 @@ import {PanelItem} from 'app/components/panels';
 
 export default function ImageViewer(props: ViewerProps) {
   return (
-    <PanelItem justifyContent="center">
+    <Container>
       <img src={getAttachmentUrl(props, true)} />
-    </PanelItem>
+    </Container>
   );
 }
+
+const Container = styled(PanelItem)`
+  justify-content: center;
+`;

static/app/components/issues/compactIssue.tsx

@@ -171,12 +171,7 @@ const CompactIssue = createReactClass<Props, State>({
     }
 
     return (
-      <PanelItem
-        className={className}
-        onClick={this.toggleSelect}
-        flexDirection="column"
-        style={{paddingTop: '12px', paddingBottom: '6px'}}
-      >
+      <IssueRow className={className} onClick={this.toggleSelect}>
         <CompactIssueHeader
           data={issue}
           organization={organization}
@@ -189,7 +184,7 @@ const CompactIssue = createReactClass<Props, State>({
           </div>
         )}
         {this.props.children}
-      </PanelItem>
+      </IssueRow>
     );
   },
 });
@@ -212,3 +207,9 @@ const IconLink = styled(Link)`
     margin-right: ${space(0.5)};
   }
 `;
+
+const IssueRow = styled(PanelItem)`
+  padding-top: ${space(1.5)};
+  padding-bottom: ${space(0.75)};
+  flex-direction: column;
+`;

static/app/components/panels/panelItem.tsx

@@ -1,16 +1,27 @@
 import styled from '@emotion/styled';
-import {Flex} from 'reflexbox'; // eslint-disable-line no-restricted-imports
 
-const PanelItem = styled(Flex)`
+import space from 'app/styles/space';
+
+type Props = {
+  /**
+   * Disables the default padding
+   */
+  noPadding?: boolean;
+  /**
+   * Align items vertical center (assuming flex-direction isn't changed).
+   */
+  center?: boolean;
+};
+
+const PanelItem = styled('div')<Props>`
+  display: flex;
   border-bottom: 1px solid ${p => p.theme.innerBorder};
+  ${p => p.noPadding || `padding: ${space(2)}`};
+  ${p => p.center && 'align-items: center'};
 
   &:last-child {
     border: 0;
   }
 `;
 
-PanelItem.defaultProps = {
-  p: 2,
-};
-
 export default PanelItem;

static/app/views/organizationIntegrations/integrationRow.tsx

@@ -76,7 +76,7 @@ const IntegrationRow = (props: Props) => {
   };
 
   return (
-    <PanelItem p={0} flexDirection="column" data-test-id={slug}>
+    <PanelRow noPadding data-test-id={slug}>
       <FlexContainer>
         <PluginIcon size={36} pluginId={slug} />
         <Container>
@@ -119,10 +119,14 @@ const IntegrationRow = (props: Props) => {
           </Alert>
         </AlertContainer>
       )}
-    </PanelItem>
+    </PanelRow>
   );
 };
 
+const PanelRow = styled(PanelItem)`
+  flex-direction: column;
+`;
+
 const FlexContainer = styled('div')`
   display: flex;
   align-items: center;

static/app/views/settings/account/accountSecurity/accountSecurityEnroll.tsx

@@ -11,6 +11,7 @@ import {
 import {openRecoveryOptions} from 'app/actionCreators/modal';
 import {fetchOrganizationByMember} from 'app/actionCreators/organizations';
 import Button from 'app/components/button';
+import ButtonBar from 'app/components/buttonBar';
 import CircleIndicator from 'app/components/circleIndicator';
 import {PanelItem} from 'app/components/panels';
 import U2fsign from 'app/components/u2f/u2fsign';
@@ -68,9 +69,9 @@ const getFields = ({
   if (authenticator.id === 'totp') {
     return [
       () => (
-        <PanelItem key="qrcode" justifyContent="center" p={2}>
+        <CodeContainer key="qrcode">
           <StyledQRCode value={authenticator.qrcode} size={228} />
-        </PanelItem>
+        </CodeContainer>
       ),
       () => (
         <Field key="secret" label={t('Authenticator secret')}>
@@ -79,11 +80,11 @@ const getFields = ({
       ),
       ...form,
       () => (
-        <PanelItem key="confirm" justifyContent="flex-end" p={2}>
+        <Actions key="confirm">
           <Button priority="primary" type="submit">
             {t('Confirm')}
           </Button>
-        </PanelItem>
+        </Actions>
       ),
     ];
   }
@@ -96,16 +97,14 @@ const getFields = ({
       {...form[0], disabled: sendingCode || hasSentCode},
       ...(hasSentCode ? [{...form[1], required: true}] : []),
       () => (
-        <PanelItem key="sms-footer" justifyContent="flex-end" p={2} pr="36px">
-          {hasSentCode && (
-            <Button css={{marginRight: 6}} onClick={onSmsReset}>
-              {t('Start Over')}
+        <Actions key="sms-footer">
+          <ButtonBar gap={1}>
+            {hasSentCode && <Button onClick={onSmsReset}>{t('Start Over')}</Button>}
+            <Button priority="primary" type="submit">
+              {hasSentCode ? t('Confirm') : t('Send Code')}
             </Button>
-          )}
-          <Button priority="primary" type="submit">
-            {hasSentCode ? t('Confirm') : t('Send Code')}
-          </Button>
-        </PanelItem>
+          </ButtonBar>
+        </Actions>
       ),
     ];
   }
@@ -417,6 +416,14 @@ class AccountSecurityEnroll extends AsyncView<Props, State> {
   }
 }
 
+const CodeContainer = styled(PanelItem)`
+  justify-content: center;
+`;
+
+const Actions = styled(PanelItem)`
+  justify-content: flex-end;
+`;
+
 const StyledQRCode = styled(QRCode)`
   background: white;
   padding: ${space(2)};

static/app/views/settings/account/accountSubscriptions.tsx

@@ -110,7 +110,7 @@ class AccountSubscriptions extends AsyncView<AsyncView['props'], State> {
                     )}
 
                     {subscriptions.map((subscription, index) => (
-                      <PanelItem p={2} alignItems="center" key={subscription.listId}>
+                      <PanelItem center key={subscription.listId}>
                         <SubscriptionDetails>
                           <SubscriptionName>{subscription.listName}</SubscriptionName>
                           {subscription.listDescription && (

static/app/views/settings/account/passwordForm.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from '@emotion/styled';
 
 import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
 import Button from 'app/components/button';
@@ -37,11 +38,11 @@ function PasswordForm() {
         forms={accountPasswordFields}
         additionalFieldProps={{user}}
         renderFooter={() => (
-          <PanelItem justifyContent="flex-end">
+          <Actions>
             <Button type="submit" priority="primary">
               {t('Change password')}
             </Button>
-          </PanelItem>
+          </Actions>
         )}
         renderHeader={() => (
           <PanelAlert type="info">
@@ -53,4 +54,8 @@ function PasswordForm() {
   );
 }
 
+const Actions = styled(PanelItem)`
+  justify-content: flex-end;
+`;
+
 export default PasswordForm;

static/app/views/settings/organizationAuditLog/auditLogList.tsx

@@ -69,7 +69,7 @@ const AuditLogList = ({
 
           {hasEntries &&
             entries.map(entry => (
-              <StyledPanelItem alignItems="center" key={entry.id}>
+              <StyledPanelItem center key={entry.id}>
                 <UserInfo>
                   <div>
                     {entry.actor.email && (

static/app/views/settings/organizationAuth/providerItem.tsx

@@ -96,7 +96,7 @@ const ProviderItem = ({provider, active, onConfigure}: Props) => {
         renderDisabled,
         renderInstallButton,
       }: FeatureRenderProps) => (
-        <PanelItem alignItems="center">
+        <PanelItem center>
           <ProviderInfo>
             <ProviderLogo
               className={`provider-logo ${provider.name

static/app/views/settings/project/projectFilters/groupTombstones.tsx

@@ -24,7 +24,7 @@ function GroupTombstoneRow({data, onUndiscard}: RowProps) {
   const actor = data.actor;
 
   return (
-    <PanelItem alignItems="center">
+    <PanelItem center>
       <StyledBox>
         <EventOrGroupHeader
           includeLink={false}