Skip to content

Commit 4955efc

Browse files
setchysetchy
authored
refactor: account, repository and notification row layouts (#1777)
* refactor: notification row layout Signed-off-by: Adam Setch <[email protected]> * refactor: notification row layouts Signed-off-by: Adam Setch <[email protected]> * refactor: notification row layouts Signed-off-by: Adam Setch <[email protected]> * add todos for future us Signed-off-by: Adam Setch <[email protected]> --------- Signed-off-by: Adam Setch <[email protected]>
1 parent 43fab04 commit 4955efc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+9808
-7559
lines changed

‎src/renderer/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useLocation,
88
} from 'react-router-dom';
99

10-
import { BaseStyles, ThemeProvider } from '@primer/react';
10+
import { BaseStyles, Box, ThemeProvider } from '@primer/react';
1111

1212
import { Loading } from './components/Loading';
1313
import { Sidebar } from './components/Sidebar';
@@ -47,7 +47,7 @@ export const App = () => {
4747
<BaseStyles>
4848
<AppProvider>
4949
<Router>
50-
<div className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
50+
<Box className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
5151
<Loading />
5252
<Sidebar />
5353
<Routes>
@@ -93,7 +93,7 @@ export const App = () => {
9393
element={<LoginWithOAuthAppRoute />}
9494
/>
9595
</Routes>
96-
</div>
96+
</Box>
9797
</Router>
9898
</AppProvider>
9999
</BaseStyles>

‎src/renderer/components/avatars/AvatarWithFallback.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,15 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
2626
const [isBroken, setIsBroken] = useState(false);
2727

2828
const isNonHuman = isNonHumanUser(userType);
29+
30+
// TODO explore using AnchoredOverlay component (https://primer.style/components/anchored-overlay/react/alpha) to render Avatar Card on hover
2931
return (
3032
<Stack
3133
direction="horizontal"
3234
align="center"
3335
gap="condensed"
3436
data-testid="avatar"
37+
className="truncate"
3538
>
3639
{!src || isBroken ? (
3740
isNonHuman ? (
@@ -48,7 +51,12 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
4851
onError={() => setIsBroken(true)}
4952
/>
5053
)}
51-
{name && <Text>{name}</Text>}
54+
{name && (
55+
// TODO add truncation logic for long names
56+
<Text className="block truncate flex-shrink overflow-ellipsis">
57+
{name}
58+
</Text>
59+
)}
5260
</Stack>
5361
);
5462
};

‎src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap

+20-20
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/components/fields/Checkbox.tsx

+31-26
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import type { FC, ReactNode } from 'react';
2+
3+
import { Stack } from '@primer/react';
4+
25
import { cn } from '../../utils/cn';
36
import { Tooltip } from './Tooltip';
47

@@ -13,32 +16,34 @@ export interface ICheckbox {
1316

1417
export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
1518
return (
16-
<div className="mt-3 mb-2 text-sm">
17-
<div className="flex items-center">
18-
<input
19-
type="checkbox"
20-
id={props.name}
21-
className="size-4 rounded-sm cursor-pointer"
22-
checked={props.checked}
23-
onChange={props.onChange}
24-
disabled={props.disabled}
25-
/>
19+
<Stack
20+
direction="horizontal"
21+
gap="condensed"
22+
align="center"
23+
className="text-sm"
24+
>
25+
<input
26+
type="checkbox"
27+
id={props.name}
28+
className="size-4 rounded-sm cursor-pointer"
29+
checked={props.checked}
30+
onChange={props.onChange}
31+
disabled={props.disabled}
32+
data-testid={`checkbox-${props.name}`}
33+
/>
2634

27-
<div className="flex items-center ml-3">
28-
<label
29-
htmlFor={props.name}
30-
className={cn(
31-
'font-medium text-gitify-font cursor-pointer',
32-
props.disabled && 'line-through',
33-
)}
34-
>
35-
{props.label}
36-
</label>
37-
{props.tooltip && (
38-
<Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
39-
)}
40-
</div>
41-
</div>
42-
</div>
35+
<label
36+
htmlFor={props.name}
37+
className={cn(
38+
'font-medium text-gitify-font cursor-pointer',
39+
props.disabled && 'line-through',
40+
)}
41+
>
42+
{props.label}
43+
</label>
44+
{props.tooltip && (
45+
<Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
46+
)}
47+
</Stack>
4348
);
4449
};

‎src/renderer/components/fields/RadioGroup.tsx

+33-25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import type { ChangeEvent, FC } from 'react';
2+
3+
import { Stack } from '@primer/react';
4+
25
import type { RadioGroupItem } from '../../types';
36
import { FieldLabel } from './FieldLabel';
47

@@ -12,33 +15,38 @@ export interface IRadioGroup {
1215

1316
export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
1417
return (
15-
<div className="flex items-start my-2 text-sm font-medium">
18+
<Stack
19+
direction="horizontal"
20+
gap="condensed"
21+
align="center"
22+
className="text-sm"
23+
>
1624
<FieldLabel name={props.name} label={props.label} />
1725

18-
<div
19-
className="flex items-center space-x-4"
20-
role="group"
21-
aria-labelledby={props.name}
22-
>
23-
{props.options.map((item) => {
24-
const name = `${props.name}_${item.value.toLowerCase()}`;
26+
{props.options.map((item) => {
27+
const name = `radio-${props.name}-${item.value}`.toLowerCase();
2528

26-
return (
27-
<div className="flex items-center gap-2" key={name}>
28-
<input
29-
type="radio"
30-
className="size-4 cursor-pointer"
31-
id={name}
32-
name={props.name}
33-
value={item.value}
34-
onChange={props.onChange}
35-
checked={item.value === props.value}
36-
/>
37-
<FieldLabel name={name} label={item.label} />
38-
</div>
39-
);
40-
})}
41-
</div>
42-
</div>
29+
return (
30+
<Stack
31+
direction="horizontal"
32+
gap="condensed"
33+
align="center"
34+
key={name}
35+
>
36+
<input
37+
type="radio"
38+
className="size-4 cursor-pointer"
39+
id={name}
40+
name={props.name}
41+
value={item.value}
42+
onChange={props.onChange}
43+
checked={item.value === props.value}
44+
data-testid={name}
45+
/>
46+
<FieldLabel name={name} label={item.label} />
47+
</Stack>
48+
);
49+
})}
50+
</Stack>
4351
);
4452
};

‎src/renderer/components/fields/Tooltip.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type ITooltip, Tooltip } from './Tooltip';
33

44
describe('renderer/components/fields/Tooltip.tsx', () => {
55
const props: ITooltip = {
6-
name: 'tooltip',
6+
name: 'test',
77
tooltip: 'This is some tooltip text',
88
};
99

@@ -15,7 +15,7 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
1515
it('should display on mouse enter / leave', () => {
1616
render(<Tooltip {...props} />);
1717

18-
const tooltipElement = screen.getByLabelText('tooltip');
18+
const tooltipElement = screen.getByTestId('tooltip-test');
1919

2020
fireEvent.mouseEnter(tooltipElement);
2121
expect(tooltipElement).toMatchSnapshot();

0 commit comments

Comments
 (0)