Skip to content

Commit c4e816d

Browse files
committed
layout: migrate flex
1 parent 966057c commit c4e816d

File tree

29 files changed

+100
-772
lines changed

29 files changed

+100
-772
lines changed

analyze-styled.ts

Lines changed: 0 additions & 500 deletions
This file was deleted.

static/app/components/badge/groupPriority.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {IconCellSignal} from 'sentry/components/badge/iconCellSignal';
1010
import {Tag} from 'sentry/components/core/badge/tag';
1111
import {Button} from 'sentry/components/core/button';
1212
import {LinkButton} from 'sentry/components/core/button/linkButton';
13+
import {Flex} from 'sentry/components/core/layout';
1314
import {Tooltip} from 'sentry/components/core/tooltip';
1415
import type {MenuItemProps} from 'sentry/components/dropdownMenu';
1516
import {DropdownMenu} from 'sentry/components/dropdownMenu';
@@ -191,9 +192,9 @@ export function GroupPriorityDropdown({
191192
<DropdownMenu
192193
size="sm"
193194
menuTitle={
194-
<MenuTitleContainer>
195+
<Flex align="flex-end" justify="space-between">
195196
<div>{t('Set Priority')}</div>
196-
</MenuTitleContainer>
197+
</Flex>
197198
}
198199
minMenuWidth={230}
199200
trigger={(triggerProps, isOpen) => (
@@ -261,12 +262,6 @@ const InlinePlaceholder = styled(Placeholder)`
261262
vertical-align: middle;
262263
`;
263264

264-
const MenuTitleContainer = styled('div')`
265-
display: flex;
266-
align-items: flex-end;
267-
justify-content: space-between;
268-
`;
269-
270265
const StyledFooter = styled(DropdownMenuFooter)`
271266
max-width: 230px;
272267
${p => p.theme.overflowEllipsis};

static/app/components/errorBoundary.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
33
import * as Sentry from '@sentry/react';
44

55
import {Alert} from 'sentry/components/core/alert';
6+
import {Flex} from 'sentry/components/core/layout';
67
import DetailedError from 'sentry/components/errors/detailedError';
78
import {IconClose} from 'sentry/icons';
89
import {t} from 'sentry/locale';
@@ -127,10 +128,10 @@ class ErrorBoundary extends Component<Props, State> {
127128
return (
128129
<Alert.Container>
129130
<Alert type="error" showIcon className={className}>
130-
<AlertContent>
131+
<Flex align="center" justify="space-between">
131132
{message || t('There was a problem rendering this component')}
132133
{this.props.allowDismiss && <IconClose onClick={this.handleClose} />}
133-
</AlertContent>
134+
</Flex>
134135
</Alert>
135136
</Alert.Container>
136137
);
@@ -155,12 +156,6 @@ Anyway, we apologize for the inconvenience.`
155156
}
156157
}
157158

158-
const AlertContent = styled('div')`
159-
display: flex;
160-
align-items: center;
161-
justify-content: space-between;
162-
`;
163-
164159
const Wrapper = styled('div')`
165160
color: ${p => p.theme.textColor};
166161
padding: ${space(3)};

static/app/data/forms/projectGeneralSettings.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
22
import {PlatformIcon} from 'platformicons';
33

44
import {hasEveryAccess} from 'sentry/components/acl/access';
5+
import {Flex} from 'sentry/components/core/layout';
56
import {createFilter} from 'sentry/components/forms/controls/reactSelectWrapper';
67
import type {Field} from 'sentry/components/forms/types';
78
import platforms from 'sentry/data/platforms';
@@ -40,10 +41,6 @@ const ORG_DISABLED_REASON = t(
4041
"This option is enforced by your organization's settings and cannot be customized per-project."
4142
);
4243

43-
const PlatformWrapper = styled('div')`
44-
display: flex;
45-
align-items: center;
46-
`;
4744
const StyledPlatformIcon = styled(PlatformIcon)`
4845
margin-right: ${space(1)};
4946
`;
@@ -78,10 +75,10 @@ export const fields = {
7875
options: platforms.map(({id, name}) => ({
7976
value: id,
8077
label: (
81-
<PlatformWrapper key={id}>
78+
<Flex key={id} align="center">
8279
<StyledPlatformIcon platform={id} />
8380
{name}
84-
</PlatformWrapper>
81+
</Flex>
8582
),
8683
})),
8784
help: t('The primary platform for this project'),

static/app/gettingStartedDocs/javascript/nextjs.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Fragment} from 'react';
2-
import styled from '@emotion/styled';
32

3+
import {Flex} from 'sentry/components/core/layout';
44
import ExternalLink from 'sentry/components/links/externalLink';
55
import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
66
import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
@@ -343,7 +343,7 @@ const feedbackOnboarding: OnboardingConfig = {
343343
},
344344
],
345345
additionalInfo: (
346-
<AdditionalInfoWrapper>
346+
<Flex direction="column" gap={space(2)}>
347347
<div>
348348
{tct(
349349
'Note: The User Feedback integration only needs to be added to your [code:sentry.client.config.js] file. Adding it to any server-side configuration files (like [code:instrumentation.ts]) will break your build because the Replay integration depends on Browser APIs.',
@@ -357,7 +357,7 @@ const feedbackOnboarding: OnboardingConfig = {
357357
link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/#crash-report-modal',
358358
})}
359359
</div>
360-
</AdditionalInfoWrapper>
360+
</Flex>
361361
),
362362
},
363363
],
@@ -567,9 +567,3 @@ const docs: Docs = {
567567
};
568568

569569
export default docs;
570-
571-
const AdditionalInfoWrapper = styled('div')`
572-
display: flex;
573-
flex-direction: column;
574-
gap: ${space(2)};
575-
`;

static/app/plugins/components/settings.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {css} from '@emotion/react';
2-
import styled from '@emotion/styled';
32
import isEqual from 'lodash/isEqual';
43

54
import {Alert} from 'sentry/components/core/alert';
65
import {LinkButton} from 'sentry/components/core/button/linkButton';
6+
import {Flex} from 'sentry/components/core/layout';
77
import Form from 'sentry/components/deprecatedforms/form';
88
import FormState from 'sentry/components/forms/state';
99
import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -221,7 +221,7 @@ class PluginSettings<
221221
onSubmit={this.onSubmit}
222222
submitDisabled={isSaving || !hasChanges}
223223
>
224-
<Flex>
224+
<Flex direction="column">
225225
{this.state.errors.__all__ && (
226226
<Alert type="error">
227227
<ul>
@@ -243,9 +243,4 @@ class PluginSettings<
243243
}
244244
}
245245

246-
const Flex = styled('div')`
247-
display: flex;
248-
flex-direction: column;
249-
`;
250-
251246
export default PluginSettings;

static/app/views/alerts/rules/uptime/uptimeHeadersField.tsx

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
33

44
import {Button} from 'sentry/components/core/button';
55
import {Input} from 'sentry/components/core/input';
6+
import {Flex} from 'sentry/components/core/layout';
67
import type {FormFieldProps} from 'sentry/components/forms/formField';
78
import FormField from 'sentry/components/forms/formField';
89
import FormFieldControlState from 'sentry/components/forms/formField/controlState';
@@ -86,7 +87,7 @@ function UptimHeadersControl(props: any) {
8687
}
8788

8889
return (
89-
<HeadersContainer>
90+
<Flex direction="column" gap={space(1)}>
9091
{items.length > 0 && (
9192
<HeaderItems>
9293
{items.map(([id, headerName, headerValue], index) => (
@@ -127,13 +128,13 @@ function UptimHeadersControl(props: any) {
127128
))}
128129
</HeaderItems>
129130
)}
130-
<HeaderActions>
131+
<Flex gap={space(1.5)}>
131132
<Button disabled={disabled} icon={<IconAdd />} size="sm" onClick={addItem}>
132133
{t('Add Header')}
133134
</Button>
134135
<FormFieldControlState model={model} name={name} />
135-
</HeaderActions>
136-
</HeadersContainer>
136+
</Flex>
137+
</Flex>
137138
);
138139
}
139140

@@ -145,17 +146,6 @@ export function UptimeHeadersField(props: Omit<FormFieldProps, 'children'>) {
145146
);
146147
}
147148

148-
const HeadersContainer = styled('div')`
149-
display: flex;
150-
flex-direction: column;
151-
gap: ${space(1)};
152-
`;
153-
154-
const HeaderActions = styled('div')`
155-
display: flex;
156-
gap: ${space(1.5)};
157-
`;
158-
159149
const HeaderItems = styled('fieldset')`
160150
display: grid;
161151
grid-template-columns: minmax(200px, 1fr) 2fr max-content;
Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Outlet} from 'react-router-dom';
2-
import styled from '@emotion/styled';
32

43
import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
4+
import {Flex} from 'sentry/components/core/layout';
55
import * as Layout from 'sentry/components/layouts/thirds';
66
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
77
import useOrganization from 'sentry/utils/useOrganization';
@@ -14,11 +14,11 @@ export default function CommitDetailWrapper() {
1414
<SentryDocumentTitle title="Commit Page Wrapper" orgSlug={organization.slug}>
1515
<Layout.Header unified>
1616
<Layout.HeaderContent>
17-
<HeaderContentBar>
17+
<Flex align="center" justify="space-between" direction="row">
1818
<Layout.Title>
1919
Commit Page Wrapper <FeatureBadge type="new" />
2020
</Layout.Title>
21-
</HeaderContentBar>
21+
</Flex>
2222
</Layout.HeaderContent>
2323
</Layout.Header>
2424
<Layout.Body>
@@ -29,10 +29,3 @@ export default function CommitDetailWrapper() {
2929
</SentryDocumentTitle>
3030
);
3131
}
32-
33-
const HeaderContentBar = styled('div')`
34-
display: flex;
35-
align-items: center;
36-
justify-content: space-between;
37-
flex-direction: row;
38-
`;
Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Outlet} from 'react-router-dom';
2-
import styled from '@emotion/styled';
32

43
import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
4+
import {Flex} from 'sentry/components/core/layout';
55
import * as Layout from 'sentry/components/layouts/thirds';
66
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
77
import useOrganization from 'sentry/utils/useOrganization';
@@ -14,12 +14,12 @@ export default function CoveragePageWrapper() {
1414
<SentryDocumentTitle title={COVERAGE_PAGE_TITLE} orgSlug={organization.slug}>
1515
<Layout.Header unified>
1616
<Layout.HeaderContent>
17-
<HeaderContentBar>
17+
<Flex align="center" justify="space-between" direction="row">
1818
<Layout.Title>
1919
{COVERAGE_PAGE_TITLE}
2020
<FeatureBadge type="new" />
2121
</Layout.Title>
22-
</HeaderContentBar>
22+
</Flex>
2323
</Layout.HeaderContent>
2424
</Layout.Header>
2525
<Layout.Body>
@@ -30,10 +30,3 @@ export default function CoveragePageWrapper() {
3030
</SentryDocumentTitle>
3131
);
3232
}
33-
34-
const HeaderContentBar = styled('div')`
35-
display: flex;
36-
align-items: center;
37-
justify-content: space-between;
38-
flex-direction: row;
39-
`;
Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Outlet} from 'react-router-dom';
2-
import styled from '@emotion/styled';
32

43
import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
4+
import {Flex} from 'sentry/components/core/layout';
55
import * as Layout from 'sentry/components/layouts/thirds';
66
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
77
import useOrganization from 'sentry/utils/useOrganization';
@@ -14,11 +14,11 @@ export default function PullDetailWrapper() {
1414
<SentryDocumentTitle title="Pull Page Wrapper" orgSlug={organization.slug}>
1515
<Layout.Header unified>
1616
<Layout.HeaderContent>
17-
<HeaderContentBar>
17+
<Flex align="center" justify="space-between" direction="row">
1818
<Layout.Title>
1919
Pull Page Wrapper <FeatureBadge type="new" />
2020
</Layout.Title>
21-
</HeaderContentBar>
21+
</Flex>
2222
</Layout.HeaderContent>
2323
</Layout.Header>
2424
<Layout.Body>
@@ -29,10 +29,3 @@ export default function PullDetailWrapper() {
2929
</SentryDocumentTitle>
3030
);
3131
}
32-
33-
const HeaderContentBar = styled('div')`
34-
display: flex;
35-
align-items: center;
36-
justify-content: space-between;
37-
flex-direction: row;
38-
`;

0 commit comments

Comments
 (0)