Skip to content

Commit a24bd5f

Browse files
committed
feat: primer v37 upgrade
Signed-off-by: Adam Setch <[email protected]>
1 parent ea29c53 commit a24bd5f

22 files changed

+95
-107
lines changed
Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { type FC, type ReactNode, useState } from 'react';
22

33
import { QuestionIcon } from '@primer/octicons-react';
4-
import { Box } from '@primer/react';
54

65
export interface ITooltip {
76
name: string;
@@ -12,22 +11,23 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
1211
const [showTooltip, setShowTooltip] = useState(false);
1312

1413
return (
15-
<Box
14+
<button
1615
aria-label={props.name}
1716
className="relative"
1817
data-testid={`tooltip-${props.name}`}
1918
id={props.name}
2019
onMouseEnter={() => setShowTooltip(true)}
2120
onMouseLeave={() => setShowTooltip(false)}
21+
type="button"
2222
>
2323
<QuestionIcon className="text-gitify-tooltip-icon" />
2424
{showTooltip && (
25-
<Box className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
26-
<Box className="text-left text-xs text-gitify-font">
25+
<div className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
26+
<div className="text-left text-xs text-gitify-font">
2727
{props.tooltip}
28-
</Box>
29-
</Box>
28+
</div>
29+
</div>
3030
)}
31-
</Box>
31+
</button>
3232
);
3333
};

src/renderer/components/filters/SearchFilter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
RepoIcon,
99
SearchIcon,
1010
} from '@primer/octicons-react';
11-
import { Box, Stack, Text } from '@primer/react';
11+
import { Stack, Text } from '@primer/react';
1212

1313
import { AppContext } from '../../context/App';
1414
import { IconColor, type SearchToken, Size } from '../../types';
@@ -86,7 +86,7 @@ export const SearchFilter: FC = () => {
8686
tooltip={
8787
<Stack direction="vertical" gap="condensed">
8888
<Text>Filter notifications by:</Text>
89-
<Box className="pl-4">
89+
<div className="pl-4">
9090
<Stack direction="vertical" gap="condensed">
9191
<Stack direction="horizontal" gap="condensed">
9292
<PersonIcon size={Size.SMALL} />
@@ -108,7 +108,7 @@ export const SearchFilter: FC = () => {
108108
<Text>Repository (repo:fullname)</Text>
109109
</Stack>
110110
</Stack>
111-
</Box>
111+
</div>
112112
<RequiresDetailedNotificationWarning />
113113
</Stack>
114114
}

src/renderer/components/filters/SearchFilterSuggestions.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type FC, useContext } from 'react';
22

3-
import { Box, Popover, Stack, Text } from '@primer/react';
3+
import { Popover, Stack, Text } from '@primer/react';
44

55
import { AppContext } from '../../context/App';
66
import { Opacity } from '../../types';
@@ -41,27 +41,27 @@ export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({
4141
<Stack direction="vertical" gap="condensed">
4242
{suggestions.length > 0 &&
4343
suggestions.map((q) => (
44-
<Box key={q.prefix}>
44+
<div key={q.prefix}>
4545
<Stack direction="vertical" gap="none">
4646
<Text className="text-xs font-semibold">{q.prefix}</Text>
4747
<Text className={cn('text-xs', Opacity.HIGH)}>
4848
{q.description}
4949
</Text>
5050
</Stack>
51-
</Box>
51+
</div>
5252
))}
5353
{inputValue !== '' &&
5454
suggestions.length === 0 &&
5555
!beginsWithKnownQualifier && (
56-
<Box>
56+
<div>
5757
<Text className={cn('text-xs', Opacity.HIGH)}>
5858
Please use one of the supported filters [
5959
{base
6060
.map((q) => q.prefix.replace(SEARCH_DELIMITER, ''))
6161
.join(', ')}
6262
]
6363
</Text>
64-
</Box>
64+
</div>
6565
)}
6666
</Stack>
6767
</Popover.Content>

src/renderer/components/filters/TokenSearchInput.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type FC, useState } from 'react';
22

3-
import { Box, Stack, Text, TextInputWithTokens } from '@primer/react';
3+
import { Stack, Text, TextInputWithTokens } from '@primer/react';
44

55
import type { SearchToken } from '../../types';
66
import {
@@ -66,13 +66,13 @@ export const TokenSearchInput: FC<TokenSearchInputProps> = ({
6666
direction="horizontal"
6767
gap="condensed"
6868
>
69-
<Box className="font-medium text-gitify-font w-20">
69+
<div className="font-medium text-gitify-font w-20">
7070
<Stack align="center" direction="horizontal" gap="condensed">
7171
<Icon className={iconColorClass} />
7272
<Text>{label}:</Text>
7373
</Stack>
74-
</Box>
75-
<Box flexGrow={1} position="relative">
74+
</div>
75+
<div className="relative grow">
7676
<TextInputWithTokens
7777
block
7878
onBlur={(e) => {
@@ -115,7 +115,7 @@ export const TokenSearchInput: FC<TokenSearchInputProps> = ({
115115
inputValue={inputValue}
116116
open={showSuggestions}
117117
/>
118-
</Box>
118+
</div>
119119
</Stack>
120120
);
121121
};

src/renderer/components/filters/UserTypeFilter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
OrganizationIcon,
77
PersonIcon,
88
} from '@primer/octicons-react';
9-
import { Box, Stack, Text } from '@primer/react';
9+
import { Stack, Text } from '@primer/react';
1010

1111
import { Size } from '../../types';
1212
import { userTypeFilter } from '../../utils/notifications/filters';
@@ -24,7 +24,7 @@ export const UserTypeFilter: FC = () => {
2424
tooltip={
2525
<Stack direction="vertical" gap="condensed">
2626
<Text>Filter notifications by user type:</Text>
27-
<Box className="pl-4">
27+
<div className="pl-4">
2828
<Stack direction="vertical" gap="condensed">
2929
<Stack direction="horizontal" gap="condensed">
3030
<PersonIcon size={Size.SMALL} />
@@ -39,7 +39,7 @@ export const UserTypeFilter: FC = () => {
3939
Organization
4040
</Stack>
4141
</Stack>
42-
</Box>
42+
</div>
4343
</Stack>
4444
}
4545
/>
Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import type { FC, ReactNode } from 'react';
22

3-
import { Box } from '@primer/react';
4-
53
import { Sidebar } from '../Sidebar';
64

75
interface IAppLayout {
@@ -14,10 +12,10 @@ interface IAppLayout {
1412
*/
1513
export const AppLayout: FC<IAppLayout> = ({ children }) => {
1614
return (
17-
<Box className="flex flex-col min-h-screen bg-gitify-background">
15+
<div className="flex flex-col min-h-screen bg-gitify-background">
1816
<Sidebar />
1917
{/* Content area with left padding to make space for the sidebar */}
20-
<Box className="flex-1 pl-sidebar">{children}</Box>
21-
</Box>
18+
<div className="flex-1 pl-sidebar">{children}</div>
19+
</div>
2220
);
2321
};

src/renderer/components/layout/Contents.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import type { FC, ReactNode } from 'react';
22

3-
import { Box } from '@primer/react';
4-
53
import { cn } from '../../utils/cn';
64

75
interface IContents {
@@ -20,14 +18,14 @@ export const Contents: FC<IContents> = ({
2018
paddingBottom = false,
2119
}) => {
2220
return (
23-
<Box
21+
<div
2422
className={cn(
2523
'grow overflow-x-hidden overflow-y-auto',
2624
paddingHorizontal && 'px-8',
2725
paddingBottom && 'pb-4',
2826
)}
2927
>
3028
{children}
31-
</Box>
29+
</div>
3230
);
3331
};

src/renderer/components/layout/EmojiSplash.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { FC } from 'react';
22

3-
import { Box, Stack } from '@primer/react';
3+
import { Stack } from '@primer/react';
44

55
import { EmojiText } from '../primitives/EmojiText';
66
import { Centered } from './Centered';
@@ -27,15 +27,15 @@ export const EmojiSplash: FC<IEmojiSplash> = ({
2727
>
2828
<Stack align="center" direction="vertical" gap="spacious">
2929
<EmojiText text={props.emoji} />
30-
<Box className="text-xl font-semibold">{props.heading}</Box>
30+
<div className="text-xl font-semibold">{props.heading}</div>
3131
</Stack>
3232

3333
{subHeadings.map((description, i) => {
3434
return (
3535
// biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
36-
<Box className="text-center" key={`error_description_${i}`}>
36+
<div className="text-center" key={`error_description_${i}`}>
3737
{description}
38-
</Box>
38+
</div>
3939
);
4040
})}
4141
</Stack>

src/renderer/components/layout/Page.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import type { FC, ReactNode } from 'react';
22

3-
import { Box } from '@primer/react';
4-
53
interface IPage {
64
children: ReactNode;
75
testId?: string;
@@ -14,8 +12,8 @@ interface IPage {
1412
*/
1513
export const Page: FC<IPage> = ({ children, testId }) => {
1614
return (
17-
<Box className="flex flex-col h-screen" data-testid={testId}>
15+
<div className="flex flex-col h-screen" data-testid={testId}>
1816
{children}
19-
</Box>
17+
</div>
2018
);
2119
};

src/renderer/components/metrics/MetricGroup.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
MilestoneIcon,
77
TagIcon,
88
} from '@primer/octicons-react';
9-
import { Box } from '@primer/react';
109

1110
import { AppContext } from '../../context/App';
1211
import { IconColor } from '../../types';
@@ -37,7 +36,7 @@ export const MetricGroup: FC<IMetricGroup> = ({
3736

3837
return (
3938
settings.showPills && (
40-
<Box className="flex gap-1">
39+
<div className="flex gap-1">
4140
{notification.subject?.linkedIssues?.length > 0 && (
4241
<MetricPill
4342
color={IconColor.GRAY}
@@ -90,7 +89,7 @@ export const MetricGroup: FC<IMetricGroup> = ({
9089
title={notification.subject.milestone.title}
9190
/>
9291
)}
93-
</Box>
92+
</div>
9493
)
9594
);
9695
};

0 commit comments

Comments
 (0)