diff --git a/.betterer.results b/.betterer.results index 792fa9c78f0..29f105c7116 100644 --- a/.betterer.results +++ b/.betterer.results @@ -6828,15 +6828,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"], [0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"] ], - "public/app/plugins/panel/dashlist/styles.ts:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"] - ], "public/app/plugins/panel/datagrid/utils.ts:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"], diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx index 2de3007a5da..113cd7d9ff8 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx @@ -99,14 +99,14 @@ const getStyles = (theme: GrafanaTheme2) => { }) ), rightWrapper: css({ - paddingLeft: theme.spacing(0.5), + padding: theme.spacing(0.5), }), bottomWrapper: css({ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', - paddingLeft: theme.spacing(0.5), + padding: theme.spacing(0.5), gap: '15px 25px', }), section: css({ diff --git a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx index 33b12b3de7f..31b0f131905 100644 --- a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx +++ b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx @@ -57,7 +57,6 @@ const getStyles = (theme: GrafanaTheme2) => { display: 'block', textOverflow: 'ellipsis', overflow: 'hidden', - padding: theme.spacing(0, 0.5), whiteSpace: 'nowrap', color: theme.colors.text.secondary, }), @@ -74,6 +73,7 @@ const getStyles = (theme: GrafanaTheme2) => { flex: 1, minWidth: 0, maxWidth: 'max-content', + padding: theme.spacing(0.5, 0.5), // logic for small screens // hide any breadcrumbs that aren't the second to last child (the parent) diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index 522d28e25af..49571a3ffa8 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -132,7 +132,7 @@ function getStyles(theme: GrafanaTheme2, headerHeight: number | undefined) { label: 'canvas-content', display: 'flex', flexDirection: 'column', - padding: theme.spacing(0, 2), + padding: theme.spacing(0.5, 2), flexBasis: '100%', gridArea: 'panels', flexGrow: 1, diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts index 9dab97be66d..8d482d09960 100644 --- a/public/app/plugins/panel/dashlist/styles.ts +++ b/public/app/plugins/panel/dashlist/styles.ts @@ -2,52 +2,52 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -export const getStyles = (theme: GrafanaTheme2) => ({ - dashlistSectionHeader: css` - padding: ${theme.spacing(0.25, 1)}; - margin-right: ${theme.spacing(1)}; - `, - dashlistSection: css` - margin-bottom: ${theme.spacing(2)}; - padding-top: 3px; - `, - dashlistLink: css` - display: flex; - cursor: pointer; - border-bottom: 1px solid ${theme.colors.border.weak}; - margin-right: ${theme.spacing(1)}; - padding: ${theme.spacing(1)}; - align-items: center; +export const getStyles = (theme: GrafanaTheme2) => { + return { + dashlistSectionHeader: css({ + padding: theme.spacing(0.25, 1), + marginRight: theme.spacing(1), + }), + dashlistSection: css({ + marginBottom: theme.spacing(2), + paddingTop: theme.spacing(0.5), + }), + dashlistLink: css({ + display: 'flex', + cursor: 'pointer', + borderBottom: `1px solid ${theme.colors.border.weak}`, + margin: theme.spacing(1), + padding: theme.spacing(1), + alignItems: 'center', - &:hover { - a { - color: ${theme.colors.text.link}; - text-decoration: underline; - } - } - `, - dashlistFolder: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - line-height: ${theme.typography.body.lineHeight}; - `, - dashlistTitle: css` - &::after { - position: absolute; - content: ''; - left: 0; - top: 0; - bottom: 0; - right: 0; - } - `, - dashlistLinkBody: css` - flex-grow: 1; - overflow: hidden; - text-overflow: ellipsis; - `, - dashlistItem: css` - position: relative; - list-style: none; - `, -}); + '&:hover': { + a: { + color: theme.colors.text.link, + textDecoration: 'underline', + }, + }, + }), + dashlistFolder: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + lineHeight: theme.typography.body.lineHeight, + }), + dashlistTitle: css({ + '&::after': { + position: 'absolute', + content: '""', + left: 0, + top: 0, + bottom: 0, + right: 0, + }, + }), + dashlistLinkBody: css({ + flexGrow: 1, + }), + dashlistItem: css({ + position: 'relative', + listStyle: 'none', + }), + }; +};