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

Chore: Rewrite grafana-sql css using object styles (#87052)

Browse Source
This commit is contained in:
kay delaney 2024-04-29 22:34:10 +01:00 committed by GitHub
parent e3719471d5
commit 8bb9b06e48
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 45 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.betterer.results
View File

@ -723,21 +723,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "6"]
],
"packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "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"]
],
"packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx: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"]
],
"packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]

50
packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx
View File

@ -20,31 +20,31 @@ export function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ..
const styles = useMemo(() => {
return {
container: css`
border: 1px solid ${theme.colors.border.medium};
border-top: none;
padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
display: flex;
flex-grow: 1;
justify-content: space-between;
font-size: ${theme.typography.bodySmall.fontSize};
`,
error: css`
color: ${theme.colors.error.text};
font-size: ${theme.typography.bodySmall.fontSize};
font-family: ${theme.typography.fontFamilyMonospace};
`,
valid: css`
color: ${theme.colors.success.text};
`,
info: css`
color: ${theme.colors.text.secondary};
`,
hint: css`
color: ${theme.colors.text.disabled};
white-space: nowrap;
cursor: help;
`,
container: css({
border: `1px solid ${theme.colors.border.medium}`,
borderTop: 'none',
padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
display: 'flex',
flexGrow: 1,
justifyContent: 'space-between',
fontSize: theme.typography.bodySmall.fontSize,
}),
error: css({
color: theme.colors.error.text,
fontSize: theme.typography.bodySmall.fontSize,
fontFamily: theme.typography.fontFamilyMonospace,
}),
valid: css({
color: theme.colors.success.text,
}),
info: css({
color: theme.colors.text.secondary,
}),
hint: css({
color: theme.colors.text.disabled,
whiteSpace: 'nowrap',
cursor: 'help',
}),
};
}, [theme]);

22
packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx
View File

@ -22,17 +22,17 @@ export function QueryValidator({ db, query, onValidate, range }: QueryValidatorP
const styles = useMemo(() => {
return {
error: css`
color: ${theme.colors.error.text};
font-size: ${theme.typography.bodySmall.fontSize};
font-family: ${theme.typography.fontFamilyMonospace};
`,
valid: css`
color: ${theme.colors.success.text};
`,
info: css`
color: ${theme.colors.text.secondary};
`,
error: css({
color: theme.colors.error.text,
fontSize: theme.typography.bodySmall.fontSize,
fontFamily: theme.typography.fontFamilyMonospace,
}),
valid: css({
color: theme.colors.success.text,
}),
info: css({
color: theme.colors.text.secondary,
}),
};
}, [theme]);

16
packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx
View File

@ -114,13 +114,13 @@ export function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryTo
function getStyles(theme: GrafanaTheme2) {
return {
modal: css`
width: 95vw;
height: 95vh;
`,
modalContent: css`
height: 100%;
padding-top: 0;
`,
modal: css({
width: '95vw',
height: '95vh',
}),
modalContent: css({
height: '100%',
paddingTop: 0,
}),
};
}