From c70467c4c9a75e71ca3e101685cce6c50579580b Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 29 Nov 2023 15:26:19 +0000 Subject: [PATCH] Chore: Convert some core components to use emotion object styles (#78607) * convert some core components to use emotion object styles * remove enabled: true * use radius.default --- .betterer.results | 73 +-------------- .../MegaMenu/NavFeatureHighlight.tsx | 20 ++--- .../app/core/components/Branding/Branding.tsx | 50 +++++------ public/app/core/components/CardButton.tsx | 37 ++++---- .../components/CloseButton/CloseButton.tsx | 11 +-- public/app/core/components/Divider.tsx | 14 +-- .../components/EmptyListCTA/EmptyListCTA.tsx | 20 ++--- .../components/FolderFilter/FolderFilter.tsx | 26 +++--- .../ForgottenPassword/ForgottenPassword.tsx | 15 ++-- .../components/Layers/LayerDragDropList.tsx | 88 +++++++++---------- .../app/core/components/Layers/LayerName.tsx | 87 +++++++++--------- .../app/core/components/Login/LoginLayout.tsx | 5 +- .../app/core/components/NodeGraphSettings.tsx | 26 +++--- .../app/core/components/OptionsUI/color.tsx | 50 +++++------ .../core/components/OptionsUI/fieldColor.tsx | 14 +-- .../app/core/components/OptionsUI/slider.tsx | 16 ++-- .../app/core/components/OptionsUI/strings.tsx | 26 +++--- .../app/core/components/OptionsUI/units.tsx | 20 ++--- 18 files changed, 263 insertions(+), 335 deletions(-) diff --git a/.betterer.results b/.betterer.results index 061a3280b21..2dc9ff6cdc4 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1,5 +1,5 @@ // BETTERER RESULTS V2. -// +// // If this file contains merge conflicts, use `betterer merge` to automatically resolve them: // https://phenomnomnominal.github.io/betterer/docs/results-file/#merge // @@ -1091,9 +1091,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "5"], [0, 0, 0, "Unexpected any. Specify a different type.", "6"] ], - "public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/core/components/AppChrome/News/NewsContainer.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], @@ -1106,35 +1103,9 @@ exports[`better eslint`] = { "public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], - "public/app/core/components/Branding/Branding.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], - "public/app/core/components/CardButton.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/core/components/CloseButton/CloseButton.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/core/components/Divider.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/core/components/DynamicImports/SafeDynamicImport.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/core/components/EmptyListCTA/EmptyListCTA.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"] - ], - "public/app/core/components/FolderFilter/FolderFilter.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], - "public/app/core/components/ForgottenPassword/ForgottenPassword.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/core/components/GraphNG/GraphNG.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -1152,40 +1123,9 @@ exports[`better eslint`] = { "public/app/core/components/GraphNG/hooks.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/core/components/Layers/LayerDragDropList.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"], - [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/core/components/Layers/LayerName.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"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] - ], "public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], - "public/app/core/components/NodeGraphSettings.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"] - ], - "public/app/core/components/OptionsUI/color.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"], - [0, 0, 0, "Styles should be written using objects.", "3"] - ], - "public/app/core/components/OptionsUI/fieldColor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/core/components/OptionsUI/registry.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -1267,17 +1207,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "77"], [0, 0, 0, "Unexpected any. Specify a different type.", "78"] ], - "public/app/core/components/OptionsUI/slider.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/core/components/OptionsUI/strings.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], - "public/app/core/components/OptionsUI/units.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/core/components/PageHeader/PageHeader.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"] diff --git a/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx b/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx index 9992d9fe2c8..00f7eda9013 100644 --- a/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx @@ -20,15 +20,15 @@ export const NavFeatureHighlight = ({ children }: Props): JSX.Element => { const getStyles = (theme: GrafanaTheme2) => { return { - highlight: css` - background-color: ${theme.colors.success.main}; - border-radius: ${theme.shape.radius.circle}; - width: 6px; - height: 6px; - display: inline-block; - position: absolute; - top: 50%; - transform: translateY(-50%); - `, + highlight: css({ + backgroundColor: theme.colors.success.main, + borderRadius: theme.shape.radius.circle, + width: '6px', + height: '6px', + display: 'inline-block', + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + }), }; }; diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx index 0082d219c0f..15f37c694df 100644 --- a/public/app/core/components/Branding/Branding.tsx +++ b/public/app/core/components/Branding/Branding.tsx @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'; import React, { FC } from 'react'; import { colorManipulator } from '@grafana/data'; -import { useTheme2, styleMixins } from '@grafana/ui'; +import { useTheme2 } from '@grafana/ui'; export interface BrandComponentProps { className?: string; @@ -16,28 +16,28 @@ export const LoginLogo: FC = ({ classNa const LoginBackground: FC = ({ className, children }) => { const theme = useTheme2(); - const background = css` - &:before { - content: ''; - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg); - background-position: top center; - background-size: auto; - background-repeat: no-repeat; + const background = css({ + '&:before': { + content: '""', + position: 'fixed', + left: 0, + right: 0, + bottom: 0, + top: 0, + background: `url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg)`, + backgroundPosition: 'top center', + backgroundSize: 'auto', + backgroundRepeat: 'no-repeat', - opacity: 0; - transition: opacity 3s ease-in-out; + opacity: 0, + transition: 'opacity 3s ease-in-out', - @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} { - background-position: center; - background-size: cover; - } - } - `; + [theme.breakpoints.up('md')]: { + backgroundPosition: 'center', + backgroundSize: 'cover', + }, + }, + }); return
{children}
; }; @@ -48,10 +48,10 @@ const MenuLogo: FC = ({ className }) => { const LoginBoxBackground = () => { const theme = useTheme2(); - return css` - background: ${colorManipulator.alpha(theme.colors.background.primary, 0.7)}; - background-size: cover; - `; + return css({ + background: colorManipulator.alpha(theme.colors.background.primary, 0.7), + backgroundSize: 'cover', + }); }; export class Branding { diff --git a/public/app/core/components/CardButton.tsx b/public/app/core/components/CardButton.tsx index eb8c8fbc222..2ed4eed360d 100644 --- a/public/app/core/components/CardButton.tsx +++ b/public/app/core/components/CardButton.tsx @@ -27,27 +27,26 @@ CardButton.displayName = 'CardButton'; const getStyles = (theme: GrafanaTheme2) => { return { - action: css` - display: flex; - flex-direction: column; - height: 100%; + action: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', - justify-self: center; - cursor: pointer; - background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.radius.default}; - color: ${theme.colors.text.primary}; - border: unset; - width: 100%; - display: flex; + justifySelf: 'center', + cursor: 'pointer', + background: theme.colors.background.secondary, + borderRadius: theme.shape.radius.default, + color: theme.colors.text.primary, + border: 'unset', + width: '100%', - justify-content: center; - align-items: center; - text-align: center; + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', - &:hover { - background: ${theme.colors.emphasize(theme.colors.background.secondary)}; - } - `, + '&:hover': { + background: theme.colors.emphasize(theme.colors.background.secondary), + }, + }), }; }; diff --git a/public/app/core/components/CloseButton/CloseButton.tsx b/public/app/core/components/CloseButton/CloseButton.tsx index 77b40669936..a80a28f17f2 100644 --- a/public/app/core/components/CloseButton/CloseButton.tsx +++ b/public/app/core/components/CloseButton/CloseButton.tsx @@ -24,8 +24,9 @@ export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) ); }; -const getStyles = (theme: GrafanaTheme2) => css` - position: absolute; - right: ${theme.spacing(0.5)}; - top: ${theme.spacing(1)}; -`; +const getStyles = (theme: GrafanaTheme2) => + css({ + position: 'absolute', + right: theme.spacing(0.5), + top: theme.spacing(1), + }); diff --git a/public/app/core/components/Divider.tsx b/public/app/core/components/Divider.tsx index 7e062fd6165..11f02393f4b 100644 --- a/public/app/core/components/Divider.tsx +++ b/public/app/core/components/Divider.tsx @@ -15,11 +15,11 @@ export const Divider = ({ hideLine = false }) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - divider: css` - margin: ${theme.spacing(4, 0)}; - `, - dividerHideLine: css` - border: none; - margin: ${theme.spacing(3, 0)}; - `, + divider: css({ + margin: theme.spacing(4, 0), + }), + dividerHideLine: css({ + border: 'none', + margin: theme.spacing(3, 0), + }), }); diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index 18b2f5c39ac..ee31efcb2f9 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -19,14 +19,14 @@ export interface Props { infoBoxTitle?: string; } -const ctaStyle = css` - text-align: center; -`; +const ctaStyle = css({ + textAlign: 'center', +}); -const infoBoxStyles = css` - max-width: 700px; - margin: 0 auto; -`; +const infoBoxStyles = css({ + maxWidth: '700px', + margin: '0 auto', +}); const EmptyListCTA = ({ title, @@ -71,9 +71,9 @@ const EmptyListCTA = ({ }; const ctaElementClassName = !footer() - ? css` - margin-bottom: 20px; - ` + ? css({ + marginBottom: '20px', + }) : ''; const ButtonEl = buttonLink ? LinkButton : Button; diff --git a/public/app/core/components/FolderFilter/FolderFilter.tsx b/public/app/core/components/FolderFilter/FolderFilter.tsx index d1fb837e2da..b23e6765af2 100644 --- a/public/app/core/components/FolderFilter/FolderFilter.tsx +++ b/public/app/core/components/FolderFilter/FolderFilter.tsx @@ -85,18 +85,18 @@ async function getFoldersAsOptions( function getStyles(theme: GrafanaTheme2) { return { - container: css` - label: container; - position: relative; - min-width: 180px; - flex-grow: 1; - `, - clear: css` - label: clear; - font-size: ${theme.spacing(1.5)}; - position: absolute; - top: -${theme.spacing(4.5)}; - right: 0; - `, + container: css({ + label: 'container', + position: 'relative', + minWidth: '180px', + flexGrow: 1, + }), + clear: css({ + label: 'clear', + fontSize: theme.spacing(1.5), + position: 'absolute', + top: -theme.spacing(4.5), + right: 0, + }), }; } diff --git a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx index 90e02383fcb..c15c4fe6e13 100644 --- a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx +++ b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx @@ -10,13 +10,14 @@ interface EmailDTO { userOrEmail: string; } -const paragraphStyles = (theme: GrafanaTheme2) => css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - font-weight: ${theme.typography.fontWeightRegular}; - margin-top: ${theme.spacing(1)}; - display: block; -`; +const paragraphStyles = (theme: GrafanaTheme2) => + css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + fontWeight: theme.typography.fontWeightRegular, + marginTop: theme.spacing(1), + display: 'block', + }); export const ForgottenPassword = () => { const [emailSent, setEmailSent] = useState(false); diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx index 9bbfd683507..1dc2ff5dc66 100644 --- a/public/app/core/components/Layers/LayerDragDropList.tsx +++ b/public/app/core/components/Layers/LayerDragDropList.tsx @@ -127,49 +127,49 @@ LayerDragDropList.defaultProps = { }; const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - margin-bottom: ${theme.spacing(2)}; - `, - row: css` - padding: ${theme.spacing(0.5, 1)}; - border-radius: ${theme.shape.radius.default}; - background: ${theme.colors.background.secondary}; - min-height: ${theme.spacing(4)}; - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 3px; - cursor: pointer; + wrapper: css({ + marginBottom: theme.spacing(2), + }), + row: css({ + padding: theme.spacing(0.5, 1), + borderRadius: theme.shape.radius.default, + background: theme.colors.background.secondary, + minHeight: theme.spacing(4), + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: '3px', + cursor: 'pointer', - border: 1px solid ${theme.components.input.borderColor}; - &:hover { - border: 1px solid ${theme.components.input.borderHover}; - } - `, - sel: css` - border: 1px solid ${theme.colors.primary.border}; - &:hover { - border: 1px solid ${theme.colors.primary.border}; - } - `, - dragIcon: css` - cursor: drag; - `, - actionIcon: css` - color: ${theme.colors.text.secondary}; - &:hover { - color: ${theme.colors.text}; - } - `, - typeWrapper: css` - color: ${theme.colors.primary.text}; - margin-right: 5px; - `, - textWrapper: css` - display: flex; - align-items: center; - flex-grow: 1; - overflow: hidden; - margin-right: ${theme.spacing(1)}; - `, + border: `1px solid ${theme.components.input.borderColor}`, + '&:hover': { + border: `1px solid ${theme.components.input.borderHover}`, + }, + }), + sel: css({ + border: `1px solid ${theme.colors.primary.border}`, + '&:hover': { + border: `1px solid ${theme.colors.primary.border}`, + }, + }), + dragIcon: css({ + cursor: 'drag', + }), + actionIcon: css({ + color: theme.colors.text.secondary, + '&:hover': { + color: theme.colors.text.primary, + }, + }), + typeWrapper: css({ + color: theme.colors.primary.text, + marginRight: '5px', + }), + textWrapper: css({ + display: 'flex', + alignItems: 'center', + flexGrow: 1, + overflow: 'hidden', + marginRight: theme.spacing(1), + }), }); diff --git a/public/app/core/components/Layers/LayerName.tsx b/public/app/core/components/Layers/LayerName.tsx index 1ed35e1a3a1..2ef0a2981cd 100644 --- a/public/app/core/components/Layers/LayerName.tsx +++ b/public/app/core/components/Layers/LayerName.tsx @@ -105,55 +105,54 @@ export const LayerName = ({ name, onChange, verifyLayerNameUniqueness, overrideS const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - label: Wrapper; - display: flex; - align-items: center; - margin-left: ${theme.spacing(0.5)}; - `, - layerNameWrapper: css` - display: flex; - cursor: pointer; - border: 1px solid transparent; - border-radius: ${theme.shape.borderRadius(2)}; - align-items: center; - padding: 0 0 0 ${theme.spacing(0.5)}; - margin: 0; - background: transparent; + wrapper: css({ + label: 'Wrapper', + display: 'flex', + alignItems: 'center', + marginLeft: theme.spacing(0.5), + }), + layerNameWrapper: css({ + display: 'flex', + cursor: 'pointer', + border: '1px solid transparent', + borderRadius: theme.shape.radius.default, + alignItems: 'center', + padding: `0 0 0 ${theme.spacing(0.5)}`, + margin: 0, + background: 'transparent', - &:hover { - background: ${theme.colors.action.hover}; - border: 1px dashed ${theme.colors.border.strong}; - } + '&:hover': { + background: theme.colors.action.hover, + border: `1px dashed ${theme.colors.border.strong}`, + }, - &:focus { - border: 2px solid ${theme.colors.primary.border}; - } + '&:focus': { + border: `2px solid ${theme.colors.primary.border}`, + }, - &:hover, - &:focus { - .query-name-edit-icon { - visibility: visible; - } - } - `, - layerName: css` - font-weight: ${theme.typography.fontWeightMedium}; - color: ${theme.colors.primary.text}; - cursor: pointer; - overflow: hidden; - margin-left: ${theme.spacing(0.5)}; - `, + '&:hover, &:focus': { + '.query-name-edit-icon': { + visibility: 'visible', + }, + }, + }), + layerName: css({ + fontWeight: theme.typography.fontWeightMedium, + color: theme.colors.primary.text, + cursor: 'pointer', + overflow: 'hidden', + marginLeft: theme.spacing(0.5), + }), layerEditIcon: cx( - css` - margin-left: ${theme.spacing(2)}; - visibility: hidden; - `, + css({ + marginLeft: theme.spacing(2), + visibility: 'hidden', + }), 'query-name-edit-icon' ), - layerNameInput: css` - max-width: 300px; - margin: -4px 0; - `, + layerNameInput: css({ + maxWidth: '300px', + margin: '-4px 0', + }), }; }; diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx index 33321102d73..95f95170980 100644 --- a/public/app/core/components/Login/LoginLayout.tsx +++ b/public/app/core/components/Login/LoginLayout.tsx @@ -145,7 +145,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => { justifyContent: 'flex-start', zIndex: 1, minHeight: 320, - borderRadius: theme.shape.borderRadius(4), + borderRadius: theme.shape.radius.default, padding: theme.spacing(2, 0), opacity: 0, transition: 'opacity 0.5s ease-in-out', @@ -157,13 +157,12 @@ export const getLoginStyles = (theme: GrafanaTheme2) => { }), loginOuterBox: css({ display: 'flex', - overflowU: 'hidden', + overflowY: 'hidden', alignItems: 'center', justifyContent: 'center', }), loginInnerBox: css({ padding: theme.spacing(0, 2, 2, 2), - display: 'flex', flexDirection: 'column', alignItems: 'center', diff --git a/public/app/core/components/NodeGraphSettings.tsx b/public/app/core/components/NodeGraphSettings.tsx index 0dfe986323e..5fb7dcb3eb1 100644 --- a/public/app/core/components/NodeGraphSettings.tsx +++ b/public/app/core/components/NodeGraphSettings.tsx @@ -70,17 +70,17 @@ export const NodeGraphSection = ({ options, onOptionsChange }: DataSourcePluginO }; const getStyles = (theme: GrafanaTheme2) => ({ - infoText: css` - label: infoText; - padding-bottom: ${theme.spacing(2)}; - color: ${theme.colors.text.secondary}; - `, - container: css` - label: container; - width: 100%; - `, - row: css` - label: row; - align-items: baseline; - `, + infoText: css({ + label: 'infoText', + paddingBottom: theme.spacing(2), + color: theme.colors.text.secondary, + }), + container: css({ + label: 'container', + width: '100%', + }), + row: css({ + label: 'row', + alignItems: 'baseline', + }), }); diff --git a/public/app/core/components/OptionsUI/color.tsx b/public/app/core/components/OptionsUI/color.tsx index c4c94b06a99..3916c9b6ed6 100644 --- a/public/app/core/components/OptionsUI/color.tsx +++ b/public/app/core/components/OptionsUI/color.tsx @@ -71,30 +71,30 @@ export const ColorValueEditor = ({ value, settings, onChange, details }: Props) const getStyles = (theme: GrafanaTheme2) => { return { - spot: css` - cursor: pointer; - color: ${theme.colors.text}; - background: ${theme.components.input.background}; - padding: 3px; - height: ${theme.v1.spacing.formInputHeight}px; - border: 1px solid ${theme.components.input.borderColor}; - display: flex; - flex-direction: row; - align-items: center; - align-content: flex-end; - &:hover { - border: 1px solid ${theme.components.input.borderHover}; - } - `, - colorPicker: css` - padding: 0 ${theme.spacing(1)}; - `, - colorText: css` - flex-grow: 2; - `, - placeholderText: css` - flex-grow: 2; - color: ${theme.colors.text.secondary}; - `, + spot: css({ + cursor: 'pointer', + color: theme.colors.text.primary, + background: theme.components.input.background, + padding: '3px', + height: theme.v1.spacing.formInputHeight, + border: `1px solid ${theme.components.input.borderColor}`, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + alignContent: 'flex-end', + '&:hover': { + border: `1px solid ${theme.components.input.borderHover}`, + }, + }), + colorPicker: css({ + padding: `0 ${theme.spacing(1)}`, + }), + colorText: css({ + flexGrow: 2, + }), + placeholderText: css({ + flexGrow: 2, + color: theme.colors.text.secondary, + }), }; }; diff --git a/public/app/core/components/OptionsUI/fieldColor.tsx b/public/app/core/components/OptionsUI/fieldColor.tsx index 3576efc7d0e..da1294e6d2f 100644 --- a/public/app/core/components/OptionsUI/fieldColor.tsx +++ b/public/app/core/components/OptionsUI/fieldColor.tsx @@ -150,12 +150,12 @@ const FieldColorModeViz: FC = ({ mode, theme }) => { const getStyles = (theme: GrafanaTheme2) => { return { - group: css` - display: flex; - `, - select: css` - margin-right: 8px; - flex-grow: 1; - `, + group: css({ + display: 'flex', + }), + select: css({ + marginRight: theme.spacing(1), + flexGrow: 1, + }), }; }; diff --git a/public/app/core/components/OptionsUI/slider.tsx b/public/app/core/components/OptionsUI/slider.tsx index c681adfc40e..d06785010cb 100644 --- a/public/app/core/components/OptionsUI/slider.tsx +++ b/public/app/core/components/OptionsUI/slider.tsx @@ -130,13 +130,13 @@ function getTextWidth(text: string, font: string): number | null { const getStylesSlider = (theme: GrafanaTheme2, width: number) => { return { - numberInputWrapper: css` - margin-left: ${theme.spacing(3)}; - max-height: 32px; - max-width: ${width}px; - min-width: ${width}px; - overflow: visible; - width: 100%; - `, + numberInputWrapper: css({ + marginLeft: theme.spacing(3), + maxHeight: '32px', + maxWidth: width, + minWidth: width, + overflow: 'visible', + width: '100%', + }), }; }; diff --git a/public/app/core/components/OptionsUI/strings.tsx b/public/app/core/components/OptionsUI/strings.tsx index 603cf776459..fb38b20eb96 100644 --- a/public/app/core/components/OptionsUI/strings.tsx +++ b/public/app/core/components/OptionsUI/strings.tsx @@ -92,19 +92,19 @@ export class StringArrayEditor extends React.PureComponent { const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - textInput: css` - margin-bottom: 5px; - &:hover { - border: 1px solid ${theme.components.input.borderHover}; - } - `, - trashIcon: css` - color: ${theme.colors.text.secondary}; - cursor: pointer; + textInput: css({ + marginBottom: '5px', + '&:hover': { + border: `1px solid ${theme.components.input.borderHover}`, + }, + }), + trashIcon: css({ + color: theme.colors.text.secondary, + cursor: 'pointer', - &:hover { - color: ${theme.colors.text}; - } - `, + '&:hover': { + color: theme.colors.text.primary, + }, + }), }; }); diff --git a/public/app/core/components/OptionsUI/units.tsx b/public/app/core/components/OptionsUI/units.tsx index fb04e8d1957..d3545045cf2 100644 --- a/public/app/core/components/OptionsUI/units.tsx +++ b/public/app/core/components/OptionsUI/units.tsx @@ -22,14 +22,14 @@ export function UnitValueEditor({ value, onChange, item }: Props) { } const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - width: 100%; - display: flex; - flex-direction: rows; - align-items: center; - `, - first: css` - margin-right: 8px; - flex-grow: 2; - `, + wrapper: css({ + width: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }), + first: css({ + marginRight: theme.spacing(1), + flexGrow: 2, + }), });