Skip to content

Commit 40885c7

Browse files
KamilEmeleevKamilEmeleev
authored
feat(components/Link): migrate to react-aria onPress event
1 parent 96c8ed3 commit 40885c7

File tree

19 files changed

+182
-155
lines changed

19 files changed

+182
-155
lines changed

‎packages/components/src/components/Alert/Alert.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,14 @@ export const Action: Story = {
8383
<Link
8484
as="button"
8585
pseudo
86-
onClick={() => alert('Submit the first action')}
86+
onPress={() => alert('Submit the first action')}
8787
>
8888
First action
8989
</Link>
9090
<Link
9191
as="button"
9292
pseudo
93-
onClick={() => alert('Submit the second action')}
93+
onPress={() => alert('Submit the second action')}
9494
>
9595
Second action
9696
</Link>
@@ -143,7 +143,7 @@ export const CloseButton: Story = {
143143
{text}
144144
</Alert>
145145
) : (
146-
<Button onClick={on}>Re-open</Button>
146+
<Button onPress={on}>Re-open</Button>
147147
);
148148
},
149149
};

‎packages/components/src/components/Alert/Alert.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const Alert = polymorphicForwardRef<'div', AlertBaseProps>(
5959
{
6060
'aria-label': stringFormatter.format('close'),
6161
variant: 'fade-contrast',
62-
onClick: onClose,
62+
onPress: onClose,
6363
className: s.closeIcon,
6464
},
6565
slotProps?.closeIcon

‎packages/components/src/components/Alert/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export type AlertBaseProps = {
3838
/** Override default icon. */
3939
icon?: ReactNode;
4040
/** A callback function called when the user clicks the alert's close button. */
41-
onClose?: IconButtonProps['onClick'];
41+
onClose?: IconButtonProps['onPress'];
4242
slotProps?: {
4343
content?: ComponentPropsWithRef<'div'>;
4444
statusIcon?: ComponentPropsWithRef<'div'>;

‎packages/components/src/components/AnimatedIcon/AnimatedIcon.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const Base: Story = {
2929
const [state, { toggle }] = useBoolean(false);
3030

3131
return (
32-
<IconButton onClick={toggle} variant="theme-contrast">
32+
<IconButton onPress={toggle} variant="theme-contrast">
3333
<AnimatedIcon
3434
icons={[
3535
<IconArrowDownToBracket16 key="arrow-down" />,
@@ -52,7 +52,7 @@ export const Icons: Story = {
5252
const [state, { toggle }] = useBoolean(false);
5353

5454
return (
55-
<IconButton onClick={toggle} variant="theme-contrast">
55+
<IconButton onPress={toggle} variant="theme-contrast">
5656
<AnimatedIcon
5757
icons={[<IconStarO16 key="star" />, <IconStar16 key="star-o" />]}
5858
activeIndex={+state}
@@ -68,7 +68,7 @@ export const Directions: Story = {
6868
const [state, { toggle }] = useBoolean(false);
6969

7070
return (
71-
<IconButton onClick={toggle} variant="theme-contrast">
71+
<IconButton onPress={toggle} variant="theme-contrast">
7272
<AnimatedIcon
7373
icons={[<IconChevronDown16 key="chevron" />]}
7474
directions={[0, 180]}

‎packages/components/src/components/Backdrop/Backdrop.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const Base: Story = {
4141

4242
return (
4343
<div style={containerStyle}>
44-
<Button onClick={on}>Show the backdrop</Button>
44+
<Button onPress={on}>Show the backdrop</Button>
4545
<Backdrop
4646
open={open}
4747
zIndex={5}

‎packages/components/src/components/Backdrop/Backdrop.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Transition } from 'react-transition-group';
1313
import s from './Backdrop.module.css';
1414
import type { BackdropBaseProps } from './index';
1515

16+
// TODO: integrate usePress for handling press interactions
1617
export const Backdrop = polymorphicForwardRef<'div', BackdropBaseProps>(
1718
(props, ref) => {
1819
const {

‎packages/components/src/components/Badge/Badge.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { clsx, polymorphicForwardRef } from '@koobiq/react-core';
55
import s from './Badge.module.css';
66
import type { BadgeBaseProps } from './index';
77

8+
// TODO: integrate usePress for handling press interactions
89
export const Badge = polymorphicForwardRef<'span', BadgeBaseProps>(
910
(
1011
{

‎packages/components/src/components/Button/types.ts

+46-42
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { ReactNode } from 'react';
22

3-
import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
3+
import type { ExtendableProps } from '@koobiq/react-core';
4+
import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
45

56
export const buttonPropVariant = [
67
'contrast-filled',
@@ -13,44 +14,47 @@ export const buttonPropVariant = [
1314

1415
export type ButtonPropVariant = (typeof buttonPropVariant)[number];
1516

16-
export type ButtonBaseProps = {
17-
/** The content of the component. */
18-
children?: ReactNode;
19-
/**
20-
* The variant to use.
21-
* @default contrast-filled
22-
* */
23-
variant?: ButtonPropVariant;
24-
/**
25-
* If `true`, the progress indicator is shown and the button becomes disabled.
26-
* @default false
27-
* */
28-
progress?: boolean;
29-
/**
30-
* If `true`, the component is disabled.
31-
* @default false
32-
* */
33-
disabled?: boolean;
34-
/**
35-
* If `true`, only the icon is shown, and the button has same sides.
36-
* @default false
37-
* */
38-
onlyIcon?: boolean;
39-
/** Additional CSS-classes. */
40-
className?: string;
41-
/**
42-
* If `true`, the button will take up the full width of its container.
43-
* @default false
44-
* */
45-
fullWidth?: boolean;
46-
/** Icon placed before the children. */
47-
startIcon?: ReactNode;
48-
/** Icon placed after the children. */
49-
endIcon?: ReactNode;
50-
/** Unique identifier for testing purposes. */
51-
'data-testid'?: string | number;
52-
/** Handler that is called when a hover interaction starts. */
53-
onHoverStart?: (e: HoverEvent) => void;
54-
/** Handler that is called when a hover interaction ends. */
55-
onHoverEnd?: (e: HoverEvent) => void;
56-
} & ButtonOptions;
17+
export type ButtonBaseProps = ExtendableProps<
18+
{
19+
/** The content of the component. */
20+
children?: ReactNode;
21+
/**
22+
* The variant to use.
23+
* @default contrast-filled
24+
* */
25+
variant?: ButtonPropVariant;
26+
/**
27+
* If `true`, the progress indicator is shown and the button becomes disabled.
28+
* @default false
29+
* */
30+
progress?: boolean;
31+
/**
32+
* If `true`, the component is disabled.
33+
* @default false
34+
* */
35+
disabled?: boolean;
36+
/**
37+
* If `true`, only the icon is shown, and the button has same sides.
38+
* @default false
39+
* */
40+
onlyIcon?: boolean;
41+
/** Additional CSS-classes. */
42+
className?: string;
43+
/**
44+
* If `true`, the button will take up the full width of its container.
45+
* @default false
46+
* */
47+
fullWidth?: boolean;
48+
/** Icon placed before the children. */
49+
startIcon?: ReactNode;
50+
/** Icon placed after the children. */
51+
endIcon?: ReactNode;
52+
/** Unique identifier for testing purposes. */
53+
'data-testid'?: string | number;
54+
/** Handler that is called when a hover interaction starts. */
55+
onHoverStart?: (e: HoverEvent) => void;
56+
/** Handler that is called when a hover interaction ends. */
57+
onHoverEnd?: (e: HoverEvent) => void;
58+
},
59+
UseButtonProps
60+
>;

‎packages/components/src/components/Dialog/components/DialogCloseButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ export type DialogCloseButtonProps = ButtonProps;
1919
export const DialogCloseButton = forwardRef<
2020
DialogCloseButtonRef,
2121
DialogCloseButtonProps
22-
>(({ onClick, ...other }, ref) => {
22+
>(({ onPress, ...other }, ref) => {
2323
const { close } = useDialogProvider();
2424
const stringFormatter = useLocalizedStringFormatter(intlMessages);
2525

2626
return (
2727
<div className={s.closeButton}>
2828
<Button
29-
{...mergeProps({ onClick: close }, { onClick })}
29+
{...mergeProps({ onPress: close }, { onPress })}
3030
aria-label={stringFormatter.format('close')}
3131
startIcon={<IconXmark16 />}
3232
variant="contrast-transparent"

‎packages/components/src/components/IconButton/types.ts

+35-31
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { ReactNode } from 'react';
22

3-
import type { ButtonOptions, HoverEvent } from '@koobiq/react-primitives';
3+
import type { ExtendableProps } from '@koobiq/react-core';
4+
import type { HoverEvent, UseButtonProps } from '@koobiq/react-primitives';
45

56
export const iconButtonPropVariant = [
67
'theme',
@@ -17,33 +18,36 @@ export const iconButtonPropSize = ['l', 'xl'] as const;
1718

1819
export type IconButtonPropSize = (typeof iconButtonPropSize)[number];
1920

20-
export type IconButtonBaseProps = {
21-
/** The content of the component. */
22-
children?: ReactNode;
23-
/**
24-
* The variant to use.
25-
* @default theme
26-
* */
27-
variant?: IconButtonPropVariant;
28-
/**
29-
* If `true`, the component is disabled.
30-
* @default false
31-
* */
32-
disabled?: boolean;
33-
/**
34-
* Size of the component
35-
* @default xl
36-
* */
37-
size?: IconButtonPropSize;
38-
/**
39-
* If `true`, reduce the size of the component canvas.
40-
* @default false
41-
* */
42-
compact?: boolean;
43-
/** Additional CSS-classes. */
44-
className?: string;
45-
/** Handler that is called when a hover interaction starts. */
46-
onHoverStart?: (e: HoverEvent) => void;
47-
/** Handler that is called when a hover interaction ends. */
48-
onHoverEnd?: (e: HoverEvent) => void;
49-
} & ButtonOptions;
21+
export type IconButtonBaseProps = ExtendableProps<
22+
{
23+
/** The content of the component. */
24+
children?: ReactNode;
25+
/**
26+
* The variant to use.
27+
* @default theme
28+
* */
29+
variant?: IconButtonPropVariant;
30+
/**
31+
* If `true`, the component is disabled.
32+
* @default false
33+
* */
34+
disabled?: boolean;
35+
/**
36+
* Size of the component
37+
* @default xl
38+
* */
39+
size?: IconButtonPropSize;
40+
/**
41+
* If `true`, reduce the size of the component canvas.
42+
* @default false
43+
* */
44+
compact?: boolean;
45+
/** Additional CSS-classes. */
46+
className?: string;
47+
/** Handler that is called when a hover interaction starts. */
48+
onHoverStart?: (e: HoverEvent) => void;
49+
/** Handler that is called when a hover interaction ends. */
50+
onHoverEnd?: (e: HoverEvent) => void;
51+
},
52+
UseButtonProps
53+
>;

‎packages/components/src/components/Input/Input.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export const Password: Story = {
269269
{...(hiddenPassword && { type: 'password' })}
270270
endAddon={
271271
<IconButton
272-
onClick={toggle}
272+
onPress={toggle}
273273
variant="fade-contrast"
274274
style={{ marginInlineEnd: '-8px' }}
275275
aria-label={hiddenPassword ? 'show password' : 'hide password'}

0 commit comments

Comments
 (0)