Skip to content

Commit bb423f1

Browse files
andreasonny83andreasonny83
committed
refactor: add PropsWithChildren pros
Add React.PropsWithChildren for compatibility with React v18
1 parent db6b070 commit bb423f1

File tree

329 files changed

+926
-686
lines changed

Some content is hidden

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

329 files changed

+926
-686
lines changed

‎packages/paste-core/components/alert-dialog/stories/index.stories.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default {
2424
],
2525
};
2626

27-
export const AlertDialogWithTwoActions: React.FC = () => {
27+
export const AlertDialogWithTwoActions: React.FC<React.PropsWithChildren<unknown>> = () => {
2828
return (
2929
<AlertDialog
3030
heading="Submit application"
@@ -50,7 +50,7 @@ AlertDialogWithTwoActionsStory.story = {
5050
},
5151
};
5252

53-
export const DestructiveAlertDialog: React.FC = () => {
53+
export const DestructiveAlertDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
5454
return (
5555
<AlertDialog
5656
heading="Delete data"
@@ -77,7 +77,7 @@ DestructiveAlertDialogStory.story = {
7777
},
7878
};
7979

80-
export const OpenAlertDialogFromButton: React.FC = () => {
80+
export const OpenAlertDialogFromButton: React.FC<React.PropsWithChildren<unknown>> = () => {
8181
const [isOpen, setIsOpen] = React.useState(false);
8282
const handleOpen = (): void => setIsOpen(true);
8383
const handleClose = (): void => setIsOpen(false);
@@ -112,7 +112,7 @@ OpenAlertDialogFromButtonStory.story = {
112112
},
113113
};
114114

115-
export const OpenAlertDialogFromModal: React.FC = () => {
115+
export const OpenAlertDialogFromModal: React.FC<React.PropsWithChildren<unknown>> = () => {
116116
const [isModalOpen, setIsModalOpen] = React.useState(true);
117117
const [isAlertDialogOpen, setIsAlertDialogOpen] = React.useState(true);
118118
const handleModalOpen = (): void => setIsModalOpen(true);
@@ -216,7 +216,7 @@ DestructiveAlertDialogVRT.story = {
216216
name: 'Destructive Alert Dialog for VRT',
217217
};
218218

219-
export const CustomizedAlertDialog: React.FC = () => {
219+
export const CustomizedAlertDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
220220
const theme = useTheme();
221221
return (
222222
<CustomizationProvider
@@ -245,7 +245,7 @@ export const CustomizedAlertDialog: React.FC = () => {
245245
);
246246
};
247247

248-
export const CustomizedDestructiveAlertDialog: React.FC = () => {
248+
export const CustomizedDestructiveAlertDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
249249
const currentTheme = useTheme();
250250
return (
251251
<CustomizationProvider

‎packages/paste-core/components/avatar/src/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@ import type {AvatarProps, AvatarContentProps} from './types';
99

1010
const DEFAULT_SIZE = 'sizeIcon70';
1111

12-
const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => {
12+
const AvatarContents: React.FC<React.PropsWithChildren<AvatarContentProps>> = ({
13+
name,
14+
size = DEFAULT_SIZE,
15+
src,
16+
icon: Icon,
17+
}) => {
1318
const computedTokenNames = getComputedTokenNames(size);
1419
if (src != null) {
1520
return <Box as="img" alt={name} maxWidth="100%" src={src} size={size} title={name} />;

‎packages/paste-core/components/avatar/src/types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ export type AvatarProps = React.HTMLAttributes<'div'> &
66
Pick<BoxProps, 'element'> & {
77
name: string;
88
size?: IconSize;
9-
icon?: React.FC<GenericIconProps>;
9+
icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
1010
src?: string;
1111
};
1212

1313
export type AvatarContentProps = {
1414
name: string;
1515
size?: IconSize;
16-
icon?: React.FC<GenericIconProps>;
16+
icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
1717
src?: string;
1818
};

‎packages/paste-core/components/badge/stories/customization.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const getStyles = (element = 'BADGE'): {[key: string]: PasteCustomCSS} =>
3636
};
3737
};
3838

39-
const CustomizationWrapper: React.FC<{variant: BadgeVariants; isTestEnvironment: boolean}> = ({
39+
const CustomizationWrapper: React.FC<React.PropsWithChildren<{variant: BadgeVariants; isTestEnvironment: boolean}>> = ({
4040
variant,
4141
isTestEnvironment,
4242
}): React.ReactElement => {

‎packages/paste-core/components/badge/stories/index.stories.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Wrapper = styled.div(
2626
})
2727
);
2828

29-
export const AllBadges: React.FC = () => (
29+
export const AllBadges: React.FC<React.PropsWithChildren<unknown>> = () => (
3030
<Wrapper>
3131
<Badge as="span" variant="neutral">
3232
Neutral
@@ -64,7 +64,7 @@ export const AllBadges: React.FC = () => (
6464
</Wrapper>
6565
);
6666

67-
export const NeutralBadge: React.FC = () => (
67+
export const NeutralBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
6868
<>
6969
<Heading as="h2" variant="heading40">
7070
Span
@@ -121,7 +121,7 @@ export const NeutralBadge: React.FC = () => (
121121
</>
122122
);
123123

124-
export const WarningBadge: React.FC = () => (
124+
export const WarningBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
125125
<>
126126
<Heading as="h2" variant="heading40">
127127
Span
@@ -174,7 +174,7 @@ export const WarningBadge: React.FC = () => (
174174
</>
175175
);
176176

177-
export const ErrorBadge: React.FC = () => (
177+
export const ErrorBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
178178
<>
179179
<Heading as="h2" variant="heading40">
180180
Span
@@ -227,7 +227,7 @@ export const ErrorBadge: React.FC = () => (
227227
</>
228228
);
229229

230-
export const SuccessBadge: React.FC = () => (
230+
export const SuccessBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
231231
<>
232232
<Heading as="h2" variant="heading40">
233233
Span
@@ -284,7 +284,7 @@ export const SuccessBadge: React.FC = () => (
284284
</>
285285
);
286286

287-
export const NewBadge: React.FC = () => (
287+
export const NewBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
288288
<>
289289
<Heading as="h2" variant="heading40">
290290
Span
@@ -337,7 +337,7 @@ export const NewBadge: React.FC = () => (
337337
</>
338338
);
339339

340-
export const Decorative10Badge: React.FC = () => (
340+
export const Decorative10Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
341341
<>
342342
<Heading as="h2" variant="heading40">
343343
Span
@@ -390,7 +390,7 @@ export const Decorative10Badge: React.FC = () => (
390390
</>
391391
);
392392

393-
export const Decorative20Badge: React.FC = () => (
393+
export const Decorative20Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
394394
<>
395395
<Heading as="h2" variant="heading40">
396396
Span
@@ -443,7 +443,7 @@ export const Decorative20Badge: React.FC = () => (
443443
</>
444444
);
445445

446-
export const Decorative30Badge: React.FC = () => (
446+
export const Decorative30Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
447447
<>
448448
<Heading as="h2" variant="heading40">
449449
Span
@@ -496,7 +496,7 @@ export const Decorative30Badge: React.FC = () => (
496496
</>
497497
);
498498

499-
export const Decorative40Badge: React.FC = () => (
499+
export const Decorative40Badge: React.FC<React.PropsWithChildren<unknown>> = () => (
500500
<>
501501
<Heading as="h2" variant="heading40">
502502
Span
@@ -549,7 +549,7 @@ export const Decorative40Badge: React.FC = () => (
549549
</>
550550
);
551551

552-
export const NeutralCounterBadge: React.FC = () => (
552+
export const NeutralCounterBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
553553
<>
554554
<Heading as="h2" variant="heading40">
555555
Span
@@ -596,7 +596,7 @@ export const NeutralCounterBadge: React.FC = () => (
596596
</>
597597
);
598598

599-
export const ErrorCounterBadge: React.FC = () => (
599+
export const ErrorCounterBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
600600
<>
601601
<Heading as="h2" variant="heading40">
602602
Span
@@ -643,7 +643,7 @@ export const ErrorCounterBadge: React.FC = () => (
643643
</>
644644
);
645645

646-
export const DefaultBadge: React.FC = () => (
646+
export const DefaultBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
647647
<>
648648
<Heading as="h2" variant="heading40">
649649
Span
@@ -690,7 +690,7 @@ export const DefaultBadge: React.FC = () => (
690690
</>
691691
);
692692

693-
export const InfoBadge: React.FC = () => (
693+
export const InfoBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
694694
<>
695695
<Heading as="h2" variant="heading40">
696696
Span
@@ -737,7 +737,7 @@ export const InfoBadge: React.FC = () => (
737737
</>
738738
);
739739

740-
export const LongTextBadge: React.FC = () => (
740+
export const LongTextBadge: React.FC<React.PropsWithChildren<unknown>> = () => (
741741
<Wrapper>
742742
<Badge as="a" href="#" variant="neutral">
743743
<InformationIcon decorative />

‎packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {CustomizationProvider} from '@twilio-paste/customization';
55
import {Breadcrumb, BreadcrumbItem} from '../src';
66

77
describe('Breadcrumb', () => {
8-
const BreadcrumbExample: React.FC = () => {
8+
const BreadcrumbExample: React.FC<React.PropsWithChildren<unknown>> = () => {
99
return (
1010
<Breadcrumb>
1111
<BreadcrumbItem href="#">foo</BreadcrumbItem>

‎packages/paste-core/components/breadcrumb/src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type {AnchorProps} from '@twilio-paste/anchor';
77
import {Text, safelySpreadTextProps} from '@twilio-paste/text';
88
import {useUIDSeed} from '@twilio-paste/uid-library';
99

10-
const BreadcrumbSeparator: React.FC<{element: BoxElementProps['element']}> = ({element}) => (
10+
const BreadcrumbSeparator: React.FC<React.PropsWithChildren<{element: BoxElementProps['element']}>> = ({element}) => (
1111
<Text
1212
as="span"
1313
color="colorTextWeak"

‎packages/paste-core/components/button/src/index.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,12 @@ const handlePropValidation = ({
122122

123123
const variantsWithoutBoundingBox = new Set(['link', 'destructive_link', 'inverse_link', 'reset']);
124124

125-
const ButtonContents: React.FC<ButtonContentsProps> = ({buttonState, children, showLoading, variant}) => {
125+
const ButtonContents: React.FC<React.PropsWithChildren<ButtonContentsProps>> = ({
126+
buttonState,
127+
children,
128+
showLoading,
129+
variant,
130+
}) => {
126131
const buttonVariantHasBoundingBox = variant && variantsWithoutBoundingBox.has(variant);
127132

128133
return (
@@ -158,7 +163,9 @@ const ButtonContents: React.FC<ButtonContentsProps> = ({buttonState, children, s
158163
);
159164
};
160165

161-
const getButtonComponent = (variant: ButtonVariants): React.FunctionComponent<DirectButtonProps> => {
166+
const getButtonComponent = (
167+
variant: ButtonVariants
168+
): React.FunctionComponent<React.PropsWithChildren<DirectButtonProps>> => {
162169
switch (variant) {
163170
case 'primary_icon':
164171
return PrimaryIconButton;

‎packages/paste-core/components/button/stories/customization.stories.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ const customButtonStyles = {
3131
},
3232
} as PasteCustomCSS;
3333

34-
const ShowCustomization: React.FC<{
35-
button: React.ReactNode;
36-
customButton: React.ReactNode;
34+
const ShowCustomization: React.FC<
35+
React.PropsWithChildren<{
36+
button: React.ReactNode;
37+
customButton: React.ReactNode;
3738
isTestEnvironment: boolean;
38-
}> = ({button, customButton, isTestEnvironment}) => {
39+
}>> = ({button, customButton, isTestEnvironment}) => {
3940
const currentTheme = useTheme();
4041
return (
4142
<Stack orientation="vertical" spacing="space90">
@@ -71,10 +72,9 @@ const ShowCustomization: React.FC<{
7172
);
7273
};
7374

74-
export const AnyButton: React.FC<{element?: BoxElementProps['element']; variant: ButtonVariants}> = ({
75-
element = 'BUTTON',
76-
variant,
77-
}) => (
75+
export const AnyButton: React.FC<
76+
React.PropsWithChildren<{element?: BoxElementProps['element']; variant: ButtonVariants}>
77+
> = ({element = 'BUTTON', variant}) => (
7878
<Button variant={variant} element={element} data-testid="button_for_customization">
7979
Click me
8080
</Button>

‎packages/paste-core/components/button/stories/index.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ButtonSizeOptions = [
2424
'circle_small',
2525
];
2626

27-
const AllSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => {
27+
const AllSizeOptions: React.FC<React.PropsWithChildren<{variant: ButtonVariants}>> = ({variant}) => {
2828
const allButtons: React.ReactNode[] = [];
2929

3030
ButtonSizeOptions.forEach((size) => {
@@ -196,7 +196,7 @@ export const ButtonAsAnchor = (): React.ReactNode => {
196196
);
197197
};
198198

199-
const IconSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => {
199+
const IconSizeOptions: React.FC<React.PropsWithChildren<{variant: ButtonVariants}>> = ({variant}) => {
200200
return (
201201
<Stack orientation="vertical" spacing="space60">
202202
<Box>
@@ -266,7 +266,7 @@ interface ToggleButtonProps {
266266
};
267267
}
268268

269-
const ToggleButton: React.FC<ToggleButtonProps> = ({
269+
const ToggleButton: React.FC<React.PropsWithChildren<ToggleButtonProps>> = ({
270270
defaultPressed = false,
271271
variant = 'secondary',
272272
children,

0 commit comments

Comments
 (0)