IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-27 03:11:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Fix toolbar actions flickering on mobile (#70524)

Browse Source 
* fix flickering overflow

* set everything to hidden by default

* extend intersectionobserver mock
This commit is contained in:
Ashley Harrison 2023-06-23 08:50:51 +01:00 committed by GitHub
parent 4821175d40
commit ff429c9af5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
View File

@ -18,9 +18,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>( export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
({ alignment = 'left', className, children, ...rest }, ref) => { ({ alignment = 'left', className, children, ...rest }, ref) => {
// null is a valid react child so we need to filter it out to prevent unnecessary padding // null/undefined are valid react children so we need to filter them out to prevent unnecessary padding
const childrenWithoutNull = React.Children.toArray(children).filter((child) => child !== null); const childrenWithoutNull = React.Children.toArray(children).filter((child) => child != null);
const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(true)); const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(false));
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [showOverflowItems, setShowOverflowItems] = useState(false); const [showOverflowItems, setShowOverflowItems] = useState(false);
const overflowRef = useRef<HTMLDivElement>(null); const overflowRef = useRef<HTMLDivElement>(null);

16
public/test/jest-setup.ts
View File

@ -50,12 +50,16 @@ angular.module('grafana.directives', []);
angular.module('grafana.filters', []); angular.module('grafana.filters', []);
angular.module('grafana.routes', ['ngRoute']); angular.module('grafana.routes', ['ngRoute']);
// Mock IntersectionObserver // mock the intersection observer and just say everything is in view
const mockIntersectionObserver = jest.fn().mockReturnValue({ const mockIntersectionObserver = jest
observe: jest.fn(), .fn()
unobserve: jest.fn(), .mockImplementation((callback: (arg: IntersectionObserverEntry[]) => void) => ({
disconnect: jest.fn(), observe: jest.fn().mockImplementation((elem: HTMLElement) => {
}); callback([{ target: elem, isIntersecting: true }] as unknown as IntersectionObserverEntry[]);
}),
unobserve: jest.fn(),
disconnect: jest.fn(),
}));
global.IntersectionObserver = mockIntersectionObserver; global.IntersectionObserver = mockIntersectionObserver;
jest.mock('../app/core/core', () => ({ jest.mock('../app/core/core', () => ({