mirror of https://github.com/grafana/grafana
AppChrome/MegaMenu: Fixes issue with default state being initialised to undocked (#103507)
* AppChrome/MegaMenu: Fixes default mega menu docked state * AppChrome/MegaMenu: Fixes default mega menu docked state * Update thresholds * Update * pa11y fix * remove unnessary css * fixed pa11y config * try fix pa11y config + unit tests * just increase thresholds again... --------- Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>pull/103544/head
Torkel Ödegaard
1 month ago
committed by
GitHub
parent
63af403897
commit
b9bc069fb9
@ -1,43 +0,0 @@ |
||||
import { e2e } from '../utils'; |
||||
import { fromBaseUrl } from '../utils/support/url'; |
||||
|
||||
describe('Docked Navigation', () => { |
||||
beforeEach(() => { |
||||
cy.viewport(1280, 800); |
||||
e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); |
||||
|
||||
cy.visit(fromBaseUrl('/')); |
||||
}); |
||||
|
||||
it('should remain docked when reloading the page', () => { |
||||
// Expand, then dock the mega menu
|
||||
cy.get('[aria-label="Open menu"]').click(); |
||||
cy.get('[aria-label="Dock menu"]').click(); |
||||
|
||||
e2e.components.NavMenu.Menu().should('be.visible'); |
||||
|
||||
cy.reload(); |
||||
e2e.components.NavMenu.Menu().should('be.visible'); |
||||
}); |
||||
|
||||
it('should remain docked when navigating to another page', () => { |
||||
// Expand, then dock the mega menu
|
||||
cy.get('[aria-label="Open menu"]').click(); |
||||
cy.get('[aria-label="Dock menu"]').click(); |
||||
|
||||
cy.contains('a', 'Administration').click(); |
||||
e2e.components.NavMenu.Menu().should('be.visible'); |
||||
|
||||
cy.contains('a', 'Users').click(); |
||||
e2e.components.NavMenu.Menu().should('be.visible'); |
||||
}); |
||||
|
||||
it('should become docked at larger viewport sizes', () => { |
||||
e2e.components.NavMenu.Menu().should('not.exist'); |
||||
|
||||
cy.viewport(1920, 1080); |
||||
cy.reload(); |
||||
|
||||
e2e.components.NavMenu.Menu().should('be.visible'); |
||||
}); |
||||
}); |
||||
@ -1,17 +0,0 @@ |
||||
import { useEffect } from 'react'; |
||||
|
||||
export function useMediaQueryChange({ |
||||
breakpoint, |
||||
onChange, |
||||
}: { |
||||
breakpoint: number; |
||||
onChange: (e: MediaQueryListEvent) => void; |
||||
}) { |
||||
useEffect(() => { |
||||
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`); |
||||
const onMediaQueryChange = (e: MediaQueryListEvent) => onChange(e); |
||||
mediaQuery.addEventListener('change', onMediaQueryChange); |
||||
|
||||
return () => mediaQuery.removeEventListener('change', onMediaQueryChange); |
||||
}, [breakpoint, onChange]); |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import { useEffect, useMemo, useState } from 'react'; |
||||
|
||||
import { ThemeBreakpointsKey } from '@grafana/data'; |
||||
import { useTheme2 } from '@grafana/ui'; |
||||
|
||||
export function useMediaQueryMinWidth(breakpoint: ThemeBreakpointsKey): boolean { |
||||
const theme = useTheme2(); |
||||
const mediaQuery = useMemo( |
||||
() => window.matchMedia(`(min-width: ${theme.breakpoints.values[breakpoint]}px)`), |
||||
[theme, breakpoint] |
||||
); |
||||
const [isMatch, setIsMatch] = useState(mediaQuery.matches); |
||||
|
||||
useEffect(() => { |
||||
const onChange = (e: MediaQueryListEvent) => setIsMatch(e.matches); |
||||
mediaQuery.addEventListener('change', onChange); |
||||
return () => mediaQuery.removeEventListener('change', onChange); |
||||
}, [mediaQuery]); |
||||
|
||||
return isMatch; |
||||
} |
||||
Loading…
Reference in new issue