Skip to content

Commit c5a7e63

Browse files
thatblindgeyethatblindgeye
authored
fix(Tabs): updated logic for uncontrolled tabs animation (#11958)
* fix(Tabs): updated logic for uncontrolled tabs animation * Attempted other solution * Updated tests * Backed out delay fix attempt * Added tests --------- Co-authored-by: Eric Olkowski <git.eric@thatblindgeye.dev>
1 parent 559712b commit c5a7e63

File tree

3 files changed

+66
-14
lines changed

3 files changed

+66
-14
lines changed

‎packages/react-core/src/components/Tabs/Tabs.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,10 @@ class Tabs extends Component<TabsProps, TabsState> {
438438
} else if (prevState.enableScrollButtons && !enableScrollButtons) {
439439
this.setState({ showScrollButtons: false });
440440
}
441+
442+
if (prevState.uncontrolledIsExpandedLocal !== this.state.uncontrolledIsExpandedLocal) {
443+
this.setAccentStyles(true);
444+
}
441445
}
442446

443447
static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {

‎packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { render, screen, act } from '@testing-library/react';
2+
import userEvent from '@testing-library/user-event';
23
import { Tabs } from '../Tabs';
34
import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
45
import { Tab } from '../Tab';
@@ -50,6 +51,53 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when com
5051
jest.useRealTimers();
5152
});
5253

54+
test(`Renders with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component initially mounts`, async () => {
55+
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
56+
57+
render(
58+
<Tabs
59+
isVertical
60+
expandable={{ default: 'expandable' }}
61+
toggleText="Jump to section"
62+
defaultIsExpanded={false}
63+
role="region"
64+
>
65+
<Tab title="Test title" eventKey={0}>
66+
Tab Content
67+
</Tab>
68+
</Tabs>
69+
);
70+
71+
jest.useFakeTimers();
72+
await user.click(screen.getByRole('button', { name: 'Jump to section' }));
73+
act(() => {
74+
jest.advanceTimersByTime(100);
75+
});
76+
expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
77+
jest.useRealTimers();
78+
});
79+
80+
test(`Does not render with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component is finished mounting`, async () => {
81+
const user = userEvent.setup();
82+
83+
render(
84+
<Tabs
85+
isVertical
86+
expandable={{ default: 'expandable' }}
87+
toggleText="Jump to section"
88+
defaultIsExpanded={false}
89+
role="region"
90+
>
91+
<Tab title="Test title" eventKey={0}>
92+
Tab Content
93+
</Tab>
94+
</Tabs>
95+
);
96+
97+
await user.click(screen.getByRole('button', { name: 'Jump to section' }));
98+
expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
99+
});
100+
53101
test('should render simple tabs', () => {
54102
const { asFragment } = render(
55103
<Tabs id="simpleTabs">

‎packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
55
<nav
66
aria-label="accessible Tabs example"
77
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
8-
data-ouia-component-id="OUIA-Generated-Tabs-12"
8+
data-ouia-component-id="OUIA-Generated-Tabs-14"
99
data-ouia-component-type="PF6/Tabs"
1010
data-ouia-safe="true"
1111
id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
122122
<DocumentFragment>
123123
<div
124124
class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
125-
data-ouia-component-id="OUIA-Generated-Tabs-11"
125+
data-ouia-component-id="OUIA-Generated-Tabs-13"
126126
data-ouia-component-type="PF6/Tabs"
127127
data-ouia-safe="true"
128128
id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
281281
<DocumentFragment>
282282
<div
283283
class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
284-
data-ouia-component-id="OUIA-Generated-Tabs-18"
284+
data-ouia-component-id="OUIA-Generated-Tabs-20"
285285
data-ouia-component-type="PF6/Tabs"
286286
data-ouia-safe="true"
287287
id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
398398
<DocumentFragment>
399399
<div
400400
class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
401-
data-ouia-component-id="OUIA-Generated-Tabs-9"
401+
data-ouia-component-id="OUIA-Generated-Tabs-11"
402402
data-ouia-component-type="PF6/Tabs"
403403
data-ouia-safe="true"
404404
id="verticalTabs"
@@ -413,7 +413,7 @@ exports[`should render expandable vertical tabs 1`] = `
413413
<button
414414
aria-labelledby="generated-id-text generated-id-button"
415415
class="pf-v6-c-button pf-m-plain"
416-
data-ouia-component-id="OUIA-Generated-Button-plain-3"
416+
data-ouia-component-id="OUIA-Generated-Button-plain-5"
417417
data-ouia-component-type="PF6/Button"
418418
data-ouia-safe="true"
419419
id="generated-id-button"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
605605
<DocumentFragment>
606606
<div
607607
class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
608-
data-ouia-component-id="OUIA-Generated-Tabs-13"
608+
data-ouia-component-id="OUIA-Generated-Tabs-15"
609609
data-ouia-component-type="PF6/Tabs"
610610
data-ouia-safe="true"
611611
id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
722722
<DocumentFragment>
723723
<div
724724
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
725-
data-ouia-component-id="OUIA-Generated-Tabs-4"
725+
data-ouia-component-id="OUIA-Generated-Tabs-6"
726726
data-ouia-component-type="PF6/Tabs"
727727
data-ouia-safe="true"
728728
id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
881881
<DocumentFragment>
882882
<div
883883
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
884-
data-ouia-component-id="OUIA-Generated-Tabs-14"
884+
data-ouia-component-id="OUIA-Generated-Tabs-16"
885885
data-ouia-component-type="PF6/Tabs"
886886
data-ouia-safe="true"
887887
id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
967967
>
968968
<div
969969
class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
970-
data-ouia-component-id="OUIA-Generated-Tabs-15"
970+
data-ouia-component-id="OUIA-Generated-Tabs-17"
971971
data-ouia-component-type="PF6/Tabs"
972972
data-ouia-safe="true"
973973
id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
11101110
<DocumentFragment>
11111111
<div
11121112
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
1113-
data-ouia-component-id="OUIA-Generated-Tabs-16"
1113+
data-ouia-component-id="OUIA-Generated-Tabs-18"
11141114
data-ouia-component-type="PF6/Tabs"
11151115
data-ouia-safe="true"
11161116
id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
12281228
<DocumentFragment>
12291229
<div
12301230
class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
1231-
data-ouia-component-id="OUIA-Generated-Tabs-19"
1231+
data-ouia-component-id="OUIA-Generated-Tabs-21"
12321232
data-ouia-component-type="PF6/Tabs"
12331233
data-ouia-safe="true"
12341234
id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
13451345
<DocumentFragment>
13461346
<div
13471347
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
1348-
data-ouia-component-id="OUIA-Generated-Tabs-17"
1348+
data-ouia-component-id="OUIA-Generated-Tabs-19"
13491349
data-ouia-component-type="PF6/Tabs"
13501350
data-ouia-safe="true"
13511351
id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
14721472
<DocumentFragment>
14731473
<div
14741474
class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
1475-
data-ouia-component-id="OUIA-Generated-Tabs-7"
1475+
data-ouia-component-id="OUIA-Generated-Tabs-9"
14761476
data-ouia-component-type="PF6/Tabs"
14771477
data-ouia-safe="true"
14781478
style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
16301630
<DocumentFragment>
16311631
<div
16321632
class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
1633-
data-ouia-component-id="OUIA-Generated-Tabs-8"
1633+
data-ouia-component-id="OUIA-Generated-Tabs-10"
16341634
data-ouia-component-type="PF6/Tabs"
16351635
data-ouia-safe="true"
16361636
id="verticalTabs"

0 commit comments

Comments
 (0)