Skip to content

Commit ed9cb16

Browse files
AlbertCarrerasAlbertCarreras
authored
Link, ButtonLink: support to experimental onMouseEnter, onMouseLeave to support prefetching logic (#3933)
1 parent 2723345 commit ed9cb16

File tree

8 files changed

+78
-0
lines changed

8 files changed

+78
-0
lines changed

‎packages/gestalt/src/ButtonLink.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,15 @@ type ButtonProps = {
7474
event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>;
7575
dangerouslyDisableOnNavigation: () => void;
7676
}) => void;
77+
/**
78+
* Callback fired when a mouse pointer moves in a ButtonLink component.
79+
*/
80+
_onMouseEnter?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
81+
/**
82+
* Callback fired when a mouse pointer moves out a ButtonLink component.
83+
*/
84+
_onMouseLeave?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
85+
7786
/**
7887
* sm: 32px, md: 40px, lg: 48px
7988
*/
@@ -117,6 +126,9 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
117126
iconEnd,
118127
iconStart,
119128
onClick,
129+
_onMouseEnter,
130+
_onMouseLeave,
131+
120132
tabIndex = 0,
121133
size = 'md',
122134
text,
@@ -176,6 +188,14 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
176188
})
177189
: undefined;
178190

191+
const handleOnMouseEnter: ComponentProps<typeof InternalLink>['onMouseEnter'] = ({ event }) => {
192+
// @ts-expect-error - TS2322 - Type 'MouseEvent<HTMLAnchorElement, MouseEvent> | MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to type 'MouseEvent<HTMLAnchorElement, MouseEvent>'.
193+
_onMouseEnter?.({ event });
194+
};
195+
const handleOnMouseLeave: ComponentProps<typeof InternalLink>['onMouseLeave'] = ({ event }) =>
196+
// @ts-expect-error - TS2322 - Type 'MouseEvent<HTMLAnchorElement, MouseEvent> | MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to type 'MouseEvent<HTMLAnchorElement, MouseEvent>'.
197+
_onMouseLeave?.({ event });
198+
179199
return (
180200
<InternalLink
181201
ref={innerRef}
@@ -187,6 +207,8 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
187207
fullWidth={fullWidth}
188208
href={href}
189209
onClick={handleClick}
210+
onMouseEnter={handleOnMouseEnter}
211+
onMouseLeave={handleOnMouseLeave}
190212
rel={rel}
191213
selected={false}
192214
size={size}

‎packages/gestalt/src/Link.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ type Props = {
7878
* Callback triggered when when the element loses focus.
7979
*/
8080
onBlur?: (arg1: { event: React.FocusEvent<HTMLAnchorElement> }) => void;
81+
/**
82+
* Callback fired when a mouse pointer moves in a Link component.
83+
*/
84+
_onMouseEnter?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
85+
/**
86+
* Callback fired when a mouse pointer moves out a Link component.
87+
*/
88+
_onMouseLeave?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
8189
/**
8290
* Callback fired when Link is clicked (pressed and released) with a mouse or keyboard. See [GlobalEventsHandlerProvider](https://gestalt.pinterest.systems/web/utilities/globaleventshandlerprovider#Link-handlers) to learn more about link navigation.
8391
*/
@@ -137,6 +145,8 @@ const LinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(
137145
href,
138146
id,
139147
onBlur,
148+
_onMouseEnter,
149+
_onMouseLeave,
140150
onClick,
141151
onFocus,
142152
rel = 'none',
@@ -276,6 +286,8 @@ const LinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(
276286
}}
277287
onKeyPress={handleKeyPress}
278288
onMouseDown={handleMouseDown}
289+
onMouseEnter={(event) => _onMouseEnter?.({ event })}
290+
onMouseLeave={(event) => _onMouseLeave?.({ event })}
279291
onMouseUp={handleMouseUp}
280292
onTouchCancel={handleTouchCancel}
281293
onTouchEnd={handleTouchEnd}

‎packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ Array [
9797
onFocus={[Function]}
9898
onKeyPress={[Function]}
9999
onMouseDown={[Function]}
100+
onMouseEnter={[Function]}
101+
onMouseLeave={[Function]}
100102
onMouseUp={[Function]}
101103
onTouchCancel={[Function]}
102104
onTouchEnd={[Function]}
@@ -205,6 +207,8 @@ Array [
205207
onFocus={[Function]}
206208
onKeyPress={[Function]}
207209
onMouseDown={[Function]}
210+
onMouseEnter={[Function]}
211+
onMouseLeave={[Function]}
208212
onMouseUp={[Function]}
209213
onTouchCancel={[Function]}
210214
onTouchEnd={[Function]}
@@ -333,6 +337,8 @@ Array [
333337
onFocus={[Function]}
334338
onKeyPress={[Function]}
335339
onMouseDown={[Function]}
340+
onMouseEnter={[Function]}
341+
onMouseLeave={[Function]}
336342
onMouseUp={[Function]}
337343
onTouchCancel={[Function]}
338344
onTouchEnd={[Function]}
@@ -441,6 +447,8 @@ Array [
441447
onFocus={[Function]}
442448
onKeyPress={[Function]}
443449
onMouseDown={[Function]}
450+
onMouseEnter={[Function]}
451+
onMouseLeave={[Function]}
444452
onMouseUp={[Function]}
445453
onTouchCancel={[Function]}
446454
onTouchEnd={[Function]}

‎packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ exports[`BannerSlim renders complex message 1`] = `
100100
onFocus={[Function]}
101101
onKeyPress={[Function]}
102102
onMouseDown={[Function]}
103+
onMouseEnter={[Function]}
104+
onMouseLeave={[Function]}
103105
onMouseUp={[Function]}
104106
onTouchCancel={[Function]}
105107
onTouchEnd={[Function]}
@@ -400,6 +402,8 @@ exports[`BannerSlim renders simple message with helper link 1`] = `
400402
onFocus={[Function]}
401403
onKeyPress={[Function]}
402404
onMouseDown={[Function]}
405+
onMouseEnter={[Function]}
406+
onMouseLeave={[Function]}
403407
onMouseUp={[Function]}
404408
onTouchCancel={[Function]}
405409
onTouchEnd={[Function]}

‎packages/gestalt/src/__snapshots__/Link.test.tsx.snap

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ exports[`default 1`] = `
99
onFocus={[Function]}
1010
onKeyPress={[Function]}
1111
onMouseDown={[Function]}
12+
onMouseEnter={[Function]}
13+
onMouseLeave={[Function]}
1214
onMouseUp={[Function]}
1315
onTouchCancel={[Function]}
1416
onTouchEnd={[Function]}
@@ -29,6 +31,8 @@ exports[`external link with nofollow 1`] = `
2931
onFocus={[Function]}
3032
onKeyPress={[Function]}
3133
onMouseDown={[Function]}
34+
onMouseEnter={[Function]}
35+
onMouseLeave={[Function]}
3236
onMouseUp={[Function]}
3337
onTouchCancel={[Function]}
3438
onTouchEnd={[Function]}
@@ -68,6 +72,8 @@ exports[`inline and auto underline 1`] = `
6872
onFocus={[Function]}
6973
onKeyPress={[Function]}
7074
onMouseDown={[Function]}
75+
onMouseEnter={[Function]}
76+
onMouseLeave={[Function]}
7177
onMouseUp={[Function]}
7278
onTouchCancel={[Function]}
7379
onTouchEnd={[Function]}
@@ -88,6 +94,8 @@ exports[`inline and overriden underline="hover" 1`] = `
8894
onFocus={[Function]}
8995
onKeyPress={[Function]}
9096
onMouseDown={[Function]}
97+
onMouseEnter={[Function]}
98+
onMouseLeave={[Function]}
9199
onMouseUp={[Function]}
92100
onTouchCancel={[Function]}
93101
onTouchEnd={[Function]}
@@ -108,6 +116,8 @@ exports[`inline and overriden underline="none" 1`] = `
108116
onFocus={[Function]}
109117
onKeyPress={[Function]}
110118
onMouseDown={[Function]}
119+
onMouseEnter={[Function]}
120+
onMouseLeave={[Function]}
111121
onMouseUp={[Function]}
112122
onTouchCancel={[Function]}
113123
onTouchEnd={[Function]}
@@ -128,6 +138,8 @@ exports[`regular 1`] = `
128138
onFocus={[Function]}
129139
onKeyPress={[Function]}
130140
onMouseDown={[Function]}
141+
onMouseEnter={[Function]}
142+
onMouseLeave={[Function]}
131143
onMouseUp={[Function]}
132144
onTouchCancel={[Function]}
133145
onTouchEnd={[Function]}
@@ -148,6 +160,8 @@ exports[`target blank 1`] = `
148160
onFocus={[Function]}
149161
onKeyPress={[Function]}
150162
onMouseDown={[Function]}
163+
onMouseEnter={[Function]}
164+
onMouseLeave={[Function]}
151165
onMouseUp={[Function]}
152166
onTouchCancel={[Function]}
153167
onTouchEnd={[Function]}
@@ -169,6 +183,8 @@ exports[`target null 1`] = `
169183
onFocus={[Function]}
170184
onKeyPress={[Function]}
171185
onMouseDown={[Function]}
186+
onMouseEnter={[Function]}
187+
onMouseLeave={[Function]}
172188
onMouseUp={[Function]}
173189
onTouchCancel={[Function]}
174190
onTouchEnd={[Function]}
@@ -189,6 +205,8 @@ exports[`target self 1`] = `
189205
onFocus={[Function]}
190206
onKeyPress={[Function]}
191207
onMouseDown={[Function]}
208+
onMouseEnter={[Function]}
209+
onMouseLeave={[Function]}
192210
onMouseUp={[Function]}
193211
onTouchCancel={[Function]}
194212
onTouchEnd={[Function]}
@@ -210,6 +228,8 @@ exports[`with custom rounding, and tapStyle 1`] = `
210228
onFocus={[Function]}
211229
onKeyPress={[Function]}
212230
onMouseDown={[Function]}
231+
onMouseEnter={[Function]}
232+
onMouseLeave={[Function]}
213233
onMouseUp={[Function]}
214234
onTouchCancel={[Function]}
215235
onTouchEnd={[Function]}
@@ -230,6 +250,8 @@ exports[`with onClick 1`] = `
230250
onFocus={[Function]}
231251
onKeyPress={[Function]}
232252
onMouseDown={[Function]}
253+
onMouseEnter={[Function]}
254+
onMouseLeave={[Function]}
233255
onMouseUp={[Function]}
234256
onTouchCancel={[Function]}
235257
onTouchEnd={[Function]}

‎packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -633,6 +633,8 @@ exports[`PageHeader renders secondary action 1`] = `
633633
onFocus={[Function]}
634634
onKeyPress={[Function]}
635635
onMouseDown={[Function]}
636+
onMouseEnter={[Function]}
637+
onMouseLeave={[Function]}
636638
onMouseUp={[Function]}
637639
onTouchCancel={[Function]}
638640
onTouchEnd={[Function]}

‎packages/gestalt/src/__snapshots__/Status.test.tsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ exports[`Status renders with rich title 1`] = `
107107
onFocus={[Function]}
108108
onKeyPress={[Function]}
109109
onMouseDown={[Function]}
110+
onMouseEnter={[Function]}
111+
onMouseLeave={[Function]}
110112
onMouseUp={[Function]}
111113
onTouchCancel={[Function]}
112114
onTouchEnd={[Function]}

‎packages/gestalt/src/__snapshots__/Toast.test.tsx.snap

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ exports[`<Toast /> Text + _dangerouslySetPrimaryAction 1`] = `
9393
onFocus={[Function]}
9494
onKeyPress={[Function]}
9595
onMouseDown={[Function]}
96+
onMouseEnter={[Function]}
97+
onMouseLeave={[Function]}
9698
onMouseUp={[Function]}
9799
onTouchCancel={[Function]}
98100
onTouchEnd={[Function]}
@@ -215,6 +217,8 @@ exports[`<Toast /> Text + Image + Button 1`] = `
215217
onFocus={[Function]}
216218
onKeyPress={[Function]}
217219
onMouseDown={[Function]}
220+
onMouseEnter={[Function]}
221+
onMouseLeave={[Function]}
218222
onMouseUp={[Function]}
219223
onTouchCancel={[Function]}
220224
onTouchEnd={[Function]}
@@ -337,6 +341,8 @@ exports[`<Toast /> Text + Image 1`] = `
337341
onFocus={[Function]}
338342
onKeyPress={[Function]}
339343
onMouseDown={[Function]}
344+
onMouseEnter={[Function]}
345+
onMouseLeave={[Function]}
340346
onMouseUp={[Function]}
341347
onTouchCancel={[Function]}
342348
onTouchEnd={[Function]}

0 commit comments

Comments
 (0)