Skip to content

Commit 2a38c91

Browse files
seanforyou23seanforyou23
committed
[issue-3786] allow hover to trigger tooltip on disabled focusable buttons
1 parent 22f6567 commit 2a38c91

File tree

14 files changed

+187
-10
lines changed

14 files changed

+187
-10
lines changed

‎packages/patternfly-4/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ exports[`Alert - danger Action Close Button 1`] = `
147147
className="pf-c-button pf-m-plain"
148148
disabled={false}
149149
onClick={[MockFunction]}
150+
style={null}
150151
type="button"
151152
>
152153
<TimesIcon
@@ -326,6 +327,7 @@ exports[`Alert - danger Action Link 1`] = `
326327
aria-label={null}
327328
className="pf-c-button pf-m-link"
328329
disabled={false}
330+
style={null}
329331
title=""
330332
type="button"
331333
variantLabel="Danger alert:"
@@ -483,6 +485,7 @@ exports[`Alert - danger Action and Title 1`] = `
483485
aria-label={null}
484486
className="pf-c-button pf-m-link"
485487
disabled={false}
488+
style={null}
486489
title="Some title"
487490
type="button"
488491
variantLabel="Danger alert:"
@@ -643,6 +646,7 @@ exports[`Alert - danger Custom aria label 1`] = `
643646
aria-label={null}
644647
className="pf-c-button pf-m-link"
645648
disabled={false}
649+
style={null}
646650
title="Some title"
647651
type="button"
648652
variantLabel="Danger alert:"
@@ -1157,6 +1161,7 @@ exports[`Alert - default Action Close Button 1`] = `
11571161
className="pf-c-button pf-m-plain"
11581162
disabled={false}
11591163
onClick={[MockFunction]}
1164+
style={null}
11601165
type="button"
11611166
>
11621167
<TimesIcon
@@ -1336,6 +1341,7 @@ exports[`Alert - default Action Link 1`] = `
13361341
aria-label={null}
13371342
className="pf-c-button pf-m-link"
13381343
disabled={false}
1344+
style={null}
13391345
title=""
13401346
type="button"
13411347
variantLabel="Default alert:"
@@ -1493,6 +1499,7 @@ exports[`Alert - default Action and Title 1`] = `
14931499
aria-label={null}
14941500
className="pf-c-button pf-m-link"
14951501
disabled={false}
1502+
style={null}
14961503
title="Some title"
14971504
type="button"
14981505
variantLabel="Default alert:"
@@ -1653,6 +1660,7 @@ exports[`Alert - default Custom aria label 1`] = `
16531660
aria-label={null}
16541661
className="pf-c-button pf-m-link"
16551662
disabled={false}
1663+
style={null}
16561664
title="Some title"
16571665
type="button"
16581666
variantLabel="Default alert:"
@@ -2167,6 +2175,7 @@ exports[`Alert - info Action Close Button 1`] = `
21672175
className="pf-c-button pf-m-plain"
21682176
disabled={false}
21692177
onClick={[MockFunction]}
2178+
style={null}
21702179
type="button"
21712180
>
21722181
<TimesIcon
@@ -2346,6 +2355,7 @@ exports[`Alert - info Action Link 1`] = `
23462355
aria-label={null}
23472356
className="pf-c-button pf-m-link"
23482357
disabled={false}
2358+
style={null}
23492359
title=""
23502360
type="button"
23512361
variantLabel="Info alert:"
@@ -2503,6 +2513,7 @@ exports[`Alert - info Action and Title 1`] = `
25032513
aria-label={null}
25042514
className="pf-c-button pf-m-link"
25052515
disabled={false}
2516+
style={null}
25062517
title="Some title"
25072518
type="button"
25082519
variantLabel="Info alert:"
@@ -2663,6 +2674,7 @@ exports[`Alert - info Custom aria label 1`] = `
26632674
aria-label={null}
26642675
className="pf-c-button pf-m-link"
26652676
disabled={false}
2677+
style={null}
26662678
title="Some title"
26672679
type="button"
26682680
variantLabel="Info alert:"
@@ -3177,6 +3189,7 @@ exports[`Alert - success Action Close Button 1`] = `
31773189
className="pf-c-button pf-m-plain"
31783190
disabled={false}
31793191
onClick={[MockFunction]}
3192+
style={null}
31803193
type="button"
31813194
>
31823195
<TimesIcon
@@ -3356,6 +3369,7 @@ exports[`Alert - success Action Link 1`] = `
33563369
aria-label={null}
33573370
className="pf-c-button pf-m-link"
33583371
disabled={false}
3372+
style={null}
33593373
title=""
33603374
type="button"
33613375
variantLabel="Success alert:"
@@ -3513,6 +3527,7 @@ exports[`Alert - success Action and Title 1`] = `
35133527
aria-label={null}
35143528
className="pf-c-button pf-m-link"
35153529
disabled={false}
3530+
style={null}
35163531
title="Some title"
35173532
type="button"
35183533
variantLabel="Success alert:"
@@ -3673,6 +3688,7 @@ exports[`Alert - success Custom aria label 1`] = `
36733688
aria-label={null}
36743689
className="pf-c-button pf-m-link"
36753690
disabled={false}
3691+
style={null}
36763692
title="Some title"
36773693
type="button"
36783694
variantLabel="Success alert:"
@@ -4187,6 +4203,7 @@ exports[`Alert - warning Action Close Button 1`] = `
41874203
className="pf-c-button pf-m-plain"
41884204
disabled={false}
41894205
onClick={[MockFunction]}
4206+
style={null}
41904207
type="button"
41914208
>
41924209
<TimesIcon
@@ -4366,6 +4383,7 @@ exports[`Alert - warning Action Link 1`] = `
43664383
aria-label={null}
43674384
className="pf-c-button pf-m-link"
43684385
disabled={false}
4386+
style={null}
43694387
title=""
43704388
type="button"
43714389
variantLabel="Warning alert:"
@@ -4523,6 +4541,7 @@ exports[`Alert - warning Action and Title 1`] = `
45234541
aria-label={null}
45244542
className="pf-c-button pf-m-link"
45254543
disabled={false}
4544+
style={null}
45264545
title="Some title"
45274546
type="button"
45284547
variantLabel="Warning alert:"
@@ -4683,6 +4702,7 @@ exports[`Alert - warning Custom aria label 1`] = `
46834702
aria-label={null}
46844703
className="pf-c-button pf-m-link"
46854704
disabled={false}
4705+
style={null}
46864706
title="Some title"
46874707
type="button"
46884708
variantLabel="Warning alert:"

‎packages/patternfly-4/react-core/src/components/AlertGroup/__tests__/__snapshots__/AlertGroup.test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -585,6 +585,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
585585
className="pf-c-button pf-m-plain"
586586
disabled={false}
587587
onClick={[MockFunction]}
588+
style={null}
588589
type="button"
589590
>
590591
<TimesIcon

‎packages/patternfly-4/react-core/src/components/Button/Button.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
9595
{...(isDisabledFocusable ? preventDefaultActions : null)}
9696
aria-disabled={isDisabled || isDisabledFocusable}
9797
aria-label={ariaLabel}
98+
style={isDisabledFocusable ? { pointerEvents: 'auto' } : null}
9899
className={css(
99100
styles.button,
100101
getModifier(styles.modifiers, variant),

‎packages/patternfly-4/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ exports[`aria-disabled is set to true and tabIndex to -1 if component is not a b
3131
aria-label={null}
3232
className="pf-c-button pf-m-primary pf-m-disabled"
3333
disabled={null}
34+
style={null}
3435
tabIndex={-1}
3536
type={null}
3637
>
@@ -75,6 +76,7 @@ exports[`control button 1`] = `
7576
aria-label="control"
7677
className="pf-c-button pf-m-control"
7778
disabled={false}
79+
style={null}
7880
type="button"
7981
>
8082
control
@@ -119,6 +121,7 @@ exports[`danger button 1`] = `
119121
aria-label="danger"
120122
className="pf-c-button pf-m-danger"
121123
disabled={false}
124+
style={null}
122125
type="button"
123126
>
124127
danger
@@ -157,6 +160,7 @@ exports[`isBlock 1`] = `
157160
aria-label={null}
158161
className="pf-c-button pf-m-primary pf-m-block"
159162
disabled={false}
163+
style={null}
160164
type="button"
161165
>
162166
Block Button
@@ -194,6 +198,7 @@ exports[`isDisabled 1`] = `
194198
aria-label={null}
195199
className="pf-c-button pf-m-primary pf-m-disabled"
196200
disabled={true}
201+
style={null}
197202
tabIndex={null}
198203
type="button"
199204
>
@@ -234,6 +239,11 @@ exports[`isDisabledFocusable button 1`] = `
234239
disabled={null}
235240
onClick={[Function]}
236241
onKeyPress={[Function]}
242+
style={
243+
Object {
244+
"pointerEvents": "auto",
245+
}
246+
}
237247
tabIndex={null}
238248
type="button"
239249
>
@@ -277,6 +287,11 @@ exports[`isDisabledFocusable link button 1`] = `
277287
disabled={null}
278288
onClick={[Function]}
279289
onKeyPress={[Function]}
290+
style={
291+
Object {
292+
"pointerEvents": "auto",
293+
}
294+
}
280295
tabIndex={null}
281296
type={null}
282297
>
@@ -315,6 +330,7 @@ exports[`isFocus 1`] = `
315330
aria-label={null}
316331
className="pf-c-button pf-m-primary pf-m-focus"
317332
disabled={false}
333+
style={null}
318334
type="button"
319335
>
320336
Focused Button
@@ -352,6 +368,7 @@ exports[`isHover 1`] = `
352368
aria-label={null}
353369
className="pf-c-button pf-m-primary pf-m-hover"
354370
disabled={false}
371+
style={null}
355372
type="button"
356373
>
357374
Hovered Button
@@ -392,6 +409,7 @@ exports[`isInline 1`] = `
392409
aria-label={null}
393410
className="pf-c-button pf-m-link pf-m-inline"
394411
disabled={false}
412+
style={null}
395413
type="button"
396414
>
397415
Hovered Button
@@ -435,6 +453,7 @@ exports[`link button 1`] = `
435453
aria-label="link"
436454
className="pf-c-button pf-m-link"
437455
disabled={false}
456+
style={null}
438457
type="button"
439458
>
440459
link
@@ -495,6 +514,7 @@ exports[`link with icon 1`] = `
495514
aria-label={null}
496515
className="pf-c-button pf-m-link"
497516
disabled={false}
517+
style={null}
498518
type="button"
499519
>
500520
<span
@@ -568,6 +588,7 @@ exports[`plain button 1`] = `
568588
aria-label="plain"
569589
className="pf-c-button pf-m-plain"
570590
disabled={false}
591+
style={null}
571592
type="button"
572593
>
573594
plain
@@ -612,6 +633,7 @@ exports[`primary button 1`] = `
612633
aria-label="primary"
613634
className="pf-c-button pf-m-primary"
614635
disabled={false}
636+
style={null}
615637
type="button"
616638
>
617639
primary
@@ -656,6 +678,7 @@ exports[`secondary button 1`] = `
656678
aria-label="secondary"
657679
className="pf-c-button pf-m-secondary"
658680
disabled={false}
681+
style={null}
659682
type="button"
660683
>
661684
secondary
@@ -700,6 +723,7 @@ exports[`tertiary button 1`] = `
700723
aria-label="tertiary"
701724
className="pf-c-button pf-m-tertiary"
702725
disabled={false}
726+
style={null}
703727
type="button"
704728
>
705729
tertiary

‎packages/patternfly-4/react-core/src/components/Button/examples/Button.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ ButtonVariants = () => (
3434
<TimesIcon />
3535
</Button>
3636
<Button variant="link" isInline>
37-
Inline Link Button
37+
Inline link button
3838
</Button>
3939
</React.Fragment>
4040
);
@@ -48,13 +48,13 @@ import { TimesIcon, PlusCircleIcon } from '@patternfly/react-icons';
4848
LinkButton = () => (
4949
<React.Fragment>
5050
<Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="primary">
51-
Link to Core Docs
51+
Link to core docs
5252
</Button>{' '}
5353
<Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="secondary">
54-
Secondary Link to Core Docs
54+
Secondary link to core docs
5555
</Button>{' '}
5656
<Button component="a" isDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
57-
Tertiary Link to Core Docs
57+
Tertiary link to core docs
5858
</Button>
5959
<Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link">
6060
Jump to modifiers in contribution guidelines
@@ -63,29 +63,29 @@ LinkButton = () => (
6363
);
6464
```
6565

66-
```js title=Disabled--focusable-button-with-tooltip
66+
```js title=Disabled-focusable-button-with-tooltip
6767
import React from 'react';
6868
import { Button } from '@patternfly/react-core';
6969
import { TimesIcon, PlusCircleIcon, Tooltip } from '@patternfly/react-icons';
7070

7171
DisabledFocusableBtnWithTooltip = () => (
7272
<Tooltip content="Disabled and focusable button with tooltip">
73-
<Button isDisabledFocusable variant="tertiary" onKeyPress={() => {alert('KeyPress')}} onClick={() => {alert('Click')}}>
74-
Tertiary Link to Core Docs
73+
<Button isDisabledFocusable variant="secondary" onKeyPress={() => {alert('KeyPress')}} onClick={() => {alert('Click')}}>
74+
Secondary button to core docs
7575
</Button>
7676
</Tooltip>
7777
);
7878
```
7979

80-
```js title=Disabled-focusable-link-button-with-tooltip
80+
```js title=Disabled-focusable-link-as-button-with-tooltip
8181
import React from 'react';
8282
import { Button } from '@patternfly/react-core';
8383
import { TimesIcon, PlusCircleIcon, Tooltip } from '@patternfly/react-icons';
8484

8585
DisabledFocusableLinkBtnWithTooltip = () => (
8686
<Tooltip content="Disabled and focusable link button with tooltip">
87-
<Button component="a" isDisabledFocusable href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
88-
Tertiary Link to Core Docs
87+
<Button variant="link" component="a" isDisabledFocusable href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
88+
Tertiary link as button to core docs
8989
</Button>
9090
</Tooltip>
9191
);

0 commit comments

Comments
 (0)