From 8bb9b06e482f032f13316c0502e116f7d7e545d8 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Mon, 29 Apr 2024 22:34:10 +0100 Subject: [PATCH] Chore: Rewrite grafana-sql css using object styles (#87052) --- .betterer.results | 16 +----- .../query-editor-raw/QueryToolbox.tsx | 50 +++++++++---------- .../query-editor-raw/QueryValidator.tsx | 22 ++++---- .../components/query-editor-raw/RawEditor.tsx | 16 +++--- 4 files changed, 45 insertions(+), 59 deletions(-) diff --git a/.betterer.results b/.betterer.results index 7bd18516f5a..2c05174492b 100644 --- a/.betterer.results +++ b/.betterer.results @@ -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"] diff --git a/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx b/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx index a8817e102f6..5798b65b567 100644 --- a/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx +++ b/packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx @@ -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]); diff --git a/packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx b/packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx index 0cbad6702a8..c787229b9d9 100644 --- a/packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx +++ b/packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx @@ -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]); diff --git a/packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx b/packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx index 19215827b74..0c6883adaa9 100644 --- a/packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx +++ b/packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx @@ -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, + }), }; }