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

TimeRangePicker: Use native scrollbar (#88327)

Browse Source 
* Use native scrollbar

* Native overflow scroll

* Fix feedback

* Make scrollbars thin
This commit is contained in:
Tobias Skarhed 2024-05-28 13:41:31 +02:00 committed by GitHub
parent 7e25ff5756
commit c8ab138dbf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
View File

@ -7,7 +7,6 @@ import { selectors } from '@grafana/e2e-selectors';
import { useStyles2, useTheme2 } from '../../../themes';
import { getFocusStyles } from '../../../themes/mixins';
import { t, Trans } from '../../../utils/i18n';
import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
import { FilterInput } from '../../FilterInput/FilterInput';
import { Icon } from '../../Icon/Icon';
@ -88,12 +87,10 @@ export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
placeholder={t('time-picker.content.filter-placeholder', 'Search quick ranges')}
/>
</div>
<CustomScrollbar>
{!isFullscreen && <NarrowScreenForm {...props} historyOptions={historyOptions} />}
{!hideQuickRanges && (
<TimeRangeList options={filteredQuickOptions} onChange={onChangeTimeOption} value={timeOption} />
)}
</CustomScrollbar>
{!isFullscreen && <NarrowScreenForm {...props} historyOptions={historyOptions} />}
{!hideQuickRanges && (
<TimeRangeList options={filteredQuickOptions} onChange={onChangeTimeOption} value={timeOption} />
)}
</div>
)}
{isFullscreen && (
@ -295,6 +292,7 @@ const getStyles = (
borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,
width: `${!hideQuickRanges ? '60%' : '100%'}`,
overflow: 'auto',
scrollbarWidth: 'thin',
order: isReversed ? 1 : 0,
}),
rightSide: css({

5
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
View File

@ -55,6 +55,7 @@ const Options = ({ options, value, onChange, title }: Props) => {
onKeyDown={handleKeys}
ref={localRef}
aria-roledescription={t('time-picker.time-range.aria-role', 'Time range selection')}
className={styles.list}
>
{options.map((option, index) => (
<TimeRangeOption
@ -96,4 +97,8 @@ const getOptionsStyles = () => ({
flexGrow: 1,
alignItems: 'flex-start',
}),
list: css({
overflowY: 'auto',
scrollbarWidth: 'thin',
}),
});