IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ScrollContainer: Replace CustomScrollbar usage (#96229)

Browse Source 
* replace CustomScrollbar

* use ScrollContainer in RolePickerMenu and PanelDataPane
This commit is contained in:
Ashley Harrison
2024-11-12 15:43:04 +00:00
committed by GitHub
parent 108d611205
commit 1e001451bd
10 changed files with 49 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/core/components/RolePicker/RolePickerMenu.tsx
View File

@@ -1,8 +1,9 @@
import { css, cx } from '@emotion/css';
import { useEffect, useRef, useState } from 'react';
import { Button, CustomScrollbar, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
import { Button, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { OrgRole, Role } from 'app/types';
import { BuiltinRoleSelector } from './BuiltinRoleSelector';
@@ -217,14 +218,11 @@ export const RolePickerMenu = ({
)}
>
<div className={customStyles.menu} aria-label="Role picker menu">
<CustomScrollbar
autoHide={false}
autoHeightMax={`${MENU_MAX_HEIGHT}px`}
hideHorizontalTrack
hideVerticalTrack
<ScrollContainer
maxHeight={`${MENU_MAX_HEIGHT}px`}
// NOTE: this is a way to force hiding of the scrollbar
// the scrollbar makes the mouseEvents drop
className={cx(customStyles.hideScrollBar)}
scrollbarWidth="none"
>
{showBasicRole && (
<div className={customStyles.menuSection}>
@@ -254,7 +252,7 @@ export const RolePickerMenu = ({
showOnLeftSubMenu={menuLeft}
/>
))}
</CustomScrollbar>
</ScrollContainer>
<div className={customStyles.menuButtonRow}>
<Stack justifyContent="flex-end">
<Button size="sm" fill="text" onClick={onClearInternal} disabled={updateDisabled}>

7
public/app/core/components/RolePicker/RolePickerSubMenu.tsx
View File

@@ -1,7 +1,8 @@
import { cx } from '@emotion/css';
import { Button, CustomScrollbar, Stack, useStyles2, useTheme2 } from '@grafana/ui';
import { Button, Stack, useStyles2, useTheme2 } from '@grafana/ui';
import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { Role } from 'app/types';
import { RoleMenuOption } from './RoleMenuOption';
@@ -41,7 +42,7 @@ export const RolePickerSubMenu = ({
className={cx(customStyles.subMenu, { [customStyles.subMenuLeft]: showOnLeft })}
aria-label="Role picker submenu"
>
<CustomScrollbar autoHide={false} autoHeightMax={`${MENU_MAX_HEIGHT}px`} hideHorizontalTrack>
<ScrollContainer maxHeight={`${MENU_MAX_HEIGHT}px`}>
<div className={styles.optionBody}>
{options.map((option, i) => (
<RoleMenuOption
@@ -62,7 +63,7 @@ export const RolePickerSubMenu = ({
/>
))}
</div>
</CustomScrollbar>
</ScrollContainer>
<div className={customStyles.subMenuButtonRow}>
<Stack justifyContent="flex-end">
<Button size="sm" fill="text" onClick={onClearInternal}>