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

Explore: Fix a11y issue with show all series button in Graph (#58943)

Browse Source 
* Explore: Fix a11y issue with show all series button in Graph

* remove extra space

* add spacing
This commit is contained in:
Giordano Ricci 2022-11-18 14:52:54 +01:00 committed by GitHub
parent b3406a8273
commit 44e8fb628e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/features/explore/Graph/ExploreGraph.tsx
View File

@ -22,6 +22,7 @@ import {
import { PanelRenderer } from '@grafana/runtime'; import { PanelRenderer } from '@grafana/runtime';
import { GraphDrawStyle, LegendDisplayMode, TooltipDisplayMode, SortOrder } from '@grafana/schema'; import { GraphDrawStyle, LegendDisplayMode, TooltipDisplayMode, SortOrder } from '@grafana/schema';
import { import {
Button,
Icon, Icon,
PanelContext, PanelContext,
PanelContextProvider, PanelContextProvider,
@ -166,13 +167,15 @@ export function ExploreGraph({
{dataWithConfig.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && ( {dataWithConfig.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && (
<div className={cx([style.timeSeriesDisclaimer])}> <div className={cx([style.timeSeriesDisclaimer])}>
<Icon className={style.disclaimerIcon} name="exclamation-triangle" /> <Icon className={style.disclaimerIcon} name="exclamation-triangle" />
{`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `} Showing only {MAX_NUMBER_OF_TIME_SERIES} time series.
<span <Button
className={cx([style.showAllTimeSeries])} variant="primary"
onClick={() => { fill="text"
setShowAllTimeSeries(true); onClick={() => setShowAllTimeSeries(true)}
}} className={style.showAllButton}
>{`Show all ${dataWithConfig.length}`}</span> >
Show all {dataWithConfig.length}
</Button>
</div> </div>
)} )}
<PanelRenderer <PanelRenderer
@ -192,7 +195,6 @@ export function ExploreGraph({
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
timeSeriesDisclaimer: css` timeSeriesDisclaimer: css`
label: time-series-disclaimer; label: time-series-disclaimer;
width: 300px;
margin: ${theme.spacing(1)} auto; margin: ${theme.spacing(1)} auto;
padding: 10px 0; padding: 10px 0;
border-radius: ${theme.spacing(2)}; border-radius: ${theme.spacing(2)};
@ -204,9 +206,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
color: ${theme.colors.warning.main}; color: ${theme.colors.warning.main};
margin-right: ${theme.spacing(0.5)}; margin-right: ${theme.spacing(0.5)};
`, `,
showAllTimeSeries: css` showAllButton: css`
label: show-all-time-series; margin-left: ${theme.spacing(0.5)};
cursor: pointer;
color: ${theme.colors.text.link};
`, `,
}); });