Skip to content

Commit f986c4f

Browse files
gitdallasgitdallas
authored
fix(PageSidebar): sidebar flash on non-mobile (#12040)
* fix(PageSidebar): sidebar flash on non-mobile Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> * update snaps Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> * update cypress test Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> * fix cypress Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> --------- Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
1 parent 3ac6454 commit f986c4f

File tree

6 files changed

+33
-20
lines changed

6 files changed

+33
-20
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,7 @@ class Page extends Component<PageProps, PageState> {
266266
isManagedSidebar,
267267
onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop,
268268
isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen,
269+
isMobile: mobileView,
269270
width,
270271
height,
271272
getBreakpoint,

‎packages/react-core/src/components/Page/PageContext.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export interface PageContextProps {
66
isManagedSidebar: boolean;
77
onSidebarToggle: () => void;
88
isSidebarOpen: boolean;
9+
isMobile: boolean;
910
width: number;
1011
height: number;
1112
getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -16,6 +17,7 @@ export const pageContextDefaults: PageContextProps = {
1617
isManagedSidebar: false,
1718
isSidebarOpen: false,
1819
onSidebarToggle: () => null,
20+
isMobile: false,
1921
width: null,
2022
height: null,
2123
getBreakpoint,

‎packages/react-core/src/components/Page/PageSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
3535
...props
3636
}: PageSidebarProps) => (
3737
<PageContextConsumer>
38-
{({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => {
38+
{({ isManagedSidebar, isSidebarOpen: managedIsNavOpen, isMobile }) => {
3939
const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen;
4040

4141
return (
4242
<div
4343
id={id}
4444
className={css(
4545
styles.pageSidebar,
46-
sidebarOpen && styles.modifiers.expanded,
46+
sidebarOpen && isMobile && styles.modifiers.expanded,
4747
!sidebarOpen && styles.modifiers.collapsed,
4848
className
4949
)}

‎packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
44
<DocumentFragment>
55
<div
66
aria-hidden="false"
7-
class="pf-v6-c-page__sidebar pf-m-expanded ''"
7+
class="pf-v6-c-page__sidebar ''"
88
id="page-sidebar"
99
>
1010
<div>

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`Page Check dark page against snapshot 1`] = `
1212
/>
1313
<div
1414
aria-hidden="false"
15-
class="pf-v6-c-page__sidebar pf-m-expanded"
15+
class="pf-v6-c-page__sidebar"
1616
id="page-sidebar"
1717
>
1818
<div
@@ -55,7 +55,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
5555
/>
5656
<div
5757
aria-hidden="false"
58-
class="pf-v6-c-page__sidebar pf-m-expanded"
58+
class="pf-v6-c-page__sidebar"
5959
id="page-sidebar"
6060
/>
6161
<div
@@ -92,7 +92,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
9292
/>
9393
<div
9494
aria-hidden="false"
95-
class="pf-v6-c-page__sidebar pf-m-expanded"
95+
class="pf-v6-c-page__sidebar"
9696
id="page-sidebar"
9797
/>
9898
<div
@@ -237,7 +237,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
237237
/>
238238
<div
239239
aria-hidden="false"
240-
class="pf-v6-c-page__sidebar pf-m-expanded"
240+
class="pf-v6-c-page__sidebar"
241241
id="page-sidebar"
242242
/>
243243
<div
@@ -386,7 +386,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
386386
/>
387387
<div
388388
aria-hidden="false"
389-
class="pf-v6-c-page__sidebar pf-m-expanded"
389+
class="pf-v6-c-page__sidebar"
390390
id="page-sidebar"
391391
/>
392392
<div
@@ -629,7 +629,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
629629
/>
630630
<div
631631
aria-hidden="false"
632-
class="pf-v6-c-page__sidebar pf-m-expanded"
632+
class="pf-v6-c-page__sidebar"
633633
id="page-sidebar"
634634
/>
635635
<div
@@ -913,7 +913,7 @@ exports[`Page Check page to verify skip to content points to main content region
913913
/>
914914
<div
915915
aria-hidden="false"
916-
class="pf-v6-c-page__sidebar pf-m-expanded"
916+
class="pf-v6-c-page__sidebar"
917917
id="page-sidebar"
918918
/>
919919
<div
@@ -1063,7 +1063,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
10631063
/>
10641064
<div
10651065
aria-hidden="false"
1066-
class="pf-v6-c-page__sidebar pf-m-expanded"
1066+
class="pf-v6-c-page__sidebar"
10671067
id="page-sidebar"
10681068
>
10691069
<div
@@ -1106,7 +1106,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
11061106
/>
11071107
<div
11081108
aria-hidden="false"
1109-
class="pf-v6-c-page__sidebar pf-m-expanded"
1109+
class="pf-v6-c-page__sidebar"
11101110
id="page-sidebar"
11111111
/>
11121112
<div
@@ -1251,7 +1251,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
12511251
/>
12521252
<div
12531253
aria-hidden="false"
1254-
class="pf-v6-c-page__sidebar pf-m-expanded"
1254+
class="pf-v6-c-page__sidebar"
12551255
id="page-sidebar"
12561256
/>
12571257
<div
@@ -1400,7 +1400,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
14001400
/>
14011401
<div
14021402
aria-hidden="false"
1403-
class="pf-v6-c-page__sidebar pf-m-expanded"
1403+
class="pf-v6-c-page__sidebar"
14041404
id="page-sidebar"
14051405
/>
14061406
<div
@@ -1545,7 +1545,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
15451545
/>
15461546
<div
15471547
aria-hidden="false"
1548-
class="pf-v6-c-page__sidebar pf-m-expanded"
1548+
class="pf-v6-c-page__sidebar"
15491549
id="page-sidebar"
15501550
/>
15511551
<div

‎packages/react-integration/cypress/integration/page.spec.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,21 @@ describe('Page Demo Test', () => {
66
it('Test Page elements', () => {
77
cy.get('#page-demo').within(() => {
88
cy.get('#nav-toggle').then((hamburgerIcon: JQuery<HTMLDivElement>) => {
9-
cy.get('.pf-v6-c-page__sidebar.pf-m-expanded').should('exist');
10-
cy.get('.pf-v6-c-page__sidebar.pf-m-collapsed').should('not.exist');
11-
cy.wrap(hamburgerIcon).click();
12-
cy.get('.pf-v6-c-page__sidebar.pf-m-collapsed').should('exist');
13-
cy.get('.pf-v6-c-page__sidebar.pf-m-expanded').should('not.exist');
9+
cy.get('#page-demo-sidebar').then(($sidebar) => {
10+
const initiallyCollapsed = $sidebar.hasClass('pf-m-collapsed');
11+
cy.wrap(hamburgerIcon).click();
12+
if (initiallyCollapsed) {
13+
cy.get('#page-demo-sidebar').should('not.have.class', 'pf-m-collapsed');
14+
} else {
15+
cy.get('#page-demo-sidebar').should('have.class', 'pf-m-collapsed');
16+
}
17+
cy.wrap(hamburgerIcon).click();
18+
if (initiallyCollapsed) {
19+
cy.get('#page-demo-sidebar').should('have.class', 'pf-m-collapsed');
20+
} else {
21+
cy.get('#page-demo-sidebar').should('not.have.class', 'pf-m-collapsed');
22+
}
23+
});
1424
});
1525
cy.get('#page-demo-masthead').should('not.have.attr', 'role');
1626
cy.get('#page-demo-page-id').should('not.have.attr', 'role');

0 commit comments

Comments
 (0)