Skip to content

Commit 31c51d5

Browse files
JonasBaJonasBa
authored
flex: cleanup Flex* custom styling in favor of Flex primitive (#93809)
Just remove a couple custom Flex* classes in favor of the Flex primitive
1 parent fd4ab7b commit 31c51d5

File tree

19 files changed

+123
-221
lines changed

19 files changed

+123
-221
lines changed

‎static/app/components/codeSnippet.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
44
import Prism from 'prismjs';
55

66
import {Button} from 'sentry/components/core/button';
7+
import {Flex} from 'sentry/components/core/layout';
78
import {IconCopy} from 'sentry/icons';
89
import {t} from 'sentry/locale';
910
import {space} from 'sentry/styles/space';
@@ -163,12 +164,12 @@ export function CodeSnippet({
163164
</Tab>
164165
))}
165166
</TabsWrapper>
166-
<FlexSpacer />
167+
<Flex.Item grow={1} />
167168
</Fragment>
168169
)}
169170
{icon}
170171
{filename && <FileName>{filename}</FileName>}
171-
{!hasTabs && <FlexSpacer />}
172+
{!hasTabs && <Flex.Item grow={1} />}
172173
{!hideCopyButton && (
173174
<CopyButton
174175
type="button"
@@ -276,10 +277,6 @@ const Tab = styled('button')<{isSelected: boolean}>`
276277
: ''}
277278
`;
278279

279-
const FlexSpacer = styled('div')`
280-
flex-grow: 1;
281-
`;
282-
283280
const CopyButton = styled(Button)<{isAlwaysVisible: boolean}>`
284281
color: var(--prism-comment);
285282
transition: opacity 0.1s ease-out;

‎static/app/components/codecov/branchSelector/branchSelector.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
55
import {useCodecovContext} from 'sentry/components/codecov/context/codecovContext';
66
import type {SelectOption} from 'sentry/components/core/compactSelect';
77
import {CompactSelect} from 'sentry/components/core/compactSelect';
8+
import {Flex} from 'sentry/components/core/layout';
89
import DropdownButton from 'sentry/components/dropdownButton';
910
import {t} from 'sentry/locale';
1011
import {space} from 'sentry/styles/space';
@@ -60,12 +61,12 @@ export function BranchSelector() {
6061
{...triggerProps}
6162
>
6263
<TriggerLabelWrap>
63-
<FlexContainer>
64+
<Flex align="center" gap={space(0.75)}>
6465
<IconContainer>
6566
<IconBranch />
6667
</IconContainer>
6768
<TriggerLabel>{branch || t('Select branch')}</TriggerLabel>
68-
</FlexContainer>
69+
</Flex>
6970
</TriggerLabelWrap>
7071
</DropdownButton>
7172
);
@@ -95,12 +96,6 @@ const OptionLabel = styled('span')`
9596
}
9697
`;
9798

98-
const FlexContainer = styled('div')`
99-
display: flex;
100-
align-items: center;
101-
gap: ${space(0.75)};
102-
`;
103-
10499
const IconContainer = styled('div')`
105100
flex: 1 0 14px;
106101
height: 14px;

‎static/app/components/codecov/datePicker/dateSelector.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

44
import type {SelectOption, SingleSelectProps} from 'sentry/components/core/compactSelect';
55
import {CompactSelect} from 'sentry/components/core/compactSelect';
6+
import {Flex} from 'sentry/components/core/layout';
67
import DropdownButton from 'sentry/components/dropdownButton';
78
import {getArbitraryRelativePeriod} from 'sentry/components/timeRangeSelector/utils';
89
import {IconCalendar} from 'sentry/icons/iconCalendar';
@@ -80,10 +81,10 @@ export function DateSelector({relativeDate, onChange, trigger}: DateSelectorProp
8081
{...triggerProps}
8182
>
8283
<TriggerLabelWrap>
83-
<FlexContainer>
84+
<Flex align="center" gap={space(0.75)}>
8485
<IconCalendar />
8586
<TriggerLabel>{defaultLabel}</TriggerLabel>
86-
</FlexContainer>
87+
</Flex>
8788
</TriggerLabelWrap>
8889
</DropdownButton>
8990
);
@@ -108,9 +109,3 @@ const OptionLabel = styled('span')`
108109
margin: 0;
109110
}
110111
`;
111-
112-
const FlexContainer = styled('div')`
113-
display: flex;
114-
align-items: center;
115-
gap: ${space(0.75)};
116-
`;

‎static/app/components/codecov/integratedOrgSelector/integratedOrgSelector.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {useCodecovContext} from 'sentry/components/codecov/context/codecovContex
66
import {LinkButton} from 'sentry/components/core/button/linkButton';
77
import type {SelectOption} from 'sentry/components/core/compactSelect';
88
import {CompactSelect} from 'sentry/components/core/compactSelect';
9+
import {Flex} from 'sentry/components/core/layout';
910
import DropdownButton from 'sentry/components/dropdownButton';
1011
import {IconAdd, IconInfo} from 'sentry/icons';
1112
import {t} from 'sentry/locale';
@@ -33,7 +34,7 @@ function OrgFooterMessage() {
3334
<Fragment>
3435
<AddIntegratedOrgButton />
3536
<MenuFooterDivider />
36-
<FlexContainer>
37+
<Flex justify="flex-start" gap={space(1)}>
3738
<IconInfo size="sm" style={{margin: '2px 0'}} />
3839
<div>
3940
<FooterInfoHeading>
@@ -43,7 +44,7 @@ function OrgFooterMessage() {
4344
Ensure you log in to the same <Link to="placeholder">GitHub identity</Link>
4445
</FooterInfoSubheading>
4546
</div>
46-
</FlexContainer>
47+
</Flex>
4748
</Fragment>
4849
);
4950
}
@@ -95,14 +96,14 @@ export function IntegratedOrgSelector() {
9596
{...triggerProps}
9697
>
9798
<TriggerLabelWrap>
98-
<TriggerFlexContainer>
99+
<Flex justify="flex-start" gap={space(0.75)} align="center">
99100
<IconContainer>
100101
<IconIntegratedOrg />
101102
</IconContainer>
102103
<TriggerLabel>
103104
{integratedOrg || t('Select integrated organization')}
104105
</TriggerLabel>
105-
</TriggerFlexContainer>
106+
</Flex>
106107
</TriggerLabelWrap>
107108
</DropdownButton>
108109
);
@@ -160,21 +161,6 @@ const MenuFooterDivider = styled('div')`
160161
}
161162
`;
162163

163-
const FlexContainer = styled('div')`
164-
display: flex;
165-
flex-direction: row;
166-
justify-content: flex-start;
167-
gap: ${space(1)};
168-
`;
169-
170-
const TriggerFlexContainer = styled('div')`
171-
display: flex;
172-
flex-direction: row;
173-
justify-content: flex-start;
174-
gap: ${space(0.75)};
175-
align-items: center;
176-
`;
177-
178164
const IconContainer = styled('div')`
179165
flex: 1 0 14px;
180166
height: 14px;

‎static/app/components/codecov/repoPicker/repoSelector.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
44
import {Button} from 'sentry/components/core/button';
55
import type {SelectOption, SingleSelectProps} from 'sentry/components/core/compactSelect';
66
import {CompactSelect} from 'sentry/components/core/compactSelect';
7+
import {Flex} from 'sentry/components/core/layout';
78
import DropdownButton from 'sentry/components/dropdownButton';
89
import Link from 'sentry/components/links/link';
910
import {IconInfo, IconSync} from 'sentry/icons';
@@ -118,12 +119,12 @@ export function RepoSelector({onChange, trigger, repository}: RepoSelectorProps)
118119
{...triggerProps}
119120
>
120121
<TriggerLabelWrap>
121-
<FlexContainer>
122+
<Flex align="center" gap={space(0.75)}>
122123
<IconContainer>
123124
<IconRepository />
124125
</IconContainer>
125126
<TriggerLabel>{defaultLabel}</TriggerLabel>
126-
</FlexContainer>
127+
</Flex>
127128
</TriggerLabelWrap>
128129
</DropdownButton>
129130
);
@@ -178,12 +179,6 @@ const OptionLabel = styled('span')`
178179
}
179180
`;
180181

181-
const FlexContainer = styled('div')`
182-
display: flex;
183-
align-items: center;
184-
gap: ${space(0.75)};
185-
`;
186-
187182
const IconContainer = styled('div')`
188183
flex: 1 0 14px;
189184
height: 14px;

‎static/app/components/events/eventAttachments.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
useFetchEventAttachments,
77
} from 'sentry/actionCreators/events';
88
import {LinkButton} from 'sentry/components/core/button/linkButton';
9+
import {Flex} from 'sentry/components/core/layout';
910
import EventAttachmentActions from 'sentry/components/events/eventAttachmentActions';
1011
import FileSize from 'sentry/components/fileSize';
1112
import LoadingError from 'sentry/components/loadingError';
@@ -139,9 +140,10 @@ function EventAttachmentsContent({
139140
>
140141
{attachments.map(attachment => (
141142
<Fragment key={attachment.id}>
142-
<FlexCenter>
143+
<Flex align="center">
143144
<Name>{attachment.name}</Name>
144-
</FlexCenter>
145+
</Flex>
146+
145147
<Size>
146148
<FileSize bytes={attachment.size} />
147149
</Size>
@@ -198,12 +200,6 @@ const StyledPanelTable = styled(PanelTable)`
198200
grid-template-columns: 1fr auto auto;
199201
`;
200202

201-
const FlexCenter = styled('div')`
202-
${p => p.theme.overflowEllipsis};
203-
display: flex;
204-
align-items: center;
205-
`;
206-
207203
const Name = styled('div')`
208204
${p => p.theme.overflowEllipsis};
209205
white-space: nowrap;

‎static/app/components/events/interfaces/spans/newTraceDetailsHeader.tsx‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Fragment} from 'react';
22
import styled from '@emotion/styled';
33

4+
import {Flex} from 'sentry/components/core/layout';
45
import {generateStats} from 'sentry/components/events/opsBreakdown';
56
import {DividerSpacer} from 'sentry/components/performance/waterfall/miniHeader';
67
import {t} from 'sentry/locale';
@@ -32,18 +33,18 @@ function ServiceBreakdown({
3233
if (!displayBreakdown) {
3334
return (
3435
<BreakDownWrapper>
35-
<BreakDownRow>
36+
<Flex align="center" justify="space-between">
3637
<div>{t('server side')}</div>
37-
<FlexBox>
38+
<Flex>
3839
<span>{'N/A'}</span>
39-
</FlexBox>
40-
</BreakDownRow>
41-
<BreakDownRow>
40+
</Flex>
41+
</Flex>
42+
<Flex align="center" justify="space-between">
4243
<div>{t('client side')}</div>
43-
<FlexBox>
44+
<Flex>
4445
<span>{'N/A'}</span>
45-
</FlexBox>
46-
</BreakDownRow>
46+
</Flex>
47+
</Flex>
4748
</BreakDownWrapper>
4849
);
4950
}
@@ -57,20 +58,20 @@ function ServiceBreakdown({
5758

5859
return httpDuration ? (
5960
<BreakDownWrapper>
60-
<BreakDownRow>
61+
<Flex align="center" justify="space-between">
6162
<div>{t('server side')}</div>
62-
<FlexBox>
63+
<Flex>
6364
<Dur>{getDuration(httpDuration, 2, true)}</Dur>
6465
<Pct>{serverSidePct}%</Pct>
65-
</FlexBox>
66-
</BreakDownRow>
67-
<BreakDownRow>
66+
</Flex>
67+
</Flex>
68+
<Flex align="center" justify="space-between">
6869
<div>{t('client side')}</div>
69-
<FlexBox>
70+
<Flex>
7071
<Dur>{getDuration(totalDuration - httpDuration, 2, true)}</Dur>
7172
<Pct>{clientSidePct}%</Pct>
72-
</FlexBox>
73-
</BreakDownRow>
73+
</Flex>
74+
</Flex>
7475
</BreakDownWrapper>
7576
) : null;
7677
}
@@ -151,18 +152,10 @@ const Pct = styled('div')`
151152
font-variant-numeric: tabular-nums;
152153
`;
153154

154-
const FlexBox = styled('div')`
155+
const BreakDownWrapper = styled('div')`
155156
display: flex;
156-
`;
157-
158-
const BreakDownWrapper = styled(FlexBox)`
159157
flex-direction: column;
160158
padding: ${space(2)};
161159
`;
162160

163-
const BreakDownRow = styled(FlexBox)`
164-
align-items: center;
165-
justify-content: space-between;
166-
`;
167-
168161
export default TraceViewHeader;

‎static/app/components/group/times.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {Fragment} from 'react';
22
import styled from '@emotion/styled';
33

4+
import {Flex} from 'sentry/components/core/layout';
5+
import TextOverflow from 'sentry/components/textOverflow';
46
import TimeSince from 'sentry/components/timeSince';
57
import {IconClock} from 'sentry/icons';
68
import {t} from 'sentry/locale';
@@ -19,20 +21,28 @@ type Props = {
1921
function Times({lastSeen, firstSeen}: Props) {
2022
return (
2123
<Container>
22-
<FlexWrapper>
24+
<Flex align="center">
2325
{lastSeen && (
2426
<Fragment>
25-
<StyledIconClock legacySize="11px" />
26-
<TimeSince date={lastSeen} suffix={t('ago')} />
27+
<StyledIconClock size="xs" />
28+
<TextOverflow>
29+
<TimeSince date={lastSeen} suffix={t('ago')} />
30+
</TextOverflow>
2731
</Fragment>
2832
)}
2933
{firstSeen && lastSeen && (
3034
<span className="hidden-xs hidden-sm">&nbsp;—&nbsp;</span>
3135
)}
3236
{firstSeen && (
33-
<TimeSince date={firstSeen} suffix={t('old')} className="hidden-xs hidden-sm" />
37+
<TextOverflow>
38+
<TimeSince
39+
date={firstSeen}
40+
suffix={t('old')}
41+
className="hidden-xs hidden-sm"
42+
/>
43+
</TextOverflow>
3444
)}
35-
</FlexWrapper>
45+
</Flex>
3646
</Container>
3747
);
3848
}
@@ -42,18 +52,11 @@ const Container = styled('div')`
4252
min-width: 0; /* flex-hack for overflow-ellipsised children */
4353
`;
4454

45-
const FlexWrapper = styled('div')`
46-
${p => p.theme.overflowEllipsis}
47-
48-
/* The following aligns the icon with the text, fixes bug in Firefox */
49-
display: flex;
50-
align-items: center;
51-
`;
52-
5355
const StyledIconClock = styled(IconClock)`
5456
/* this is solely for optics, since TimeSince always begins
5557
with a number, and numbers do not have descenders */
5658
margin-right: ${space(0.5)};
59+
min-width: 12px;
5760
`;
5861

5962
export default Times;

0 commit comments

Comments
 (0)