Skip to content

Commit 2b7ac4f

Browse files
setchysetchy
committed
feat: migrate to primer design tokens
Signed-off-by: Adam Setch <[email protected]>
1 parent c23f871 commit 2b7ac4f

File tree

12 files changed

+1284
-1358
lines changed

12 files changed

+1284
-1358
lines changed

‎src/renderer/components/buttons/PillButton.tsx‎

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

src/renderer/components/notifications/Pills.test.tsx renamed to src/renderer/components/metrics/MetricGroup.test.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { mockSettings } from '../../__mocks__/state-mocks';
33
import { AppContext } from '../../context/App';
44
import type { Milestone } from '../../typesGitHub';
55
import { mockSingleNotification } from '../../utils/api/__mocks__/response-mocks';
6-
import { Pills } from './Pills';
6+
import { MetricGroup } from './MetricGroup';
77

8-
describe('renderer/components/notifications/Pills.tsx', () => {
8+
describe('renderer/components/metrics/MetricGroup.tsx', () => {
99
describe('showPills disabled', () => {
1010
it('should not render any pills when showPills is disabled', async () => {
1111
const mockNotification = mockSingleNotification;
@@ -20,7 +20,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
2020
settings: { ...mockSettings, showPills: false },
2121
}}
2222
>
23-
<Pills {...props} />
23+
<MetricGroup {...props} />
2424
</AppContext.Provider>,
2525
);
2626
expect(tree).toMatchSnapshot();
@@ -42,7 +42,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
4242
settings: mockSettings,
4343
}}
4444
>
45-
<Pills {...props} />
45+
<MetricGroup {...props} />
4646
</AppContext.Provider>,
4747
);
4848
expect(tree).toMatchSnapshot();
@@ -62,7 +62,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
6262
settings: mockSettings,
6363
}}
6464
>
65-
<Pills {...props} />
65+
<MetricGroup {...props} />
6666
</AppContext.Provider>,
6767
);
6868
expect(tree).toMatchSnapshot();
@@ -84,7 +84,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
8484
settings: mockSettings,
8585
}}
8686
>
87-
<Pills {...props} />
87+
<MetricGroup {...props} />
8888
</AppContext.Provider>,
8989
);
9090
expect(tree).toMatchSnapshot();
@@ -104,7 +104,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
104104
settings: mockSettings,
105105
}}
106106
>
107-
<Pills {...props} />
107+
<MetricGroup {...props} />
108108
</AppContext.Provider>,
109109
);
110110
expect(tree).toMatchSnapshot();
@@ -124,7 +124,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
124124
settings: mockSettings,
125125
}}
126126
>
127-
<Pills {...props} />
127+
<MetricGroup {...props} />
128128
</AppContext.Provider>,
129129
);
130130
expect(tree).toMatchSnapshot();
@@ -146,7 +146,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
146146
settings: mockSettings,
147147
}}
148148
>
149-
<Pills {...props} />
149+
<MetricGroup {...props} />
150150
</AppContext.Provider>,
151151
);
152152
expect(tree).toMatchSnapshot();
@@ -171,7 +171,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
171171
settings: mockSettings,
172172
}}
173173
>
174-
<Pills {...props} />
174+
<MetricGroup {...props} />
175175
</AppContext.Provider>,
176176
);
177177
expect(tree).toMatchSnapshot();
@@ -194,7 +194,7 @@ describe('renderer/components/notifications/Pills.tsx', () => {
194194
settings: mockSettings,
195195
}}
196196
>
197-
<Pills {...props} />
197+
<MetricGroup {...props} />
198198
</AppContext.Provider>,
199199
);
200200
expect(tree).toMatchSnapshot();

src/renderer/components/notifications/Pills.tsx renamed to src/renderer/components/metrics/MetricGroup.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,21 @@ import {
66
MilestoneIcon,
77
TagIcon,
88
} from '@primer/octicons-react';
9+
import { Box } from '@primer/react';
910

1011
import { AppContext } from '../../context/App';
1112
import { IconColor } from '../../types';
1213
import type { Notification } from '../../typesGitHub';
1314
import { getPullRequestReviewIcon } from '../../utils/icons';
14-
import { PillButton } from '../buttons/PillButton';
15+
import { MetricPill } from './MetricPill';
1516

16-
interface IPills {
17+
interface IMetricGroup {
1718
notification: Notification;
1819
}
1920

20-
export const Pills: FC<IPills> = ({ notification }: IPills) => {
21+
export const MetricGroup: FC<IMetricGroup> = ({
22+
notification,
23+
}: IMetricGroup) => {
2124
const { settings } = useContext(AppContext);
2225

2326
const commentsPillDescription = `${notification.subject.comments} ${
@@ -34,9 +37,9 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
3437

3538
return (
3639
settings.showPills && (
37-
<div className="flex">
40+
<Box className="flex gap-1">
3841
{notification.subject?.linkedIssues?.length > 0 && (
39-
<PillButton
42+
<MetricPill
4043
title={linkedIssuesPillDescription}
4144
metric={notification.subject.linkedIssues.length}
4245
icon={IssueClosedIcon}
@@ -51,7 +54,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
5154
}
5255

5356
return (
54-
<PillButton
57+
<MetricPill
5558
key={review.state}
5659
title={icon.description}
5760
metric={review.users.length}
@@ -61,23 +64,23 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
6164
);
6265
})}
6366
{notification.subject?.comments > 0 && (
64-
<PillButton
67+
<MetricPill
6568
title={commentsPillDescription}
6669
metric={notification.subject.comments}
6770
icon={CommentIcon}
6871
color={IconColor.GRAY}
6972
/>
7073
)}
7174
{notification.subject?.labels?.length > 0 && (
72-
<PillButton
75+
<MetricPill
7376
title={labelsPillDescription}
7477
metric={notification.subject.labels.length}
7578
icon={TagIcon}
7679
color={IconColor.GRAY}
7780
/>
7881
)}
7982
{notification.subject.milestone && (
80-
<PillButton
83+
<MetricPill
8184
title={notification.subject.milestone.title}
8285
icon={MilestoneIcon}
8386
color={
@@ -87,7 +90,7 @@ export const Pills: FC<IPills> = ({ notification }: IPills) => {
8790
}
8891
/>
8992
)}
90-
</div>
93+
</Box>
9194
)
9295
);
9396
};

src/renderer/components/buttons/PillButton.test.tsx renamed to src/renderer/components/metrics/MetricPill.test.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import { MarkGithubIcon } from '@primer/octicons-react';
22
import { render } from '@testing-library/react';
33
import { IconColor } from '../../types';
4-
import { type IPillButton, PillButton } from './PillButton';
4+
import { type IMetricPill, MetricPill } from './MetricPill';
55

6-
describe('renderer/components/buttons/PillButton.tsx', () => {
6+
describe('renderer/components/metrics/MetricPill.tsx', () => {
77
it('should render with metric', () => {
8-
const props: IPillButton = {
8+
const props: IMetricPill = {
99
title: 'Mock Pill',
1010
metric: 1,
1111
icon: MarkGithubIcon,
1212
color: IconColor.GREEN,
1313
};
14-
const tree = render(<PillButton {...props} />);
14+
const tree = render(<MetricPill {...props} />);
1515
expect(tree).toMatchSnapshot();
1616
});
1717

1818
it('should render without metric', () => {
19-
const props: IPillButton = {
19+
const props: IMetricPill = {
2020
title: 'Mock Pill',
2121
icon: MarkGithubIcon,
2222
color: IconColor.GREEN,
2323
};
24-
const tree = render(<PillButton {...props} />);
24+
const tree = render(<MetricPill {...props} />);
2525
expect(tree).toMatchSnapshot();
2626
});
2727
});

‎src/renderer/components/metrics/MetricPill.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { FC } from 'react';
2+
3+
import type { Icon } from '@primer/octicons-react';
4+
import { Label, Stack, Text } from '@primer/react';
5+
6+
import { type IconColor, Size } from '../../types';
7+
8+
export interface IMetricPill {
9+
key?: string;
10+
title: string;
11+
metric?: number;
12+
icon: Icon;
13+
color: IconColor;
14+
}
15+
16+
export const MetricPill: FC<IMetricPill> = (props: IMetricPill) => {
17+
return (
18+
<Label
19+
variant="secondary"
20+
size="small"
21+
title={props.title}
22+
className="hover:bg-gitify-notification-pill-hover"
23+
>
24+
<Stack direction="horizontal" align="center" gap="none">
25+
<props.icon size={Size.XSMALL} className={props.color} />
26+
{props.metric && <Text className="text-xxs px-1">{props.metric}</Text>}
27+
</Stack>
28+
</Label>
29+
);
30+
};

0 commit comments

Comments
 (0)