From 626ac67dd7148b7ba3b8bd080881e9d4821c3086 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 17 Jul 2023 16:12:09 +0100 Subject: [PATCH] Chore: Convert `@grafana/ui` to use emotion object syntax (#71374) * convert a bunch of grafana/ui to use emotion's object notation * convert some more grafana-ui emotion styles * more conversion * more conversion * finish conversion * fix unit tests * fix focus styles * remove semicolon from infobox story --- packages/grafana-ui/.eslintrc | 1 + .../grafana-ui/src/components/Alert/Alert.tsx | 114 ++--- .../grafana-ui/src/components/Badge/Badge.tsx | 26 +- .../src/components/BrowserLabel/Label.tsx | 106 ++-- .../src/components/Button/Button.tsx | 46 +- .../src/components/Button/ButtonGroup.tsx | 26 +- .../Button/FullWidthButtonContainer.tsx | 28 +- .../ButtonCascader/ButtonCascader.tsx | 20 +- .../CallToActionCard/CallToActionCard.tsx | 36 +- .../grafana-ui/src/components/Card/Card.tsx | 20 +- .../src/components/Cascader/Cascader.tsx | 10 +- .../src/components/Collapse/Collapse.tsx | 163 +++---- .../src/components/ColorPicker/ColorInput.tsx | 19 +- .../components/ColorPicker/ColorPicker.tsx | 44 +- .../ColorPicker/ColorPickerInput.tsx | 28 +- .../ColorPicker/ColorPickerPopover.tsx | 82 ++-- .../ColorPicker/NamedColorsGroup.tsx | 42 +- .../ColorPicker/NamedColorsPalette.tsx | 30 +- .../ColorPicker/SeriesColorPickerPopover.tsx | 14 +- .../ColorPicker/SpectrumPalette.tsx | 55 +-- .../ConfirmButton/ConfirmButton.tsx | 97 ++-- .../components/ConfirmModal/ConfirmModal.tsx | 6 +- .../CustomScrollbar/CustomScrollbar.tsx | 92 ++-- .../CustomScrollbar.test.tsx.snap | 2 +- .../components/DataLinks/DataLinkEditor.tsx | 16 +- .../components/DataLinks/DataLinkInput.tsx | 44 +- .../DataLinks/DataLinkSuggestions.tsx | 64 +-- .../DataLinks/DataLinksContextMenu.tsx | 6 +- .../DataLinksInlineEditor.tsx | 6 +- .../DataLinksListItem.tsx | 80 +-- .../components/DataLinks/FieldLinkList.tsx | 50 +- .../CustomHeadersSettings.tsx | 27 +- .../DataSourceHttpSettings.tsx | 6 +- .../DataSourceSettings/TLSAuthSettings.tsx | 6 +- .../DateTimePickers/DatePicker/DatePicker.tsx | 22 +- .../DatePickerWithInput.tsx | 20 +- .../DateTimePicker/DateTimePicker.tsx | 48 +- .../RelativeTimeRangePicker.tsx | 138 +++--- .../DateTimePickers/TimeOfDayPicker.tsx | 133 +++-- .../DateTimePickers/TimeRangeInput.tsx | 72 +-- .../DateTimePickers/TimeRangePicker.tsx | 36 +- .../TimeRangePicker/CalendarBody.tsx | 169 +++---- .../TimeRangePicker/CalendarFooter.tsx | 24 +- .../TimeRangePicker/CalendarHeader.tsx | 14 +- .../TimeRangePicker/TimePickerCalendar.tsx | 66 +-- .../TimeRangePicker/TimePickerContent.tsx | 163 +++---- .../TimeRangePicker/TimePickerFooter.tsx | 73 ++- .../TimeRangePicker/TimePickerTitle.tsx | 14 +- .../TimeRangePicker/TimeRangeContent.tsx | 14 +- .../TimeRangePicker/TimeRangeList.tsx | 20 +- .../TimeRangePicker/TimeRangeOption.tsx | 50 +- .../TimeZonePicker/TimeZoneDescription.tsx | 14 +- .../TimeZonePicker/TimeZoneGroup.tsx | 22 +- .../TimeZonePicker/TimeZoneOffset.tsx | 27 +- .../TimeZonePicker/TimeZoneOption.tsx | 82 ++-- .../TimeZonePicker/TimeZoneTitle.tsx | 8 +- .../src/components/Divider/Divider.tsx | 20 +- .../src/components/Drawer/Drawer.tsx | 108 ++-- .../src/components/Dropdown/ButtonSelect.tsx | 20 +- .../EmptySearchResult/EmptySearchResult.tsx | 16 +- .../ErrorBoundary/ErrorWithStack.tsx | 8 +- .../components/FileDropzone/FileDropzone.tsx | 76 +-- .../components/FileDropzone/FileListItem.tsx | 82 ++-- .../src/components/FilterPill/FilterPill.tsx | 58 +-- .../src/components/FormField/FormField.tsx | 14 +- .../src/components/Forms/Checkbox.tsx | 217 ++++----- .../grafana-ui/src/components/Forms/Field.tsx | 46 +- .../src/components/Forms/FieldSet.tsx | 12 +- .../Forms/FieldValidationMessage.tsx | 64 ++- .../grafana-ui/src/components/Forms/Form.tsx | 8 +- .../src/components/Forms/InlineField.tsx | 30 +- .../src/components/Forms/InlineFieldRow.tsx | 16 +- .../src/components/Forms/InlineLabel.tsx | 48 +- .../components/Forms/InlineSegmentGroup.tsx | 18 +- .../grafana-ui/src/components/Forms/Label.tsx | 58 +-- .../src/components/Forms/Legend.tsx | 10 +- .../Forms/RadioButtonGroup/RadioButton.tsx | 79 ++- .../RadioButtonGroup/RadioButtonGroup.tsx | 16 +- .../Forms/RadioButtonList/RadioButtonDot.tsx | 91 ++-- .../Forms/RadioButtonList/RadioButtonList.tsx | 8 +- .../src/components/Forms/commonStyles.ts | 118 +++-- .../src/components/Graph/GraphContextMenu.tsx | 18 +- .../src/components/Graph/GraphWithLegend.tsx | 24 +- .../src/components/Icon/Icon.story.tsx | 58 +-- .../grafana-ui/src/components/Icon/Icon.tsx | 26 +- .../IconButton/IconButton.story.tsx | 32 +- .../src/components/IconButton/IconButton.tsx | 91 ++-- .../src/components/InfoBox/FeatureInfoBox.tsx | 6 +- .../src/components/InfoBox/InfoBox.story.tsx | 2 +- .../src/components/InfoBox/InfoBox.tsx | 8 +- .../grafana-ui/src/components/Input/Input.tsx | 294 +++++------ .../InteractiveTable/ExpanderCell.tsx | 10 +- .../InteractiveTable/InteractiveTable.tsx | 166 ++++--- .../src/components/Layout/Layout.tsx | 64 ++- .../src/components/List/AbstractList.tsx | 16 +- .../components/List/List.internal.story.tsx | 24 +- .../LoadingPlaceholder/LoadingPlaceholder.tsx | 6 +- .../MatchersUI/FieldValueMatcher.tsx | 14 +- .../src/components/Menu/MenuGroup.tsx | 10 +- .../src/components/Menu/MenuItem.tsx | 146 +++--- .../src/components/Menu/SubMenu.tsx | 52 +- .../src/components/Modal/Modal.story.tsx | 6 +- .../src/components/Modal/getModalStyles.ts | 142 +++--- .../src/components/Monaco/CodeEditor.tsx | 8 +- .../src/components/PageLayout/PageToolbar.tsx | 184 ++++--- .../src/components/Pagination/Pagination.tsx | 22 +- .../PanelContainer/PanelContainer.tsx | 11 +- .../src/components/QueryField/QueryField.tsx | 8 +- .../SecretFormField/SecretFormField.tsx | 16 +- .../SecretTextArea/SecretTextArea.tsx | 10 +- .../src/components/Segment/SegmentInput.tsx | 6 +- .../src/components/Segment/SegmentSection.tsx | 14 +- .../src/components/Segment/styles.ts | 24 +- .../components/Select/IndicatorsContainer.tsx | 6 +- .../src/components/Select/InputControl.tsx | 36 +- .../src/components/Select/SelectContainer.tsx | 34 +- .../components/Select/SelectOptionGroup.tsx | 38 +- .../src/components/Select/SingleValue.tsx | 66 +-- .../src/components/Select/getSelectStyles.ts | 236 ++++----- .../src/components/Slider/styles.ts | 69 +-- .../src/components/Switch/Switch.tsx | 188 ++++--- .../TabbedContainer/TabbedContainer.tsx | 44 +- .../src/components/Table/Filter.tsx | 16 +- .../src/components/Table/FilterList.tsx | 28 +- .../src/components/Table/FilterPopup.tsx | 44 +- .../src/components/Table/FooterCell.tsx | 20 +- .../src/components/Table/JSONViewCell.tsx | 8 +- .../grafana-ui/src/components/Table/styles.ts | 460 +++++++++--------- .../TableInputCSV/TableInputCSV.tsx | 32 +- .../src/components/Tabs/Counter.tsx | 20 +- .../grafana-ui/src/components/Tabs/Tab.tsx | 100 ++-- .../src/components/Tabs/TabContent.tsx | 6 +- .../src/components/Tabs/TabsBar.tsx | 24 +- .../src/components/Tabs/VerticalTab.tsx | 67 ++- .../grafana-ui/src/components/Tags/Tag.tsx | 40 +- .../src/components/Tags/TagList.tsx | 28 +- .../src/components/TagsInput/TagsInput.tsx | 32 +- .../src/components/TextArea/TextArea.tsx | 14 +- .../src/components/ThemeDemos/ThemeDemo.tsx | 98 ++-- .../src/components/Toggletip/Toggletip.tsx | 6 +- .../ToolbarButton/ToolbarButton.tsx | 202 ++++---- .../ToolbarButton/ToolbarButtonRow.tsx | 66 +-- .../components/Typeahead/TypeaheadInfo.tsx | 34 +- .../components/Typeahead/TypeaheadItem.tsx | 73 ++- .../components/UsersIndicator/UserIcon.tsx | 113 +++-- .../UsersIndicator/UsersIndicator.tsx | 24 +- .../src/components/VizLegend/SeriesIcon.tsx | 10 +- .../components/VizLegend/VizLegendList.tsx | 52 +- .../VizLegend/VizLegendListItem.tsx | 58 +-- .../VizLegend/VizLegendStatsList.tsx | 14 +- .../components/VizLegend/VizLegendTable.tsx | 52 +- .../VizLegend/VizLegendTableItem.tsx | 76 +-- .../src/components/VizTooltip/SeriesTable.tsx | 58 +-- .../src/components/VizTooltip/VizTooltip.tsx | 16 +- .../VizTooltip/VizTooltipContainer.tsx | 4 +- .../components/transitions/FadeTransition.tsx | 36 +- .../transitions/SlideOutTransition.tsx | 48 +- .../components/uPlot/geometries/XYCanvas.tsx | 12 +- .../themes/GlobalStyles/angularPanelStyles.ts | 56 +-- .../src/themes/GlobalStyles/card.ts | 300 ++++++------ .../src/themes/GlobalStyles/elements.ts | 262 +++++----- .../src/themes/GlobalStyles/extra.ts | 10 +- .../src/themes/GlobalStyles/forms.ts | 56 +-- .../src/themes/GlobalStyles/markdownStyles.ts | 4 +- .../src/themes/GlobalStyles/page.ts | 180 +++---- .../src/themes/ThemeContext.test.tsx | 6 +- packages/grafana-ui/src/themes/mixins.ts | 18 +- .../utils/storybook/DashboardStoryCanvas.tsx | 14 +- .../src/utils/storybook/StoryExample.tsx | 16 +- .../utils/storybook/withStoryContainer.tsx | 24 +- packages/grafana-ui/src/utils/tooltipUtils.ts | 268 +++++----- 171 files changed, 4583 insertions(+), 4739 deletions(-) diff --git a/packages/grafana-ui/.eslintrc b/packages/grafana-ui/.eslintrc index 85ca20d720b..995c2caa896 100644 --- a/packages/grafana-ui/.eslintrc +++ b/packages/grafana-ui/.eslintrc @@ -1,5 +1,6 @@ { "rules": { + "@emotion/syntax-preference": [2, "object"], "no-restricted-imports": [ "error", { diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index 42ccd327722..89c6f56e22b 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -124,66 +124,66 @@ const getStyles = ( const borderColor = tinycolor2(color.border).setAlpha(0.2).toString(); return { - alert: css` - flex-grow: 1; - position: relative; - border-radius: ${borderRadius}; - display: flex; - flex-direction: row; - align-items: stretch; - background: ${color.transparent}; - box-shadow: ${elevated ? theme.shadows.z3 : 'none'}; - padding: ${theme.spacing(1, 2)}; - border: 1px solid ${borderColor}; - margin-bottom: ${theme.spacing(bottomSpacing ?? 2)}; - margin-top: ${theme.spacing(topSpacing ?? 0)}; + alert: css({ + flexGrow: 1, + position: 'relative', + borderRadius, + display: 'flex', + flexDirection: 'row', + alignItems: 'stretch', + background: color.transparent, + boxShadow: elevated ? theme.shadows.z3 : 'none', + padding: theme.spacing(1, 2), + border: `1px solid ${borderColor}`, + marginBottom: theme.spacing(bottomSpacing ?? 2), + marginTop: theme.spacing(topSpacing ?? 0), - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: ${theme.colors.background.primary}; - z-index: -1; - } - `, - icon: css` - padding: ${theme.spacing(1, 2, 0, 0)}; - color: ${color.text}; - display: flex; - `, + '&:before': { + content: '""', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + background: theme.colors.background.primary, + zIndex: -1, + }, + }), + icon: css({ + padding: theme.spacing(1, 2, 0, 0), + color: color.text, + display: 'flex', + }), title: css({ fontWeight: theme.typography.fontWeightMedium, }), - body: css` - padding: ${theme.spacing(1, 0)}; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - overflow-wrap: break-word; - word-break: break-word; - `, - content: css` - padding-top: ${hasTitle ? theme.spacing(0.5) : 0}; - max-height: 50vh; - overflow-y: auto; - `, - buttonWrapper: css` - margin-left: ${theme.spacing(1)}; - display: flex; - align-items: center; - align-self: center; - `, - close: css` - position: relative; - color: ${theme.colors.text.secondary}; - background: none; - display: flex; - top: -6px; - right: -14px; - `, + body: css({ + padding: theme.spacing(1, 0), + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + overflowWrap: 'break-word', + wordBreak: 'break-word', + }), + content: css({ + paddingTop: hasTitle ? theme.spacing(0.5) : 0, + maxHeight: '50vh', + overflowY: 'auto', + }), + buttonWrapper: css({ + marginLeft: theme.spacing(1), + display: 'flex', + alignItems: 'center', + alignSelf: 'center', + }), + close: css({ + position: 'relative', + color: theme.colors.text.secondary, + background: 'none', + display: 'flex', + top: '-6px', + right: '-14px', + }), }; }; diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx index e97bcd10526..34becbe0c5a 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.tsx @@ -55,18 +55,18 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => { } return { - wrapper: css` - display: inline-flex; - padding: 1px 4px; - border-radius: ${theme.shape.radius.default}; - background: ${bgColor}; - border: 1px solid ${borderColor}; - color: ${textColor}; - font-weight: ${theme.typography.fontWeightRegular}; - gap: 2px; - font-size: ${theme.typography.bodySmall.fontSize}; - line-height: ${theme.typography.bodySmall.lineHeight}; - align-items: center; - `, + wrapper: css({ + display: 'inline-flex', + padding: '1px 4px', + borderRadius: theme.shape.radius.default, + background: bgColor, + border: `1px solid ${borderColor}`, + color: textColor, + fontWeight: theme.typography.fontWeightRegular, + gap: '2px', + fontSize: theme.typography.bodySmall.fontSize, + lineHeight: theme.typography.bodySmall.lineHeight, + alignItems: 'center', + }), }; }; diff --git a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx index 99f6ba003e1..31f47aae5ee 100644 --- a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx +++ b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx @@ -101,57 +101,57 @@ export const Label = forwardRef( Label.displayName = 'Label'; const getLabelStyles = (theme: GrafanaTheme2) => ({ - base: css` - display: inline-block; - cursor: pointer; - font-size: ${theme.typography.size.sm}; - line-height: ${theme.typography.bodySmall.lineHeight}; - background-color: ${theme.colors.background.secondary}; - color: ${theme.colors.text.primary}; - white-space: nowrap; - text-shadow: none; - padding: ${theme.spacing(0.5)}; - border-radius: ${theme.shape.borderRadius()}; - border: none; - margin-right: ${theme.spacing(1)}; - margin-bottom: ${theme.spacing(0.5)}; - `, - loading: css` - font-weight: ${theme.typography.fontWeightMedium}; - background-color: ${theme.colors.primary.shade}; - color: ${theme.colors.text.primary}; - animation: pulse 3s ease-out 0s infinite normal forwards; - @keyframes pulse { - 0% { - color: ${theme.colors.text.primary}; - } - 50% { - color: ${theme.colors.text.secondary}; - } - 100% { - color: ${theme.colors.text.disabled}; - } - } - `, - active: css` - font-weight: ${theme.typography.fontWeightMedium}; - background-color: ${theme.colors.primary.main}; - color: ${theme.colors.primary.contrastText}; - `, - matchHighLight: css` - background: inherit; - color: ${theme.components.textHighlight.text}; - background-color: ${theme.components.textHighlight.background}; - `, - hidden: css` - opacity: 0.6; - cursor: default; - border: 1px solid transparent; - `, - hover: css` - &:hover { - opacity: 0.85; - cursor: pointer; - } - `, + base: css({ + display: 'inline-block', + cursor: 'pointer', + fontSize: theme.typography.size.sm, + lineHeight: theme.typography.bodySmall.lineHeight, + backgroundColor: theme.colors.background.secondary, + color: theme.colors.text.primary, + whiteSpace: 'nowrap', + textShadow: 'none', + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius(), + border: 'none', + marginRight: theme.spacing(1), + marginBottom: theme.spacing(0.5), + }), + loading: css({ + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.colors.primary.shade, + color: theme.colors.text.primary, + animation: 'pulse 3s ease-out 0s infinite normal forwards', + '@keyframes pulse': { + '0%': { + color: theme.colors.text.primary, + }, + '50%': { + color: theme.colors.text.secondary, + }, + '100%': { + color: theme.colors.text.disabled, + }, + }, + }), + active: css({ + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.colors.primary.main, + color: theme.colors.primary.contrastText, + }), + matchHighLight: css({ + background: 'inherit', + color: theme.components.textHighlight.text, + backgroundColor: theme.components.textHighlight.background, + }), + hidden: css({ + opacity: 0.6, + cursor: 'default', + border: '1px solid transparent', + }), + hover: css({ + ['&:hover']: { + opacity: 0.85, + cursor: 'pointer', + }, + }), }); diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index c71f4c92247..b9fe6e0d7bf 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -191,11 +191,11 @@ export const getButtonStyles = (props: StyleProps) => { '&[disabled]': disabledStyles, }), disabled: css(disabledStyles), - img: css` - width: 16px; - height: 16px; - margin: ${theme.spacing(0, 1, 0, 0.5)}; - `, + img: css({ + width: '16px', + height: '16px', + margin: theme.spacing(0, 1, 0, 0.5), + }), icon: iconOnly ? css({ // Important not to set margin bottom here as it would override internal icon bottom margin @@ -334,25 +334,25 @@ export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVar } export const clearButtonStyles = (theme: GrafanaTheme2) => { - return css` - background: transparent; - color: ${theme.colors.text.primary}; - border: none; - padding: 0; - `; + return css({ + background: 'transparent', + color: theme.colors.text.primary, + border: 'none', + padding: 0, + }); }; export const clearLinkButtonStyles = (theme: GrafanaTheme2) => { - return css` - background: transparent; - border: none; - padding: 0; - font-family: inherit; - color: inherit; - height: 100%; - &:hover { - background: transparent; - color: inherit; - } - `; + return css({ + background: 'transparent', + border: 'none', + padding: 0, + fontFamily: 'inherit', + color: 'inherit', + height: '100%', + '&:hover': { + background: 'transparent', + color: 'inherit', + }, + }); }; diff --git a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx index 3fe6187198b..49340d5f933 100644 --- a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx @@ -22,20 +22,18 @@ export const ButtonGroup = forwardRef(({ className, child ButtonGroup.displayName = 'ButtonGroup'; const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - display: flex; + wrapper: css({ + display: 'flex', - > .button-group:not(:first-child) > button, - > button:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } + '> .button-group:not(:first-child) > button, > button:not(:first-child)': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, - > .button-group:not(:last-child) > button, - > button:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-width: 0; - } - `, + '> .button-group:not(:last-child) > button, > button:not(:last-child)': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRightWidth: 0, + }, + }), }); diff --git a/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx b/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx index 48f9827a7be..446c9a2cbed 100644 --- a/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx +++ b/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx @@ -14,21 +14,21 @@ export const FullWidthButtonContainer = ({ className, children }: React.PropsWit }; const getStyles = stylesFactory(() => { - return css` - display: flex; + return css({ + display: 'flex', - button { - flex-grow: 1; - justify-content: center; - } + button: { + flexGrow: 1, + justifyContent: 'center', + }, - > * { - flex-grow: 1; - } + '> *': { + flexGrow: 1, + }, - label { - flex-grow: 1; - text-align: center; - } - `; + label: { + flexGrow: 1, + textAlign: 'center', + }, + }); }); diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx index 5f6ae1f3adc..c849c8edbfc 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx @@ -29,17 +29,17 @@ export interface ButtonCascaderProps { const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - popup: css` - label: popup; - z-index: ${theme.zIndex.dropdown}; - `, + popup: css({ + label: 'popup', + zIndex: theme.zIndex.dropdown, + }), icons: { - right: css` - margin: 1px 0 0 4px; - `, - left: css` - margin: -1px 4px 0 0; - `, + right: css({ + margin: '1px 0 0 4px', + }), + left: css({ + margin: '-1px 4px 0 0', + }), }, }; }); diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx index ada7fa8d161..c78b57997da 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx @@ -25,22 +25,22 @@ export const CallToActionCard = ({ message, callToActionElement, footer, classNa }; const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - label: call-to-action-card; - padding: ${theme.spacing(3)}; - background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.radius.default}; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex-grow: 1; - `, - message: css` - margin-bottom: ${theme.spacing(3)}; - font-style: italic; - `, - footer: css` - margin-top: ${theme.spacing(3)}}; - `, + wrapper: css({ + label: 'call-to-action-card', + padding: theme.spacing(3), + background: theme.colors.background.secondary, + borderRadius: theme.shape.radius.default, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + flexGrow: 1, + }), + message: css({ + marginBottom: theme.spacing(3), + fontStyle: 'italic', + }), + footer: css({ + marginTop: theme.spacing(3), + }), }); diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index 2ca46f9d4bc..af92839c29c 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -187,9 +187,9 @@ const Figure = ({ children, align = 'start', className }: ChildProps & { align?: className={cx( styles.media, className, - css` - align-self: ${align}; - ` + css({ + alignSelf: align, + }) )} > {children} @@ -329,13 +329,13 @@ SecondaryActions.displayName = 'SecondaryActions'; */ export const getCardStyles = (theme: GrafanaTheme2) => { return { - inner: css` - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - flex-wrap: wrap; - `, + inner: css({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + flexWrap: 'wrap', + }), ...getHeadingStyles(theme), ...getMetaStyles(theme), ...getDescriptionStyles(theme), diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx index dc2be078fa2..844f40ab2d2 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx @@ -63,11 +63,11 @@ export interface CascaderOption { children?: CascaderOption[]; } -const disableDivFocus = css(` -&:focus{ - outline: none; -} -`); +const disableDivFocus = css({ + '&:focus': { + outline: 'none', + }, +}); const DEFAULT_SEPARATOR = '/'; diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx index 753b1c9fe84..a1526af6154 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx @@ -8,88 +8,87 @@ import { clearButtonStyles } from '../Button'; import { Icon } from '../Icon/Icon'; const getStyles = (theme: GrafanaTheme2) => ({ - collapse: css` - label: collapse; - margin-bottom: ${theme.spacing(1)}; - background-color: ${theme.colors.background.primary}; - border: 1px solid ${theme.colors.border.weak}; - position: relative; - border-radius: ${theme.shape.radius.default}; - width: 100%; - display: flex; - flex-direction: column; - flex: 1 1 0; - `, - collapseBody: css` - label: collapse__body; - padding: ${theme.spacing(theme.components.panel.padding)}; - padding-top: 0; - flex: 1; - overflow: hidden; - display: flex; - flex-direction: column; - `, - bodyContentWrapper: css` - label: bodyContentWrapper; - flex: 1; - overflow: hidden; - `, - loader: css` - label: collapse__loader; - height: 2px; - position: relative; - overflow: hidden; - background: none; - margin: ${theme.spacing(0.5)}; - `, - loaderActive: css` - label: collapse__loader_active; - &:after { - content: ' '; - display: block; - width: 25%; - top: 0; - top: -50%; - height: 250%; - position: absolute; - animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms; - animation-iteration-count: 100; - left: -25%; - background: ${theme.colors.primary.main}; - } - @keyframes loader { - from { - left: -25%; - opacity: 0.1; - } - to { - left: 100%; - opacity: 1; - } - } - `, - header: css` - label: collapse__header; - padding: ${theme.spacing(1, 2, 1, 2)}; - display: flex; - transition: all 0.1s linear; - `, - headerCollapsed: css` - label: collapse__header--collapsed; - padding: ${theme.spacing(1, 2, 1, 2)}; - `, - headerLabel: css` - label: collapse__header-label; - font-weight: ${theme.typography.fontWeightMedium}; - margin-right: ${theme.spacing(1)}; - font-size: ${theme.typography.size.md}; - display: flex; - flex: 0 0 100%; - `, - icon: css` - label: collapse__icon; - margin: ${theme.spacing(0.25, 1, 0, -1)}; - `, + collapse: css({ + label: 'collapse', + marginBottom: theme.spacing(1), + backgroundColor: theme.colors.background.primary, + border: `1px solid ${theme.colors.border.weak}`, + position: 'relative', + borderRadius: theme.shape.radius.default, + width: '100%', + display: 'flex', + flexDirection: 'column', + flex: '1 1 0', + }), + collapseBody: css({ + label: 'collapse__body', + padding: theme.spacing(theme.components.panel.padding), + paddingTop: 0, + flex: 1, + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + }), + bodyContentWrapper: css({ + label: 'bodyContentWrapper', + flex: 1, + overflow: 'hidden', + }), + loader: css({ + label: 'collapse__loader', + height: '2px', + position: 'relative', + overflow: 'hidden', + background: 'none', + margin: theme.spacing(0.5), + }), + loaderActive: css({ + label: 'collapse__loader_active', + '&:after': { + content: "' '", + display: 'block', + width: '25%', + top: 0, + height: '250%', + position: 'absolute', + animation: 'loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms', + animationIterationCount: 100, + left: '-25%', + background: theme.colors.primary.main, + }, + '@keyframes loader': { + from: { + left: '-25%', + opacity: 0.1, + }, + to: { + left: '100%', + opacity: 1, + }, + }, + }), + header: css({ + label: 'collapse__header', + padding: theme.spacing(1, 2, 1, 2), + display: 'flex', + transition: 'all 0.1s linear', + }), + headerCollapsed: css({ + label: 'collapse__header--collapsed', + padding: theme.spacing(1, 2, 1, 2), + }), + headerLabel: css({ + label: 'collapse__header-label', + fontWeight: theme.typography.fontWeightMedium, + marginRight: theme.spacing(1), + fontSize: theme.typography.size.md, + display: 'flex', + flex: '0 0 100%', + }), + icon: css({ + label: 'collapse__icon', + margin: theme.spacing(0.25, 1, 0, -1), + }), }); export interface Props { diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx index 257f5993d1e..7ab60ed10ca 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx @@ -92,17 +92,18 @@ const ColorPreview = ({ color, onClick, disabled, ariaLabel }: ColorPreviewProps disabled={disabled || !onClick} className={cx( styles, - css` - background-color: ${color}; - ` + css({ + backgroundColor: color, + }) )} /> ); }; -const getColorPreviewStyles = (theme: GrafanaTheme2) => css` - height: 100%; - width: ${theme.spacing.gridSize * 4}px; - border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()}; - border: 1px solid ${theme.colors.border.medium}; -`; +const getColorPreviewStyles = (theme: GrafanaTheme2) => + css({ + height: '100%', + width: `${theme.spacing.gridSize * 4}px`, + borderRadius: `${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()}`, + border: `1px solid ${theme.colors.border.medium}`, + }); diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index 2b5953b7638..f6bd884914a 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -89,29 +89,29 @@ export const SeriesColorPicker = withTheme2(colorPickerFactory(SeriesColorPicker const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - colorPicker: css` - position: absolute; - z-index: ${theme.zIndex.tooltip}; - color: ${theme.colors.text.primary}; - max-width: 400px; - font-size: ${theme.typography.size.sm}; + colorPicker: css({ + position: 'absolute', + zIndex: theme.zIndex.tooltip, + color: theme.colors.text.primary, + maxWidth: '400px', + fontSize: theme.typography.size.sm, // !important because these styles are also provided to popper via .popper classes from Tooltip component // hope to get rid of those soon - padding: 15px !important; - & [data-placement^='top'] { - padding-left: 0 !important; - padding-right: 0 !important; - } - & [data-placement^='bottom'] { - padding-left: 0 !important; - padding-right: 0 !important; - } - & [data-placement^='left'] { - padding-top: 0 !important; - } - & [data-placement^='right'] { - padding-top: 0 !important; - } - `, + padding: '15px !important', + '& [data-placement^="top"]': { + paddingLeft: '0 !important', + paddingRight: '0 !important', + }, + '& [data-placement^="bottom"]': { + paddingLeft: '0 !important', + paddingRight: '0 !important', + }, + '& [data-placement^="left"]': { + paddingTop: '0 !important', + }, + '& [data-placement^="right"]': { + paddingTop: '0 !important', + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx index 08935d39569..dc1d83d67a0 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx @@ -80,19 +80,19 @@ ColorPickerInput.displayName = 'ColorPickerInput'; const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - position: relative; - `, - picker: css` - &.react-colorful { - position: absolute; - width: 100%; - z-index: 11; - bottom: 36px; - } - `, - inner: css` - position: absolute; - `, + wrapper: css({ + position: 'relative', + }), + picker: css({ + '&.react-colorful': { + position: 'absolute', + width: '100%', + zIndex: 11, + bottom: '36px', + }, + }), + inner: css({ + position: 'absolute', + }), }; }; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx index 110f0f30dfc..3be130383da 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx @@ -140,50 +140,50 @@ ColorPickerPopover.displayName = 'ColorPickerPopover'; const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - colorPickerPopover: css` - border-radius: ${theme.shape.borderRadius()}; - box-shadow: ${theme.shadows.z3}; - background: ${theme.colors.background.primary}; - border: 1px solid ${theme.colors.border.weak}; + colorPickerPopover: css({ + borderRadius: theme.shape.borderRadius(), + boxShadow: theme.shadows.z3, + background: theme.colors.background.primary, + border: `1px solid ${theme.colors.border.weak}`, - .ColorPickerPopover__tab { - width: 50%; - text-align: center; - padding: ${theme.spacing(1, 0)}; - background: ${theme.colors.background.secondary}; - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - cursor: pointer; - border: none; + '.ColorPickerPopover__tab': { + width: '50%', + textAlign: 'center', + padding: theme.spacing(1, 0), + background: theme.colors.background.secondary, + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + cursor: 'pointer', + border: 'none', - &:focus:not(:focus-visible) { - outline: none; - box-shadow: none; - } + '&:focus:not(:focus-visible)': { + outline: 'none', + boxShadow: 'none', + }, - :focus-visible { - position: relative; - } - } + ':focus-visible': { + position: 'relative', + }, + }, - .ColorPickerPopover__tab--active { - color: ${theme.colors.text.primary}; - font-weight: ${theme.typography.fontWeightMedium}; - background: ${theme.colors.background.primary}; - } - `, - colorPickerPopoverContent: css` - width: 246px; - font-size: ${theme.typography.bodySmall.fontSize}; - min-height: 184px; - padding: ${theme.spacing(1)}; - display: flex; - flex-direction: column; - `, - colorPickerPopoverTabs: css` - display: flex; - width: 100%; - border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0; - `, + '.ColorPickerPopover__tab--active': { + color: theme.colors.text.primary, + fontWeight: theme.typography.fontWeightMedium, + background: theme.colors.background.primary, + }, + }), + colorPickerPopoverContent: css({ + width: '246px', + fontSize: theme.typography.bodySmall.fontSize, + minHeight: '184px', + padding: theme.spacing(1), + display: 'flex', + flexDirection: 'column', + }), + colorPickerPopoverTabs: css({ + display: 'flex', + width: '100%', + borderRadius: `${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0`, + }), }; }); diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx index 18ff38072b8..5ea91f413ae 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx @@ -44,27 +44,27 @@ export default NamedColorsGroup; const getStyles = (theme: GrafanaTheme2) => { return { - colorRow: css` - display: grid; - grid-template-columns: 25% 1fr; - grid-column-gap: ${theme.spacing(2)}; - padding: ${theme.spacing(0.5, 0)}; + colorRow: css({ + display: 'grid', + gridTemplateColumns: '25% 1fr', + gridColumnGap: theme.spacing(2), + padding: theme.spacing(0.5, 0), - &:hover { - background: ${theme.colors.background.secondary}; - } - `, - colorLabel: css` - padding-left: ${theme.spacing(2)}; - display: flex; - align-items: center; - `, - swatchRow: css` - display: flex; - gap: ${theme.spacing(1)}; - align-items: center; - justify-content: space-around; - flex-direction: row; - `, + '&:hover': { + background: theme.colors.background.secondary, + }, + }), + colorLabel: css({ + paddingLeft: theme.spacing(2), + display: 'flex', + alignItems: 'center', + }), + swatchRow: css({ + display: 'flex', + gap: theme.spacing(1), + alignItems: 'center', + justifyContent: 'space-around', + flexDirection: 'row', + }), }; }; diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx index 266eb238aaa..fa7c9ab02f3 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx @@ -45,20 +45,20 @@ export const NamedColorsPalette = ({ color, onChange }: NamedColorsPaletteProps) const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - display: flex; - flex-direction: column; - `, - extraColors: css` - display: flex; - align-items: center; - justify-content: space-around; - gap: ${theme.spacing(1)}; - padding: ${theme.spacing(1, 0)}; - `, - swatches: css` - display: grid; - flex-grow: 1; - `, + container: css({ + display: 'flex', + flexDirection: 'column', + }), + extraColors: css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-around', + gap: theme.spacing(1), + padding: theme.spacing(1, 0), + }), + swatches: css({ + display: 'grid', + flexGrow: 1, + }), }; }; diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index f9a8d3b6cab..d1ca21ad805 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -47,12 +47,12 @@ export const SeriesColorPickerPopoverWithTheme = withTheme2(SeriesColorPickerPop const getStyles = () => { return { - colorPickerAxisSwitch: css` - width: 100%; - `, - colorPickerAxisSwitchLabel: css` - display: flex; - flex-grow: 1; - `, + colorPickerAxisSwitch: css({ + width: '100%', + }), + colorPickerAxisSwitchLabel: css({ + display: 'flex', + flexGrow: 1, + }), }; }; diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx index 819a5256de0..c6087a16416 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx @@ -44,35 +44,34 @@ const SpectrumPalette = ({ color, onChange }: SpectrumPaletteProps) => { }; export const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - flex-grow: 1; - `, - root: css` - &.react-colorful { - width: auto; - } + wrapper: css({ + flexGrow: 1, + }), + root: css({ + '&.react-colorful': { + width: 'auto', + }, - .react-colorful { - &__saturation { - border-radius: ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0; - } - &__alpha { - border-radius: 0 0 ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)}; - } - &__alpha, - &__hue { - height: ${theme.spacing(2)}; - position: relative; - } - &__pointer { - height: ${theme.spacing(2)}; - width: ${theme.spacing(2)}; - } - } - `, - colorInput: css` - margin-top: ${theme.spacing(2)}; - `, + '.react-colorful': { + '&__saturation': { + borderRadius: `${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0`, + }, + '&__alpha': { + borderRadius: `0 0 ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)}`, + }, + '&__alpha, &__hue': { + height: theme.spacing(2), + position: 'relative', + }, + '&__pointer': { + height: theme.spacing(2), + width: theme.spacing(2), + }, + }, + }), + colorInput: css({ + marginTop: theme.spacing(2), + }), }); export default SpectrumPalette; diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index aa806566705..e12ed647455 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx @@ -146,58 +146,51 @@ export const ConfirmButton = withTheme2(UnThemedConfirmButton); const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - buttonContainer: css` - display: flex; - align-items: center; - justify-content: flex-end; - `, - buttonDisabled: css` - text-decoration: none; - color: ${theme.colors.text.primary}; - opacity: 0.65; - pointer-events: none; - `, - buttonShow: css` - opacity: 1; - transition: opacity 0.1s ease; - z-index: 2; - `, - buttonHide: css` - opacity: 0; - transition: - opacity 0.1s ease, - visibility 0 0.1s; - visibility: hidden; - z-index: 0; - `, - confirmButton: css` - align-items: flex-start; - background: ${theme.colors.background.primary}; - display: flex; - position: absolute; - pointer-events: none; - `, - confirmButtonShow: css` - z-index: 1; - opacity: 1; - transition: - opacity 0.08s ease-out, - transform 0.1s ease-out; - transform: translateX(0); - pointer-events: all; - `, - confirmButtonHide: css` - opacity: 0; - visibility: hidden; - transition: - opacity 0.12s ease-in, - transform 0.14s ease-in, - visibility 0s 0.12s; - transform: translateX(100px); - `, - disabled: css` - cursor: not-allowed; - `, + buttonContainer: css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + }), + buttonDisabled: css({ + textDecoration: 'none', + color: theme.colors.text.primary, + opacity: 0.65, + pointerEvents: 'none', + }), + buttonShow: css({ + opacity: 1, + transition: 'opacity 0.1s ease', + zIndex: 2, + }), + buttonHide: css({ + opacity: 0, + transition: 'opacity 0.1s ease, visibility 0 0.1s', + visibility: 'hidden', + zIndex: 0, + }), + confirmButton: css({ + alignItems: 'flex-start', + background: theme.colors.background.primary, + display: 'flex', + position: 'absolute', + pointerEvents: 'none', + }), + confirmButtonShow: css({ + zIndex: 1, + opacity: 1, + transition: 'opacity 0.08s ease-out, transform 0.1s ease-out', + transform: 'translateX(0)', + pointerEvents: 'all', + }), + confirmButtonHide: css({ + opacity: 0, + visibility: 'hidden', + transition: 'opacity 0.12s ease-in, transform 0.14s ease-in, visibility 0s 0.12s', + transform: 'translateX(100px)', + }), + disabled: css({ + cursor: 'not-allowed', + }), }; }); diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx index ea077012a61..664b8da8ee6 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx @@ -131,9 +131,9 @@ export const ConfirmModal = ({ }; const getStyles = (theme: GrafanaTheme2) => ({ - modal: css` - width: 500px; - `, + modal: css({ + width: '500px', + }), modalText: css({ fontSize: theme.typography.h5.fontSize, color: theme.colors.text.primary, diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 2567be5b644..a11ca23fb94 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -155,57 +155,59 @@ export default CustomScrollbar; const getStyles = (theme: GrafanaTheme2) => { return { - customScrollbar: css` + customScrollbar: css({ // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to // make scroll working it should fit outer container size (scroll appears only when inner container size is // greater than outer one). - display: flex; - flex-grow: 1; - .scrollbar-view { - display: flex; - flex-grow: 1; - flex-direction: column; - } - .track-vertical { - border-radius: ${theme.shape.borderRadius(2)}; - width: ${theme.spacing(1)} !important; - right: 0px; - bottom: ${theme.spacing(0.25)}; - top: ${theme.spacing(0.25)}; - } - .track-horizontal { - border-radius: ${theme.shape.borderRadius(2)}; - height: ${theme.spacing(1)} !important; - right: ${theme.spacing(0.25)}; - bottom: ${theme.spacing(0.25)}; - left: ${theme.spacing(0.25)}; - } - .thumb-vertical { - background: ${theme.colors.action.focus}; - border-radius: ${theme.shape.borderRadius(2)}; - opacity: 0; - } - .thumb-horizontal { - background: ${theme.colors.action.focus}; - border-radius: ${theme.shape.borderRadius(2)}; - opacity: 0; - } - &:hover { - .thumb-vertical, - .thumb-horizontal { - opacity: 1; - transition: opacity 0.3s ease-in-out; - } - } - `, + display: 'flex', + flexGrow: 1, + '.scrollbar-view': { + display: 'flex', + flexGrow: 1, + flexDirection: 'column', + }, + '.track-vertical': { + borderRadius: theme.shape.borderRadius(2), + width: `${theme.spacing(1)} !important`, + right: 0, + bottom: theme.spacing(0.25), + top: theme.spacing(0.25), + }, + '.track-horizontal': { + borderRadius: theme.shape.borderRadius(2), + height: `${theme.spacing(1)} !important`, + right: theme.spacing(0.25), + bottom: theme.spacing(0.25), + left: theme.spacing(0.25), + }, + '.thumb-vertical': { + background: theme.colors.action.focus, + borderRadius: theme.shape.borderRadius(2), + opacity: 0, + }, + '.thumb-horizontal': { + background: theme.colors.action.focus, + borderRadius: theme.shape.borderRadius(2), + opacity: 0, + }, + '&:hover': { + '.thumb-vertical, .thumb-horizontal': { + opacity: 1, + transition: 'opacity 0.3s ease-in-out', + }, + }, + }), // override the scroll container position so that the scroll indicators // are positioned at the top and bottom correctly. // react-custom-scrollbars doesn't provide any way for us to hook in nicely, // so we have to override with !important. feelsbad. - scrollbarWithScrollIndicators: css` - .scrollbar-view { - position: static !important; - } - `, + scrollbarWithScrollIndicators: css({ + '.scrollbar-view': { + // Need type assertion here due to the use of !important + // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + position: 'static !important' as 'static', + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap index 93495137aee..2ebb23e7502 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap +++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap @@ -2,7 +2,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
({ - listItem: css` - margin-bottom: ${theme.spacing()}; - `, - infoText: css` - padding-bottom: ${theme.spacing(2)}; - margin-left: 66px; - color: ${theme.colors.text.secondary}; - `, + listItem: css({ + marginBottom: theme.spacing(), + }), + infoText: css({ + paddingBottom: theme.spacing(2), + marginLeft: '66px', + color: theme.colors.text.secondary, + }), }); export const DataLinkEditor = React.memo(({ index, value, onChange, suggestions, isLast }: DataLinkEditorProps) => { diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx index 97b9a6774dc..17a6917b470 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx @@ -47,27 +47,27 @@ const plugins = [ const getStyles = (theme: GrafanaTheme2) => ({ input: getInputStyles({ theme, invalid: false }).input, - editor: css` - .token.builtInVariable { - color: ${theme.colors.success.text}; - } - .token.variable { - color: ${theme.colors.primary.text}; - } - `, - suggestionsWrapper: css` - box-shadow: ${theme.shadows.z2}; - `, + editor: css({ + '.token.builtInVariable': { + color: theme.colors.success.text, + }, + '.token.variable': { + color: theme.colors.primary.text, + }, + }), + suggestionsWrapper: css({ + boxShadow: theme.shadows.z2, + }), // Wrapper with child selector needed. // When classnames are applied to the same element as the wrapper, it causes the suggestions to stop working - wrapperOverrides: css` - width: 100%; - > .slate-query-field__wrapper { - padding: 0; - background-color: transparent; - border: none; - } - `, + wrapperOverrides: css({ + width: '100%', + '> .slate-query-field__wrapper': { + padding: 0, + backgroundColor: 'transparent', + border: 'none', + }, + }), }); // This memoised also because rerendering the slate editor grabs focus which created problem in some cases this @@ -238,9 +238,9 @@ export const DataLinkInput = memo( className={cx( styles.editor, styles.input, - css` - padding: 3px 8px; - ` + css({ + padding: '3px 8px', + }) )} />
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx index ecce2409816..37cf32e690f 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx @@ -18,38 +18,38 @@ interface DataLinkSuggestionsProps { const getStyles = (theme: GrafanaTheme2) => { return { - list: css` - border-bottom: 1px solid ${theme.colors.border.weak}; - &:last-child { - border: none; - } - `, - wrapper: css` - background: ${theme.colors.background.primary}; - width: 250px; - `, - item: css` - background: none; - padding: 2px 8px; - color: ${theme.colors.text.primary}; - cursor: pointer; - &:hover { - background: ${theme.colors.action.hover}; - } - `, - label: css` - color: ${theme.colors.text.secondary}; - `, - activeItem: css` - background: ${theme.colors.background.secondary}; - &:hover { - background: ${theme.colors.background.secondary}; - } - `, - itemValue: css` - font-family: ${theme.typography.fontFamilyMonospace}; - font-size: ${theme.typography.size.sm}; - `, + list: css({ + borderBottom: `1px solid ${theme.colors.border.weak}`, + '&:last-child': { + border: 'none', + }, + }), + wrapper: css({ + background: theme.colors.background.primary, + width: '250px', + }), + item: css({ + background: 'none', + padding: '2px 8px', + color: theme.colors.text.primary, + cursor: 'pointer', + '&:hover': { + background: theme.colors.action.hover, + }, + }), + label: css({ + color: theme.colors.text.secondary, + }), + activeItem: css({ + background: theme.colors.background.secondary, + '&:hover': { + background: theme.colors.background.secondary, + }, + }), + itemValue: css({ + fontFamily: theme.typography.fontFamilyMonospace, + fontSize: theme.typography.size.sm, + }), }; }; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx index f692a2ff568..56c17d7e59a 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx @@ -42,9 +42,9 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex }; // Use this class name (exposed via render prop) to add context menu indicator to the click target of the visualization - const targetClassName = css` - cursor: context-menu; - `; + const targetClassName = css({ + cursor: 'context-menu', + }); if (linksCounter > 1) { return ( diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx index 6670b573371..ca69016f404 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx @@ -112,8 +112,8 @@ export const DataLinksInlineEditor = ({ links, onChange, getSuggestions, data }: const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaTheme2) => { return { - wrapper: css` - margin-bottom: ${theme.spacing(2)}; - `, + wrapper: css({ + marginBottom: theme.spacing(2), + }), }; }); diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx index 0765e6b767a..86044da8782 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx @@ -54,45 +54,45 @@ export const DataLinksListItem = ({ link, onEdit, onRemove }: DataLinksListItemP const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme2) => { return { - wrapper: css` - margin-bottom: ${theme.spacing(2)}; - width: 100%; - &:last-child { - margin-bottom: 0; - } - display: flex; - flex-direction: column; - `, - titleWrapper: css` - label: data-links-list-item-title; - justify-content: space-between; - display: flex; - width: 100%; - align-items: center; - `, - actionButtons: css` - margin-left: ${theme.spacing(1)}; - display: flex; - `, - errored: css` - color: ${theme.colors.error.text}; - font-style: italic; - `, - notConfigured: css` - font-style: italic; - `, - title: css` - color: ${theme.colors.text.primary}; - font-size: ${theme.typography.size.sm}; - font-weight: ${theme.typography.fontWeightMedium}; - `, - url: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.size.sm}; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 90%; - `, + wrapper: css({ + marginBottom: theme.spacing(2), + width: '100%', + '&:last-child': { + marginBottom: 0, + }, + display: 'flex', + flexDirection: 'column', + }), + titleWrapper: css({ + label: 'data-links-list-item-title', + justifyContent: 'space-between', + display: 'flex', + width: '100%', + alignItems: 'center', + }), + actionButtons: css({ + marginLeft: theme.spacing(1), + display: 'flex', + }), + errored: css({ + color: theme.colors.error.text, + fontStyle: 'italic', + }), + notConfigured: css({ + fontStyle: 'italic', + }), + title: css({ + color: theme.colors.text.primary, + fontSize: theme.typography.size.sm, + fontWeight: theme.typography.fontWeightMedium, + }), + url: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.size.sm, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + maxWidth: '90%', + }), }; }); diff --git a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx index 469bde77382..2ca9ac59f95 100644 --- a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx +++ b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx @@ -44,31 +44,31 @@ export function FieldLinkList({ links }: Props) { } const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - flex-basis: 150px; - width: 100px; - margin-top: ${theme.spacing(1)}; - `, - externalLinksHeading: css` - color: ${theme.colors.text.secondary}; - font-weight: ${theme.typography.fontWeightRegular}; - font-size: ${theme.typography.size.sm}; - margin: 0; - `, - externalLink: css` - color: ${theme.colors.text.link}; - font-weight: ${theme.typography.fontWeightRegular}; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + wrapper: css({ + flexBasis: '150px', + width: '100px', + marginTop: theme.spacing(1), + }), + externalLinksHeading: css({ + color: theme.colors.text.secondary, + fontWeight: theme.typography.fontWeightRegular, + fontSize: theme.typography.size.sm, + margin: 0, + }), + externalLink: css({ + color: theme.colors.text.link, + fontWeight: theme.typography.fontWeightRegular, + display: 'block', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', - &:hover { - text-decoration: underline; - } + '&:hover': { + textDecoration: 'underline', + }, - div { - margin-right: ${theme.spacing(1)}; - } - `, + div: { + marginRight: theme.spacing(1), + }, + }), }); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx index 77af3d52cc8..8802e321939 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx @@ -38,20 +38,19 @@ interface CustomHeaderRowProps { const getCustomHeaderRowStyles = stylesFactory(() => { return { - layout: css` - display: flex; - align-items: center; - margin-bottom: 4px; - > * { - margin-left: 4px; - margin-bottom: 0; - height: 100%; - &:first-child, - &:last-child { - margin-left: 0; - } - } - `, + layout: css({ + display: 'flex', + alignItems: 'center', + marginBottom: '4px', + '> *': { + marginLeft: '4px', + marginBottom: 0, + height: '100%', + '&:first-child, &:last-child': { + marginLeft: 0, + }, + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index 084fa42229b..c6516dca493 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -128,9 +128,9 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => { dataSourceConfig.url ); - const notValidStyle = css` - box-shadow: inset 0 0px 5px ${theme.v1.palette.red}; - `; + const notValidStyle = css({ + boxShadow: `inset 0 0px 5px ${theme.v1.palette.red}`, + }); const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl }); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx index af6ab6d716a..41614c1c587 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx @@ -53,9 +53,9 @@ export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBase
TLS/SSL Auth Details
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx index 7b0edcd8ef2..9f4098d000f 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx @@ -65,17 +65,17 @@ Body.displayName = 'Body'; export const getStyles = (theme: GrafanaTheme2) => { return { - modal: css` - z-index: ${theme.zIndex.modal}; - position: absolute; - box-shadow: ${theme.shadows.z3}; - background-color: ${theme.colors.background.primary}; - border: 1px solid ${theme.colors.border.weak}; - border-radius: 2px 0 0 2px; + modal: css({ + zIndex: theme.zIndex.modal, + position: 'absolute', + boxShadow: theme.shadows.z3, + backgroundColor: theme.colors.background.primary, + border: `1px solid ${theme.colors.border.weak}`, + borderRadius: '2px 0 0 2px', - button:disabled { - color: ${theme.colors.text.disabled}; - } - `, + 'button:disabled': { + color: theme.colors.text.disabled, + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx index a9efa07a766..581d6b72e96 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx @@ -74,15 +74,15 @@ export const DatePickerWithInput = ({ const getStyles = () => { return { - container: css` - position: relative; - `, - input: css` - /* hides the native Calendar picker icon given when using type=date */ - input[type='date']::-webkit-inner-spin-button, - input[type='date']::-webkit-calendar-picker-indicator { - display: none; - -webkit-appearance: none; - `, + container: css({ + position: 'relative', + }), + input: css({ + /* hides the native Calendar picker icon given when using type=date */ + "input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator": { + display: 'none', + WebkitAppearance: 'none', + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx index 71b0b347b49..093e7b7b691 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx @@ -217,9 +217,9 @@ const DateTimeInput = React.forwardRef( DateTimeCalendar.displayName = 'DateTimeCalendar'; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - padding: ${theme.spacing(1)}; - border: 1px ${theme.colors.border.weak} solid; - border-radius: ${theme.shape.borderRadius(1)}; - background-color: ${theme.colors.background.primary}; - z-index: ${theme.zIndex.modal}; - `, - fullScreen: css` - position: absolute; - `, - time: css` - margin-bottom: ${theme.spacing(2)}; - `, - modal: css` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: ${theme.zIndex.modal}; - max-width: 280px; - `, + container: css({ + padding: theme.spacing(1), + border: `1px ${theme.colors.border.weak} solid`, + borderRadius: theme.shape.borderRadius(1), + backgroundColor: theme.colors.background.primary, + zIndex: theme.zIndex.modal, + }), + fullScreen: css({ + position: 'absolute', + }), + time: css({ + marginBottom: theme.spacing(2), + }), + modal: css({ + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + zIndex: theme.zIndex.modal, + maxWidth: '280px', + }), }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx index 016bba78293..ec797abbb77 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx @@ -204,15 +204,15 @@ const TooltipContent = () => { }; const toolTipStyles = (theme: GrafanaTheme2) => ({ - supported: css` - margin-bottom: ${theme.spacing(1)}; - `, - tooltip: css` - margin: 0; - `, - link: css` - margin-top: ${theme.spacing(1)}; - `, + supported: css({ + marginBottom: theme.spacing(1), + }), + tooltip: css({ + margin: 0, + }), + link: css({ + marginTop: theme.spacing(1), + }), }); const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme2) => { @@ -221,76 +221,76 @@ const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme const bodyHeight = bodyMinimumHeight + calculateErrorHeight(theme, fromError) + calculateErrorHeight(theme, toError); return { - backdrop: css` - position: fixed; - z-index: ${theme.zIndex.modalBackdrop}; - top: 0; - right: 0; - bottom: 0; - left: 0; - `, - container: css` - display: flex; - position: relative; - `, + backdrop: css({ + position: 'fixed', + zIndex: theme.zIndex.modalBackdrop, + top: 0, + right: 0, + bottom: 0, + left: 0, + }), + container: css({ + display: 'flex', + position: 'relative', + }), pickerInput: cx( inputStyles.input, inputStyles.wrapper, - css` - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - padding-right: 0; - padding-left: 0; - line-height: ${theme.spacing.gridSize * theme.components.height.md - 2}px; - ` + css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + cursor: 'pointer', + paddingRight: 0, + paddingLeft: 0, + lineHeight: `${theme.spacing.gridSize * theme.components.height.md - 2}px`, + }) ), caretIcon: cx( inputStyles.suffix, - css` - position: relative; - margin-left: ${theme.spacing(0.5)}; - ` + css({ + position: 'relative', + marginLeft: theme.spacing(0.5), + }) ), clockIcon: cx( inputStyles.prefix, - css` - position: relative; - margin-right: ${theme.spacing(0.5)}; - ` + css({ + position: 'relative', + marginRight: theme.spacing(0.5), + }) ), - content: css` - background: ${theme.colors.background.primary}; - box-shadow: ${theme.shadows.z3}; - position: absolute; - z-index: ${theme.zIndex.modal}; - width: 500px; - top: 100%; - border-radius: ${theme.shape.radius.default}; - border: 1px solid ${theme.colors.border.weak}; - left: 0; - white-space: normal; - `, - body: css` - display: flex; - height: ${bodyHeight}px; - `, - description: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.size.sm}; - `, - leftSide: css` - width: 50% !important; - border-right: 1px solid ${theme.colors.border.medium}; - `, - rightSide: css` - width: 50%; - padding: ${theme.spacing(1)}; - `, - title: css` - margin-bottom: ${theme.spacing(1)}; - `, + content: css({ + background: theme.colors.background.primary, + boxShadow: theme.shadows.z3, + position: 'absolute', + zIndex: theme.zIndex.modal, + width: '500px', + top: '100%', + borderRadius: theme.shape.radius.default, + border: `1px solid ${theme.colors.border.weak}`, + left: 0, + whiteSpace: 'normal', + }), + body: css({ + display: 'flex', + height: `${bodyHeight}px`, + }), + description: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.size.sm, + }), + leftSide: css({ + width: '50% !important', + borderRight: `1px solid ${theme.colors.border.medium}`, + }), + rightSide: css({ + width: '50%', + padding: theme.spacing(1), + }), + title: css({ + marginBottom: theme.spacing(1), + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx index 646d4422537..6b924753932 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2 } from '@grafana/data'; import { Icon, useStyles2 } from '../../index'; -import { focusCss } from '../../themes/mixins'; +import { getFocusStyles } from '../../themes/mixins'; import { inputSizes } from '../Forms/commonStyles'; import { FormInputSize } from '../Forms/types'; @@ -77,80 +77,77 @@ const getStyles = (theme: GrafanaTheme2) => { const borderRadius = theme.shape.borderRadius(1); const borderColor = theme.components.input.borderColor; return { - caretWrapper: css` - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - display: inline-block; - text-align: right; - color: ${theme.colors.text.secondary}; - `, - picker: css` - .rc-time-picker-panel-select { - font-size: 14px; - background-color: ${bgColor}; - border-color: ${borderColor}; - li { - outline-width: 2px; - &.rc-time-picker-panel-select-option-selected { - background-color: inherit; - border: 1px solid ${theme.v1.palette.orange}; - border-radius: ${borderRadius}; - } + caretWrapper: css({ + position: 'absolute', + right: '8px', + top: '50%', + transform: 'translateY(-50%)', + display: 'inline-block', + textAlign: 'right', + color: theme.colors.text.secondary, + }), + picker: css({ + '.rc-time-picker-panel-select': { + fontSize: '14px', + backgroundColor: bgColor, + borderColor, + li: { + outlineWidth: '2px', + '&.rc-time-picker-panel-select-option-selected': { + backgroundColor: 'inherit', + border: `1px solid ${theme.v1.palette.orange}`, + borderRadius, + }, - &:hover { - background: ${optionBgHover}; - } + '&:hover': { + background: optionBgHover, + }, - &.rc-time-picker-panel-select-option-disabled { - color: ${theme.colors.action.disabledText}; - } - } - } + '&.rc-time-picker-panel-select-option-disabled': { + color: theme.colors.action.disabledText, + }, + }, + }, - .rc-time-picker-panel-inner { - box-shadow: 0px 4px 4px ${menuShadowColor}; - background-color: ${bgColor}; - border-color: ${borderColor}; - border-radius: ${borderRadius}; - margin-top: 3px; + '.rc-time-picker-panel-inner': { + boxShadow: `0px 4px 4px ${menuShadowColor}`, + backgroundColor: bgColor, + borderColor, + borderRadius, + marginTop: '3px', - .rc-time-picker-panel-input-wrap { - margin-right: 2px; + '.rc-time-picker-panel-input-wrap': { + marginRight: '2px', - &, - .rc-time-picker-panel-input { - background-color: ${bgColor}; - padding-top: 2px; - } - } + '&, .rc-time-picker-panel-input': { + backgroundColor: bgColor, + paddingTop: '2px', + }, + }, - .rc-time-picker-panel-combobox { - display: flex; - } - } - `, - input: css` - .rc-time-picker-input { - background-color: ${bgColor}; - border-radius: ${borderRadius}; - border-color: ${borderColor}; - height: ${theme.spacing(4)}; + '.rc-time-picker-panel-combobox': { + display: 'flex', + }, + }, + }), + input: css({ + '.rc-time-picker-input': { + backgroundColor: bgColor, + borderRadius, + borderColor, + height: theme.spacing(4), - &:focus { - ${focusCss(theme)} - } + '&:focus': getFocusStyles(theme), - &:disabled { - background-color: ${theme.colors.action.disabledBackground}; - color: ${theme.colors.action.disabledText}; - border: 1px solid ${theme.colors.action.disabledBackground}; - &:focus { - box-shadow: none; - } - } - } - `, + '&:disabled': { + backgroundColor: theme.colors.action.disabledBackground, + color: theme.colors.action.disabledText, + border: `1px solid ${theme.colors.action.disabledBackground}`, + '&:focus': { + boxShadow: 'none', + }, + }, + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx index 09b732a6d7b..06ce21f9715 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx @@ -124,49 +124,49 @@ export const TimeRangeInput = ({ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => { const inputStyles = getInputStyles({ theme, invalid: false }); return { - container: css` - display: flex; - position: relative; - `, - content: css` - margin-left: 0; - position: absolute; - top: 116%; - z-index: ${theme.zIndex.dropdown}; - `, + container: css({ + display: 'flex', + position: 'relative', + }), + content: css({ + marginLeft: 0, + position: 'absolute', + top: '116%', + zIndex: theme.zIndex.dropdown, + }), pickerInput: cx( inputStyles.input, disabled && inputStyles.inputDisabled, inputStyles.wrapper, - css` - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - padding-right: 0; - line-height: ${theme.spacing.gridSize * 4 - 2}px; - ` + css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + cursor: 'pointer', + paddingRight: 0, + lineHeight: `${theme.spacing.gridSize * 4 - 2}px`, + }) ), caretIcon: cx( inputStyles.suffix, - css` - position: relative; - top: -1px; - margin-left: ${theme.spacing(0.5)}; - ` + css({ + position: 'relative', + top: '-1px', + marginLeft: theme.spacing(0.5), + }) ), - clearIcon: css` - margin-right: ${theme.spacing(0.5)}; - &:hover { - color: ${theme.colors.text.maxContrast}; - } - `, - placeholder: css` - color: ${theme.colors.text.disabled}; - opacity: 1; - `, - icon: css` - margin-right: ${theme.spacing(0.5)}; - `, + clearIcon: css({ + marginRight: theme.spacing(0.5), + '&:hover': { + color: theme.colors.text.maxContrast, + }, + }), + placeholder: css({ + color: theme.colors.text.disabled, + opacity: 1, + }), + icon: css({ + marginRight: theme.spacing(0.5), + }), }; }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx index 9b3ca4c3a81..1ce6ba3627e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx @@ -227,11 +227,11 @@ const formattedRange = (value: TimeRange, timeZone?: TimeZone) => { const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - position: relative; - display: flex; - vertical-align: middle; - `, + container: css({ + position: 'relative', + display: 'flex', + verticalAlign: 'middle', + }), backdrop: css({ display: 'none', [theme.breakpoints.down('sm')]: { @@ -257,18 +257,18 @@ const getStyles = (theme: GrafanaTheme2) => { const getLabelStyles = (theme: GrafanaTheme2) => { return { - container: css` - display: flex; - align-items: center; - white-space: nowrap; - `, - utc: css` - color: ${theme.v1.palette.orange}; - font-size: ${theme.typography.size.sm}; - padding-left: 6px; - line-height: 28px; - vertical-align: bottom; - font-weight: ${theme.typography.fontWeightMedium}; - `, + container: css({ + display: 'flex', + alignItems: 'center', + whiteSpace: 'nowrap', + }), + utc: css({ + color: theme.v1.palette.orange, + fontSize: theme.typography.size.sm, + paddingLeft: '6px', + lineHeight: '28px', + verticalAlign: 'bottom', + fontWeight: theme.typography.fontWeightMedium, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx index b3afbf4b5fd..aa3cb9eaa53 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx @@ -71,108 +71,99 @@ export const getBodyStyles = (theme: GrafanaTheme2) => { // the class that react-calendar uses is '--hasActive' by itself (without being part of a '--range') const hasActiveSelector = `.react-calendar__tile--hasActive:not(.react-calendar__tile--range)`; return { - title: css` - color: ${theme.colors.text.primary}; - background-color: ${theme.colors.background.primary}; - font-size: ${theme.typography.size.md}; - border: 1px solid transparent; + title: css({ + color: theme.colors.text.primary, + backgroundColor: theme.colors.background.primary, + fontSize: theme.typography.size.md, + border: '1px solid transparent', - &:hover { - position: relative; - } + '&:hover': { + position: 'relative', + }, - &:disabled { - color: ${theme.colors.action.disabledText}; - } - `, - body: css` - z-index: ${theme.zIndex.modal}; - background-color: ${theme.colors.background.primary}; - width: 268px; + '&:disabled': { + color: theme.colors.action.disabledText, + }, + }), + body: css({ + zIndex: theme.zIndex.modal, + backgroundColor: theme.colors.background.primary, + width: '268px', - .react-calendar__navigation { - display: flex; - } + '.react-calendar__navigation': { + display: 'flex', + }, - .react-calendar__navigation__label, - .react-calendar__navigation__arrow, - .react-calendar__navigation { - padding-top: 4px; - background-color: inherit; - color: ${theme.colors.text.primary}; - border: 0; - font-weight: ${theme.typography.fontWeightMedium}; - } + '.react-calendar__navigation__label, .react-calendar__navigation__arrow, .react-calendar__navigation': { + paddingTop: '4px', + backgroundColor: 'inherit', + color: theme.colors.text.primary, + border: 0, + fontWeight: theme.typography.fontWeightMedium, + }, - .react-calendar__month-view__weekdays { - background-color: inherit; - text-align: center; - color: ${theme.colors.primary.text}; + '.react-calendar__month-view__weekdays': { + backgroundColor: 'inherit', + textAlign: 'center', + color: theme.colors.primary.text, - abbr { - border: 0; - text-decoration: none; - cursor: default; - display: block; - padding: 4px 0 4px 0; - } - } + abbr: { + border: 0, + textDecoration: 'none', + cursor: 'default', + display: 'block', + padding: '4px 0 4px 0', + }, + }, - .react-calendar__month-view__days { - background-color: inherit; - } + '.react-calendar__month-view__days': { + backgroundColor: 'inherit', + }, - .react-calendar__tile, - .react-calendar__tile--now { - margin-bottom: 4px; - background-color: inherit; - height: 26px; - } + '.react-calendar__tile, .react-calendar__tile--now': { + marginBottom: '4px', + backgroundColor: 'inherit', + height: '26px', + }, - .react-calendar__navigation__label, - .react-calendar__navigation > button:focus, - .time-picker-calendar-tile:focus { - outline: 0; - } + '.react-calendar__navigation__label, .react-calendar__navigation > button:focus, .time-picker-calendar-tile:focus': + { + outline: 0, + }, - ${hasActiveSelector}, - .react-calendar__tile--active, - .react-calendar__tile--active:hover { - color: ${theme.colors.primary.contrastText}; - font-weight: ${theme.typography.fontWeightMedium}; - background: ${theme.colors.primary.main}; - box-shadow: none; - border: 0px; - } + [`${hasActiveSelector}, .react-calendar__tile--active, .react-calendar__tile--active:hover`]: { + color: theme.colors.primary.contrastText, + fontWeight: theme.typography.fontWeightMedium, + background: theme.colors.primary.main, + boxShadow: 'none', + border: '0px', + }, - .react-calendar__tile--rangeEnd, - .react-calendar__tile--rangeStart { - padding: 0; - border: 0px; - color: ${theme.colors.primary.contrastText}; - font-weight: ${theme.typography.fontWeightMedium}; - background: ${theme.colors.primary.main}; + '.react-calendar__tile--rangeEnd, .react-calendar__tile--rangeStart': { + padding: 0, + border: '0px', + color: theme.colors.primary.contrastText, + fontWeight: theme.typography.fontWeightMedium, + background: theme.colors.primary.main, - abbr { - background-color: ${theme.colors.primary.main}; - border-radius: 100px; - display: block; - padding-top: 2px; - height: 26px; - } - } + abbr: { + backgroundColor: theme.colors.primary.main, + borderRadius: '100px', + display: 'block', + paddingTop: '2px', + height: '26px', + }, + }, - ${hasActiveSelector}, - .react-calendar__tile--rangeStart { - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; - } + [`${hasActiveSelector}, .react-calendar__tile--rangeStart`]: { + borderTopLeftRadius: '20px', + borderBottomLeftRadius: '20px', + }, - ${hasActiveSelector}, - .react-calendar__tile--rangeEnd { - border-top-right-radius: 20px; - border-bottom-right-radius: 20px; - } - `, + [`${hasActiveSelector}, .react-calendar__tile--rangeEnd`]: { + borderTopRightRadius: '20px', + borderBottomRightRadius: '20px', + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx index b8ba437d1bd..4db12f18893 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx @@ -28,17 +28,17 @@ Footer.displayName = 'Footer'; const getFooterStyles = (theme: GrafanaTheme2) => { return { - container: css` - background-color: ${theme.colors.background.primary}; - display: flex; - justify-content: center; - padding: 10px; - align-items: stretch; - `, - apply: css` - margin-right: 4px; - width: 100%; - justify-content: center; - `, + container: css({ + backgroundColor: theme.colors.background.primary, + display: 'flex', + justifyContent: 'center', + padding: '10px', + alignItems: 'stretch', + }), + apply: css({ + marginRight: '4px', + width: '100%', + justifyContent: 'center', + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx index 08782cbd493..f87fcca805b 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx @@ -33,12 +33,12 @@ Header.displayName = 'Header'; const getHeaderStyles = (theme: GrafanaTheme2) => { return { - container: css` - background-color: ${theme.colors.background.primary}; - display: flex; - align-items: center; - justify-content: space-between; - padding: 7px; - `, + container: css({ + backgroundColor: theme.colors.background.primary, + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '7px', + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx index 89049e12b26..5e18b70bd8e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx @@ -16,40 +16,40 @@ import { Header } from './CalendarHeader'; export const getStyles = (theme: GrafanaTheme2, isReversed = false) => { return { - container: css` - top: 0px; - position: absolute; - ${isReversed ? 'left' : 'right'}: 544px; - box-shadow: ${theme.shadows.z3}; - background-color: ${theme.colors.background.primary}; - z-index: -1; - border: 1px solid ${theme.colors.border.weak}; - border-radius: 2px 0 0 2px; + container: css({ + top: 0, + position: 'absolute', + [`${isReversed ? 'left' : 'right'}`]: '544px', + boxShadow: theme.shadows.z3, + backgroundColor: theme.colors.background.primary, + zIndex: -1, + border: `1px solid ${theme.colors.border.weak}`, + borderRadius: '2px 0 0 2px', - &:after { - display: block; - background-color: ${theme.colors.background.primary}; - width: 19px; - height: 100%; - content: ${!isReversed ? ' ' : ''}; - position: absolute; - top: 0; - right: -19px; - border-left: 1px solid ${theme.colors.border.weak}; - } - `, - modal: css` - box-shadow: ${theme.shadows.z3}; - left: 50%; - position: fixed; - top: 50%; - transform: translate(-50%, -50%); - z-index: ${theme.zIndex.modal}; - `, - content: css` - margin: 0 auto; - width: 268px; - `, + '&:after': { + display: 'block', + backgroundColor: theme.colors.background.primary, + width: '19px', + height: '100%', + content: `${!isReversed ? '" "' : '""'}`, + position: 'absolute', + top: 0, + right: '-19px', + borderLeft: `1px solid ${theme.colors.border.weak}`, + }, + }), + modal: css({ + boxShadow: theme.shadows.z3, + left: '50%', + position: 'fixed', + top: '50%', + transform: 'translate(-50%, -50%)', + zIndex: theme.zIndex.modal, + }), + content: css({ + margin: '0 auto', + width: '268px', + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx index cf8d336b958..b21741b6d6a 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx @@ -264,105 +264,102 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => { return { - container: css` - background: ${theme.colors.background.primary}; - box-shadow: ${theme.shadows.z3}; - width: ${isFullscreen ? '546px' : '262px'}; - border-radius: 2px; - border: 1px solid ${theme.colors.border.weak}; - ${isReversed ? 'left' : 'right'}: 0; - `, - body: css` - display: flex; - flex-direction: row-reverse; - height: ${isContainerTall ? '381px' : '217px'}; - max-height: 100vh; - `, - leftSide: css` - display: flex; - flex-direction: column; - border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}; - width: ${!hideQuickRanges ? '60%' : '100%'}; - overflow: hidden; - order: ${isReversed ? 1 : 0}; - `, - rightSide: css` - width: ${isFullscreen ? '40%' : '100%'}; !important; - border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'}; - display: flex; - flex-direction: column; - `, - timeRangeFilter: css` - padding: ${theme.spacing(1)}; - `, - spacing: css` - margin-top: 16px; - `, + container: css({ + background: theme.colors.background.primary, + boxShadow: theme.shadows.z3, + width: `${isFullscreen ? '546px' : '262px'}`, + borderRadius: '2px', + border: `1px solid ${theme.colors.border.weak}`, + [`${isReversed ? 'left' : 'right'}`]: 0, + }), + body: css({ + display: 'flex', + flexDirection: 'row-reverse', + height: `${isContainerTall ? '381px' : '217px'}`, + maxHeight: '100vh', + }), + leftSide: css({ + display: 'flex', + flexDirection: 'column', + borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`, + width: `${!hideQuickRanges ? '60%' : '100%'}`, + overflow: 'hidden', + order: isReversed ? 1 : 0, + }), + rightSide: css({ + width: `${isFullscreen ? '40%' : '100%'}; !important`, + borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : 'none', + display: 'flex', + flexDirection: 'column', + }), + timeRangeFilter: css({ + padding: theme.spacing(1), + }), + spacing: css({ + marginTop: '16px', + }), }; }); const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme2) => { return { - header: css` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid ${theme.colors.border.weak}; - padding: 7px 9px 7px 9px; - `, - expandButton: css` - background-color: transparent; - border: none; - display: flex; - width: 100%; + header: css({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + borderBottom: `1px solid ${theme.colors.border.weak}`, + padding: '7px 9px 7px 9px', + }), + expandButton: css({ + backgroundColor: 'transparent', + border: 'none', + display: 'flex', + width: '100%', - &:focus-visible { - ${getFocusStyles(theme)} - } - `, - body: css` - border-bottom: 1px solid ${theme.colors.border.weak}; - `, - form: css` - padding: 7px 9px 7px 9px; - `, + '&:focus-visible': getFocusStyles(theme), + }), + body: css({ + borderBottom: `1px solid ${theme.colors.border.weak}`, + }), + form: css({ + padding: '7px 9px 7px 9px', + }), }; }); const getFullScreenStyles = stylesFactory((theme: GrafanaTheme2, hideQuickRanges?: boolean) => { return { - container: css` - padding-top: 9px; - padding-left: 11px; - padding-right: ${!hideQuickRanges ? '20%' : '11px'}; - `, - title: css` - margin-bottom: 11px; - `, - recent: css` - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding-top: ${theme.spacing(1)}; - `, + container: css({ + paddingTop: '9px', + paddingLeft: '11px', + paddingRight: !hideQuickRanges ? '20%' : '11px', + }), + title: css({ + marginBottom: '11px', + }), + recent: css({ + flexGrow: 1, + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-end', + paddingTop: theme.spacing(1), + }), }; }); const getEmptyListStyles = stylesFactory((theme: GrafanaTheme2) => { return { - container: css` - padding: 12px; - margin: 12px; + container: css({ + padding: '12px', + margin: '12px', - a, - span { - font-size: 13px; - }\ - `, - link: css` - color: ${theme.colors.text.link}; - `, + 'a, span': { + fontSize: '13px', + }, + }), + link: css({ + color: theme.colors.text.link, + }), }; }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx index 467944c0f8f..80b82fada32 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx @@ -136,42 +136,41 @@ export const TimePickerFooter = (props: Props) => { const getStyle = stylesFactory((theme: GrafanaTheme2) => { return { - container: css` - border-top: 1px solid ${theme.colors.border.weak}; - padding: 11px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - `, - editContainer: css` - border-top: 1px solid ${theme.colors.border.weak}; - padding: 11px; - justify-content: space-between; - align-items: center; - padding: 7px; - `, - spacer: css` - margin-left: 7px; - `, - timeSettingContainer: css` - padding-top: ${theme.spacing(1)}; - `, - fiscalYearField: css` - margin-bottom: 0px; - `, - timeZoneContainer: css` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-grow: 1; - `, - timeZone: css` - display: flex; - flex-direction: row; - align-items: baseline; - flex-grow: 1; - `, + container: css({ + borderTop: `1px solid ${theme.colors.border.weak}`, + padding: '11px', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }), + editContainer: css({ + borderTop: `1px solid ${theme.colors.border.weak}`, + padding: '11px', + justifyContent: 'space-between', + alignItems: 'center', + }), + spacer: css({ + marginLeft: '7px', + }), + timeSettingContainer: css({ + paddingTop: theme.spacing(1), + }), + fiscalYearField: css({ + marginBottom: 0, + }), + timeZoneContainer: css({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + flexGrow: 1, + }), + timeZone: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'baseline', + flexGrow: 1, + }), }; }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx index 6013ee88bb0..1df35b9a364 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx @@ -7,13 +7,13 @@ import { useStyles2 } from '../../../themes'; const getStyles = (theme: GrafanaTheme2) => { return { - text: css` - font-size: ${theme.typography.size.md}; - font-weight: ${theme.typography.fontWeightMedium}; - color: ${theme.colors.text.primary}; - margin: 0; - display: flex; - `, + text: css({ + fontSize: theme.typography.size.md, + fontWeight: theme.typography.fontWeightMedium, + color: theme.colors.text.primary, + margin: 0, + display: 'flex', + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx index c9cf01ce6a7..1ee679065a4 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx @@ -223,12 +223,12 @@ function isValid(value: string, roundUp?: boolean, timeZone?: TimeZone): boolean function getStyles(theme: GrafanaTheme2) { return { - fieldContainer: css` - display: flex; - `, - tooltip: css` - padding-left: ${theme.spacing(1)}; - padding-top: ${theme.spacing(3)}; - `, + fieldContainer: css({ + display: 'flex', + }), + tooltip: css({ + paddingLeft: theme.spacing(1), + paddingTop: theme.spacing(3), + }), }; } diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx index 3995086da65..ea834651bff 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx @@ -11,21 +11,21 @@ import { TimeRangeOption } from './TimeRangeOption'; const getStyles = stylesFactory(() => { return { - title: css` - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 16px 5px 9px; - `, + title: css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '8px 16px 5px 9px', + }), }; }); const getOptionsStyles = stylesFactory(() => { return { - grow: css` - flex-grow: 1; - align-items: flex-start; - `, + grow: css({ + flexGrow: 1, + alignItems: 'flex-start', + }), }; }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx index 4a8ac49962c..46ce286ad23 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx @@ -9,34 +9,32 @@ import { getFocusStyles } from '../../../themes/mixins'; const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - display: flex; - align-items: center; - flex-direction: row-reverse; - justify-content: space-between; - `, - selected: css` - background: ${theme.colors.action.selected}; - font-weight: ${theme.typography.fontWeightMedium}; - `, - radio: css` - opacity: 0; - width: 0 !important; + container: css({ + display: 'flex', + alignItems: 'center', + flexDirection: 'row-reverse', + justifyContent: 'space-between', + }), + selected: css({ + background: theme.colors.action.selected, + fontWeight: theme.typography.fontWeightMedium, + }), + radio: css({ + opacity: 0, + width: '0 !important', - &:focus-visible + label { - ${getFocusStyles(theme)}; - } - `, - label: css` - cursor: pointer; - flex: 1; - padding: 7px 9px 7px 9px; + '&:focus-visible + label': getFocusStyles(theme), + }), + label: css({ + cursor: 'pointer', + flex: 1, + padding: '7px 9px 7px 9px', - &:hover { - background: ${theme.colors.action.hover}; - cursor: pointer; - } - `, + '&:hover': { + background: theme.colors.action.hover, + cursor: 'pointer', + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx index 2bed097ff01..2c402828e7d 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx @@ -43,12 +43,12 @@ const useDescription = (info?: TimeZoneInfo): string => { const getStyles = (theme: GrafanaTheme2) => { return { - description: css` - font-weight: normal; - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.text.secondary}; - white-space: normal; - text-overflow: ellipsis; - `, + description: css({ + fontWeight: 'normal', + fontSize: theme.typography.size.sm, + color: theme.colors.text.secondary, + whiteSpace: 'normal', + textOverflow: 'ellipsis', + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx index b8925c66fc9..407dc82d65d 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx @@ -30,16 +30,16 @@ export const TimeZoneGroup = (props: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - header: css` - padding: 7px 10px; - width: 100%; - border-top: 1px solid ${theme.colors.border.weak}; - text-transform: capitalize; - `, - label: css` - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.text.secondary}; - font-weight: ${theme.typography.fontWeightMedium}; - `, + header: css({ + padding: '7px 10px', + width: '100%', + borderTop: `1px solid ${theme.colors.border.weak}`, + textTransform: 'capitalize', + }), + label: css({ + fontSize: theme.typography.size.sm, + color: theme.colors.text.secondary, + fontWeight: theme.typography.fontWeightMedium, + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx index 62465ed473d..03e1f334298 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx @@ -40,21 +40,20 @@ export const formatUtcOffset = (timestamp: number, timeZone: TimeZone): string = }; const getStyles = (theme: GrafanaTheme2) => { - const textBase = css` - font-weight: normal; - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.text.secondary}; - white-space: normal; - `; + const textBase = css({ + fontWeight: 'normal', + fontSize: theme.typography.size.sm, + color: theme.colors.text.secondary, + whiteSpace: 'normal', + }); return { - offset: css` - ${textBase}; - color: ${theme.colors.text.primary}; - background: ${theme.colors.background.secondary}; - padding: 2px 5px; - border-radius: 2px; - margin-left: 4px; - `, + offset: css(textBase, { + color: theme.colors.text.primary, + background: theme.colors.background.secondary, + padding: '2px 5px', + borderRadius: '2px', + marginLeft: '4px', + }), }; }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx index 779b2b5e850..d48fbcf964b 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx @@ -115,47 +115,47 @@ export const CompactTimeZoneOption = (props: React.PropsWithChildren) => const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - container: css` - display: flex; - align-items: center; - flex-direction: row; - flex-shrink: 0; - white-space: nowrap; - cursor: pointer; - padding: 6px 8px 4px; + container: css({ + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + flexShrink: 0, + whiteSpace: 'nowrap', + cursor: 'pointer', + padding: '6px 8px 4px', - &:hover { - background: ${theme.colors.action.hover}; - } - `, - containerFocused: css` - background: ${theme.colors.action.hover}; - `, - body: css` - display: flex; - font-weight: ${theme.typography.fontWeightMedium}; - flex-direction: column; - flex-grow: 1; - `, - row: css` - display: flex; - flex-direction: row; - `, - leftColumn: css` - flex-grow: 1; - text-overflow: ellipsis; - `, - rightColumn: css` - justify-content: flex-end; - align-items: center; - `, - wideRow: css` - display: flex; - flex-direction: row; - align-items: baseline; - `, - spacer: css` - margin-left: 6px; - `, + '&:hover': { + background: theme.colors.action.hover, + }, + }), + containerFocused: css({ + background: theme.colors.action.hover, + }), + body: css({ + display: 'flex', + fontWeight: theme.typography.fontWeightMedium, + flexDirection: 'column', + flexGrow: 1, + }), + row: css({ + display: 'flex', + flexDirection: 'row', + }), + leftColumn: css({ + flexGrow: 1, + textOverflow: 'ellipsis', + }), + rightColumn: css({ + justifyContent: 'flex-end', + alignItems: 'center', + }), + wideRow: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'baseline', + }), + spacer: css({ + marginLeft: '6px', + }), }; }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx index bc1d59b874e..6d1239bdd4d 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx @@ -21,9 +21,9 @@ export const TimeZoneTitle = ({ title }: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - title: css` - font-weight: ${theme.typography.fontWeightRegular}; - text-overflow: ellipsis; - `, + title: css({ + fontWeight: theme.typography.fontWeightRegular, + textOverflow: 'ellipsis', + }), }; }; diff --git a/packages/grafana-ui/src/components/Divider/Divider.tsx b/packages/grafana-ui/src/components/Divider/Divider.tsx index 169e5e34e45..8d2f2fc5644 100644 --- a/packages/grafana-ui/src/components/Divider/Divider.tsx +++ b/packages/grafana-ui/src/components/Divider/Divider.tsx @@ -24,15 +24,15 @@ Divider.displayName = 'Divider'; const getStyles = (theme: GrafanaTheme2) => { return { - horizontalDivider: css` - border-top: 1px solid ${theme.colors.border.weak}; - margin: ${theme.spacing(2, 0)}; - width: 100%; - `, - verticalDivider: css` - border-right: 1px solid ${theme.colors.border.weak}; - margin: ${theme.spacing(0, 0.5)}; - height: 100%; - `, + horizontalDivider: css({ + borderTop: `1px solid ${theme.colors.border.weak}`, + margin: theme.spacing(2, 0), + width: '100%', + }), + verticalDivider: css({ + borderRight: `1px solid ${theme.colors.border.weak}`, + margin: theme.spacing(0, 0.5), + height: '100%', + }), }; }; diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index 90a584e8702..7171caac2e8 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -161,30 +161,30 @@ function useBodyClassWhileOpen() { const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - display: flex; - flex-direction: column; - height: 100%; - flex: 1 1 0; - `, - drawer: css` - .main-view & { - top: 81px; - } + container: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + flex: '1 1 0', + }), + drawer: css({ + '.main-view &': { + top: '81px', + }, - .main-view--search-bar-hidden & { - top: 41px; - } + '.main-view--search-bar-hidden &': { + top: '41px', + }, - .rc-drawer-content-wrapper { - box-shadow: ${theme.shadows.z3}; + '.rc-drawer-content-wrapper': { + boxShadow: theme.shadows.z3, - ${theme.breakpoints.down('sm')} { - width: calc(100% - ${theme.spacing(2)}) !important; - min-width: 0 !important; - } - } - `, + [theme.breakpoints.down('sm')]: { + width: `calc(100% - ${theme.spacing(2)}) !important`, + minWidth: '0 !important', + }, + }, + }), sizes: { sm: css({ '.rc-drawer-content-wrapper': { @@ -213,38 +213,38 @@ const getStyles = (theme: GrafanaTheme2) => { }, }), }, - drawerContent: css` - background-color: ${theme.colors.background.primary} !important; - display: flex; - flex-direction: column; - overflow: hidden; - z-index: ${theme.zIndex.dropdown}; - `, - drawerMotion: css` - &-appear { - transform: translateX(100%); - transition: none !important; + drawerContent: css({ + backgroundColor: `${theme.colors.background.primary} !important`, + display: 'flex', + flexDirection: 'column', + overflow: 'hidden', + zIndex: theme.zIndex.dropdown, + }), + drawerMotion: css({ + '&-appear': { + transform: 'translateX(100%)', + transition: 'none !important', - &-active { - transition: ${theme.transitions.create('transform')} !important; - transform: translateX(0); - } - } - `, - mask: css` - background-color: ${theme.components.overlay.background} !important; - backdrop-filter: blur(1px); - `, - maskMotion: css` - &-appear { - opacity: 0; + '&-active': { + transition: `${theme.transitions.create('transform')} !important`, + transform: 'translateX(0)', + }, + }, + }), + mask: css({ + backgroundColor: `${theme.components.overlay.background} !important`, + backdropFilter: 'blur(1px)', + }), + maskMotion: css({ + '&-appear': { + opacity: 0, - &-active { - opacity: 1; - transition: ${theme.transitions.create('opacity')}; - } - } - `, + '&-active': { + opacity: 1, + transition: theme.transitions.create('opacity'), + }, + }, + }), header: css({ flexGrow: 0, padding: theme.spacing(3, 2), @@ -258,9 +258,9 @@ const getStyles = (theme: GrafanaTheme2) => { right: theme.spacing(1), top: theme.spacing(2), }), - titleWrapper: css` - overflow-wrap: break-word; - `, + titleWrapper: css({ + overflowWrap: 'break-word', + }), subtitle: css({ color: theme.colors.text.secondary, paddingTop: theme.spacing(1), diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx index 1cbd25e54ec..bff3fb8353e 100644 --- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx +++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx @@ -91,15 +91,15 @@ export const ButtonSelect = React.memo(ButtonSelectComponent) as typeof ButtonSe const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - position: relative; - display: inline-flex; - `, - menuWrapper: css` - position: absolute; - z-index: ${theme.zIndex.dropdown}; - top: ${theme.spacing(4)}; - right: 0; - `, + wrapper: css({ + position: 'relative', + display: 'inline-flex', + }), + menuWrapper: css({ + position: 'absolute', + zIndex: theme.zIndex.dropdown, + top: theme.spacing(4), + right: 0, + }), }; }; diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx index b6d7729e0ed..7f8fb1f67ea 100644 --- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx +++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx @@ -16,14 +16,14 @@ const EmptySearchResult = ({ children }: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - border-left: 3px solid ${theme.colors.info.main}; - background-color: ${theme.colors.background.secondary}; - padding: ${theme.spacing(2)}; - min-width: 350px; - border-radius: ${theme.shape.radius.default}; - margin-bottom: ${theme.spacing(4)}; - `, + container: css({ + borderLeft: `3px solid ${theme.colors.info.main}`, + backgroundColor: `${theme.colors.background.secondary}`, + padding: theme.spacing(2), + minWidth: '350px', + borderRadius: theme.shape.radius.default, + marginBottom: theme.spacing(4), + }), }; }; export { EmptySearchResult }; diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx index a80357a9964..5009b8f5df4 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx @@ -6,10 +6,10 @@ import { stylesFactory } from '../../themes'; import { ErrorBoundaryApi } from './ErrorBoundary'; const getStyles = stylesFactory(() => { - return css` - width: 500px; - margin: 64px auto; - `; + return css({ + width: '500px', + margin: '64px auto', + }); }); export interface Props extends ErrorBoundaryApi { diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx index 362463c7bcf..ad0c6039118 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx @@ -298,43 +298,43 @@ function mapToCustomFile(file: File): DropzoneFile { function getStyles(theme: GrafanaTheme2, isDragActive?: boolean) { return { - container: css` - display: flex; - flex-direction: column; - width: 100%; - padding: ${theme.spacing(2)}; - border-radius: 2px; - border: 1px dashed ${theme.colors.border.strong}; - background-color: ${isDragActive ? theme.colors.background.secondary : theme.colors.background.primary}; - cursor: pointer; - align-items: center; - justify-content: center; - `, - dropzone: css` - display: flex; - flex-direction: column; - `, - defaultDropZone: css` - text-align: center; - `, - icon: css` - margin-bottom: ${theme.spacing(1)}; - `, - primaryText: css` - margin-bottom: ${theme.spacing(1)}; - `, - acceptContainer: css` - text-align: center; - margin: 0; - `, - acceptSeparator: css` - margin: 0 ${theme.spacing(1)}; - `, - small: css` - color: ${theme.colors.text.secondary}; - `, - errorAlert: css` - padding-top: 10px; - `, + container: css({ + display: 'flex', + flexDirection: 'column', + width: '100%', + padding: theme.spacing(2), + borderRadius: '2px', + border: `1px dashed ${theme.colors.border.strong}`, + backgroundColor: isDragActive ? theme.colors.background.secondary : theme.colors.background.primary, + cursor: 'pointer', + alignItems: 'center', + justifyContent: 'center', + }), + dropzone: css({ + display: 'flex', + flexDirection: 'column', + }), + defaultDropZone: css({ + textAlign: 'center', + }), + icon: css({ + marginBottom: theme.spacing(1), + }), + primaryText: css({ + marginBottom: theme.spacing(1), + }), + acceptContainer: css({ + textAlign: 'center', + margin: 0, + }), + acceptSeparator: css({ + margin: `0 ${theme.spacing(1)}`, + }), + small: css({ + color: theme.colors.text.secondary, + }), + errorAlert: css({ + paddingTop: '10px', + }), }; } diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx index a903777122f..36477c6fbfa 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx @@ -81,46 +81,46 @@ export function FileListItem({ file: customFile, removeFile }: FileListItemProps function getStyles(theme: GrafanaTheme2) { return { - fileListContainer: css` - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: ${theme.spacing(2)}; - border: 1px dashed ${theme.colors.border.medium}; - background-color: ${theme.colors.background.secondary}; - margin-top: ${theme.spacing(1)}; - `, - fileNameWrapper: css` - display: flex; - flex-direction: row; - align-items: center; - `, - padding: css` - padding: ${theme.spacing(0, 1)}; - `, - paddingLeft: css` - padding-left: ${theme.spacing(2)}; - `, - marginLeft: css` - margin-left: ${theme.spacing(1)}; - `, - error: css` - padding-right: ${theme.spacing(2)}; - color: ${theme.colors.error.text}; - `, - progressBar: css` - border-radius: ${theme.shape.radius.default}; - height: 4px; - ::-webkit-progress-bar { - background-color: ${theme.colors.border.weak}; - border-radius: ${theme.shape.radius.default}; - } - ::-webkit-progress-value { - background-color: ${theme.colors.primary.main}; - border-radius: ${theme.shape.radius.default}; - } - `, + fileListContainer: css({ + width: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: theme.spacing(2), + border: `1px dashed ${theme.colors.border.medium}`, + backgroundColor: `${theme.colors.background.secondary}`, + marginTop: theme.spacing(1), + }), + fileNameWrapper: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }), + padding: css({ + padding: theme.spacing(0, 1), + }), + paddingLeft: css({ + paddingLeft: theme.spacing(2), + }), + marginLeft: css({ + marginLeft: theme.spacing(1), + }), + error: css({ + paddingRight: theme.spacing(2), + color: theme.colors.error.text, + }), + progressBar: css({ + borderRadius: theme.shape.radius.default, + height: '4px', + '::-webkit-progress-bar': { + backgroundColor: theme.colors.border.weak, + borderRadius: theme.shape.radius.default, + }, + '::-webkit-progress-value': { + backgroundColor: theme.colors.primary.main, + borderRadius: theme.shape.radius.default, + }, + }), }; } diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx index c047112c322..a09be61c3af 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx @@ -28,36 +28,36 @@ export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterP const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius(8)}; - padding: ${theme.spacing(0, 2)}; - font-size: ${theme.typography.bodySmall.fontSize}; - font-weight: ${theme.typography.fontWeightMedium}; - line-height: ${theme.typography.bodySmall.lineHeight}; - color: ${theme.colors.text.secondary}; - display: flex; - align-items: center; - height: 32px; - position: relative; - border: 1px solid ${theme.colors.background.secondary}; - white-space: nowrap; + wrapper: css({ + background: theme.colors.background.secondary, + borderRadius: theme.shape.borderRadius(8), + padding: theme.spacing(0, 2), + fontSize: theme.typography.bodySmall.fontSize, + fontWeight: theme.typography.fontWeightMedium, + lineHeight: theme.typography.bodySmall.lineHeight, + color: theme.colors.text.secondary, + display: 'flex', + alignItems: 'center', + height: '32px', + position: 'relative', + border: `1px solid ${theme.colors.background.secondary}`, + whiteSpace: 'nowrap', - &:hover { - background: ${theme.colors.action.hover}; - color: ${theme.colors.text.primary}; - } - `, - selected: css` - color: ${theme.colors.text.primary}; - border: 1px solid #ff780a; + '&:hover': { + background: theme.colors.action.hover, + color: theme.colors.text.primary, + }, + }), + selected: css({ + color: theme.colors.text.primary, + background: theme.colors.action.selected, - &:hover { - background: ${theme.colors.action.focus}; - } - `, - icon: css` - margin-left: ${theme.spacing(0.5)}; - `, + '&:hover': { + background: theme.colors.action.focus, + }, + }), + icon: css({ + marginLeft: theme.spacing(0.5), + }), }; }; diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index e4522bcf2e0..0048f69a3c7 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -57,12 +57,12 @@ FormField.defaultProps = defaultProps; const getStyles = () => { return { - formField: css` - display: flex; - flex-direction: row; - align-items: flex-start; - text-align: left; - position: relative; - `, + formField: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + textAlign: 'left', + position: 'relative', + }), }; }; diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx index fdd288e90ff..f254c49711b 100644 --- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx +++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx @@ -83,141 +83,136 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => { position: 'relative', verticalAlign: 'middle', }), - input: css` - position: absolute; - z-index: 1; - top: 0; - left: 0; - width: 100% !important; // global styles unset this - height: 100%; - opacity: 0; + input: css({ + position: 'absolute', + zIndex: 1, + top: 0, + left: 0, + width: '100% !important', // global styles unset this + height: '100%', + opacity: 0, - &:focus + span, - &:focus-visible + span { - ${getFocusStyles(theme)} - } + '&:focus + span, &:focus-visible + span': getFocusStyles(theme), - &:focus:not(:focus-visible) + span { - ${getMouseFocusStyles(theme)} - } + '&:focus:not(:focus-visible) + span': getMouseFocusStyles(theme), /** * Using adjacent sibling selector to style checked state. * Primarily to limit the classes necessary to use when these classes will be used * for angular components styling * */ - &:checked + span { - background: ${theme.colors.primary.main}; - border: 1px solid ${getBorderColor(theme.colors.primary.main)}; + '&:checked + span': { + background: theme.colors.primary.main, + border: `1px solid ${getBorderColor(theme.colors.primary.main)}`, - &:hover { - background: ${theme.colors.primary.shade}; - } + '&:hover': { + background: theme.colors.primary.shade, + }, - &:after { - content: ''; - position: absolute; - z-index: 2; - left: 4px; - top: 0px; - width: 6px; - height: 12px; - border: solid ${theme.colors.primary.contrastText}; - border-width: 0 3px 3px 0; - transform: rotate(45deg); - } - } + '&:after': { + content: '""', + position: 'absolute', + zIndex: 2, + left: '4px', + top: 0, + width: '6px', + height: '12px', + border: `solid ${theme.colors.primary.contrastText}`, + borderWidth: '0 3px 3px 0', + transform: 'rotate(45deg)', + }, + }, - &:disabled + span { - background-color: ${theme.colors.action.disabledBackground}; - cursor: not-allowed; - border: 1px solid ${getBorderColor(theme.colors.action.disabledBackground)}; + '&:disabled + span': { + backgroundColor: theme.colors.action.disabledBackground, + cursor: 'not-allowed', + border: `1px solid ${getBorderColor(theme.colors.action.disabledBackground)}`, - &:hover { - background-color: ${theme.colors.action.disabledBackground}; - } + '&:hover': { + backgroundColor: theme.colors.action.disabledBackground, + }, - &:after { - border-color: ${theme.colors.action.disabledText}; - } - } - `, + '&:after': { + borderColor: theme.colors.action.disabledText, + }, + }, + }), - inputIndeterminate: css` - &[aria-checked='mixed'] + span { - border: 1px solid ${getBorderColor(theme.colors.primary.main)}; - background: ${theme.colors.primary.main}; + inputIndeterminate: css({ + "&[aria-checked='mixed'] + span": { + border: `1px solid ${getBorderColor(theme.colors.primary.main)}`, + background: theme.colors.primary.main, - &:hover { - background: ${theme.colors.primary.shade}; - } + '&:hover': { + background: theme.colors.primary.shade, + }, - &:after { - content: ''; - position: absolute; - z-index: 2; - left: 2px; - right: 2px; - top: calc(50% - 1.5px); - height: 3px; - border: 1.5px solid ${theme.colors.primary.contrastText}; - background-color: ${theme.colors.primary.contrastText}; - width: auto; - transform: none; - } - } - &:disabled[aria-checked='mixed'] + span { - background-color: ${theme.colors.action.disabledBackground}; - border: 1px solid ${getBorderColor(theme.colors.error.transparent)}; + '&:after': { + content: '""', + position: 'absolute', + zIndex: 2, + left: '2px', + right: '2px', + top: 'calc(50% - 1.5px)', + height: '3px', + border: `1.5px solid ${theme.colors.primary.contrastText}`, + backgroundColor: theme.colors.primary.contrastText, + width: 'auto', + transform: 'none', + }, + }, + "&:disabled[aria-checked='mixed'] + span": { + backgroundColor: theme.colors.action.disabledBackground, + border: `1px solid ${getBorderColor(theme.colors.error.transparent)}`, - &:after { - border-color: ${theme.colors.action.disabledText}; - } - } - `, + '&:after': { + borderColor: theme.colors.action.disabledText, + }, + }, + }), - checkboxWrapper: css` - display: flex; - align-items: center; - grid-column-start: 1; - grid-row-start: 1; - `, - checkmark: css` - position: relative; /* Checkbox should be layered on top of the invisible input so it recieves :hover */ - z-index: 2; - display: inline-block; - width: ${theme.spacing(checkboxSize)}; - height: ${theme.spacing(checkboxSize)}; - border-radius: ${theme.shape.borderRadius()}; - background: ${theme.components.input.background}; - border: 1px solid ${getBorderColor(theme.components.input.borderColor)}; + checkboxWrapper: css({ + display: 'flex', + alignItems: 'center', + gridColumnStart: 1, + gridRowStart: 1, + }), + checkmark: css({ + position: 'relative' /* Checkbox should be layered on top of the invisible input so it recieves :hover */, + zIndex: 2, + display: 'inline-block', + width: theme.spacing(checkboxSize), + height: theme.spacing(checkboxSize), + borderRadius: theme.shape.borderRadius(), + background: theme.components.input.background, + border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`, - &:hover { - cursor: pointer; - border-color: ${getBorderColor(theme.components.input.borderHover)}; - } - `, + '&:hover': { + cursor: 'pointer', + borderColor: getBorderColor(theme.components.input.borderHover), + }, + }), label: cx( labelStyles.label, - css` - grid-column-start: 2; - grid-row-start: 1; - position: relative; - z-index: 2; - cursor: pointer; - max-width: fit-content; - line-height: ${theme.typography.bodySmall.lineHeight}; - margin-bottom: 0; - ` + css({ + gridColumnStart: 2, + gridRowStart: 1, + position: 'relative', + zIndex: 2, + cursor: 'pointer', + maxWidth: 'fit-content', + lineHeight: theme.typography.bodySmall.lineHeight, + marginBottom: 0, + }) ), description: cx( labelStyles.description, - css` - grid-column-start: 2; - grid-row-start: 2; - line-height: ${theme.typography.bodySmall.lineHeight}; - margin-top: 0; /* The margin effectively comes from the top: -2px on the label above it */ - ` + css({ + gridColumnStart: 2, + gridRowStart: 2, + lineHeight: theme.typography.bodySmall.lineHeight, + marginTop: 0 /* The margin effectively comes from the top: -2px on the label above it */, + }) ), }; }; diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx index f1d6d03166e..72fd2a45ee0 100644 --- a/packages/grafana-ui/src/components/Forms/Field.tsx +++ b/packages/grafana-ui/src/components/Forms/Field.tsx @@ -42,30 +42,30 @@ export interface FieldProps extends HTMLAttributes { export const getFieldStyles = stylesFactory((theme: GrafanaTheme2) => { return { - field: css` - display: flex; - flex-direction: column; - margin-bottom: ${theme.spacing(2)}; - `, - fieldHorizontal: css` - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - `, - fieldValidationWrapper: css` - margin-top: ${theme.spacing(0.5)}; - `, - fieldValidationWrapperHorizontal: css` - flex: 1 1 100%; - `, - validationMessageHorizontalOverflow: css` - width: 0; - overflow-x: visible; + field: css({ + display: 'flex', + flexDirection: 'column', + marginBottom: theme.spacing(2), + }), + fieldHorizontal: css({ + flexDirection: 'row', + justifyContent: 'space-between', + flexWrap: 'wrap', + }), + fieldValidationWrapper: css({ + marginTop: theme.spacing(0.5), + }), + fieldValidationWrapperHorizontal: css({ + flex: '1 1 100%', + }), + validationMessageHorizontalOverflow: css({ + width: 0, + overflowX: 'visible', - & > * { - white-space: nowrap; - } - `, + '& > *': { + whiteSpace: 'nowrap', + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.tsx index 2f93e60587d..c062021e20c 100644 --- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx @@ -27,12 +27,12 @@ export const FieldSet = ({ label, children, className, ...rest }: Props) => { const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - wrapper: css` - margin-bottom: ${theme.spacing(4)}; + wrapper: css({ + marginBottom: theme.spacing(4), - &:last-child { - margin-bottom: 0; - } - `, + '&:last-child': { + marginBottom: 0, + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx index 40d14c21704..517fa7be28b 100644 --- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx @@ -35,41 +35,39 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem `; return { - vertical: css` - ${baseStyle} - margin: ${theme.spacing(0.5, 0, 0, 0)}; + vertical: css(baseStyle, { + margin: theme.spacing(0.5, 0, 0, 0), - &:before { - content: ''; - position: absolute; - left: 9px; - top: -5px; - width: 0; - height: 0; - border-width: 0 4px 5px 4px; - border-color: transparent transparent ${theme.colors.error.main} transparent; - border-style: solid; - } - `, - horizontal: css` - ${baseStyle} - margin-left: 10px; + '&:before': { + content: '""', + position: 'absolute', + left: '9px', + top: '-5px', + width: 0, + height: 0, + borderWidth: '0 4px 5px 4px', + borderColor: `transparent transparent ${theme.colors.error.main} transparent`, + borderStyle: 'solid', + }, + }), + horizontal: css(baseStyle, { + marginLeft: '10px', - &:before { - content: ''; - position: absolute; - left: -5px; - top: 9px; - width: 0; - height: 0; - border-width: 4px 5px 4px 0; - border-color: transparent #e02f44 transparent transparent; - border-style: solid; - } - `, - fieldValidationMessageIcon: css` - margin-right: ${theme.spacing()}; - `, + '&:before': { + content: '""', + position: 'absolute', + left: '-5px', + top: '9px', + width: 0, + height: 0, + borderWidth: '4px 5px 4px 0', + borderColor: 'transparent #e02f44 transparent transparent', + borderStyle: 'solid', + }, + }), + fieldValidationMessageIcon: css({ + marginRight: theme.spacing(), + }), }; }); diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx index f1cf70b3197..c46e20358a7 100644 --- a/packages/grafana-ui/src/components/Forms/Form.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.tsx @@ -39,10 +39,10 @@ export function Form({ return (
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx index 4596c782de3..37f2551c9b7 100644 --- a/packages/grafana-ui/src/components/Forms/InlineField.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx @@ -85,20 +85,20 @@ InlineField.displayName = 'InlineField'; const getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => { return { - container: css` - display: flex; - flex-direction: row; - align-items: flex-start; - text-align: left; - position: relative; - flex: ${grow ? 1 : 0} ${shrink ? 1 : 0} auto; - margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0; - `, - childContainer: css` - flex: ${grow ? 1 : 0} ${shrink ? 1 : 0} auto; - `, - fieldValidationWrapper: css` - margin-top: ${theme.spacing(0.5)}; - `, + container: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + textAlign: 'left', + position: 'relative', + flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`, + margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`, + }), + childContainer: css({ + flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`, + }), + fieldValidationWrapper: css({ + marginTop: theme.spacing(0.5), + }), }; }; diff --git a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx index 2e28faef0dc..d7eb138b640 100644 --- a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx @@ -20,13 +20,13 @@ export const InlineFieldRow = ({ children, className, ...htmlProps }: Props) => const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - label: InlineFieldRow; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-content: flex-start; - row-gap: ${theme.spacing(0.5)}; - `, + container: css({ + label: 'InlineFieldRow', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignContent: 'flex-start', + rowGap: theme.spacing(0.5), + }), }; }; diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx index 0be4eee341a..8f73fbf2048 100644 --- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx @@ -52,30 +52,30 @@ export const InlineLabel = ({ export const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false, width?: number | 'auto') => { return { - label: css` - display: flex; - align-items: center; - justify-content: space-between; - flex-shrink: 0; - padding: 0 ${theme.spacing(1)}; - font-weight: ${theme.typography.fontWeightMedium}; - font-size: ${theme.typography.size.sm}; - background-color: ${transparent ? 'transparent' : theme.colors.background.secondary}; - height: ${theme.spacing(theme.components.height.md)}; - line-height: ${theme.spacing(theme.components.height.md)}; - margin-right: ${theme.spacing(0.5)}; - border-radius: ${theme.shape.radius.default}; - border: none; - width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'}; - color: ${theme.colors.text.primary}; - `, - icon: css` - color: ${theme.colors.text.secondary}; - margin-left: 10px; + label: css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + flexShrink: 0, + padding: theme.spacing(0, 1), + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.size.sm, + backgroundColor: transparent ? 'transparent' : theme.colors.background.secondary, + height: theme.spacing(theme.components.height.md), + lineHeight: theme.spacing(theme.components.height.md), + marginRight: theme.spacing(0.5), + borderRadius: theme.shape.radius.default, + border: 'none', + width: width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%', + color: theme.colors.text.primary, + }), + icon: css({ + color: theme.colors.text.secondary, + marginLeft: '10px', - :hover { - color: ${theme.colors.text.primary}; - } - `, + ':hover': { + color: theme.colors.text.primary, + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx index bfe5d1f8742..7e6bb68567c 100644 --- a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx @@ -25,14 +25,14 @@ InlineSegmentGroup.displayName = 'InlineSegmentGroup'; const getStyles = (theme: GrafanaTheme2, grow?: boolean) => { return { - container: css` - display: flex; - flex-direction: row; - align-items: flex-start; - text-align: left; - position: relative; - flex: ${grow ? 1 : 0} 0 auto; - margin-bottom: ${theme.spacing(0.5)}; - `, + container: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + textAlign: 'left', + position: 'relative', + flex: `${grow ? 1 : 0} 0 auto`, + marginBottom: theme.spacing(0.5), + }), }; }; diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx index 7b842245351..a8f6826f901 100644 --- a/packages/grafana-ui/src/components/Forms/Label.tsx +++ b/packages/grafana-ui/src/components/Forms/Label.tsx @@ -14,35 +14,35 @@ export interface LabelProps extends React.LabelHTMLAttributes export const getLabelStyles = stylesFactory((theme: GrafanaTheme2) => { return { - label: css` - label: Label; - font-size: ${theme.typography.size.sm}; - font-weight: ${theme.typography.fontWeightMedium}; - line-height: 1.25; - margin-bottom: ${theme.spacing(0.5)}; - color: ${theme.colors.text.primary}; - max-width: 480px; - `, - labelContent: css` - display: flex; - align-items: center; - `, - description: css` - label: Label-description; - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.size.sm}; - font-weight: ${theme.typography.fontWeightRegular}; - margin-top: ${theme.spacing(0.25)}; - display: block; - `, - categories: css` - label: Label-categories; - display: inline-flex; - align-items: center; - `, - chevron: css` - margin: 0 ${theme.spacing(0.25)}; - `, + label: css({ + label: 'Label', + fontSize: theme.typography.size.sm, + fontWeight: theme.typography.fontWeightMedium, + lineHeight: 1.25, + marginBottom: theme.spacing(0.5), + color: theme.colors.text.primary, + maxWidth: '480px', + }), + labelContent: css({ + display: 'flex', + alignItems: 'center', + }), + description: css({ + label: 'Label-description', + color: theme.colors.text.secondary, + fontSize: theme.typography.size.sm, + fontWeight: theme.typography.fontWeightRegular, + marginTop: theme.spacing(0.25), + display: 'block', + }), + categories: css({ + label: 'Label-categories', + display: 'inline-flex', + alignItems: 'center', + }), + chevron: css({ + margin: theme.spacing(0, 0.25), + }), }; }); diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx index 70cc785a5da..019e7a9a768 100644 --- a/packages/grafana-ui/src/components/Forms/Legend.tsx +++ b/packages/grafana-ui/src/components/Forms/Legend.tsx @@ -12,11 +12,11 @@ export interface LabelProps extends React.HTMLAttributes { export const getLegendStyles = (theme: GrafanaTheme2) => { return { - legend: css` - font-size: ${theme.typography.h3.fontSize}; - font-weight: ${theme.typography.fontWeightRegular}; - margin: 0 0 ${theme.spacing(2)} 0; - `, + legend: css({ + fontSize: theme.typography.h3.fontSize, + fontWeight: theme.typography.fontWeightRegular, + margin: theme.spacing(0, 0, 2, 0), + }), }; }; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index e5394ae1263..9da6eb7c236 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -77,53 +77,48 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut const labelHeight = height * theme.spacing.gridSize - 4 - 2; return { - radio: css` - position: absolute; - opacity: 0; - z-index: -1000; + radio: css({ + position: 'absolute', + opacity: 0, + zIndex: -1000, - &:checked + label { - color: ${theme.colors.text.primary}; - font-weight: ${theme.typography.fontWeightMedium}; - background: ${theme.colors.action.selected}; - z-index: 3; - } + '&:checked + label': { + color: theme.colors.text.primary, + fontWeight: theme.typography.fontWeightMedium, + background: theme.colors.action.selected, + zIndex: 3, + }, - &:focus + label, - &:focus-visible + label { - ${getFocusStyles(theme)}; - } + '&:focus + label, &:focus-visible + label': getFocusStyles(theme), - &:focus:not(:focus-visible) + label { - ${getMouseFocusStyles(theme)} - } + '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme), - &:disabled + label { - color: ${theme.colors.text.disabled}; - cursor: not-allowed; - } - `, - radioLabel: css` - display: inline-block; - position: relative; - font-size: ${fontSize}; - height: ${labelHeight}px; + '&:disabled + label': { + color: theme.colors.text.disabled, + cursor: 'not-allowed', + }, + }), + radioLabel: css({ + display: 'inline-block', + position: 'relative', + fontSize, + height: `${labelHeight}px`, // Deduct border from line-height for perfect vertical centering on windows and linux - line-height: ${labelHeight}px; - color: ${textColor}; - padding: ${theme.spacing(0, padding)}; - border-radius: ${theme.shape.borderRadius()}; - background: ${theme.colors.background.primary}; - cursor: pointer; - z-index: 1; - flex: ${fullWidth ? `1 0 0` : 'none'}; - text-align: center; - user-select: none; - white-space: nowrap; + lineHeight: `${labelHeight}px`, + color: textColor, + padding: theme.spacing(0, padding), + borderRadius: theme.shape.borderRadius(), + background: theme.colors.background.primary, + cursor: 'pointer', + zIndex: 1, + flex: fullWidth ? `1 0 0` : 'none', + textAlign: 'center', + userSelect: 'none', + whiteSpace: 'nowrap', - &:hover { - color: ${textColorHover}; - } - `, + '&:hover': { + color: textColorHover, + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx index 2454124a82e..ac4f4882dee 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx @@ -117,14 +117,14 @@ const getStyles = (theme: GrafanaTheme2) => { fullWidth: css({ display: 'flex', }), - icon: css` - margin-right: 6px; - `, - img: css` - width: ${theme.spacing(2)}; - height: ${theme.spacing(2)}; - margin-right: ${theme.spacing(1)}; - `, + icon: css({ + marginRight: '6px', + }), + img: css({ + width: theme.spacing(2), + height: theme.spacing(2), + marginRight: theme.spacing(1), + }), invalid: css({ border: `1px solid ${theme.colors.error.border}`, }), diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx index 55e6ce11a24..6844c98cf3f 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx @@ -35,56 +35,53 @@ export const RadioButtonDot = ({ id, name, label, checked, disabled, description }; const getStyles = (theme: GrafanaTheme2) => ({ - input: css` - position: relative; - appearance: none; - outline: none; - background-color: ${theme.colors.background.canvas}; - margin: 0; - width: ${theme.spacing(2)} !important; /* TODO How to overcome this? Checkbox does the same 🙁 */ - height: ${theme.spacing(2)}; - border: 1px solid ${theme.colors.border.medium}; - border-radius: ${theme.shape.radius.circle}; - margin: 3px 0; /* Space for box-shadow when focused */ + input: css({ + position: 'relative', + appearance: 'none', + outline: 'none', + backgroundColor: theme.colors.background.canvas, + width: `${theme.spacing(2)} !important` /* TODO How to overcome this? Checkbox does the same 🙁 */, + height: theme.spacing(2), + border: `1px solid ${theme.colors.border.medium}`, + borderRadius: theme.shape.radius.circle, + margin: '3px 0' /* Space for box-shadow when focused */, - :checked { - background-color: ${theme.v1.palette.white}; - border: 5px solid ${theme.colors.primary.main}; - } + ':checked': { + backgroundColor: theme.v1.palette.white, + border: `5px solid ${theme.colors.primary.main}`, + }, - :disabled { - background-color: ${theme.colors.action.disabledBackground} !important; - border-color: ${theme.colors.border.weak}; - } + ':disabled': { + backgroundColor: `${theme.colors.action.disabledBackground} !important`, + borderColor: theme.colors.border.weak, + }, - :disabled:checked { - border: 1px solid ${theme.colors.border.weak}; - } + ':disabled:checked': { + border: `1px solid ${theme.colors.border.weak}`, + }, - :disabled:checked::after { - content: ''; - width: 6px; - height: 6px; - background-color: ${theme.colors.text.disabled}; - border-radius: ${theme.shape.radius.circle}; - display: inline-block; - position: absolute; - top: 4px; - left: 4px; - } + ':disabled:checked::after': { + content: '""', + width: '6px', + height: '6px', + backgroundColor: theme.colors.text.disabled, + borderRadius: theme.shape.radius.circle, + display: 'inline-block', + position: 'absolute', + top: '4px', + left: '4px', + }, - :focus { - outline: none !important; - box-shadow: - 0 0 0 1px ${theme.colors.background.canvas}, - 0 0 0 3px ${theme.colors.primary.main}; - } - `, - label: css` - font-size: ${theme.typography.fontSize}; - line-height: 22px; /* 16px for the radio button and 6px for the focus shadow */ - display: grid; - grid-template-columns: ${theme.spacing(2)} auto; - gap: ${theme.spacing(1)}; - `, + ':focus': { + outline: 'none !important', + boxShadow: `0 0 0 1px ${theme.colors.background.canvas}, 0 0 0 3px ${theme.colors.primary.main}`, + }, + }), + label: css({ + fontSize: theme.typography.fontSize, + lineHeight: '22px' /* 16px for the radio button and 6px for the focus shadow */, + display: 'grid', + gridTemplateColumns: `${theme.spacing(2)} auto`, + gap: theme.spacing(1), + }), }); diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx index 87e709db2d0..8f49564e1f1 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx @@ -64,8 +64,8 @@ export function RadioButtonList({ } const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - display: grid; - gap: ${theme.spacing(1)}; - `, + container: css({ + display: 'grid', + gap: theme.spacing(1), + }), }); diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index d4ae7e92eef..66297cfa372 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -1,15 +1,14 @@ import { css, cx } from '@emotion/css'; -import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { focusCss } from '../../themes/mixins'; +import { getFocusStyles } from '../../themes/mixins'; import { ComponentSize } from '../../types/size'; -export const getFocusStyle = (theme: GrafanaTheme | GrafanaTheme2) => css` - &:focus { - ${focusCss(theme)} - } -`; +export const getFocusStyle = (theme: GrafanaTheme2) => + css({ + '&:focus': getFocusStyles(theme), + }); export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => { const borderColor = invalid ? theme.colors.error.border : theme.components.input.borderColor; @@ -23,79 +22,72 @@ export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => { return cx( inputPadding(theme), - css` - background: ${background}; - line-height: ${theme.typography.body.lineHeight}; - font-size: ${theme.typography.size.md}; - color: ${textColor}; - border: 1px solid ${borderColor}; + css({ + background, + lineHeight: theme.typography.body.lineHeight, + fontSize: theme.typography.size.md, + color: textColor, + border: `1px solid ${borderColor}`, - &:-webkit-autofill, - &:-webkit-autofill:hover { + '&:-webkit-autofill, &:-webkit-autofill:hover': { /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */ - box-shadow: - inset 0 0 0 1px rgba(255, 255, 255, 0), - inset 0 0 0 100px ${background}!important; - -webkit-text-fill-color: ${textColor} !important; - border-color: ${autoFillBorder}; - } + boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important`, + WebkitTextFillColor: `${textColor} !important`, + borderColor: autoFillBorder, + }, - &:-webkit-autofill:focus { + '&:-webkit-autofill:focus': { /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */ - box-shadow: - 0 0 0 2px ${theme.colors.background.primary}, - 0 0 0px 4px ${theme.colors.primary.main}, - inset 0 0 0 1px rgba(255, 255, 255, 0), - inset 0 0 0 100px ${background}!important; - -webkit-text-fill-color: ${textColor} !important; - } + boxShadow: `0 0 0 2px ${theme.colors.background.primary}, 0 0 0px 4px ${theme.colors.primary.main}, inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important`, + WebkitTextFillColor: `${textColor} !important`, + }, - &:hover { - border-color: ${borderColorHover}; - } + '&:hover': { + borderColor: borderColorHover, + }, - &:focus { - outline: none; - } + '&:focus': { + outline: 'none', + }, - &:disabled { - background-color: ${theme.colors.action.disabledBackground}; - color: ${theme.colors.action.disabledText}; - border: 1px solid ${theme.colors.action.disabledBackground}; + '&:disabled': { + backgroundColor: theme.colors.action.disabledBackground, + color: theme.colors.action.disabledText, + border: `1px solid ${theme.colors.action.disabledBackground}`, - &:hover { - border-color: ${borderColor}; - } - } + '&:hover': { + borderColor, + }, + }, - &::placeholder { - color: ${theme.colors.text.disabled}; - opacity: 1; - } - ` + '&::placeholder': { + color: theme.colors.text.disabled, + opacity: 1, + }, + }) ); }; export const inputPadding = (theme: GrafanaTheme2) => { - return css` - padding: ${theme.spacing(0, 1, 0, 1)}; - `; + return css({ + padding: theme.spacing(0, 1, 0, 1), + }); }; export const inputSizes = () => { return { - sm: css` - width: ${inputSizesPixels('sm')}; - `, - md: css` - width: ${inputSizesPixels('md')}; - `, - lg: css` - width: ${inputSizesPixels('lg')}; - `, - auto: css` - width: ${inputSizesPixels('auto')}; - `, + sm: css({ + width: inputSizesPixels('sm'), + }), + md: css({ + width: inputSizesPixels('md'), + }), + lg: css({ + width: inputSizesPixels('lg'), + }), + auto: css({ + width: inputSizesPixels('auto'), + }), }; }; diff --git a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx index e672881dcb7..963fb862459 100644 --- a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx @@ -132,14 +132,14 @@ export const GraphContextMenuHeader = ({ function getStyles(theme: GrafanaTheme2) { return { - wrapper: css` - padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; - font-size: ${theme.typography.size.sm}; - z-index: ${theme.zIndex.tooltip}; - `, - displayName: css` - white-space: nowrap; - padding-left: ${theme.spacing(0.5)}; - `, + wrapper: css({ + padding: theme.spacing(0.5, 1), + fontSize: theme.typography.size.sm, + zIndex: theme.zIndex.tooltip, + }), + displayName: css({ + whiteSpace: 'nowrap', + paddingLeft: theme.spacing(0.5), + }), }; } diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx index 540bb3cbe9b..f7c28de0d3d 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx @@ -26,18 +26,18 @@ export interface GraphWithLegendProps extends GraphProps { } const getGraphWithLegendStyles = stylesFactory(({ placement }: GraphWithLegendProps) => ({ - wrapper: css` - display: flex; - flex-direction: ${placement === 'bottom' ? 'column' : 'row'}; - `, - graphContainer: css` - min-height: 65%; - flex-grow: 1; - `, - legendContainer: css` - padding: 10px 0; - max-height: ${placement === 'bottom' ? '35%' : 'none'}; - `, + wrapper: css({ + display: 'flex', + flexDirection: placement === 'bottom' ? 'column' : 'row', + }), + graphContainer: css({ + minHeight: '65%', + flexGrow: 1, + }), + legendContainer: css({ + padding: '10px 0', + maxHeight: placement === 'bottom' ? '35%' : 'none', + }), })); const shouldHideLegendItem = (data: GraphSeriesValue[][], hideEmpty = false, hideZero = false) => { diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index efb3674ea9e..89adde740cd 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx @@ -31,25 +31,25 @@ const IconWrapper = ({ name }: { name: IconName }) => { return (
{name}
@@ -69,26 +69,26 @@ export const IconsOverview = () => { return (
{icons .filter((val) => val.includes(filter)) diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index 2aad1b286d2..48f75cbb11a 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -20,19 +20,19 @@ export interface IconProps extends React.HTMLAttributes { const getIconStyles = (theme: GrafanaTheme2) => { return { // line-height: 0; is needed for correct icon alignment in Safari - container: css` - label: Icon; - display: inline-block; - line-height: 0; - `, - icon: css` - vertical-align: middle; - display: inline-block; - fill: currentColor; - `, - orange: css` - fill: ${theme.v1.palette.orange}; - `, + container: css({ + label: 'Icon', + display: 'inline-block', + lineHeight: 0, + }), + icon: css({ + verticalAlign: 'middle', + display: 'inline-block', + fill: 'currentColor', + }), + orange: css({ + fill: theme.v1.palette.orange, + }), }; }; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx index 304e7ae9656..7dfd3a1f78b 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx @@ -54,11 +54,11 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => { const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times']; const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive']; - const rowStyle = css` - display: flex; - gap: ${theme.spacing(1)}; - margin-bottom: ${theme.spacing(2)}; - `; + const rowStyle = css({ + display: 'flex', + gap: theme.spacing(1), + marginBottom: theme.spacing(2), + }); return ( @@ -66,9 +66,9 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => { return (

{variant}

{icons.map((icon) => { @@ -114,18 +114,18 @@ export const ExamplesBackground = (args: BasePropsWithTooltip) => { return (
{background}
{variants.map((variant) => { return ; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx index da29b23a413..faf80cb38ba 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx @@ -118,59 +118,52 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, size, variant: IconButton } return { - button: css` - z-index: 0; - position: relative; - margin: 0 ${theme.spacing(0.5)} 0 0; - box-shadow: none; - border: none; - display: inline-flex; - background: transparent; - justify-content: center; - align-items: center; - padding: 0; - color: ${iconColor}; + button: css({ + zIndex: 0, + position: 'relative', + margin: theme.spacing(0, 0.5, 0, 0), + boxShadow: 'none', + border: 'none', + display: 'inline-flex', + background: 'transparent', + justifyContent: 'center', + alignItems: 'center', + padding: 0, + color: iconColor, - &[disabled], - &:disabled { - cursor: not-allowed; - color: ${theme.colors.action.disabledText}; - opacity: 0.65; - } + '&[disabled], &:disabled': { + cursor: 'not-allowed', + color: theme.colors.action.disabledText, + opacity: 0.65, + }, - &:before { - z-index: -1; - position: absolute; - opacity: 0; - width: ${hoverSize}px; - height: ${hoverSize}px; - border-radius: ${theme.shape.radius.default}; - content: ''; - transition-duration: 0.2s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-property: opacity; - } + '&:before': { + zIndex: -1, + position: 'absolute', + opacity: 0, + width: `${hoverSize}px`, + height: `${hoverSize}px`, + borderRadius: theme.shape.radius.default, + content: '""', + transitionDuration: '0.2s', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionProperty: 'opacity', + }, - &:focus, - &:focus-visible { - ${getFocusStyles(theme)} - } + '&:focus, &:focus-visible': getFocusStyles(theme), - &:focus:not(:focus-visible) { - ${getMouseFocusStyles(theme)} - } + '&:focus:not(:focus-visible)': getMouseFocusStyles(theme), - &:hover { - &:before { - background-color: ${variant === 'secondary' - ? theme.colors.action.hover - : colorManipulator.alpha(iconColor, 0.12)}; - opacity: 1; - } - } - `, - icon: css` - vertical-align: baseline; - `, + '&:hover': { + '&:before': { + backgroundColor: + variant === 'secondary' ? theme.colors.action.hover : colorManipulator.alpha(iconColor, 0.12), + opacity: 1, + }, + }, + }), + icon: css({ + verticalAlign: 'baseline', + }), }; }); diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx index 18683c539ec..97f471e7c33 100644 --- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx @@ -36,9 +36,9 @@ FeatureInfoBox.displayName = 'FeatureInfoBox'; const getFeatureInfoBoxStyles = (theme: GrafanaTheme2) => { return { - badge: css` - margin-bottom: ${theme.spacing(1)}; - `, + badge: css({ + marginBottom: theme.spacing(1), + }), }; }; diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx index 6ae4314c8aa..cd5ab6d93ef 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx @@ -49,7 +49,7 @@ const InfoBoxTemplate: StoryFn = (args) => { return (
Deprecrated component, use Alert with info severity
- ; + ); }; diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx index 1d79acf7a74..9ed71a53e9d 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx @@ -47,9 +47,9 @@ InfoBox.displayName = 'InfoBox'; const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - docsLink: css` - display: inline-block; - margin-top: ${theme.spacing(2)}; - `, + docsLink: css({ + display: 'inline-block', + marginTop: theme.spacing(2), + }), }; }); diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx index 7eb170c228c..855dbc7077b 100644 --- a/packages/grafana-ui/src/components/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Input/Input.tsx @@ -82,182 +82,182 @@ Input.displayName = 'Input'; export const getInputStyles = stylesFactory(({ theme, invalid = false, width }: StyleDeps) => { const prefixSuffixStaticWidth = '28px'; - const prefixSuffix = css` - position: absolute; - top: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - flex-grow: 0; - flex-shrink: 0; - font-size: ${theme.typography.size.md}; - height: 100%; + const prefixSuffix = css({ + position: 'absolute', + top: 0, + zIndex: 1, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexGrow: 0, + flexShrink: 0, + fontSize: theme.typography.size.md, + height: '100%', /* Min width specified for prefix/suffix classes used outside React component*/ - min-width: ${prefixSuffixStaticWidth}; - color: ${theme.colors.text.secondary}; - `; + minWidth: prefixSuffixStaticWidth, + color: theme.colors.text.secondary, + }); return { // Wraps inputWrapper and addons - wrapper: cx(css` - label: input-wrapper; - display: flex; - width: ${width ? `${theme.spacing(width)}` : '100%'}; - height: ${theme.spacing(theme.components.height.md)}; - border-radius: ${theme.shape.borderRadius()}; - &:hover { - > .prefix, - .suffix, - .input { - border-color: ${invalid ? theme.colors.error.border : theme.colors.primary.border}; - } + wrapper: cx( + css({ + label: 'input-wrapper', + display: 'flex', + width: width ? theme.spacing(width) : '100%', + height: theme.spacing(theme.components.height.md), + borderRadius: theme.shape.borderRadius(), + '&:hover': { + '> .prefix, .suffix, .input': { + borderColor: invalid ? theme.colors.error.border : theme.colors.primary.border, + }, - // only show number buttons on hover - input[type='number'] { - -moz-appearance: number-input; - -webkit-appearance: number-input; - appearance: textfield; - } + // only show number buttons on hover + "input[type='number']": { + appearance: 'textfield', + }, - input[type='number']::-webkit-inner-spin-button, - input[type='number']::-webkit-outer-spin-button { - -webkit-appearance: inner-spin-button !important; - opacity: 1; - } - } - `), + "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button": { + // Need type assertion here due to the use of !important + // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + WebkitAppearance: 'inner-spin-button !important' as 'inner-spin-button', + opacity: 1, + }, + }, + }) + ), // Wraps input and prefix/suffix - inputWrapper: css` - label: input-inputWrapper; - position: relative; - flex-grow: 1; + inputWrapper: css({ + label: 'input-inputWrapper', + position: 'relative', + flexGrow: 1, /* we want input to be above addons, especially for focused state */ - z-index: 1; + zIndex: 1, /* when input rendered with addon before only*/ - &:not(:first-child):last-child { - > input { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } + '&:not(:first-child):last-child': { + '> input': { + borderLeft: 'none', + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, /* when input rendered with addon after only*/ - &:first-child:not(:last-child) { - > input { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } + '&:first-child:not(:last-child)': { + '> input': { + borderRight: 'none', + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + }, /* when rendered with addon before and after */ - &:not(:first-child):not(:last-child) { - > input { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } + '&:not(:first-child):not(:last-child)': { + '> input': { + borderRight: 'none', + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, - input { + input: { /* paddings specified for classes used outside React component */ - &:not(:first-child) { - padding-left: ${prefixSuffixStaticWidth}; - } - &:not(:last-child) { - padding-right: ${prefixSuffixStaticWidth}; - } - &[readonly] { - cursor: default; - } - } - `, + '&:not(:first-child)': { + paddingLeft: prefixSuffixStaticWidth, + }, + '&:not(:last-child)': { + paddingRight: prefixSuffixStaticWidth, + }, + '&[readonly]': { + cursor: 'default', + }, + }, + }), input: cx( getFocusStyle(theme), sharedInputStyle(theme, invalid), - css` - label: input-input; - position: relative; - z-index: 0; - flex-grow: 1; - border-radius: ${theme.shape.borderRadius()}; - height: 100%; - width: 100%; - ` + css({ + label: 'input-input', + position: 'relative', + zIndex: 0, + flexGrow: 1, + borderRadius: theme.shape.borderRadius(), + height: '100%', + width: '100%', + }) ), - inputDisabled: css` - background-color: ${theme.colors.action.disabledBackground}; - color: ${theme.colors.action.disabledText}; - border: 1px solid ${theme.colors.action.disabledBackground}; - &:focus { - box-shadow: none; - } - `, - addon: css` - label: input-addon; - display: flex; - justify-content: center; - align-items: center; - flex-grow: 0; - flex-shrink: 0; - position: relative; + inputDisabled: css({ + backgroundColor: theme.colors.action.disabledBackground, + color: theme.colors.action.disabledText, + border: `1px solid ${theme.colors.action.disabledBackground}`, + '&:focus': { + boxShadow: 'none', + }, + }), + addon: css({ + label: 'input-addon', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexGrow: 0, + flexShrink: 0, + position: 'relative', - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - > :last-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } + '&:first-child': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + '> :last-child': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + }, - &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - > :first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - > *:focus { + '&:last-child': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + '> :first-child': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, + '> *:focus': { /* we want anything that has focus and is an addon to be above input */ - z-index: 2; - } - `, + zIndex: 2, + }, + }), prefix: cx( prefixSuffix, - css` - label: input-prefix; - padding-left: ${theme.spacing(1)}; - padding-right: ${theme.spacing(0.5)}; - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - ` + css({ + label: 'input-prefix', + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(0.5), + borderRight: 'none', + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }) ), suffix: cx( prefixSuffix, - css` - label: input-suffix; - padding-left: ${theme.spacing(1)}; - padding-right: ${theme.spacing(1)}; - margin-bottom: -2px; - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - right: 0; - ` + css({ + label: 'input-suffix', + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), + marginBottom: '-2px', + borderLeft: 'none', + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + right: 0, + }) ), - loadingIndicator: css` - & + * { - margin-left: ${theme.spacing(0.5)}; - } - `, + loadingIndicator: css({ + '& + *': { + marginLeft: theme.spacing(0.5), + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/InteractiveTable/ExpanderCell.tsx b/packages/grafana-ui/src/components/InteractiveTable/ExpanderCell.tsx index 607b032878b..10d74578db2 100644 --- a/packages/grafana-ui/src/components/InteractiveTable/ExpanderCell.tsx +++ b/packages/grafana-ui/src/components/InteractiveTable/ExpanderCell.tsx @@ -4,11 +4,11 @@ import { CellProps } from 'react-table'; import { IconButton } from '../IconButton/IconButton'; -const expanderContainerStyles = css` - display: flex; - align-items: center; - height: 100%; -`; +const expanderContainerStyles = css({ + display: 'flex', + alignItems: 'center', + height: '100%', +}); export function ExpanderCell({ row, __rowID }: CellProps) { return ( diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx index 10a4b648781..d122b5b3463 100644 --- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx +++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx @@ -26,90 +26,88 @@ const getStyles = (theme: GrafanaTheme2) => { const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03); return { - container: css` - display: flex; - gap: ${theme.spacing(2)}; - flex-direction: column; - width: 100%; - `, - table: css` - border-radius: ${theme.shape.borderRadius()}; - width: 100%; + container: css({ + display: 'flex', + gap: theme.spacing(2), + flexDirection: 'column', + width: '100%', + }), + table: css({ + borderRadius: theme.shape.borderRadius(), + width: '100%', - td { - padding: ${theme.spacing(1)}; - } + td: { + padding: theme.spacing(1), + }, - td, - th { - min-width: ${theme.spacing(3)}; - } - `, - disableGrow: css` - width: 0; - `, - header: css` - border-bottom: 1px solid ${theme.colors.border.weak}; - &, - & > button { - position: relative; - white-space: nowrap; - padding: ${theme.spacing(1)}; - } - & > button { - &:after { - content: '\\00a0'; - } - width: 100%; - height: 100%; - background: none; - border: none; - padding-right: ${theme.spacing(2.5)}; - text-align: left; - font-weight: ${theme.typography.fontWeightMedium}; - } - `, - row: css` - label: row; - border-bottom: 1px solid ${theme.colors.border.weak}; + 'td, th': { + minWidth: theme.spacing(3), + }, + }), + disableGrow: css({ + width: 0, + }), + header: css({ + borderBottom: `1px solid ${theme.colors.border.weak}`, + '&, & > button': { + position: 'relative', + whiteSpace: 'nowrap', + padding: theme.spacing(1), + }, + '& > button': { + '&:after': { + content: '"\\00a0"', + }, + width: '100%', + height: '100%', + background: 'none', + border: 'none', + paddingRight: theme.spacing(2.5), + textAlign: 'left', + fontWeight: theme.typography.fontWeightMedium, + }, + }), + row: css({ + label: 'row', + borderBottom: `1px solid ${theme.colors.border.weak}`, - &:hover { - background-color: ${rowHoverBg}; - } + '&:hover': { + backgroundColor: rowHoverBg, + }, - &:last-child { - border-bottom: 0; - } - `, - expandedRow: css` - label: expanded-row-content; - border-bottom: none; - `, - expandedContentRow: css` - label: expanded-row-content; + '&:last-child': { + borderBottom: 0, + }, + }), + expandedRow: css({ + label: 'expanded-row-content', + borderBottom: 'none', + }), + expandedContentRow: css({ + label: 'expanded-row-content', - td { - border-bottom: 1px solid ${theme.colors.border.weak}; - position: relative; - padding: ${theme.spacing(2, 2, 2, 5)}; + td: { + borderBottom: `1px solid ${theme.colors.border.weak}`, + position: 'relative', + padding: theme.spacing(2, 2, 2, 5), - &:before { - content: ''; - position: absolute; - width: 1px; - top: 0; - left: 16px; - bottom: ${theme.spacing(2)}; - background: ${theme.colors.border.medium}; - } - } - `, - sortableHeader: css` + '&:before': { + content: '""', + position: 'absolute', + width: '1px', + top: 0, + left: '16px', + bottom: theme.spacing(2), + background: theme.colors.border.medium, + }, + }, + }), + sortableHeader: css({ /* increases selector's specificity so that it always takes precedence over default styles */ - && { - padding: 0; - } - `, + '&&': { + padding: 0, + }, + }), }; }; @@ -287,13 +285,13 @@ const useUniqueId = () => { }; const getColumnHeaderStyles = (theme: GrafanaTheme2) => ({ - sortIcon: css` - position: absolute; - top: ${theme.spacing(1)}; - `, - headerTooltipIcon: css` - margin-left: ${theme.spacing(0.5)}; - `, + sortIcon: css({ + position: 'absolute', + top: theme.spacing(1), + }), + headerTooltipIcon: css({ + marginLeft: theme.spacing(0.5), + }), }); function ColumnHeader({ diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx index 093bb54b6a3..c89f2288875 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.tsx +++ b/packages/grafana-ui/src/components/Layout/Layout.tsx @@ -111,14 +111,8 @@ export const Container = ({ children, padding, margin, grow, shrink }: React.Pro
{children} @@ -143,30 +137,30 @@ const getStyles = ( const label = orientation === Orientation.Vertical ? 'vertical-group' : 'horizontal-group'; return { - layout: css` - label: ${label}; - display: flex; - flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'}; - flex-wrap: ${wrap ? 'wrap' : 'nowrap'}; - justify-content: ${justify}; - align-items: ${align}; - height: 100%; - max-width: 100%; + layout: css({ + label: label, + display: 'flex', + flexDirection: orientation === Orientation.Vertical ? 'column' : 'row', + flexWrap: wrap ? 'wrap' : 'nowrap', + justifyContent: justify, + alignItems: align, + height: '100%', + maxWidth: '100%', // compensate for last row margin when wrapped, horizontal layout - margin-bottom: ${marginCompensation}; - `, - childWrapper: css` - label: layoutChildrenWrapper; - margin-bottom: ${orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing}; - margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0}; - display: flex; - align-items: ${align}; + marginBottom: marginCompensation, + }), + childWrapper: css({ + label: 'layoutChildrenWrapper', + marginBottom: orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing, + marginRight: orientation === Orientation.Horizontal ? finalSpacing : 0, + display: 'flex', + alignItems: align, - &:last-child { - margin-bottom: ${orientation === Orientation.Vertical && 0}; - margin-right: ${orientation === Orientation.Horizontal && 0}; - } - `, + '&:last-child': { + marginBottom: orientation === Orientation.Vertical ? 0 : undefined, + marginRight: orientation === Orientation.Horizontal ? 0 : undefined, + }, + }), }; }; @@ -182,10 +176,10 @@ const getContainerStyles = (theme: GrafanaTheme2, padding?: Spacing, margin?: Sp const paddingSize = (padding && padding !== 'none' && theme.spacing(spacingToNumber[padding])) || 0; const marginSize = (margin && margin !== 'none' && theme.spacing(spacingToNumber[margin])) || 0; return { - wrapper: css` - label: container; - margin: ${marginSize}; - padding: ${paddingSize}; - `, + wrapper: css({ + label: 'container', + margin: marginSize, + padding: paddingSize, + }), }; }; diff --git a/packages/grafana-ui/src/components/List/AbstractList.tsx b/packages/grafana-ui/src/components/List/AbstractList.tsx index 694e584e7f9..7fe7d358164 100644 --- a/packages/grafana-ui/src/components/List/AbstractList.tsx +++ b/packages/grafana-ui/src/components/List/AbstractList.tsx @@ -15,15 +15,15 @@ interface AbstractListProps extends ListProps { } const getStyles = stylesFactory((inlineList = false) => ({ - list: css` - list-style-type: none; - margin: 0; - padding: 0; - `, + list: css({ + listStyleType: 'none', + margin: 0, + padding: 0, + }), - item: css` - display: ${(inlineList && 'inline-block') || 'block'}; - `, + item: css({ + display: (inlineList && 'inline-block') || 'block', + }), })); export class AbstractList extends PureComponent> { diff --git a/packages/grafana-ui/src/components/List/List.internal.story.tsx b/packages/grafana-ui/src/components/List/List.internal.story.tsx index c113c34bc5d..03c2e35db05 100644 --- a/packages/grafana-ui/src/components/List/List.internal.story.tsx +++ b/packages/grafana-ui/src/components/List/List.internal.story.tsx @@ -44,19 +44,19 @@ const getItem = (inline = false) => { const customRenderer = (item: ReturnType[0], index: number) => (
{item.name} diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx index 1e80fe1902c..018d965602f 100644 --- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx +++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx @@ -27,8 +27,8 @@ export const LoadingPlaceholder = ({ text, className, ...rest }: LoadingPlacehol const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - margin-bottom: ${theme.spacing(4)}; - `, + container: css({ + marginBottom: theme.spacing(4), + }), }; }; diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx index 18439eec734..5ea9de41b7d 100644 --- a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx +++ b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx @@ -90,13 +90,13 @@ export const FieldValueMatcherEditor = ({ options, onChange }: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - spot: css` - display: flex; - flex-direction: row; - align-items: center; - align-content: flex-end; - gap: 4px; - `, + spot: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + alignContent: 'flex-end', + gap: '4px', + }), }; }; diff --git a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx index d366016c6e8..305ba6b353a 100644 --- a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx @@ -45,10 +45,10 @@ MenuGroup.displayName = 'MenuGroup'; /** @internal */ const getStyles = (theme: GrafanaTheme2) => { return { - groupLabel: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.size.sm}; - padding: ${theme.spacing(0.5, 1)}; - `, + groupLabel: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.size.sm, + padding: theme.spacing(0.5, 1), + }), }; }; diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx index 65e77370885..71158c6de6f 100644 --- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx @@ -191,88 +191,80 @@ MenuItem.displayName = 'MenuItem'; const getStyles = (theme: GrafanaTheme2) => { return { - item: css` - background: none; - cursor: pointer; - white-space: nowrap; - color: ${theme.colors.text.primary}; - display: flex; - align-items: center; - padding: ${theme.spacing(0.5, 2)}; - min-height: ${theme.spacing(4)}; - margin: 0; - border: none; - width: 100%; - position: relative; + item: css({ + background: 'none', + cursor: 'pointer', + whiteSpace: 'nowrap', + color: theme.colors.text.primary, + display: 'flex', + alignItems: 'center', + padding: theme.spacing(0.5, 2), + minHeight: theme.spacing(4), + margin: 0, + border: 'none', + width: '100%', + position: 'relative', - &:hover, - &:focus, - &:focus-visible { - background: ${theme.colors.action.hover}; - color: ${theme.colors.text.primary}; - text-decoration: none; - } + '&:hover, &:focus, &:focus-visible': { + background: theme.colors.action.hover, + color: theme.colors.text.primary, + textDecoration: 'none', + }, - &:focus-visible { - ${getFocusStyles(theme)} - } - `, - active: css` - background: ${theme.colors.action.hover}; - `, - destructive: css` - color: ${theme.colors.error.text}; + '&:focus-visible': getFocusStyles(theme), + }), + active: css({ + background: theme.colors.action.hover, + }), + destructive: css({ + color: theme.colors.error.text, - svg { - color: ${theme.colors.error.text}; - } + svg: { + color: theme.colors.error.text, + }, - &:hover, - &:focus, - &:focus-visible { - background: ${theme.colors.error.main}; - color: ${theme.colors.error.contrastText}; + '&:hover, &:focus, &:focus-visible': { + background: theme.colors.error.main, + color: theme.colors.error.contrastText, - svg { - color: ${theme.colors.error.contrastText}; - } - } - `, - disabled: css` - color: ${theme.colors.action.disabledText}; + svg: { + color: theme.colors.error.contrastText, + }, + }, + }), + disabled: css({ + color: theme.colors.action.disabledText, - &:hover, - &:focus, - &:focus-visible { - cursor: not-allowed; - background: none; - color: ${theme.colors.action.disabledText}; - } - `, - icon: css` - opacity: 0.7; - margin-right: 10px; - margin-left: -4px; - color: ${theme.colors.text.secondary}; - `, - rightWrapper: css` - display: flex; - align-items: center; - margin-left: auto; - `, - shortcutIcon: css` - margin-right: ${theme.spacing(1)}; - `, - withShortcut: css` - min-width: ${theme.spacing(10.5)}; - `, - shortcut: css` - display: flex; - align-items: center; - gap: ${theme.spacing(1)}; - margin-left: ${theme.spacing(2)}; - color: ${theme.colors.text.secondary}; - opacity: 0.7; - `, + '&:hover, &:focus, &:focus-visible': { + cursor: 'not-allowed', + background: 'none', + color: theme.colors.action.disabledText, + }, + }), + icon: css({ + opacity: 0.7, + marginRight: '10px', + marginLeft: '-4px', + color: theme.colors.text.secondary, + }), + rightWrapper: css({ + display: 'flex', + alignItems: 'center', + marginLeft: 'auto', + }), + shortcutIcon: css({ + marginRight: theme.spacing(1), + }), + withShortcut: css({ + minWidth: theme.spacing(10.5), + }), + shortcut: css({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + marginLeft: theme.spacing(2), + color: theme.colors.text.secondary, + opacity: 0.7, + }), }; }; diff --git a/packages/grafana-ui/src/components/Menu/SubMenu.tsx b/packages/grafana-ui/src/components/Menu/SubMenu.tsx index 470baddcc56..a3db8c07233 100644 --- a/packages/grafana-ui/src/components/Menu/SubMenu.tsx +++ b/packages/grafana-ui/src/components/Menu/SubMenu.tsx @@ -74,31 +74,31 @@ SubMenu.displayName = 'SubMenu'; /** @internal */ const getStyles = (theme: GrafanaTheme2) => { return { - iconWrapper: css` - display: flex; - flex: 1; - justify-content: end; - `, - icon: css` - opacity: 0.7; - margin-left: ${theme.spacing(1)}; - color: ${theme.colors.text.secondary}; - `, - itemsWrapper: css` - background: ${theme.colors.background.primary}; - box-shadow: ${theme.shadows.z3}; - display: inline-block; - border-radius: ${theme.shape.borderRadius()}; - `, - pushLeft: css` - right: 100%; - left: unset; - `, - subMenu: css` - position: absolute; - top: 0; - left: 100%; - z-index: ${theme.zIndex.dropdown}; - `, + iconWrapper: css({ + display: 'flex', + flex: 1, + justifyContent: 'end', + }), + icon: css({ + opacity: 0.7, + marginLeft: theme.spacing(1), + color: theme.colors.text.secondary, + }), + itemsWrapper: css({ + background: theme.colors.background.primary, + boxShadow: theme.shadows.z3, + display: 'inline-block', + borderRadius: theme.shape.borderRadius(), + }), + pushLeft: css({ + right: '100%', + left: 'unset', + }), + subMenu: css({ + position: 'absolute', + top: 0, + left: '100%', + zIndex: theme.zIndex.dropdown, + }), }; }; diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx index 5c1e5d5e6ab..7dd81784b3a 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx +++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx @@ -107,9 +107,9 @@ WithTabs.args = { export const UsingContentClassName: Story = ({ title, body, ...args }) => { const override = { - modalContent: css` - background-color: darkorange; - `, + modalContent: css({ + backgroundColor: 'darkorange', + }), }; return ( diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index 470f0201ac6..ec031088f58 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -8,76 +8,76 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => { const borderRadius = theme.shape.borderRadius(1); return { - modal: css` - position: fixed; - z-index: ${theme.zIndex.modal}; - background: ${theme.colors.background.primary}; - box-shadow: ${theme.shadows.z3}; - border-radius: ${borderRadius}; - border: 1px solid ${theme.colors.border.weak}; - background-clip: padding-box; - outline: none; - width: 750px; - max-width: 100%; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - top: 10%; - max-height: 80%; - display: flex; - flex-direction: column; - `, - modalBackdrop: css` - position: fixed; - z-index: ${theme.zIndex.modalBackdrop}; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: ${theme.components.overlay.background}; - backdrop-filter: blur(1px); - `, - modalHeader: css` - label: modalHeader; - display: flex; - align-items: center; - min-height: 42px; - margin: ${theme.spacing(1, 2, 0, 2)}; - `, - modalHeaderWithTabs: css` - border-bottom: 1px solid ${theme.colors.border.weak}; - `, - modalHeaderTitle: css` - font-size: ${theme.typography.size.lg}; - margin: ${theme.spacing(0, 4, 0, 1)}; - display: flex; - align-items: center; - position: relative; - top: 2px; - `, - modalHeaderIcon: css` - margin-right: ${theme.spacing(2)}; - font-size: inherit; - &:before { - vertical-align: baseline; - } - `, - modalHeaderClose: css` - height: 100%; - display: flex; - align-items: center; - color: ${theme.colors.text.secondary}; - flex-grow: 1; - justify-content: flex-end; - `, - modalContent: css` - overflow: auto; - padding: ${theme.spacing(3)}; - width: 100%; - `, - modalButtonRow: css` - padding-top: ${theme.spacing(3)}; - `, + modal: css({ + position: 'fixed', + zIndex: theme.zIndex.modal, + background: theme.colors.background.primary, + boxShadow: theme.shadows.z3, + borderRadius, + border: `1px solid ${theme.colors.border.weak}`, + backgroundClip: 'padding-box', + outline: 'none', + width: '750px', + maxWidth: '100%', + left: 0, + right: 0, + marginLeft: 'auto', + marginRight: 'auto', + top: '10%', + maxHeight: '80%', + display: 'flex', + flexDirection: 'column', + }), + modalBackdrop: css({ + position: 'fixed', + zIndex: theme.zIndex.modalBackdrop, + top: 0, + right: 0, + bottom: 0, + left: 0, + backgroundColor: theme.components.overlay.background, + backdropFilter: 'blur(1px)', + }), + modalHeader: css({ + label: 'modalHeader', + display: 'flex', + alignItems: 'center', + minHeight: '42px', + margin: theme.spacing(1, 2, 0, 2), + }), + modalHeaderWithTabs: css({ + borderBottom: `1px solid ${theme.colors.border.weak}`, + }), + modalHeaderTitle: css({ + fontSize: theme.typography.size.lg, + margin: theme.spacing(0, 4, 0, 1), + display: 'flex', + alignItems: 'center', + position: 'relative', + top: '2px', + }), + modalHeaderIcon: css({ + marginRight: theme.spacing(2), + fontSize: 'inherit', + '&:before': { + verticalAlign: 'baseline', + }, + }), + modalHeaderClose: css({ + height: '100%', + display: 'flex', + alignItems: 'center', + color: theme.colors.text.secondary, + flexGrow: 1, + justifyContent: 'flex-end', + }), + modalContent: css({ + overflow: 'auto', + padding: theme.spacing(3), + width: '100%', + }), + modalButtonRow: css({ + paddingTop: theme.spacing(3), + }), }; }); diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx index e27b94a5020..b29cd124119 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx @@ -177,9 +177,9 @@ export const CodeEditor = withTheme2(UnthemedCodeEditor); const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - border-radius: ${theme.shape.borderRadius()}; - border: 1px solid ${theme.components.input.borderColor}; - `, + container: css({ + borderRadius: theme.shape.borderRadius(), + border: `1px solid ${theme.components.input.borderColor}`, + }), }; }; diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx index c46a7aeadc4..b4959cdc3af 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx @@ -160,99 +160,97 @@ const getStyles = (theme: GrafanaTheme2) => { const focusStyle = getFocusStyles(theme); return { - pre: css` - white-space: pre; - `, - toolbar: css` - align-items: center; - background: ${theme.colors.background.canvas}; - display: flex; - gap: ${theme.spacing(2)}; - justify-content: space-between; - padding: ${theme.spacing(1.5, 2)}; + pre: css({ + whiteSpace: 'pre', + }), + toolbar: css({ + alignItems: 'center', + background: theme.colors.background.canvas, + display: 'flex', + gap: theme.spacing(2), + justifyContent: 'space-between', + padding: theme.spacing(1.5, 2), - ${theme.breakpoints.down('md')} { - padding-left: 53px; - } - `, - noPageIcon: css` - ${theme.breakpoints.down('md')} { - padding-left: ${theme.spacing(2)}; - } - `, - leftWrapper: css` - display: flex; - flex-wrap: nowrap; - max-width: 70%; - `, - pageIcon: css` - display: none; - ${theme.breakpoints.up('sm')} { - display: flex; - padding-right: ${theme.spacing(1)}; - align-items: center; - } - `, - truncateText: css` - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - `, - titleWrapper: css` - display: flex; - margin: 0; - min-width: 0; - `, - navElement: css` - display: flex; - align-items: center; - min-width: 0; - `, - h1Styles: css` - margin: ${spacing(0, 1, 0, 0)}; - line-height: inherit; - flex-grow: 1; - min-width: 0; - `, - parentIcon: css` - margin-left: ${theme.spacing(0.5)}; - `, - titleText: css` - display: flex; - font-size: ${typography.size.lg}; - margin: 0; - max-width: 300px; - border-radius: ${theme.shape.radius.default}; - `, - titleLink: css` - &:focus-visible { - ${focusStyle} - } - `, - titleDivider: css` - padding: ${spacing(0, 0.5, 0, 0.5)}; - display: none; - ${theme.breakpoints.up('md')} { - display: unset; - } - `, - parentLink: css` - display: none; - ${theme.breakpoints.up('md')} { - display: unset; - flex: 1; - } - `, - leftActionItem: css` - display: none; - align-items: center; - padding-right: ${spacing(0.5)}; - ${theme.breakpoints.up('md')} { - display: flex; - } - `, - forceShowLeftActionItems: css` - display: flex; - `, + [theme.breakpoints.down('md')]: { + paddingLeft: '53px', + }, + }), + noPageIcon: css({ + [theme.breakpoints.down('md')]: { + paddingLeft: theme.spacing(2), + }, + }), + leftWrapper: css({ + display: 'flex', + flexWrap: 'nowrap', + maxWidth: '70%', + }), + pageIcon: css({ + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'flex', + paddingRight: theme.spacing(1), + alignItems: 'center', + }, + }), + truncateText: css({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }), + titleWrapper: css({ + display: 'flex', + margin: 0, + minWidth: 0, + }), + navElement: css({ + display: 'flex', + alignItems: 'center', + minWidth: 0, + }), + h1Styles: css({ + margin: spacing(0, 1, 0, 0), + lineHeight: 'inherit', + flexGrow: 1, + minWidth: 0, + }), + parentIcon: css({ + marginLeft: theme.spacing(0.5), + }), + titleText: css({ + display: 'flex', + fontSize: typography.size.lg, + margin: 0, + maxWidth: '300px', + borderRadius: theme.shape.radius.default, + }), + titleLink: css({ + '&:focus-visible': focusStyle, + }), + titleDivider: css({ + padding: spacing(0, 0.5, 0, 0.5), + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'unset', + }, + }), + parentLink: css({ + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'unset', + flex: 1, + }, + }), + leftActionItem: css({ + display: 'none', + alignItems: 'center', + paddingRight: spacing(0.5), + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }), + forceShowLeftActionItems: css({ + display: 'flex', + }), }; }; diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx index 770fe90f3db..bdfa1ec7cf8 100644 --- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx +++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx @@ -130,16 +130,16 @@ export const Pagination = ({ const getStyles = () => { return { - container: css` - float: right; - `, - item: css` - display: inline-block; - padding-left: 10px; - margin-bottom: 5px; - `, - ellipsis: css` - transform: rotate(90deg); - `, + container: css({ + float: 'right', + }), + item: css({ + display: 'inline-block', + paddingLeft: '10px', + marginBottom: '5px', + }), + ellipsis: css({ + transform: 'rotate(90deg)', + }), }; }; diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx index fe2ed4bc149..fc7b8b5ff8c 100644 --- a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx +++ b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx @@ -16,8 +16,9 @@ export const PanelContainer = ({ children, className, ...props }: Props) => { ); }; -const getStyles = (theme: GrafanaTheme2) => css` - background-color: ${theme.components.panel.background}; - border: 1px solid ${theme.components.panel.borderColor}; - border-radius: ${theme.shape.radius.default}; -`; +const getStyles = (theme: GrafanaTheme2) => + css({ + backgroundColor: theme.components.panel.background, + border: `1px solid ${theme.components.panel.borderColor}`, + borderRadius: theme.shape.radius.default, + }); diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx index fe10f7aa94f..6a76bb0da48 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx @@ -250,10 +250,8 @@ QueryField.defaultProps = { const getStyles = (theme: GrafanaTheme2) => { const focusStyles = getFocusStyles(theme); return { - wrapper: css` - &:focus-within { - ${focusStyles} - } - `, + wrapper: css({ + '&:focus-within': focusStyles, + }), }; }; diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx index a9415bb4179..6939a75cf98 100644 --- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx +++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx @@ -23,14 +23,14 @@ export interface Props extends Omit, 'onRe const getSecretFormFieldStyles = () => { return { - noRadiusInput: css` - border-bottom-right-radius: 0 !important; - border-top-right-radius: 0 !important; - `, - noRadiusButton: css` - border-bottom-left-radius: 0 !important; - border-top-left-radius: 0 !important; - `, + noRadiusInput: css({ + borderBottomRightRadius: '0 !important', + borderTopRightRadius: '0 !important', + }), + noRadiusButton: css({ + borderBottomLeftRadius: '0 !important', + borderTopLeftRadius: '0 !important', + }), }; }; /** diff --git a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx index 71eb10b74cb..e76b4ffce0d 100644 --- a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx +++ b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx @@ -20,11 +20,11 @@ export const RESET_BUTTON_TEXT = 'Reset'; const getStyles = (theme: GrafanaTheme2) => { return { - configuredStyle: css` - min-height: ${theme.spacing(theme.components.height.md)}; - padding-top: ${theme.spacing(0.5) /** Needed to mimic vertically centered text in an input box */}; - resize: none; - `, + configuredStyle: css({ + minHeight: theme.spacing(theme.components.height.md), + paddingTop: theme.spacing(0.5) /** Needed to mimic vertically centered text in an input box */, + resize: 'none', + }), }; }; diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx index d4d3d581b00..23de1309c2e 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx @@ -66,9 +66,9 @@ export function SegmentInput({ ); } - const inputWidthStyle = css` - width: ${Math.max(inputWidth + 20, 32)}px; - `; + const inputWidthStyle = css({ + width: `${Math.max(inputWidth + 20, 32)}px`, + }); return ( ({ - label: css` - color: ${theme.colors.primary.text}; - `, - fill: css` - flex-grow: 1; - margin-bottom: ${theme.spacing(0.5)}; - `, + label: css({ + color: theme.colors.primary.text, + }), + fill: css({ + flexGrow: 1, + marginBottom: theme.spacing(0.5), + }), }); diff --git a/packages/grafana-ui/src/components/Segment/styles.ts b/packages/grafana-ui/src/components/Segment/styles.ts index a3b2c6567a9..d09b3ed1bbe 100644 --- a/packages/grafana-ui/src/components/Segment/styles.ts +++ b/packages/grafana-ui/src/components/Segment/styles.ts @@ -6,19 +6,19 @@ export const getSegmentStyles = (theme: GrafanaTheme | GrafanaTheme2) => { const palette = 'v1' in theme ? theme.v1.palette : theme.palette; return { - segment: css` - cursor: pointer; - width: auto; - `, + segment: css({ + cursor: 'pointer', + width: 'auto', + }), - queryPlaceholder: css` - color: ${palette.gray2}; - `, + queryPlaceholder: css({ + color: palette.gray2, + }), - disabled: css` - cursor: not-allowed; - opacity: 0.65; - box-shadow: none; - `, + disabled: css({ + cursor: 'not-allowed', + opacity: 0.65, + boxShadow: 'none', + }), }; }; diff --git a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx index 010e028c0c5..7c0c6426ac4 100644 --- a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx +++ b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx @@ -13,9 +13,9 @@ export const IndicatorsContainer = React.forwardRef diff --git a/packages/grafana-ui/src/components/Select/InputControl.tsx b/packages/grafana-ui/src/components/Select/InputControl.tsx index 55aa58d6728..14b979ed8d8 100644 --- a/packages/grafana-ui/src/components/Select/InputControl.tsx +++ b/packages/grafana-ui/src/components/Select/InputControl.tsx @@ -23,28 +23,28 @@ const getInputControlStyles = stylesFactory((theme: GrafanaTheme2, invalid: bool return { input: cx( inputPadding(theme), - css` - width: 100%; - max-width: 100%; - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - justify-content: space-between; - padding-right: 0; - position: relative; - box-sizing: border-box; - `, + css({ + width: '100%', + maxWidth: '100%', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + flexWrap: 'wrap', + justifyContent: 'space-between', + paddingRight: 0, + position: 'relative', + boxSizing: 'border-box', + }), withPrefix && - css` - padding-left: 0; - ` + css({ + paddingLeft: 0, + }) ), prefix: cx( styles.prefix, - css` - position: relative; - ` + css({ + position: 'relative', + }) ), }; }); diff --git a/packages/grafana-ui/src/components/Select/SelectContainer.tsx b/packages/grafana-ui/src/components/Select/SelectContainer.tsx index 68845cdafe3..95a3d0c3d8b 100644 --- a/packages/grafana-ui/src/components/Select/SelectContainer.tsx +++ b/packages/grafana-ui/src/components/Select/SelectContainer.tsx @@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { stylesFactory } from '../../themes'; import { useTheme2 } from '../../themes/ThemeContext'; -import { focusCss } from '../../themes/mixins'; +import { getFocusStyles } from '../../themes/mixins'; import { sharedInputStyle } from '../Forms/commonStyles'; import { getInputStyles } from '../Input/Input'; @@ -44,28 +44,24 @@ const getSelectContainerStyles = stylesFactory( wrapper: cx( styles.wrapper, sharedInputStyle(theme, invalid), - focused && - css` - ${focusCss(theme.v1)} - `, + focused && css(getFocusStyles(theme)), disabled && styles.inputDisabled, - css` - position: relative; - box-sizing: border-box; + css({ + position: 'relative', + boxSizing: 'border-box', /* The display property is set by the styles prop in SelectBase because it's dependant on the width prop */ - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; - justify-content: space-between; - - min-height: 32px; - height: auto; - max-width: 100%; + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'stretch', + justifyContent: 'space-between', + minHeight: '32px', + height: 'auto', + maxWidth: '100%', /* Input padding is applied to the InputControl so the menu is aligned correctly */ - padding: 0; - cursor: ${disabled ? 'not-allowed' : 'pointer'}; - ` + padding: 0, + cursor: disabled ? 'not-allowed' : 'pointer', + }) ), }; } diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx index b5c787cc219..368234d99af 100644 --- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx @@ -22,26 +22,26 @@ interface State { const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme2) => { return { - header: css` - display: flex; - align-items: center; - justify-content: flex-start; - justify-items: center; - cursor: pointer; - padding: 7px 10px; - width: 100%; - border-bottom: 1px solid ${theme.colors.background.secondary}; + header: css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + justifyItems: 'center', + cursor: 'pointer', + padding: '7px 10px', + width: '100%', + borderBottom: `1px solid ${theme.colors.background.secondary}`, - &:hover { - color: ${theme.colors.text.maxContrast}; - } - `, - label: css` - flex-grow: 1; - `, - icon: css` - padding-right: 2px; - `, + '&:hover': { + color: theme.colors.text.maxContrast, + }, + }), + label: css({ + flexGrow: 1, + }), + icon: css({ + paddingRight: '2px', + }), }; }); diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx index d2fb64a0ecf..619466d6b96 100644 --- a/packages/grafana-ui/src/components/Select/SingleValue.tsx +++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx @@ -13,39 +13,39 @@ import { SlideOutTransition } from '../transitions/SlideOutTransition'; const getStyles = (theme: GrafanaTheme2) => { return { - singleValue: css` - label: singleValue; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - box-sizing: border-box; - max-width: 100%; - grid-area: 1 / 1 / 2 / 3; - `, - spinnerWrapper: css` - width: 16px; - height: 16px; - display: inline-block; - margin-right: 10px; - position: relative; - vertical-align: middle; - overflow: hidden; - `, - spinnerIcon: css` - width: 100%; - height: 100%; - position: absolute; - `, - optionIcon: css` - margin-right: ${theme.spacing(1)}; - color: ${theme.colors.text.secondary}; - `, - disabled: css` - color: ${theme.colors.text.disabled}; - `, - isOpen: css` - color: ${theme.colors.text.disabled}; - `, + singleValue: css({ + label: 'singleValue', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + boxSizing: 'border-box', + maxWidth: '100%', + gridArea: '1 / 1 / 2 / 3', + }), + spinnerWrapper: css({ + width: '16px', + height: '16px', + display: 'inline-block', + marginRight: '10px', + position: 'relative', + verticalAlign: 'middle', + overflow: 'hidden', + }), + spinnerIcon: css({ + width: '100%', + height: '100%', + position: 'absolute', + }), + optionIcon: css({ + marginRight: theme.spacing(1), + color: theme.colors.text.secondary, + }), + disabled: css({ + color: theme.colors.text.disabled, + }), + isOpen: css({ + color: theme.colors.text.disabled, + }), }; }; diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 09b2eb3ec58..152abf772da 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -6,125 +6,125 @@ import { stylesFactory } from '../../themes/stylesFactory'; export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => { return { - menu: css` - label: grafana-select-menu; - background: ${theme.components.dropdown.background}; - box-shadow: ${theme.shadows.z3}; - position: relative; - min-width: 100%; - z-index: 1; - `, - option: css` - label: grafana-select-option; - padding: 8px; - display: flex; - align-items: center; - flex-direction: row; - flex-shrink: 0; - white-space: nowrap; - cursor: pointer; - border-left: 2px solid transparent; + menu: css({ + label: 'grafana-select-menu', + background: theme.components.dropdown.background, + boxShadow: theme.shadows.z3, + position: 'relative', + minWidth: '100%', + zIndex: 1, + }), + option: css({ + label: 'grafana-select-option', + padding: '8px', + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + flexShrink: 0, + whiteSpace: 'nowrap', + cursor: 'pointer', + borderLeft: '2px solid transparent', - &:hover { - background: ${theme.colors.action.hover}; - } - `, - optionIcon: css` - margin-right: ${theme.spacing(1)}; - `, - optionImage: css` - label: grafana-select-option-image; - width: 16px; - margin-right: 10px; - `, - optionDescription: css` - label: grafana-select-option-description; - font-weight: normal; - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.text.secondary}; - white-space: normal; - line-height: ${theme.typography.body.lineHeight}; - `, - optionBody: css` - label: grafana-select-option-body; - display: flex; - font-weight: ${theme.typography.fontWeightMedium}; - flex-direction: column; - flex-grow: 1; - `, - optionFocused: css` - label: grafana-select-option-focused; - background: ${theme.colors.action.focus}; - `, - optionSelected: css` - background: ${theme.colors.action.selected}; - `, - optionDisabled: css` - label: grafana-select-option-disabled; - background-color: ${theme.colors.action.disabledBackground}; - color: ${theme.colors.action.disabledText}; - cursor: not-allowed; - `, - singleValue: css` - label: grafana-select-single-value; - color: ${theme.components.input.text}; - grid-area: 1 / 1 / 2 / 3; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - box-sizing: border-box; - max-width: 100%; - `, - valueContainer: css` - label: grafana-select-value-container; - align-items: center; - display: grid; - position: relative; - box-sizing: border-box; - flex: 1 1 0%; - outline: none; - overflow: hidden; - `, - valueContainerMulti: css` - label: grafana-select-value-container-multi; - flex-wrap: wrap; - display: flex; - `, - loadingMessage: css` - label: grafana-select-loading-message; - padding: ${theme.spacing(1)}; - text-align: center; - width: 100%; - `, - multiValueContainer: css` - label: grafana-select-multi-value-container; - display: flex; - align-items: center; - line-height: 1; - background: ${theme.colors.background.secondary}; - border-radius: ${theme.shape.borderRadius()}; - margin: ${theme.spacing(0.25, 1, 0.25, 0)}; - padding: ${theme.spacing(0.25, 0, 0.25, 1)}; - color: ${theme.colors.text.primary}; - font-size: ${theme.typography.size.sm}; + '&:hover': { + background: theme.colors.action.hover, + }, + }), + optionIcon: css({ + marginRight: theme.spacing(1), + }), + optionImage: css({ + label: 'grafana-select-option-image', + width: '16px', + marginRight: '10px', + }), + optionDescription: css({ + label: 'grafana-select-option-description', + fontWeight: 'normal', + fontSize: theme.typography.size.sm, + color: theme.colors.text.secondary, + whiteSpace: 'normal', + lineHeight: theme.typography.body.lineHeight, + }), + optionBody: css({ + label: 'grafana-select-option-body', + display: 'flex', + fontWeight: theme.typography.fontWeightMedium, + flexDirection: 'column', + flexGrow: 1, + }), + optionFocused: css({ + label: 'grafana-select-option-focused', + background: theme.colors.action.focus, + }), + optionSelected: css({ + background: theme.colors.action.selected, + }), + optionDisabled: css({ + label: 'grafana-select-option-disabled', + backgroundColor: theme.colors.action.disabledBackground, + color: theme.colors.action.disabledText, + cursor: 'not-allowed', + }), + singleValue: css({ + label: 'grafana-select-single-value', + color: theme.components.input.text, + gridArea: '1 / 1 / 2 / 3', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + boxSizing: 'border-box', + maxWidth: '100%', + }), + valueContainer: css({ + label: 'grafana-select-value-container', + alignItems: 'center', + display: 'grid', + position: 'relative', + boxSizing: 'border-box', + flex: '1 1 0%', + outline: 'none', + overflow: 'hidden', + }), + valueContainerMulti: css({ + label: 'grafana-select-value-container-multi', + flexWrap: 'wrap', + display: 'flex', + }), + loadingMessage: css({ + label: 'grafana-select-loading-message', + padding: theme.spacing(1), + textAlign: 'center', + width: '100%', + }), + multiValueContainer: css({ + label: 'grafana-select-multi-value-container', + display: 'flex', + alignItems: 'center', + lineHeight: 1, + background: theme.colors.background.secondary, + borderRadius: theme.shape.borderRadius(), + margin: theme.spacing(0.25, 1, 0.25, 0), + padding: theme.spacing(0.25, 0, 0.25, 1), + color: theme.colors.text.primary, + fontSize: theme.typography.size.sm, - &:hover { - background: ${theme.colors.emphasize(theme.colors.background.secondary)}; - } - `, - multiValueRemove: css` - label: grafana-select-multi-value-remove; - margin: ${theme.spacing(0, 0.5)}; - cursor: pointer; - svg { - margin-bottom: 0; - } - `, - singleValueRemove: css` - cursor: pointer; - &:hover { - color: ${theme.colors.text.primary}; - } - `, + '&:hover': { + background: theme.colors.emphasize(theme.colors.background.secondary), + }, + }), + multiValueRemove: css({ + label: 'grafana-select-multi-value-remove', + margin: theme.spacing(0, 0.5), + cursor: 'pointer', + svg: { + marginBottom: 0, + }, + }), + singleValueRemove: css({ + cursor: 'pointer', + '&:hover': { + color: theme.colors.text.primary, + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/Slider/styles.ts b/packages/grafana-ui/src/components/Slider/styles.ts index 28bf5c12740..e5d78736986 100644 --- a/packages/grafana-ui/src/components/Slider/styles.ts +++ b/packages/grafana-ui/src/components/Slider/styles.ts @@ -11,15 +11,18 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: bool const trackColor = theme.colors.primary.main; const handleColor = theme.colors.primary.main; const blueOpacity = theme.colors.primary.transparent; - const hoverSyle = `box-shadow: 0px 0px 0px 6px ${blueOpacity}`; + const hoverStyle = `box-shadow: 0px 0px 0px 6px ${blueOpacity}`; return { - container: css` - width: 100%; - margin: ${isHorizontal ? 'inherit' : `${spacing(1, 3, 1, 1)}`}; - padding-bottom: ${isHorizontal && hasMarks ? theme.spacing(1) : 'inherit'}; - height: ${isHorizontal ? 'auto' : '100%'}; - `, + container: css({ + width: '100%', + margin: isHorizontal ? 'inherit' : spacing(1, 3, 1, 1), + paddingBottom: isHorizontal && hasMarks ? theme.spacing(1) : 'inherit', + height: isHorizontal ? 'auto' : '100%', + }), + // can't write this as an object since it needs to overwrite rc-slider styles + // object syntax doesn't support kebab case keys + // eslint-disable-next-line @emotion/syntax-preference slider: css` .rc-slider { display: flex; @@ -47,7 +50,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: bool .rc-slider-handle:hover, .rc-slider-handle:active, .rc-slider-handle-click-focused:focus { - ${hoverSyle}; + ${hoverStyle}; } // The triple class names is needed because that's the specificity used in the source css :( @@ -97,31 +100,31 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: bool } } `, - sliderInput: css` - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - `, - sliderInputVertical: css` - flex-direction: column; - height: 100%; + sliderInput: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + width: '100%', + }), + sliderInputVertical: css({ + flexDirection: 'column', + height: '100%', - .rc-slider { - margin: 0; - order: 2; - } - `, - sliderInputField: css` - margin-left: ${theme.spacing(3)}; - width: 60px; - input { - text-align: center; - } - `, - sliderInputFieldVertical: css` - margin: 0 0 ${theme.spacing(3)} 0; - order: 1; - `, + '.rc-slider': { + margin: 0, + order: 2, + }, + }), + sliderInputField: css({ + marginLeft: theme.spacing(3), + width: '60px', + input: { + textAlign: 'center', + }, + }), + sliderInputFieldVertical: css({ + margin: `0 0 ${theme.spacing(3)} 0`, + order: 1, + }), }; }); diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index e5e2a487807..e6a7ca65cee 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -77,116 +77,108 @@ InlineSwitch.displayName = 'Switch'; const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boolean) => { return { - switch: css` - width: 32px; - height: 16px; - position: relative; + switch: css({ + width: '32px', + height: '16px', + position: 'relative', - input { - opacity: 0; - left: -100vw; - z-index: -1000; - position: absolute; + input: { + opacity: 0, + left: '-100vw', + zIndex: -1000, + position: 'absolute', - &:disabled + label { - background: ${theme.colors.action.disabledBackground}; - cursor: not-allowed; - } + '&:disabled + label': { + background: theme.colors.action.disabledBackground, + cursor: 'not-allowed', + }, - &:checked + label { - background: ${theme.colors.primary.main}; - border-color: ${theme.colors.primary.main}; + '&:checked + label': { + background: theme.colors.primary.main, + borderColor: theme.colors.primary.main, - &:hover { - background: ${theme.colors.primary.shade}; - } + '&:hover': { + background: theme.colors.primary.shade, + }, - &::after { - transform: translate3d(18px, -50%, 0); - background: ${theme.colors.primary.contrastText}; - } - } + '&::after': { + transform: 'translate3d(18px, -50%, 0)', + background: theme.colors.primary.contrastText, + }, + }, - &:focus + label, - &:focus-visible + label { - ${getFocusStyles(theme)} - } + '&:focus + label, &:focus-visible + label': getFocusStyles(theme), - &:focus:not(:focus-visible) + label { - ${getMouseFocusStyles(theme)} - } - } + '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme), + }, - label { - width: 100%; - height: 100%; - cursor: pointer; - border: none; - border-radius: ${theme.shape.radius.pill}; - background: ${theme.components.input.background}; - border: 1px solid ${theme.components.input.borderColor}; - transition: all 0.3s ease; + label: { + width: '100%', + height: '100%', + cursor: 'pointer', + borderRadius: theme.shape.radius.pill, + background: theme.components.input.background, + border: `1px solid ${theme.components.input.borderColor}`, + transition: 'all 0.3s ease', - &:hover { - border-color: ${theme.components.input.borderHover}; - } + '&:hover': { + borderColor: theme.components.input.borderHover, + }, - &::after { - position: absolute; - display: block; - content: ''; - width: 12px; - height: 12px; - border-radius: ${theme.shape.radius.circle}; - background: ${theme.colors.text.secondary}; - box-shadow: ${theme.shadows.z1}; - top: 50%; - transform: translate3d(2px, -50%, 0); - transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1); + '&::after': { + position: 'absolute', + display: 'block', + content: '""', + width: '12px', + height: '12px', + borderRadius: theme.shape.radius.circle, + background: theme.colors.text.secondary, + boxShadow: theme.shadows.z1, + top: '50%', + transform: 'translate3d(2px, -50%, 0)', + transition: 'transform 0.2s cubic-bezier(0.19, 1, 0.22, 1)', - @media (forced-colors: active) { - border: 1px solid transparent; - } - } - } - `, - inlineContainer: css` - padding: ${theme.spacing(0, 1)}; - height: ${theme.spacing(theme.components.height.md)}; - display: inline-flex; - align-items: center; - background: ${transparent ? 'transparent' : theme.components.input.background}; - border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}; - border-radius: ${theme.shape.borderRadius()}; + '@media (forced-colors: active)': { + border: '1px solid transparent', + }, + }, + }, + }), + inlineContainer: css({ + padding: theme.spacing(0, 1), + height: theme.spacing(theme.components.height.md), + display: 'inline-flex', + alignItems: 'center', + background: transparent ? 'transparent' : theme.components.input.background, + border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}`, + borderRadius: theme.shape.borderRadius(), - &:hover { - border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}; + '&:hover': { + border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}`, - .inline-switch-label { - color: ${theme.colors.text.primary}; - } - } - `, - disabled: css` - background-color: rgba(204, 204, 220, 0.04); - color: rgba(204, 204, 220, 0.6); - border: 1px solid rgba(204, 204, 220, 0.04); - `, - inlineLabel: css` - cursor: pointer; - padding-right: ${theme.spacing(1)}; - color: ${theme.colors.text.secondary}; - white-space: nowrap; - `, - inlineLabelEnabled: css` - color: ${theme.colors.text.primary}; - `, - invalid: css` - input + label, - input:checked + label, - input:hover + label { - border: 1px solid ${theme.colors.error.border}; - } - `, + '.inline-switch-label': { + color: theme.colors.text.primary, + }, + }, + }), + disabled: css({ + backgroundColor: 'rgba(204, 204, 220, 0.04)', + color: 'rgba(204, 204, 220, 0.6)', + border: '1px solid rgba(204, 204, 220, 0.04)', + }), + inlineLabel: css({ + cursor: 'pointer', + paddingRight: theme.spacing(1), + color: theme.colors.text.secondary, + whiteSpace: 'nowrap', + }), + inlineLabelEnabled: css({ + color: theme.colors.text.primary, + }), + invalid: css({ + 'input + label, input:checked + label, input:hover + label': { + border: `1px solid ${theme.colors.error.border}`, + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx index 2f5059f0308..5b8927eb1b7 100644 --- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx +++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx @@ -22,28 +22,28 @@ export interface TabbedContainerProps { const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - container: css` - height: 100%; - `, - tabContent: css` - padding: ${theme.spacing(2)}; - background-color: ${theme.colors.background.primary}; - height: calc(100% - ${theme.components.menuTabs.height}px); - `, - close: css` - position: absolute; - right: 16px; - top: 5px; - cursor: pointer; - font-size: ${theme.typography.size.lg}; - `, - tabs: css` - padding-top: ${theme.spacing(1)}; - border-color: ${theme.colors.border.weak}; - ul { - margin-left: ${theme.spacing(2)}; - } - `, + container: css({ + height: '100%', + }), + tabContent: css({ + padding: theme.spacing(2), + backgroundColor: theme.colors.background.primary, + height: `calc(100% - ${theme.components.menuTabs.height}px)`, + }), + close: css({ + position: 'absolute', + right: '16px', + top: '5px', + cursor: 'pointer', + fontSize: theme.typography.size.lg, + }), + tabs: css({ + paddingTop: theme.spacing(1), + borderColor: theme.colors.border.weak, + ul: { + marginLeft: theme.spacing(2), + }, + }), }; }); diff --git a/packages/grafana-ui/src/components/Table/Filter.tsx b/packages/grafana-ui/src/components/Table/Filter.tsx index 056cf79464d..5f4474782cf 100644 --- a/packages/grafana-ui/src/components/Table/Filter.tsx +++ b/packages/grafana-ui/src/components/Table/Filter.tsx @@ -48,12 +48,12 @@ export const Filter = ({ column, field, tableStyles }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - filterIconEnabled: css` - label: filterIconEnabled; - color: ${theme.colors.primary.text}; - `, - filterIconDisabled: css` - label: filterIconDisabled; - color: ${theme.colors.text.disabled}; - `, + filterIconEnabled: css({ + label: 'filterIconEnabled', + color: theme.colors.primary.text, + }), + filterIconDisabled: css({ + label: 'filterIconDisabled', + color: theme.colors.text.disabled, + }), }); diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx index 865085748dd..1900aae00ad 100644 --- a/packages/grafana-ui/src/components/Table/FilterList.tsx +++ b/packages/grafana-ui/src/components/Table/FilterList.tsx @@ -83,19 +83,19 @@ export const FilterList = ({ options, values, caseSensitive, onChange }: Props) }; const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ - filterList: css` - label: filterList; - `, - filterListRow: css` - label: filterListRow; - cursor: pointer; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: ${theme.spacing(0.5)}; + filterList: css({ + label: 'filterList', + }), + filterListRow: css({ + label: 'filterListRow', + cursor: 'pointer', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + padding: theme.spacing(0.5), - :hover { - background-color: ${theme.colors.action.hover}; - } - `, + ':hover': { + backgroundColor: theme.colors.action.hover, + }, + }), })); diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx index a8cd51ced95..f1e2ec807bf 100644 --- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx +++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx @@ -93,28 +93,28 @@ export const FilterPopup = ({ column: { preFilteredRows, filterValue, setFilter }; const getStyles = (theme: GrafanaTheme2) => ({ - filterContainer: css` - label: filterContainer; - width: 100%; - min-width: 250px; - height: 100%; - max-height: 400px; - background-color: ${theme.colors.background.primary}; - border: 1px solid ${theme.colors.border.weak}; - padding: ${theme.spacing(2)}; - margin: ${theme.spacing(1)} 0; - box-shadow: ${theme.shadows.z3}; - border-radius: ${theme.shape.radius.default}; - `, - listDivider: css` - label: listDivider; - width: 100%; - border-top: 1px solid ${theme.colors.border.medium}; - padding: ${theme.spacing(0.5, 2)}; - `, - label: css` - margin-bottom: 0; - `, + filterContainer: css({ + label: 'filterContainer', + width: '100%', + minWidth: '250px', + height: '100%', + maxHeight: '400px', + backgroundColor: theme.colors.background.primary, + border: `1px solid ${theme.colors.border.weak}`, + padding: theme.spacing(2), + margin: theme.spacing(1, 0), + boxShadow: theme.shadows.z3, + borderRadius: theme.shape.radius.default, + }), + listDivider: css({ + label: 'listDivider', + width: '100%', + borderTop: `1px solid ${theme.colors.border.medium}`, + padding: theme.spacing(0.5, 2), + }), + label: css({ + marginBottom: 0, + }), }); const stopPropagation = (event: React.MouseEvent) => { diff --git a/packages/grafana-ui/src/components/Table/FooterCell.tsx b/packages/grafana-ui/src/components/Table/FooterCell.tsx index df11100193b..992ecae9b5a 100644 --- a/packages/grafana-ui/src/components/Table/FooterCell.tsx +++ b/packages/grafana-ui/src/components/Table/FooterCell.tsx @@ -10,17 +10,17 @@ export interface FooterProps { } export const FooterCell = (props: FooterProps) => { - const cell = css` - width: 100%; - list-style: none; - `; + const cell = css({ + width: '100%', + listStyle: 'none', + }); - const list = css` - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - `; + const list = css({ + width: '100%', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + }); if (props.value && !Array.isArray(props.value)) { return {props.value}; diff --git a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx index 68483d62e19..8f5d07e5adf 100644 --- a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx +++ b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx @@ -13,10 +13,10 @@ import { TableCellProps, TableFieldOptions } from './types'; export function JSONViewCell(props: TableCellProps): JSX.Element { const { cell, tableStyles, cellProps, field, row } = props; const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect); - const txt = css` - cursor: pointer; - font-family: monospace; - `; + const txt = css({ + cursor: 'pointer', + fontFamily: 'monospace', + }); let value = cell.value; let displayValue = value; diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 35b34ea45f1..b6410d989a9 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -1,4 +1,4 @@ -import { css, CSSObject } from '@emotion/css'; +import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; import { TableCellHeight } from '@grafana/schema'; @@ -12,81 +12,69 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell const headerHeight = 28; const buildCellContainerStyle = (color?: string, background?: string, overflowOnHover?: boolean) => { - const cellActionsOverflow: CSSObject = { - margin: theme.spacing(0, -0.5, 0, 0.5), - }; - - const cellActionsNoOverflow: CSSObject = { - position: 'absolute', - top: 0, - right: 0, - margin: 'auto', - }; - - const onHoverOverflow: CSSObject = { - overflow: 'visible', - width: 'auto !important', - boxShadow: `0 0 2px ${theme.colors.primary.main}`, - background: background ?? theme.components.table.rowHoverBackground, - zIndex: 1, - }; - - return css` - label: ${overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow'}; - padding: ${cellPadding}px; - width: 100%; + return css({ + label: overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow', + padding: `${cellPadding}px`, + width: '100%', // Cell height need to account for row border - height: ${rowHeight - 1}px; - display: flex; - align-items: center; - border-right: 1px solid ${borderColor}; + height: `${rowHeight - 1}px`, + display: 'flex', + alignItems: 'center', + borderRight: `1px solid ${borderColor}`, - ${color ? `color: ${color};` : ''}; - ${background ? `background: ${background};` : ''}; - background-clip: padding-box; + color: color ?? undefined, + background: background ?? undefined, + backgroundClip: 'padding-box', - &:last-child:not(:only-child) { - border-right: none; - } + '&:last-child:not(:only-child)': { + borderRight: 'none', + }, - &:hover { - ${overflowOnHover && onHoverOverflow}; - .cellActions { - visibility: visible; - opacity: 1; - width: auto; - } - } + '&:hover': { + overflow: overflowOnHover ? 'visible' : undefined, + width: overflowOnHover ? 'auto !important' : undefined, + boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined, + background: overflowOnHover ? background ?? theme.components.table.rowHoverBackground : undefined, + zIndex: overflowOnHover ? 1 : undefined, + '.cellActions': { + visibility: 'visible', + opacity: 1, + width: 'auto', + }, + }, - a { - color: inherit; - } + a: { + color: 'inherit', + }, - .cellActions { - display: flex; - ${overflowOnHover ? cellActionsOverflow : cellActionsNoOverflow} - visibility: hidden; - opacity: 0; - width: 0; - align-items: center; - height: 100%; - padding: ${theme.spacing(1, 0.5, 1, 0.5)}; - background: ${background ? 'none' : theme.colors.emphasize(theme.colors.background.primary, 0.03)}; + '.cellActions': { + display: 'flex', + position: overflowOnHover ? undefined : 'absolute', + top: overflowOnHover ? undefined : 0, + right: overflowOnHover ? undefined : 0, + margin: overflowOnHover ? theme.spacing(0, -0.5, 0, 0.5) : 'auto', + visibility: 'hidden', + opacity: 0, + width: 0, + alignItems: 'center', + height: '100%', + padding: theme.spacing(1, 0.5, 1, 0.5), + background: background ? 'none' : theme.colors.emphasize(theme.colors.background.primary, 0.03), - svg { - color: ${color}; - } - } + svg: { + color, + }, + }, - .cellActionsLeft { - right: auto !important; - left: 0; - } + '.cellActionsLeft': { + right: 'auto !important', + left: 0, + }, - .cellActionsTransparent { - background: none; - } - `; + '.cellActionsTransparent': { + background: 'none', + }, + }); }; return { @@ -96,187 +84,187 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell cellPadding, cellHeightInner: cellHeight - cellPadding * 2, rowHeight, - table: css` - height: 100%; - width: 100%; - overflow: auto; - display: flex; - flex-direction: column; - `, - thead: css` - label: thead; - height: ${headerHeight}px; - overflow-y: auto; - overflow-x: hidden; - position: relative; - `, - tfoot: css` - label: tfoot; - height: ${headerHeight}px; - border-top: 1px solid ${borderColor}; - overflow-y: auto; - overflow-x: hidden; - position: relative; - `, - headerRow: css` - label: row; - border-bottom: 1px solid ${borderColor}; - `, - headerCell: css` - height: 100%; - padding: 0 ${cellPadding}px; - overflow: hidden; - white-space: nowrap; - display: flex; - align-items: center; - font-weight: ${theme.typography.fontWeightMedium}; + table: css({ + height: '100%', + width: '100%', + overflow: 'auto', + display: 'flex', + flexDirection: 'column', + }), + thead: css({ + label: 'thead', + height: `${headerHeight}px`, + overflowY: 'auto', + overflowX: 'hidden', + position: 'relative', + }), + tfoot: css({ + label: 'tfoot', + height: `${headerHeight}px`, + borderTop: `1px solid ${borderColor}`, + overflowY: 'auto', + overflowX: 'hidden', + position: 'relative', + }), + headerRow: css({ + label: 'row', + borderBottom: `1px solid ${borderColor}`, + }), + headerCell: css({ + height: '100%', + padding: `0 ${cellPadding}px`, + overflow: 'hidden', + whiteSpace: 'nowrap', + display: 'flex', + alignItems: 'center', + fontWeight: theme.typography.fontWeightMedium, - &:last-child { - border-right: none; - } - `, - headerCellLabel: css` - border: none; - padding: 0; - background: inherit; - cursor: pointer; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: ${theme.typography.fontWeightMedium}; - display: flex; - align-items: center; - margin-right: ${theme.spacing(0.5)}; + '&:last-child': { + borderRight: 'none', + }, + }), + headerCellLabel: css({ + border: 'none', + padding: 0, + background: 'inherit', + cursor: 'pointer', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + fontWeight: theme.typography.fontWeightMedium, + display: 'flex', + alignItems: 'center', + marginRight: theme.spacing(0.5), - &:hover { - text-decoration: underline; - color: ${theme.colors.text.link}; - } - `, + '&:hover': { + textDecoration: 'underline', + color: theme.colors.text.link, + }, + }), cellContainer: buildCellContainerStyle(undefined, undefined, true), cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, false), - cellText: css` - overflow: hidden; - text-overflow: ellipsis; - user-select: text; - white-space: nowrap; - `, - sortIcon: css` - margin-left: ${theme.spacing(0.5)}; - `, - cellLink: css` - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - user-select: text; - white-space: nowrap; - color: ${theme.colors.text.link}; - font-weight: ${theme.typography.fontWeightMedium}; - &:hover { - text-decoration: underline; - color: ${theme.colors.text.link}; - } - `, - cellLinkForColoredCell: css` - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - user-select: text; - white-space: nowrap; - font-weight: ${theme.typography.fontWeightMedium}; - text-decoration: underline; - `, - imageCellLink: css` - cursor: pointer; - overflow: hidden; - height: 100%; - `, - headerFilter: css` - background: transparent; - border: none; - label: headerFilter; - padding: 0; - `, - paginationWrapper: css` - display: flex; - height: ${cellHeight}px; - justify-content: center; - align-items: center; - width: 100%; - li { - margin-bottom: 0; - } - `, - paginationSummary: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - display: flex; - justify-content: flex-end; - padding: ${theme.spacing(0, 1, 0, 2)}; - `, + cellText: css({ + overflow: 'hidden', + textOverflow: 'ellipsis', + userSelect: 'text', + whiteSpace: 'nowrap', + }), + sortIcon: css({ + marginLeft: theme.spacing(0.5), + }), + cellLink: css({ + cursor: 'pointer', + overflow: 'hidden', + textOverflow: 'ellipsis', + userSelect: 'text', + whiteSpace: 'nowrap', + color: theme.colors.text.link, + fontWeight: theme.typography.fontWeightMedium, + '&:hover': { + textDecoration: 'underline', + color: theme.colors.text.link, + }, + }), + cellLinkForColoredCell: css({ + cursor: 'pointer', + overflow: 'hidden', + textOverflow: 'ellipsis', + userSelect: 'text', + whiteSpace: 'nowrap', + fontWeight: theme.typography.fontWeightMedium, + textDecoration: 'underline', + }), + imageCellLink: css({ + cursor: 'pointer', + overflow: 'hidden', + height: '100%', + }), + headerFilter: css({ + background: 'transparent', + border: 'none', + label: 'headerFilter', + padding: 0, + }), + paginationWrapper: css({ + display: 'flex', + height: `${cellHeight}px`, + justifyContent: 'center', + alignItems: 'center', + width: '100%', + li: { + marginBottom: 0, + }, + }), + paginationSummary: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + display: 'flex', + justifyContent: 'flex-end', + padding: theme.spacing(0, 1, 0, 2), + }), tableContentWrapper: (totalColumnsWidth: number) => { const width = totalColumnsWidth !== undefined ? `${totalColumnsWidth}px` : '100%'; - return css` - label: tableContentWrapper; - width: ${width}; - display: flex; - flex-direction: column; - `; + return css({ + label: 'tableContentWrapper', + width, + display: 'flex', + flexDirection: 'column', + }); }, - row: css` - label: row; - border-bottom: 1px solid ${borderColor}; + row: css({ + label: 'row', + borderBottom: `1px solid ${borderColor}`, - &:hover { - background-color: ${theme.components.table.rowHoverBackground}; - } + '&:hover': { + backgroundColor: theme.components.table.rowHoverBackground, + }, - &:last-child { - border-bottom: 0; - } - `, - imageCell: css` - height: 100%; - `, - resizeHandle: css` - label: resizeHandle; - cursor: col-resize !important; - display: inline-block; - background: ${resizerColor}; - opacity: 0; - transition: opacity 0.2s ease-in-out; - width: 8px; - height: 100%; - position: absolute; - right: -4px; - border-radius: ${theme.shape.radius.default}; - top: 0; - touch-action: none; + '&:last-child': { + borderBottom: 0, + }, + }), + imageCell: css({ + height: '100%', + }), + resizeHandle: css({ + label: 'resizeHandle', + cursor: 'col-resize !important', + display: 'inline-block', + background: resizerColor, + opacity: 0, + transition: 'opacity 0.2s ease-in-out', + width: '8px', + height: '100%', + position: 'absolute', + right: '-4px', + borderRadius: theme.shape.radius.default, + top: 0, + touchAction: 'none', - &:hover { - opacity: 1; - } - `, - typeIcon: css` - margin-right: ${theme.spacing(1)}; - color: ${theme.colors.text.secondary}; - `, - noData: css` - align-items: center; - display: flex; - height: 100%; - justify-content: center; - width: 100%; - `, - expanderCell: css` - display: flex; - flex-direction: column; - justify-content: center; - height: ${rowHeight}px; - cursor: pointer; - `, + '&:hover': { + opacity: 1, + }, + }), + typeIcon: css({ + marginRight: theme.spacing(1), + color: theme.colors.text.secondary, + }), + noData: css({ + alignItems: 'center', + display: 'flex', + height: '100%', + justifyContent: 'center', + width: '100%', + }), + expanderCell: css({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + height: `${rowHeight}px`, + cursor: 'pointer', + }), }; } diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx index c66cdd1c524..2486ff9cc71 100644 --- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx +++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx @@ -99,21 +99,21 @@ TableInputCSV.displayName = 'TableInputCSV'; const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - tableInputCsv: css` - position: relative; - `, - textarea: css` - height: 100%; - width: 100%; - `, - footer: css` - position: absolute; - bottom: 15px; - right: 15px; - border: 1px solid #222; - background: ${theme.colors.success.main}; - padding: 1px ${theme.spacing(0.5)}; - font-size: 80%; - `, + tableInputCsv: css({ + position: 'relative', + }), + textarea: css({ + height: '100%', + width: '100%', + }), + footer: css({ + position: 'absolute', + bottom: '15px', + right: '15px', + border: '1px solid #222', + background: theme.colors.success.main, + padding: `1px ${theme.spacing(0.5)}`, + fontSize: '80%', + }), }; }); diff --git a/packages/grafana-ui/src/components/Tabs/Counter.tsx b/packages/grafana-ui/src/components/Tabs/Counter.tsx index ccb680d87d3..351863c7cf4 100644 --- a/packages/grafana-ui/src/components/Tabs/Counter.tsx +++ b/packages/grafana-ui/src/components/Tabs/Counter.tsx @@ -7,16 +7,16 @@ import { stylesFactory, useStyles2 } from '../../themes'; const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - counter: css` - label: counter; - margin-left: ${theme.spacing(1)}; - border-radius: ${theme.spacing(3)}; - background-color: ${theme.colors.action.hover}; - padding: ${theme.spacing(0.25, 1)}; - color: ${theme.colors.text.secondary}; - font-weight: ${theme.typography.fontWeightMedium}; - font-size: ${theme.typography.size.sm}; - `, + counter: css({ + label: 'counter', + marginLeft: theme.spacing(1), + borderRadius: theme.spacing(3), + backgroundColor: theme.colors.action.hover, + padding: theme.spacing(0.25, 1), + color: theme.colors.text.secondary, + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.size.sm, + }), }; }); diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index 6e2167bb58c..e3babe073a2 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -62,63 +62,59 @@ Tab.displayName = 'Tab'; const getStyles = (theme: GrafanaTheme2) => { return { - item: css` - list-style: none; - position: relative; - display: flex; - white-space: nowrap; - `, - link: css` - color: ${theme.colors.text.secondary}; - padding: ${theme.spacing(1.5, 2, 1)}; - display: block; - height: 100%; + item: css({ + listStyle: 'none', + position: 'relative', + display: 'flex', + whiteSpace: 'nowrap', + }), + link: css({ + color: theme.colors.text.secondary, + padding: theme.spacing(1.5, 2, 1), + display: 'block', + height: '100%', - svg { - margin-right: ${theme.spacing(1)}; - } + svg: { + marginRight: theme.spacing(1), + }, - &:focus-visible { - ${getFocusStyles(theme)} - } + '&:focus-visible': getFocusStyles(theme), - &::before { - display: block; - content: ' '; - position: absolute; - left: 0; - right: 0; - height: 4px; - border-radius: ${theme.shape.radius.default}; - bottom: 0px; - } - `, - notActive: css` - a:hover, - &:hover, - &:focus { - color: ${theme.colors.text.primary}; + '&::before': { + display: 'block', + content: '" "', + position: 'absolute', + left: 0, + right: 0, + height: '4px', + borderRadius: theme.shape.radius.default, + bottom: 0, + }, + }), + notActive: css({ + 'a:hover, &:hover, &:focus': { + color: theme.colors.text.primary, - &::before { - background-color: ${theme.colors.action.hover}; - } - } - `, - activeStyle: css` - label: activeTabStyle; - color: ${theme.colors.text.primary}; - overflow: hidden; + '&::before': { + backgroundColor: theme.colors.action.hover, + }, + }, + }), + activeStyle: css({ + label: 'activeTabStyle', + color: theme.colors.text.primary, + overflow: 'hidden', - a { - color: ${theme.colors.text.primary}; - } + a: { + color: theme.colors.text.primary, + }, - &::before { - background-image: ${theme.colors.gradients.brandHorizontal}; - } - `, - suffix: css` - margin-left: ${theme.spacing(1)}; - `, + '&::before': { + backgroundImage: theme.colors.gradients.brandHorizontal, + }, + }), + suffix: css({ + marginLeft: theme.spacing(1), + }), }; }; diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx index 9265ee39816..929c7f854dd 100644 --- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx +++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx @@ -11,9 +11,9 @@ interface Props extends HTMLAttributes { const getTabContentStyle = stylesFactory((theme: GrafanaTheme2) => { return { - tabContent: css` - background: ${theme.colors.background.primary}; - `, + tabContent: css({ + background: theme.colors.background.primary, + }), }; }); diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx index 0e5e9714da3..1195458d865 100644 --- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx +++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx @@ -26,18 +26,18 @@ export const TabsBar = React.forwardRef(({ children, clas }); const getStyles = (theme: GrafanaTheme2) => ({ - tabsWrapper: css` - border-bottom: 1px solid ${theme.colors.border.weak}; - overflow-x: auto; - `, - noBorder: css` - border-bottom: 0; - `, - tabs: css` - position: relative; - display: flex; - height: ${theme.components.menuTabs.height}px; - `, + tabsWrapper: css({ + borderBottom: `1px solid ${theme.colors.border.weak}`, + overflowX: 'auto', + }), + noBorder: css({ + borderBottom: 0, + }), + tabs: css({ + position: 'relative', + display: 'flex', + height: `${theme.components.menuTabs.height}px`, + }), }); TabsBar.displayName = 'TabsBar'; diff --git a/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx b/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx index 77eb3469c5d..06e00a1042e 100644 --- a/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx +++ b/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx @@ -45,43 +45,42 @@ VerticalTab.displayName = 'Tab'; const getTabStyles = (theme: GrafanaTheme2) => { return { - link: css` - padding: 6px 12px; - display: block; - height: 100%; - cursor: pointer; - position: relative; + link: css({ + padding: '6px 12px', + display: 'block', + height: '100%', + cursor: 'pointer', + position: 'relative', - color: ${theme.colors.text.primary}; + color: theme.colors.text.primary, - svg { - margin-right: ${theme.spacing(1)}; - } + svg: { + marginRight: theme.spacing(1), + }, - &:hover, - &:focus { - text-decoration: underline; - } - `, - activeStyle: css` - label: activeTabStyle; - color: ${theme.colors.text.maxContrast}; - overflow: hidden; + '&:hover, &:focus': { + textDecoration: 'underline', + }, + }), + activeStyle: css({ + label: 'activeTabStyle', + color: theme.colors.text.maxContrast, + overflow: 'hidden', - &::before { - display: block; - content: ' '; - position: absolute; - left: 0; - width: 4px; - bottom: 2px; - top: 2px; - border-radius: ${theme.shape.radius.default}; - background-image: linear-gradient(0deg, #f05a28 30%, #fbca0a 99%); - } - `, - suffix: css` - margin-left: ${theme.spacing(1)}; - `, + '&::before': { + display: 'block', + content: '" "', + position: 'absolute', + left: 0, + width: '4px', + bottom: '2px', + top: '2px', + borderRadius: theme.shape.radius.default, + backgroundImage: 'linear-gradient(0deg, #f05a28 30%, #fbca0a 99%)', + }, + }), + suffix: css({ + marginLeft: theme.spacing(1), + }), }; }; diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx index 11cfa0dffc4..84742cfd987 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.tsx @@ -77,25 +77,25 @@ const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) = colors = getTagColor(colorIndex); } return { - wrapper: css` - appearance: none; - border-style: none; - font-weight: ${theme.typography.fontWeightMedium}; - font-size: ${theme.typography.size.sm}; - line-height: ${theme.typography.bodySmall.lineHeight}; - vertical-align: baseline; - background-color: ${colors.color}; - color: ${theme.v1.palette.gray98}; - white-space: nowrap; - text-shadow: none; - padding: 3px 6px; - border-radius: ${theme.shape.radius.default}; - `, - hover: css` - &:hover { - opacity: 0.85; - cursor: pointer; - } - `, + wrapper: css({ + appearance: 'none', + borderStyle: 'none', + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.size.sm, + lineHeight: theme.typography.bodySmall.lineHeight, + verticalAlign: 'baseline', + backgroundColor: colors.color, + color: theme.v1.palette.gray98, + whiteSpace: 'nowrap', + textShadow: 'none', + padding: '3px 6px', + borderRadius: theme.shape.radius.default, + }), + hover: css({ + '&:hover': { + opacity: 0.85, + cursor: 'pointer', + }, + }), }; }; diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx index d0e903f4624..6749f2fc781 100644 --- a/packages/grafana-ui/src/components/Tags/TagList.tsx +++ b/packages/grafana-ui/src/components/Tags/TagList.tsx @@ -83,20 +83,20 @@ const getSkeletonStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2, isTruncated: boolean) => { return { - wrapper: css` - position: relative; - align-items: ${isTruncated ? 'center' : 'unset'}; - display: flex; - flex: 1 1 auto; - flex-wrap: wrap; - flex-shrink: ${isTruncated ? 0 : 1}; - justify-content: flex-end; - gap: 6px; - `, - moreTagsLabel: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.size.sm}; - `, + wrapper: css({ + position: 'relative', + alignItems: isTruncated ? 'center' : 'unset', + display: 'flex', + flex: '1 1 auto', + flexWrap: 'wrap', + flexShrink: isTruncated ? 0 : 1, + justifyContent: 'flex-end', + gap: '6px', + }), + moreTagsLabel: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.size.sm, + }), li: css({ listStyle: 'none', }), diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx index d8397366b06..be1c1b0e2ad 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx +++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx @@ -103,20 +103,20 @@ export const TagsInput = ({ }; const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - min-height: ${theme.spacing(4)}; - display: flex; - flex-direction: column; - gap: ${theme.spacing(1)}; - flex-wrap: wrap; - `, - tags: css` - display: flex; - justify-content: flex-start; - flex-wrap: wrap; - gap: ${theme.spacing(0.5)}; - `, - addButtonStyle: css` - margin: 0 -${theme.spacing(1)}; - `, + wrapper: css({ + minHeight: theme.spacing(4), + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + flexWrap: 'wrap', + }), + tags: css({ + display: 'flex', + justifyContent: 'flex-start', + flexWrap: 'wrap', + gap: theme.spacing(0.5), + }), + addButtonStyle: css({ + margin: `0 -${theme.spacing(1)}`, + }), }); diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx index ca79c7f5f94..c70e709c3f4 100644 --- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx +++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx @@ -23,13 +23,13 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme2, invalid = false) = textarea: cx( sharedInputStyle(theme), getFocusStyle(theme), - css` - display: block; - border-radius: ${theme.shape.borderRadius()}; - padding: ${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px; - width: 100%; - border-color: ${invalid ? theme.colors.error.border : theme.components.input.borderColor}; - ` + css({ + display: 'block', + borderRadius: theme.shape.borderRadius(), + padding: `${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px`, + width: '100%', + borderColor: invalid ? theme.colors.error.border : theme.components.input.borderColor, + }) ), }; }); diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx index 48d88651b6b..c899a907bff 100644 --- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx +++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx @@ -25,15 +25,15 @@ interface DemoBoxProps { const DemoBox = ({ bg, border, children }: React.PropsWithChildren) => { const style = cx( - css` - padding: 16px; - background: ${bg ?? 'inherit'}; - width: 100%; - `, + css({ + padding: '16px', + background: bg ?? 'inherit', + width: '100%', + }), border - ? css` - border: 1px solid ${border}; - ` + ? css({ + border: `1px solid ${border}`, + }) : null ); @@ -46,12 +46,12 @@ const DemoText = ({ size, children, }: React.PropsWithChildren<{ color?: string; bold?: boolean; size?: number }>) => { - const style = css` - padding: 4px; - color: ${color ?? 'inherit'}; - font-weight: ${bold ? 500 : 400}; - font-size: ${size ?? 14}px; - `; + const style = css({ + padding: '4px', + color: color ?? 'inherit', + fontWeight: bold ? 500 : 400, + fontSize: `${size ?? 14}px`, + }); return
{children}
; }; @@ -85,10 +85,10 @@ export const ThemeDemo = () => { return (
@@ -228,48 +228,48 @@ export function RichColorDemo({ theme, color }: RichColorDemoProps) { {color.name}
{color.main}
{color.shade}
{color.shade}
{color.text}
@@ -278,14 +278,14 @@ export function RichColorDemo({ theme, color }: RichColorDemoProps) { ); } -const colorsTableStyle = css` - text-align: center; +const colorsTableStyle = css({ + textAlign: 'center', - td { - padding: 8px; - text-align: center; - } -`; + td: { + padding: '8px', + textAlign: 'center', + }, +}); export function TextColors({ t }: { t: GrafanaTheme2 }) { return ( diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx index 114fad02fbf..21afa268c89 100644 --- a/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx +++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.tsx @@ -143,8 +143,8 @@ export const getStyles = (theme: GrafanaTheme2) => { return { info, error, - fitContent: css` - max-width: fit-content; - `, + fitContent: css({ + maxWidth: 'fit-content', + }), }; }; diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index 6f2603fe56c..f22c2b632cb 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -128,125 +128,121 @@ const getStyles = (theme: GrafanaTheme2) => { const primaryVariant = getPropertiesForVariant(theme, 'primary', 'solid'); const destructiveVariant = getPropertiesForVariant(theme, 'destructive', 'solid'); - const defaultOld = css` - color: ${theme.colors.text.primary}; - background: ${theme.colors.secondary.main}; + const defaultOld = css({ + color: theme.colors.text.primary, + background: theme.colors.secondary.main, - &:hover { - color: ${theme.colors.text.primary}; - background: ${theme.colors.secondary.shade}; - border: 1px solid ${theme.colors.border.medium}; - } - `; + '&:hover': { + color: theme.colors.text.primary, + background: theme.colors.secondary.shade, + border: `1px solid ${theme.colors.border.medium}`, + }, + }); return { - button: css` - label: toolbar-button; - position: relative; - display: flex; - align-items: center; - height: ${theme.spacing(theme.components.height.md)}; - padding: ${theme.spacing(0, 1)}; - border-radius: ${theme.shape.borderRadius()}; - line-height: ${theme.components.height.md * theme.spacing.gridSize - 2}px; - font-weight: ${theme.typography.fontWeightMedium}; - border: 1px solid ${theme.colors.secondary.border}; - white-space: nowrap; - transition: ${theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], { + button: css({ + label: 'toolbar-button', + position: 'relative', + display: 'flex', + alignItems: 'center', + height: theme.spacing(theme.components.height.md), + padding: theme.spacing(0, 1), + borderRadius: theme.shape.borderRadius(), + lineHeight: `${theme.components.height.md * theme.spacing.gridSize - 2}px`, + fontWeight: theme.typography.fontWeightMedium, + border: `1px solid ${theme.colors.secondary.border}`, + whiteSpace: 'nowrap', + transition: theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], { duration: theme.transitions.duration.short, - })}; + }), - &:focus, - &:focus-visible { - ${getFocusStyles(theme)} - z-index: 1; - } + '&:focus, &:focus-visible': { + ...getFocusStyles(theme), + zIndex: 1, + }, - &:focus:not(:focus-visible) { - ${getMouseFocusStyles(theme)} - } + '&:focus:not(:focus-visible)': getMouseFocusStyles(theme), - &:hover { - box-shadow: ${theme.shadows.z1}; - } + '&:hover': { + boxShadow: theme.shadows.z1, + }, - &[disabled], - &:disabled { - cursor: not-allowed; - opacity: ${theme.colors.action.disabledOpacity}; - background: ${theme.colors.action.disabledBackground}; - box-shadow: none; + '&[disabled], &:disabled': { + cursor: 'not-allowed', + opacity: theme.colors.action.disabledOpacity, + background: theme.colors.action.disabledBackground, + boxShadow: 'none', - &:hover { - color: ${theme.colors.text.disabled}; - background: ${theme.colors.action.disabledBackground}; - box-shadow: none; - } - } - `, - default: css` - color: ${theme.colors.text.secondary}; - background: transparent; - border: 1px solid transparent; + '&:hover': { + color: theme.colors.text.disabled, + background: theme.colors.action.disabledBackground, + boxShadow: 'none', + }, + }, + }), + default: css({ + color: theme.colors.text.secondary, + background: 'transparent', + border: `1px solid transparent`, - &:hover { - color: ${theme.colors.text.primary}; - background: ${theme.colors.background.secondary}; - } - `, + '&:hover': { + color: theme.colors.text.primary, + background: theme.colors.background.secondary, + }, + }), canvas: defaultOld, active: cx( defaultOld, - css(` - &::before { - display: block; - content: ' '; - position: absolute; - left: 0; - right: 0; - height: 2px; - bottom: 0px; - border-radius: ${theme.shape.radius.default}; - background-image: ${theme.colors.gradients.brandHorizontal}; - } - `) + css({ + '&::before': { + display: 'block', + content: '" "', + position: 'absolute', + left: 0, + right: 0, + height: '2px', + bottom: 0, + borderRadius: theme.shape.radius.default, + backgroundImage: theme.colors.gradients.brandHorizontal, + }, + }) ), primary: css(primaryVariant), destructive: css(destructiveVariant), - narrow: css` - padding: 0 ${theme.spacing(0.5)}; - `, - img: css` - width: 16px; - height: 16px; - margin-right: ${theme.spacing(1)}; - `, - buttonFullWidth: css` - flex-grow: 1; - `, - content: css` - flex-grow: 1; - `, - contentWithIcon: css` - display: none; - padding-left: ${theme.spacing(1)}; + narrow: css({ + padding: theme.spacing(0, 0.5), + }), + img: css({ + width: '16px', + height: '16px', + marginRight: theme.spacing(1), + }), + buttonFullWidth: css({ + flexGrow: 1, + }), + content: css({ + flexGrow: 1, + }), + contentWithIcon: css({ + display: 'none', + paddingLeft: theme.spacing(1), - @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} { - display: block; - } - `, - contentWithRightIcon: css` - padding-right: ${theme.spacing(0.5)}; - `, - highlight: css` - background-color: ${theme.colors.success.main}; - border-radius: ${theme.shape.radius.circle}; - width: 6px; - height: 6px; - position: absolute; - top: -3px; - right: -3px; - z-index: 1; - `, + [`@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)}`]: { + display: 'block', + }, + }), + contentWithRightIcon: css({ + paddingRight: theme.spacing(0.5), + }), + highlight: css({ + backgroundColor: theme.colors.success.main, + borderRadius: theme.shape.radius.circle, + width: '6px', + height: '6px', + position: 'absolute', + top: '-3px', + right: '-3px', + zIndex: 1, + }), }; }; diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx index 907e6eca67f..0e8f0871abf 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx @@ -110,37 +110,37 @@ export const ToolbarButtonRow = forwardRef( ToolbarButtonRow.displayName = 'ToolbarButtonRow'; const getStyles = (theme: GrafanaTheme2, overflowButtonOrder: number, alignment: Props['alignment']) => ({ - overflowButton: css` - order: ${overflowButtonOrder}; - `, - overflowItems: css` - align-items: center; - background-color: ${theme.colors.background.primary}; - border-radius: ${theme.shape.borderRadius()}; - box-shadow: ${theme.shadows.z3}; - display: flex; - flex-wrap: wrap; - gap: ${theme.spacing(1)}; - margin-top: ${theme.spacing(1)}; - max-width: 80vw; - padding: ${theme.spacing(0.5, 1)}; - position: absolute; - right: 0; - top: 100%; - width: max-content; - z-index: ${theme.zIndex.sidemenu}; - `, - container: css` - align-items: center; - display: flex; - gap: ${theme.spacing(1)}; - justify-content: ${alignment === 'left' ? 'flex-start' : 'flex-end'}; - min-width: 0; - position: relative; - `, - childWrapper: css` - align-items: center; - display: flex; - gap: ${theme.spacing(1)}; - `, + overflowButton: css({ + order: overflowButtonOrder, + }), + overflowItems: css({ + alignItems: 'center', + backgroundColor: theme.colors.background.primary, + borderRadius: theme.shape.borderRadius(), + boxShadow: theme.shadows.z3, + display: 'flex', + flexWrap: 'wrap', + gap: theme.spacing(1), + marginTop: theme.spacing(1), + maxWidth: '80vw', + padding: theme.spacing(0.5, 1), + position: 'absolute', + right: 0, + top: '100%', + width: 'max-content', + zIndex: theme.zIndex.sidemenu, + }), + container: css({ + alignItems: 'center', + display: 'flex', + gap: theme.spacing(1), + justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end', + minWidth: 0, + position: 'relative', + }), + childWrapper: css({ + alignItems: 'center', + display: 'flex', + gap: theme.spacing(1), + }), }); diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx index fa8c15bb9fe..7ab042ec528 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx @@ -8,23 +8,23 @@ import { CompletionItem } from '../../types'; const getStyles = (theme: GrafanaTheme2, height: number, visible: boolean) => { return { - typeaheadItem: css` - label: type-ahead-item; - z-index: 11; - padding: ${theme.spacing(1, 1, 1, 2)}; - border: ${theme.colors.border.medium}; - overflow-y: scroll; - overflow-x: hidden; - outline: none; - background: ${theme.colors.background.secondary}; - color: ${theme.colors.text}; - box-shadow: 0 0 20px ${theme.v1.colors.dropdownShadow}; - visibility: ${visible === true ? 'visible' : 'hidden'}; - width: 250px; - min-height: ${height + parseInt(theme.spacing(0.25), 10)}px; - position: relative; - word-break: break-word; - `, + typeaheadItem: css({ + label: 'type-ahead-item', + zIndex: 11, + padding: theme.spacing(1, 1, 1, 2), + border: theme.colors.border.medium, + overflowY: 'scroll', + overflowX: 'hidden', + outline: 'none', + background: theme.colors.background.secondary, + color: theme.colors.text.secondary, + boxShadow: `0 0 20px ${theme.v1.colors.dropdownShadow}`, + visibility: visible === true ? 'visible' : 'hidden', + width: '250px', + minHeight: `${height + parseInt(theme.spacing(0.25), 10)}px`, + position: 'relative', + wordBreak: 'break-word', + }), }; }; diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx index b9cab738685..b230f7f6cd7 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx @@ -21,48 +21,45 @@ interface Props { } const getStyles = (theme: GrafanaTheme2) => ({ - typeaheadItem: css` - border: none; - background: none; - text-align: left; - label: type-ahead-item; - height: auto; - font-family: ${theme.typography.fontFamilyMonospace}; - padding: ${theme.spacing(1, 1, 1, 2)}; - font-size: ${theme.typography.bodySmall.fontSize}; - text-overflow: ellipsis; - overflow: hidden; - z-index: 11; - display: block; - white-space: nowrap; - cursor: pointer; + typeaheadItem: css({ + border: 'none', + background: 'none', + textAlign: 'left', + label: 'type-ahead-item', + height: 'auto', + fontFamily: theme.typography.fontFamilyMonospace, + padding: theme.spacing(1, 1, 1, 2), + fontSize: theme.typography.bodySmall.fontSize, + textOverflow: 'ellipsis', + overflow: 'hidden', + zIndex: 11, + display: 'block', + whiteSpace: 'nowrap', + cursor: 'pointer', transition: - color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), - padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - `, + 'color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1)', + }), - typeaheadItemSelected: css` - label: type-ahead-item-selected; - background-color: ${theme.colors.background.secondary}; - `, + typeaheadItemSelected: css({ + label: 'type-ahead-item-selected', + backgroundColor: theme.colors.background.secondary, + }), - typeaheadItemMatch: css` - label: type-ahead-item-match; - color: ${theme.v1.palette.yellow}; - border-bottom: 1px solid ${theme.v1.palette.yellow}; - padding: inherit; - background: inherit; - `, + typeaheadItemMatch: css({ + label: 'type-ahead-item-match', + color: theme.v1.palette.yellow, + borderBottom: `1px solid ${theme.v1.palette.yellow}`, + padding: 'inherit', + background: 'inherit', + }), - typeaheadItemGroupTitle: css` - label: type-ahead-item-group-title; - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - line-height: ${theme.typography.body.lineHeight}; - padding: ${theme.spacing(1)}; - `, + typeaheadItemGroupTitle: css({ + label: 'type-ahead-item-group-title', + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + lineHeight: theme.typography.body.lineHeight, + padding: theme.spacing(1), + }), }); export const TypeaheadItem = (props: Props) => { diff --git a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx index 13e03a3303a..23a639ad457 100644 --- a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx +++ b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx @@ -110,62 +110,61 @@ export const getStyles = (theme: GrafanaTheme2, isActive: boolean) => { const shadowHoverColor = isActive ? theme.colors.primary.text : theme.colors.border.strong; return { - container: css` - padding: 0; - width: 30px; - height: 30px; - background: none; - border: none; - border-radius: ${theme.shape.radius.circle}; - & > * { - border-radius: ${theme.shape.radius.circle}; - } - `, - content: css` - line-height: 24px; - max-width: 100%; - border: 3px ${theme.colors.background.primary} solid; - box-shadow: ${getIconBorder(shadowColor)}; - background-clip: padding-box; - &:hover { - box-shadow: ${getIconBorder(shadowHoverColor)}; - } - `, - textContent: css` - background: ${theme.colors.background.primary}; - padding: 0; - color: ${theme.colors.text.secondary}; - text-align: center; - font-size: ${theme.typography.size.sm}; - background: ${theme.colors.background.primary}; - &:focus { - box-shadow: ${getIconBorder(shadowColor)}; - } - `, - tooltipContainer: css` - text-align: center; - padding: ${theme.spacing(0, 1)}; - `, - tooltipName: css` - font-weight: ${theme.typography.fontWeightBold}; - `, - tooltipDate: css` - font-weight: ${theme.typography.fontWeightRegular}; - `, - dotContainer: css` - display: flex; - align-items: center; - `, - dot: css` - height: 6px; - width: 6px; - background-color: ${theme.colors.primary.main}; - border-radius: ${theme.shape.radius.circle}; - display: inline-block; - margin-left: ${theme.spacing(1)}; - `, - pointer: css` - cursor: pointer; - `, + container: css({ + padding: 0, + width: '30px', + height: '30px', + background: 'none', + border: 'none', + borderRadius: theme.shape.radius.circle, + '& > *': { + borderRadius: theme.shape.radius.circle, + }, + }), + content: css({ + lineHeight: '24px', + maxWidth: '100%', + border: `3px ${theme.colors.background.primary} solid`, + boxShadow: getIconBorder(shadowColor), + backgroundClip: 'padding-box', + '&:hover': { + boxShadow: getIconBorder(shadowHoverColor), + }, + }), + textContent: css({ + background: theme.colors.background.primary, + padding: 0, + color: theme.colors.text.secondary, + textAlign: 'center', + fontSize: theme.typography.size.sm, + '&:focus': { + boxShadow: getIconBorder(shadowColor), + }, + }), + tooltipContainer: css({ + textAlign: 'center', + padding: theme.spacing(0, 1), + }), + tooltipName: css({ + fontWeight: theme.typography.fontWeightBold, + }), + tooltipDate: css({ + fontWeight: theme.typography.fontWeightRegular, + }), + dotContainer: css({ + display: 'flex', + alignItems: 'center', + }), + dot: css({ + height: '6px', + width: '6px', + backgroundColor: theme.colors.primary.main, + borderRadius: theme.shape.radius.circle, + display: 'inline-block', + marginLeft: theme.spacing(1), + }), + pointer: css({ + cursor: 'pointer', + }), }; }; diff --git a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx index a526a2a2b8c..d6e3c1fb9dc 100644 --- a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx +++ b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx @@ -47,18 +47,18 @@ export const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProp const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - display: flex; - justify-content: center; - flex-direction: row-reverse; - margin-left: ${theme.spacing(1)}; + container: css({ + display: 'flex', + justifyContent: 'center', + flexDirection: 'row-reverse', + marginLeft: theme.spacing(1), - & > button { - margin-left: -${theme.spacing(1)}; // Overlay the elements a bit on top of each other - } - `, - dots: css` - margin-bottom: 3px; - `, + '& > button': { + marginLeft: theme.spacing(-1), // Overlay the elements a bit on top of each other + }, + }), + dots: css({ + marginBottom: '3px', + }), }; }; diff --git a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx index ca7e8c3b433..c658fe0f072 100644 --- a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx +++ b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx @@ -51,11 +51,11 @@ export const SeriesIcon = React.memo( ); const getStyles = () => ({ - forcedColors: css` - @media (forced-colors: active) { - forced-color-adjust: none; - } - `, + forcedColors: css({ + '@media (forced-colors: active)': { + forcedColorAdjust: 'none', + }, + }), }); SeriesIcon.displayName = 'SeriesIcon'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx index 0e6cfce1032..eb7558d1e6d 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx @@ -85,37 +85,37 @@ export const VizLegendList = ({ VizLegendList.displayName = 'VizLegendList'; const getStyles = (theme: GrafanaTheme2) => { - const itemStyles = css` - padding-right: 10px; - display: flex; - font-size: ${theme.typography.bodySmall.fontSize}; - white-space: nowrap; - `; + const itemStyles = css({ + paddingRight: '10px', + display: 'flex', + fontSize: theme.typography.bodySmall.fontSize, + whiteSpace: 'nowrap', + }); return { itemBottom: itemStyles, itemRight: cx( itemStyles, - css` - margin-bottom: ${theme.spacing(0.5)}; - ` + css({ + marginBottom: theme.spacing(0.5), + }) ), - rightWrapper: css` - padding-left: ${theme.spacing(0.5)}; - `, - bottomWrapper: css` - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; - padding-left: ${theme.spacing(0.5)}; - `, - section: css` - display: flex; - `, - sectionRight: css` - justify-content: flex-end; - flex-grow: 1; - `, + rightWrapper: css({ + paddingLeft: theme.spacing(0.5), + }), + bottomWrapper: css({ + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + width: '100%', + paddingLeft: theme.spacing(0.5), + }), + section: css({ + display: 'flex', + }), + sectionRight: css({ + justifyContent: 'flex-end', + flexGrow: 1, + }), }; }; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx index d342d261c00..4ef83f4646c 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx @@ -93,33 +93,33 @@ export const VizLegendListItem = ({ VizLegendListItem.displayName = 'VizLegendListItem'; const getStyles = (theme: GrafanaTheme2) => ({ - label: css` - label: LegendLabel; - white-space: nowrap; - background: none; - border: none; - font-size: inherit; - padding: 0; - user-select: text; - max-width: 600px; - text-overflow: ellipsis; - overflow: hidden; - `, - itemDisabled: css` - label: LegendLabelDisabled; - color: ${theme.colors.text.disabled}; - `, - itemWrapper: css` - label: LegendItemWrapper; - display: flex; - white-space: nowrap; - align-items: center; - flex-grow: 1; - `, - value: css` - text-align: right; - `, - yAxisLabel: css` - color: ${theme.v1.palette.gray2}; - `, + label: css({ + label: 'LegendLabel', + whiteSpace: 'nowrap', + background: 'none', + border: 'none', + fontSize: 'inherit', + padding: 0, + userSelect: 'text', + maxWidth: '600px', + textOverflow: 'ellipsis', + overflow: 'hidden', + }), + itemDisabled: css({ + label: 'LegendLabelDisabled', + color: theme.colors.text.disabled, + }), + itemWrapper: css({ + label: 'LegendItemWrapper', + display: 'flex', + whiteSpace: 'nowrap', + alignItems: 'center', + flexGrow: 1, + }), + value: css({ + textAlign: 'right', + }), + yAxisLabel: css({ + color: theme.v1.palette.gray2, + }), }); diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx index 29b85664416..4c41e4b3905 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx @@ -35,13 +35,13 @@ export const VizLegendStatsList = ({ stats }: Props) => { }; const getStyles = () => ({ - list: css` - flex-grow: 1; - text-align: right; - `, - item: css` - margin-left: 8px; - `, + list: css({ + flexGrow: 1, + textAlign: 'right', + }), + item: css({ + marginLeft: '8px', + }), }); VizLegendStatsList.displayName = 'VizLegendStatsList'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx index a425bb936f4..01e07e71e56 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx @@ -108,31 +108,31 @@ export const VizLegendTable = ({ }; const getStyles = (theme: GrafanaTheme2) => ({ - table: css` - width: 100%; - th:first-child { - width: 100%; - border-bottom: 1px solid ${theme.colors.border.weak}; - } - `, - header: css` - color: ${theme.colors.primary.text}; - font-weight: ${theme.typography.fontWeightMedium}; - border-bottom: 1px solid ${theme.colors.border.weak}; - padding: ${theme.spacing(0.25, 1, 0.25, 1)}; - font-size: ${theme.typography.bodySmall.fontSize}; - text-align: right; - white-space: nowrap; - `, - nameHeader: css` - text-align: left; - padding-left: 30px; - `, + table: css({ + width: '100%', + 'th:first-child': { + width: '100%', + borderBottom: `1px solid ${theme.colors.border.weak}`, + }, + }), + header: css({ + color: theme.colors.primary.text, + fontWeight: theme.typography.fontWeightMedium, + borderBottom: `1px solid ${theme.colors.border.weak}`, + padding: theme.spacing(0.25, 1, 0.25, 1), + fontSize: theme.typography.bodySmall.fontSize, + textAlign: 'right', + whiteSpace: 'nowrap', + }), + nameHeader: css({ + textAlign: 'left', + paddingLeft: '30px', + }), // This needs to be padding-right - icon size(xs==12) to avoid jumping - withIcon: css` - padding-right: 4px; - `, - headerSortable: css` - cursor: pointer; - `, + withIcon: css({ + paddingRight: '4px', + }), + headerSortable: css({ + cursor: 'pointer', + }), }); diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx index 0a2f20f1382..41321b61522 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx @@ -103,44 +103,44 @@ const getStyles = (theme: GrafanaTheme2) => { const rowHoverBg = styleMixins.hoverColor(theme.colors.background.primary, theme); return { - row: css` - label: LegendRow; - font-size: ${theme.v1.typography.size.sm}; - border-bottom: 1px solid ${theme.colors.border.weak}; - td { - padding: ${theme.spacing(0.25, 1)}; - white-space: nowrap; - } + row: css({ + label: 'LegendRow', + fontSize: theme.v1.typography.size.sm, + borderBottom: `1px solid ${theme.colors.border.weak}`, + td: { + padding: theme.spacing(0.25, 1), + whiteSpace: 'nowrap', + }, - &:hover { - background: ${rowHoverBg}; - } - `, - label: css` - label: LegendLabel; - white-space: nowrap; - background: none; - border: none; - font-size: inherit; - padding: 0; - max-width: 600px; - text-overflow: ellipsis; - overflow: hidden; - `, - labelDisabled: css` - label: LegendLabelDisabled; - color: ${theme.colors.text.disabled}; - `, - itemWrapper: css` - display: flex; - white-space: nowrap; - align-items: center; - `, - value: css` - text-align: right; - `, - yAxisLabel: css` - color: ${theme.colors.text.secondary}; - `, + '&:hover': { + background: rowHoverBg, + }, + }), + label: css({ + label: 'LegendLabel', + whiteSpace: 'nowrap', + background: 'none', + border: 'none', + fontSize: 'inherit', + padding: 0, + maxWidth: '600px', + textOverflow: 'ellipsis', + overflow: 'hidden', + }), + labelDisabled: css({ + label: 'LegendLabelDisabled', + color: theme.colors.text.disabled, + }), + itemWrapper: css({ + display: 'flex', + whiteSpace: 'nowrap', + alignItems: 'center', + }), + value: css({ + textAlign: 'right', + }), + yAxisLabel: css({ + color: theme.colors.text.secondary, + }), }; }; diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx index e08628491aa..6d683fd5147 100644 --- a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx @@ -18,35 +18,35 @@ export interface SeriesTableRowProps { const getSeriesTableRowStyles = (theme: GrafanaTheme2) => { return { - icon: css` - margin-right: ${theme.spacing(1)}; - vertical-align: middle; - `, - seriesTable: css` - display: table; - `, - seriesTableRow: css` - display: table-row; - font-size: ${theme.typography.bodySmall.fontSize}; - `, - seriesTableCell: css` - display: table-cell; - `, - label: css` - word-break: break-all; - `, - value: css` - padding-left: ${theme.spacing(2)}; - text-align: right; - `, - activeSeries: css` - font-weight: ${theme.typography.fontWeightBold}; - color: ${theme.colors.text.maxContrast}; - `, - timestamp: css` - font-weight: ${theme.typography.fontWeightBold}; - font-size: ${theme.typography.bodySmall.fontSize}; - `, + icon: css({ + marginRight: theme.spacing(1), + verticalAlign: 'middle', + }), + seriesTable: css({ + display: 'table', + }), + seriesTableRow: css({ + display: 'table-row', + fontSize: theme.typography.bodySmall.fontSize, + }), + seriesTableCell: css({ + display: 'table-cell', + }), + label: css({ + wordBreak: 'break-all', + }), + value: css({ + paddingLeft: theme.spacing(2), + textAlign: 'right', + }), + activeSeries: css({ + fontWeight: theme.typography.fontWeightBold, + color: theme.colors.text.maxContrast, + }), + timestamp: css({ + fontWeight: theme.typography.fontWeightBold, + fontSize: theme.typography.bodySmall.fontSize, + }), }; }; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx index e8f9d7a734a..62b8448c643 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx @@ -69,13 +69,13 @@ VizTooltip.displayName = 'VizTooltip'; const getStyles = () => { return { - portal: css` - position: absolute; - top: 0; - left: 0; - pointer-events: none; - width: 100%; - height: 100%; - `, + portal: css({ + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + width: '100%', + height: '100%', + }), }; }; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx index f49c4b15985..055023aa0d1 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx @@ -113,7 +113,5 @@ export const VizTooltipContainer = ({ VizTooltipContainer.displayName = 'VizTooltipContainer'; const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - ${getTooltipContainerStyles(theme)} - `, + wrapper: css(getTooltipContainerStyles(theme)), }); diff --git a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx index 3d985302920..5de4717ae2b 100644 --- a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx +++ b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx @@ -6,24 +6,24 @@ import { stylesFactory } from '../../themes'; const getStyles = stylesFactory((duration: number) => { return { - enter: css` - label: enter; - opacity: 0; - `, - enterActive: css` - label: enterActive; - opacity: 1; - transition: opacity ${duration}ms ease-out; - `, - exit: css` - label: exit; - opacity: 1; - `, - exitActive: css` - label: exitActive; - opacity: 0; - transition: opacity ${duration}ms ease-out; - `, + enter: css({ + label: 'enter', + opacity: 0, + }), + enterActive: css({ + label: 'enterActive', + opacity: 1, + transition: `opacity ${duration}ms ease-out`, + }), + exit: css({ + label: 'exit', + opacity: 1, + }), + exitActive: css({ + label: 'exitActive', + opacity: 0, + transition: `opacity ${duration}ms ease-out`, + }), }; }); diff --git a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx index ff0dbee6034..44bf20eac8d 100644 --- a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx +++ b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx @@ -6,32 +6,28 @@ import { stylesFactory } from '../../themes'; const getStyles = stylesFactory((duration: number, measurement: 'width' | 'height', size: number) => { return { - enter: css` - label: enter; - ${measurement}: 0; - opacity: 0; - `, - enterActive: css` - label: enterActive; - ${measurement}: ${size}px; - opacity: 1; - transition: - opacity ${duration}ms ease-out, - ${measurement} ${duration}ms ease-out; - `, - exit: css` - label: exit; - ${measurement}: ${size}px; - opacity: 1; - `, - exitActive: css` - label: exitActive; - opacity: 0; - ${measurement}: 0; - transition: - opacity ${duration}ms ease-out, - ${measurement} ${duration}ms ease-out; - `, + enter: css({ + label: 'enter', + [`${measurement}`]: 0, + opacity: 0, + }), + enterActive: css({ + label: 'enterActive', + [`${measurement}`]: `${size}px`, + opacity: 1, + transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`, + }), + exit: css({ + label: 'exit', + [`${measurement}`]: `${size}px`, + opacity: 1, + }), + exitActive: css({ + label: 'exitActive', + opacity: 0, + [`${measurement}`]: 0, + transition: `opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out`, + }), }; }); diff --git a/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx b/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx index 9fd462ea67c..a2d0a0413ff 100644 --- a/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx +++ b/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx @@ -12,12 +12,12 @@ interface XYCanvasProps { */ export const XYCanvas = ({ children, left, top }: React.PropsWithChildren) => { const className = useMemo(() => { - return css` - position: absolute; - overflow: visible; - left: ${left}px; - top: ${top}px; - `; + return css({ + position: 'absolute', + overflow: 'visible', + left: `${left}px`, + top: `${top}px`, + }); }, [left, top]); return
{children}
; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts b/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts index 022e8cc3595..3c9ec59678f 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts @@ -3,37 +3,37 @@ import { css } from '@emotion/react'; import { GrafanaTheme2 } from '@grafana/data'; export function getAgularPanelStyles(theme: GrafanaTheme2) { - return css` - .panel-options-group { - border-bottom: 1px solid ${theme.colors.border.weak}; - } + return css({ + '.panel-options-group': { + borderBottom: `1px solid ${theme.colors.border.weak}`, + }, - .panel-options-group__header { - padding: ${theme.spacing(1, 2, 1, 1)}; - position: relative; - display: flex; - align-items: center; - cursor: pointer; - font-weight: 500; - color: ${theme.colors.text.primary}; + '.panel-options-group__header': { + padding: theme.spacing(1, 2, 1, 1), + position: 'relative', + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + fontWeight: 500, + color: theme.colors.text.primary, - &:hover { - background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)}; - } - } + '&:hover': { + background: theme.colors.emphasize(theme.colors.background.primary, 0.03), + }, + }, - .panel-options-group__icon { - color: ${theme.colors.text.secondary}; - margin-right: ${theme.spacing(1)}; - padding: ${theme.spacing(0, 0.9, 0, 0.6)}; - } + '.panel-options-group__icon': { + color: theme.colors.text.secondary, + marginRight: theme.spacing(1), + padding: theme.spacing(0, 0.9, 0, 0.6), + }, - .panel-options-group__title { - position: relative; - } + '.panel-options-group__title': { + position: 'relative', + }, - .panel-options-group__body { - padding: ${theme.spacing(1, 2, 1, 4)}; - } - `; + '.panel-options-group__body': { + padding: theme.spacing(1, 2, 1, 4), + }, + }); } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/card.ts b/packages/grafana-ui/src/themes/GlobalStyles/card.ts index 35b356f5e9f..97d236f2b41 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/card.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/card.ts @@ -3,187 +3,187 @@ import { css } from '@emotion/react'; import { GrafanaTheme2 } from '@grafana/data'; export function getCardStyles(theme: GrafanaTheme2) { - return css` - .card-section { - margin-bottom: ${theme.spacing(4)}; - } + return css({ + '.card-section': { + marginBottom: theme.spacing(4), + }, - .card-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - list-style-type: none; - } + '.card-list': { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + listStyleType: 'none', + }, - .card-item { - display: block; - height: 100%; - background: ${theme.colors.background.secondary}; - box-shadow: none; - padding: ${theme.spacing(2)}; - border-radius: 4px; + '.card-item': { + display: 'block', + height: '100%', + background: theme.colors.background.secondary, + boxShadow: 'none', + padding: theme.spacing(2), + borderRadius: '4px', - &:hover { - background: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)}; - } + '&:hover': { + background: theme.colors.emphasize(theme.colors.background.secondary, 0.03), + }, - .label-tag { - margin-left: ${theme.spacing(1)}; - font-size: 11px; - padding: 2px 6px; - } - } + '.label-tag': { + marginLeft: theme.spacing(1), + fontSize: '11px', + padding: '2px 6px', + }, + }, - .card-item-body { - display: flex; - overflow: hidden; - } + '.card-item-body': { + display: 'flex', + overflow: 'hidden', + }, - .card-item-details { - overflow: hidden; - } + '.card-item-details': { + overflow: 'hidden', + }, - .card-item-header { - margin-bottom: ${theme.spacing(2)}; - } + '.card-item-header': { + marginBottom: theme.spacing(2), + }, - .card-item-type { - color: ${theme.colors.text.secondary}; - text-transform: uppercase; - font-size: ${theme.typography.size.sm}; - font-weight: ${theme.typography.fontWeightMedium}; - } + '.card-item-type': { + color: theme.colors.text.secondary, + textTransform: 'uppercase', + fontSize: theme.typography.size.sm, + fontWeight: theme.typography.fontWeightMedium, + }, - .card-item-badge { - margin: 6px 0; - } + '.card-item-badge': { + margin: '6px 0', + }, - .card-item-notice { - font-size: ${theme.typography.size.sm}; - } + '.card-item-notice': { + fontSize: theme.typography.size.sm, + }, - .card-item-name { - color: ${theme.colors.text.primary}; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } + '.card-item-name': { + color: theme.colors.text.primary, + overflow: 'hidden', + textOverflow: 'ellipsis', + width: '100%', + }, - .card-item-label { - margin-left: ${theme.spacing(1)}; - } + '.card-item-label': { + marginLeft: theme.spacing(1), + }, - .card-item-sub-name { - color: ${theme.colors.text.secondary}; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } + '.card-item-sub-name': { + color: theme.colors.text.secondary, + overflow: 'hidden', + textOverflow: 'ellipsis', + width: '100%', + }, - .card-item-sub-name--header { - color: ${theme.colors.text.secondary}; - text-transform: uppercase; - margin-bottom: ${theme.spacing(2)}; - font-size: ${theme.typography.size.sm}; - font-weight: bold; - } + '.card-item-sub-name--header': { + color: theme.colors.text.secondary, + textTransform: 'uppercase', + marginBottom: theme.spacing(2), + fontSize: theme.typography.size.sm, + fontWeight: 'bold', + }, - .card-list-layout-grid { - .card-item-type { - display: inline-block; - } + '.card-list-layout-grid': { + '.card-item-type': { + display: 'inline-block', + }, - .card-item-notice { - font-size: ${theme.typography.size.sm}; - display: inline-block; - margin-left: ${theme.spacing(2)}; - } + '.card-item-notice': { + fontSize: theme.typography.size.sm, + display: 'inline-block', + marginLeft: theme.spacing(2), + }, - .card-item-header-action { - float: right; - } + '.card-item-header-action': { + float: 'right', + }, - .card-item-wrapper { - width: 100%; - padding: ${theme.spacing(0, 2, 2, 0)}; - } + '.card-item-wrapper': { + width: '100%', + padding: theme.spacing(0, 2, 2, 0), + }, - .card-item-wrapper--clickable { - cursor: pointer; - } + '.card-item-wrapper--clickable': { + cursor: 'pointer', + }, - .card-item-figure { - margin: ${theme.spacing(0, 2, 2, 0)}0; - height: 80px; + '.card-item-figure': { + margin: theme.spacing(0, 2, 2, 0), + height: '80px', - img { - width: 80px; - } - } + img: { + width: '80px', + }, + }, - .card-item-name { - font-size: ${theme.typography.h3.fontSize}; - } + '.card-item-name': { + fontSize: theme.typography.h3.fontSize, + }, - ${theme.breakpoints.up('md')} { - .card-item-wrapper { - width: 50%; - } - } + [theme.breakpoints.up('md')]: { + '.card-item-wrapper': { + width: '50%', + }, + }, - ${theme.breakpoints.up('lg')} { - .card-item-wrapper { - width: 33.333333%; - } - } + [theme.breakpoints.up('lg')]: { + '.card-item-wrapper': { + width: '33.333333%', + }, + }, - &.card-list-layout-grid--max-2-col { - ${theme.breakpoints.up('lg')} { - .card-item-wrapper { - width: 50%; - } - } - } - } + '&.card-list-layout-grid--max-2-col': { + [theme.breakpoints.up('lg')]: { + '.card-item-wrapper': { + width: '50%', + }, + }, + }, + }, - .card-list-layout-list { - .card-item-wrapper { - padding: 0; - width: 100%; - margin-bottom: ${theme.spacing(1)}; - } + '.card-list-layout-list': { + '.card-item-wrapper': { + padding: 0, + width: '100%', + marginBottom: theme.spacing(1), + }, - .card-item-wrapper--clickable { - cursor: pointer; - } + '.card-item-wrapper--clickable': { + cursor: 'pointer', + }, - .card-item { - border-radius: 2px; - } + '.card-item': { + borderRadius: '2px', + }, - .card-item-header { - float: right; - text-align: right; - } + '.card-item-header': { + float: 'right', + textAlign: 'right', + }, - .card-item-figure { - margin: ${theme.spacing(0, 2, 0, 0)}; - img { - width: 48px; - } - } + '.card-item-figure': { + margin: theme.spacing(0, 2, 0, 0), + img: { + width: '48px', + }, + }, - .card-item-name { - font-size: ${theme.typography.h4.fontSize}; - } + '.card-item-name': { + fontSize: theme.typography.h4.fontSize, + }, - .card-item-sub-name { - font-size: ${theme.typography.size.sm}; - } + '.card-item-sub-name': { + fontSize: theme.typography.size.sm, + }, - .layout-selector { - margin-right: 0; - } - } - `; + '.layout-selector': { + marginRight: 0, + }, + }, + }); } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts index 9646fdd3593..322dac60be5 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts @@ -1,181 +1,157 @@ -import { css } from '@emotion/react'; +import { css, CSSObject } from '@emotion/react'; import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data'; import { getFocusStyles } from '../mixins'; export function getElementStyles(theme: GrafanaTheme2) { - return css` - html { - -ms-overflow-style: scrollbar; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - height: 100%; - font-size: ${theme.typography.htmlFontSize}px; - font-family: ${theme.typography.fontFamily}; - line-height: ${theme.typography.body.lineHeight}; - font-kerning: normal; - } + return css({ + html: { + MsOverflowStyle: 'scrollbar', + WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', + height: '100%', + fontSize: `${theme.typography.htmlFontSize}px`, + fontFamily: theme.typography.fontFamily, + lineHeight: theme.typography.body.lineHeight, + fontKerning: 'normal', + }, - :root { - color-scheme: ${theme.colors.mode}; - } + ':root': { + colorScheme: theme.colors.mode, + }, - body { - height: 100%; - width: 100%; - position: absolute; - color: ${theme.colors.text.primary}; - background-color: ${theme.colors.background.canvas}; - ${getVariantStyles(theme.typography.body)} - } + body: { + height: '100%', + width: '100%', + position: 'absolute', + color: theme.colors.text.primary, + backgroundColor: theme.colors.background.canvas, + ...getVariantStyles(theme.typography.body), + }, - h1, - .h1 { - ${getVariantStyles(theme.typography.h1)} - } - h2, - .h2 { - ${getVariantStyles(theme.typography.h2)} - } - h3, - .h3 { - ${getVariantStyles(theme.typography.h3)} - } - h4, - .h4 { - ${getVariantStyles(theme.typography.h4)} - } - h5, - .h5 { - ${getVariantStyles(theme.typography.h5)} - } - h6, - .h6 { - ${getVariantStyles(theme.typography.h6)} - } + 'h1, .h1': getVariantStyles(theme.typography.h1), + 'h2, .h2': getVariantStyles(theme.typography.h2), + 'h3, .h3': getVariantStyles(theme.typography.h3), + 'h4, .h4': getVariantStyles(theme.typography.h4), + 'h5, .h5': getVariantStyles(theme.typography.h5), + 'h6, .h6': getVariantStyles(theme.typography.h6), - p { - margin: 0 0 ${theme.spacing(2)}; - } + p: { + margin: theme.spacing(0, 0, 2), + }, - button { - letter-spacing: ${theme.typography.body.letterSpacing}; + button: { + letterSpacing: theme.typography.body.letterSpacing, - &:focus-visible { - outline: ${getFocusStyles(theme)}; - } - &:focus { - outline: none; - } - } + // '&:focus-visible': getFocusStyles(theme), + '&:focus': { + outline: 'none', + }, + }, // Ex: 14px base font * 85% = about 12px - small { - font-size: ${theme.typography.bodySmall.fontSize}; - } + small: { + fontSize: theme.typography.bodySmall.fontSize, + }, - b, - strong { - font-weight: ${theme.typography.fontWeightMedium}; - } + 'b, strong': { + fontWeight: theme.typography.fontWeightMedium, + }, - em { - font-style: italic; - color: ${theme.colors.text.primary}; - } + em: { + fontStyle: 'italic', + color: theme.colors.text.primary, + }, - cite { - font-style: normal; - } + cite: { + fontStyle: 'normal', + }, // Utility classes - .muted { - color: ${theme.colors.text.secondary}; - } + '.muted': { + color: theme.colors.text.secondary, + }, - a.muted:hover, - a.muted:focus { - color: ${theme.colors.text.primary}; - } + 'a.muted:hover, a.muted:focus': { + color: theme.colors.text.primary, + }, - .text-warning { - color: ${theme.colors.warning.text}; + '.text-warning': { + color: theme.colors.warning.text, - &:hover, - &:focus { - color: ${theme.colors.emphasize(theme.colors.warning.text, 0.15)}; - } - } + '&:hover, &:focus': { + color: theme.colors.emphasize(theme.colors.warning.text, 0.15), + }, + }, - .text-error { - color: ${theme.colors.error.text}; + '.text-error': { + color: theme.colors.error.text, - &:hover, - &:focus { - color: ${theme.colors.emphasize(theme.colors.error.text, 0.15)}; - } - } + '&:hover, &:focus': { + color: theme.colors.emphasize(theme.colors.error.text, 0.15), + }, + }, - .text-success { - color: $success-text-color; + '.text-success': { + color: '$success-text-color', - &:hover, - &:focus { - color: ${theme.colors.emphasize(theme.colors.success.text, 0.15)}; - } - } + '&:hover, &:focus': { + color: theme.colors.emphasize(theme.colors.success.text, 0.15), + }, + }, - a { - cursor: pointer; - color: ${theme.colors.text.primary}; - text-decoration: none; + a: { + cursor: 'pointer', + color: theme.colors.text.primary, + textDecoration: 'none', - &:focus { - outline: none; - } + '&:focus': { + outline: 'none', + }, - &:focus-visible { - ${getFocusStyles(theme)} - } + '&:focus-visible': getFocusStyles(theme), - &: [disabled] { - cursor: default; - pointer-events: none !important; - } - } + '&:[disabled]': { + cursor: 'default', + // Need type assertion here due to the use of !important + // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + pointerEvents: 'none !important' as 'none', + }, + }, - .text-link { - text-decoration: underline; - } + '.text-link': { + textDecoration: 'underline', + }, - .text-left { - text-align: left; - } + '.text-left': { + textAlign: 'left', + }, - .text-right { - text-align: right; - } + '.text-right': { + textAlign: 'right', + }, - .text-center { - text-align: center; - } + '.text-center': { + textAlign: 'center', + }, - .highlight-search-match { - background: ${theme.components.textHighlight.background}; - color: ${theme.components.textHighlight.text}; - padding: 0; - } - `; + '.highlight-search-match': { + background: theme.components.textHighlight.background, + color: theme.components.textHighlight.text, + padding: 0, + }, + }); } -export function getVariantStyles(variant: ThemeTypographyVariant) { - return ` - margin: 0; - font-size: ${variant.fontSize}; - line-height: ${variant.lineHeight}; - font-weight: ${variant.fontWeight}; - letter-spacing: ${variant.letterSpacing}; - font-family: ${variant.fontFamily}; - margin-bottom: 0.45em; - `; +export function getVariantStyles(variant: ThemeTypographyVariant): CSSObject { + return { + margin: 0, + fontSize: variant.fontSize, + lineHeight: variant.lineHeight, + fontWeight: variant.fontWeight, + letterSpacing: variant.letterSpacing, + fontFamily: variant.fontFamily, + marginBottom: '0.45em', + }; } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/extra.ts b/packages/grafana-ui/src/themes/GlobalStyles/extra.ts index 4344f99aabe..a7e1b484891 100755 --- a/packages/grafana-ui/src/themes/GlobalStyles/extra.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/extra.ts @@ -3,10 +3,10 @@ import { css } from '@emotion/react'; import { GrafanaTheme2 } from '@grafana/data'; export function getExtraStyles(theme: GrafanaTheme2) { - return css` + return css({ // fix white background on intercom in dark mode - iframe.intercom-borderless-frame { - color-scheme: ${theme.colors.mode}; - } - `; + 'iframe.intercom-borderless-frame': { + colorScheme: theme.colors.mode, + }, + }); } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts index 7797396b89e..c3a87d89adf 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts @@ -3,43 +3,29 @@ import { css } from '@emotion/react'; import { GrafanaTheme2 } from '@grafana/data'; export function getFormElementStyles(theme: GrafanaTheme2) { - return css` - input, - button, - select, - textarea { - font-size: ${theme.typography.body.fontSize}; - font-weight: ${theme.typography.body.fontWeight}; - line-height: ${theme.typography.body.lineHeight}; - } - input, - button, - select, - textarea { - font-family: ${theme.typography.body.fontFamily}; - } + return css({ + 'input, button, select, textarea': { + fontFamily: theme.typography.body.fontFamily, + fontSize: theme.typography.body.fontSize, + fontWeight: theme.typography.body.fontWeight, + lineHeight: theme.typography.body.lineHeight, + }, - input, - select { - background-color: ${theme.components.input.background}; - color: ${theme.components.input.text}; - border: none; - box-shadow: none; - } + 'input, select': { + backgroundColor: theme.components.input.background, + color: theme.components.input.text, + border: 'none', + boxShadow: 'none', + }, - textarea { - height: auto; - } + textarea: { + height: 'auto', + }, // Reset width of input images, buttons, radios, checkboxes - input[type='file'], - input[type='image'], - input[type='submit'], - input[type='reset'], - input[type='button'], - input[type='radio'], - input[type='checkbox'] { - width: auto; // Override of generic input selector - } - `; + "input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": + { + width: 'auto', // Override of generic input selector + }, + }); } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/markdownStyles.ts b/packages/grafana-ui/src/themes/GlobalStyles/markdownStyles.ts index 67c096075e7..07830bd07e8 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/markdownStyles.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/markdownStyles.ts @@ -3,7 +3,7 @@ import { css } from '@emotion/react'; import { GrafanaTheme2 } from '@grafana/data'; export function getMarkdownStyles(theme: GrafanaTheme2) { - return css` + return css({ // TODO copy from _utils.scss - `; + }); } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/page.ts b/packages/grafana-ui/src/themes/GlobalStyles/page.ts index 4629736a8fd..ba0446ab82b 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/page.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/page.ts @@ -6,111 +6,111 @@ export function getPageStyles(theme: GrafanaTheme2) { const maxWidthBreakpoint = theme.breakpoints.values.xxl + theme.spacing.gridSize * 2 + theme.components.sidemenu.width; - return css` - .grafana-app { - display: flex; - align-items: stretch; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - } + return css({ + '.grafana-app': { + display: 'flex', + alignItems: 'stretch', + position: 'absolute', + width: '100%', + height: '100%', + top: 0, + left: 0, + }, - .main-view { - position: relative; - display: flex; - flex-direction: column; - flex-grow: 1; - height: 100%; - flex: 1 1 0; - min-width: 0; - } + '.main-view': { + position: 'relative', + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + height: '100%', + flex: '1 1 0', + minWidth: 0, + }, - .page-scrollbar-content { - display: flex; - min-height: 100%; - flex-direction: column; - width: 100%; - height: 100%; - } + '.page-scrollbar-content': { + display: 'flex', + minHeight: '100%', + flexDirection: 'column', + width: '100%', + height: '100%', + }, - .page-container { - flex-grow: 1; - flex-basis: 100%; - padding-left: ${theme.spacing(2)}; - padding-right: ${theme.spacing(2)}; + '.page-container': { + flexGrow: 1, + flexBasis: '100%', + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), - ${theme.breakpoints.up('sm')} { - margin: ${theme.spacing(0, 1)}; - } + [theme.breakpoints.up('sm')]: { + margin: theme.spacing(0, 1), + }, - ${theme.breakpoints.up('md')} { - margin: ${theme.spacing(0, 2)}; - } + [theme.breakpoints.up('md')]: { + margin: theme.spacing(0, 2), + }, - @media (min-width: ${maxWidthBreakpoint}px) { - max-width: ${theme.breakpoints.values.xxl}px; - margin-left: auto; - margin-right: auto; - width: 100%; - } - } + [`@media (min-width: ${maxWidthBreakpoint}px)`]: { + maxWidth: `${theme.breakpoints.values.xxl}px`, + marginLeft: 'auto', + marginRight: 'auto', + width: '100%', + }, + }, - .page-full { - margin-left: ${theme.spacing(2)}; - padding-left: ${theme.spacing(2)}; - padding-right: ${theme.spacing(2)}; - } + '.page-full': { + marginLeft: theme.spacing(2), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + }, - .page-body { - padding: ${theme.spacing(1)}; - background: ${theme.components.panel.background}; - border: 1px solid ${theme.components.panel.borderColor}; - margin-bottom: 32px; + '.page-body': { + padding: theme.spacing(1), + background: theme.components.panel.background, + border: `1px solid ${theme.components.panel.borderColor}`, + marginBottom: '32px', - ${theme.breakpoints.up('md')} { - padding: ${theme.spacing(2)}; - } + [theme.breakpoints.up('md')]: { + padding: theme.spacing(2), + }, - ${theme.breakpoints.up('lg')} { - padding: ${theme.spacing(3)}; - } - } + [theme.breakpoints.up('lg')]: { + padding: theme.spacing(3), + }, + }, - .page-heading { - font-size: ${theme.typography.h4.fontSize}; - margin-top: 0; - margin-bottom: ${theme.spacing(2)}; - } + '.page-heading': { + fontSize: theme.typography.h4.fontSize, + marginTop: 0, + marginBottom: theme.spacing(2), + }, - .page-action-bar { - margin-bottom: ${theme.spacing(2)}; - display: flex; - align-items: flex-start; - gap: ${theme.spacing(2)}; - } + '.page-action-bar': { + marginBottom: theme.spacing(2), + display: 'flex', + alignItems: 'flex-start', + gap: theme.spacing(2), + }, - .page-action-bar--narrow { - margin-bottom: 0; - } + '.page-action-bar--narrow': { + marginBottom: 0, + }, - .page-action-bar__spacer { - width: ${theme.spacing(2)}; - flex-grow: 1; - } + '.page-action-bar__spacer': { + width: theme.spacing(2), + flexGrow: 1, + }, - .page-sub-heading { - margin-bottom: ${theme.spacing(2)}; - } + '.page-sub-heading': { + marginBottom: theme.spacing(2), + }, - .page-sub-heading-icon { - margin-left: ${theme.spacing(1)}; - margin-top: ${theme.spacing(0.5)}; - } + '.page-sub-heading-icon': { + marginLeft: theme.spacing(1), + marginTop: theme.spacing(0.5), + }, - .page-hidden { - display: none; - } - `; + '.page-hidden': { + display: 'none', + }, + }); } diff --git a/packages/grafana-ui/src/themes/ThemeContext.test.tsx b/packages/grafana-ui/src/themes/ThemeContext.test.tsx index 7164d43a270..f3a1625c07f 100644 --- a/packages/grafana-ui/src/themes/ThemeContext.test.tsx +++ b/packages/grafana-ui/src/themes/ThemeContext.test.tsx @@ -36,9 +36,9 @@ describe('useStyles', () => { const Dummy = function () { const styles = useStyles2((theme) => { return { - someStyle: css` - color: ${theme.colors.success.main}; - `, + someStyle: css({ + color: theme.colors.success.main, + }), }; }); diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index 51ab75eb556..e633ae2a983 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -74,12 +74,12 @@ export function getFocusStyles(theme: GrafanaTheme2): CSSObject { } // max-width is set up based on .grafana-tooltip class that's used in dashboard -export const getTooltipContainerStyles = (theme: GrafanaTheme2) => ` - overflow: hidden; - background: ${theme.colors.background.secondary}; - box-shadow: ${theme.shadows.z2}; - max-width: 800px; - padding: ${theme.spacing(1)}; - border-radius: ${theme.shape.radius.default}; - z-index: ${theme.zIndex.tooltip}; -`; +export const getTooltipContainerStyles = (theme: GrafanaTheme2): CSSObject => ({ + overflow: 'hidden', + background: theme.colors.background.secondary, + boxShadow: theme.shadows.z2, + maxWidth: '800px', + padding: theme.spacing(1), + borderRadius: theme.shape.radius.default, + zIndex: theme.zIndex.tooltip, +}); diff --git a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx index c69adfe2d45..43cdc88cbba 100644 --- a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx +++ b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx @@ -9,13 +9,13 @@ export interface Props { export const DashboardStoryCanvas = ({ children }: Props) => { const theme = useTheme2(); - const style = css` - width: 100%; - height: 100%; - padding: 32px; - background: ${theme.colors.background.canvas}; - overflow: auto; - `; + const style = css({ + width: '100%', + height: '100%', + padding: '32px', + background: theme.colors.background.canvas, + overflow: 'auto', + }); return
{children}
; }; diff --git a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx index e26679bdb98..8d2584308d0 100644 --- a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx +++ b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx @@ -10,14 +10,14 @@ export interface Props { export const StoryExample = ({ name, children }: Props) => { const theme = useTheme2(); - const style = css` - width: 100%; - padding: 16px; - `; - const heading = css` - color: ${theme.colors.text.secondary}; - margin-bottom: 16px; - `; + const style = css({ + width: '100%', + padding: '16px', + }); + const heading = css({ + color: theme.colors.text.secondary, + marginBottom: '16px', + }); return (
diff --git a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx index c600c4673f5..fdba03ff47e 100644 --- a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx +++ b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx @@ -14,13 +14,11 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props const finalHeight = height !== 0 ? `${height}px` : 'auto'; const bgStyles = showBoundaries && - css` - background-color: white; - background-size: 30px 30px; - background-position: - 0 0, - 15px 15px; - background-image: linear-gradient( + css({ + backgroundColor: 'white', + backgroundSize: '30px 30px', + backgroundPosition: '0 0, 15px 15px', + backgroundImage: `linear-gradient( 45deg, ${checkColor} 25%, transparent 25%, @@ -28,15 +26,15 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props ${checkColor} 75%, ${checkColor} ), - linear-gradient(45deg, ${checkColor} 25%, transparent 25%, transparent 75%, ${checkColor} 75%, ${checkColor}); - `; + linear-gradient(45deg, ${checkColor} 25%, transparent 25%, transparent 75%, ${checkColor} 75%, ${checkColor})`, + }); return (
diff --git a/packages/grafana-ui/src/utils/tooltipUtils.ts b/packages/grafana-ui/src/utils/tooltipUtils.ts index 543f1c4b127..e7d555e69cf 100644 --- a/packages/grafana-ui/src/utils/tooltipUtils.ts +++ b/packages/grafana-ui/src/utils/tooltipUtils.ts @@ -10,158 +10,158 @@ export function buildTooltipTheme( tooltipPadding: { topBottom: number; rightLeft: number } ) { return { - arrow: css` - height: 1rem; - width: 1rem; - position: absolute; - pointer-events: none; + arrow: css({ + height: '1rem', + width: '1rem', + position: 'absolute', + pointerEvents: 'none', - &::before { - border-style: solid; - content: ''; - display: block; - height: 0; - margin: auto; - width: 0; - } + '&::before': { + borderStyle: 'solid', + content: '""', + display: 'block', + height: 0, + margin: 'auto', + width: 0, + }, - &::after { - border-style: solid; - content: ''; - display: block; - height: 0; - margin: auto; - position: absolute; - width: 0; - } - `, - container: css` - background-color: ${tooltipBg}; - border-radius: ${theme.shape.radius.default}; - border: 1px solid ${toggletipBorder}; - box-shadow: ${theme.shadows.z2}; - color: ${tooltipText}; - font-size: ${theme.typography.bodySmall.fontSize}; - padding: ${theme.spacing(tooltipPadding.topBottom, tooltipPadding.rightLeft)}; - transition: opacity 0.3s; - z-index: ${theme.zIndex.tooltip}; - max-width: 400px; - overflow-wrap: break-word; + '&::after': { + borderStyle: 'solid', + content: '""', + display: 'block', + height: 0, + margin: 'auto', + position: 'absolute', + width: 0, + }, + }), + container: css({ + backgroundColor: tooltipBg, + borderRadius: theme.shape.radius.default, + border: `1px solid ${toggletipBorder}`, + boxShadow: theme.shadows.z2, + color: tooltipText, + fontSize: theme.typography.bodySmall.fontSize, + padding: theme.spacing(tooltipPadding.topBottom, tooltipPadding.rightLeft), + transition: 'opacity 0.3s', + zIndex: theme.zIndex.tooltip, + maxWidth: '400px', + overflowWrap: 'break-word', - &[data-popper-interactive='false'] { - pointer-events: none; - } + "&[data-popper-interactive='false']": { + pointerEvents: 'none', + }, - &[data-popper-placement*='bottom'] > div[data-popper-arrow='true'] { - left: 0; - margin-top: -7px; - top: 0; + "&[data-popper-placement*='bottom'] > div[data-popper-arrow='true']": { + left: 0, + marginTop: '-7px', + top: 0, - &::before { - border-color: transparent transparent ${toggletipBorder} transparent; - border-width: 0 8px 7px 8px; - position: absolute; - top: -1px; - } + '&::before': { + borderColor: `transparent transparent ${toggletipBorder} transparent`, + borderWidth: '0 8px 7px 8px', + position: 'absolute', + top: '-1px', + }, - &::after { - border-color: transparent transparent ${tooltipBg} transparent; - border-width: 0 8px 7px 8px; - } - } + '&::after': { + borderColor: `transparent transparent ${tooltipBg} transparent`, + borderWidth: '0 8px 7px 8px', + }, + }, - &[data-popper-placement*='top'] > div[data-popper-arrow='true'] { - bottom: 0; - left: 0; - margin-bottom: -14px; + "&[data-popper-placement*='top'] > div[data-popper-arrow='true']": { + bottom: 0, + left: 0, + marginBottom: '-14px', - &::before { - border-color: ${toggletipBorder} transparent transparent transparent; - border-width: 7px 8px 0 7px; - position: absolute; - top: 1px; - } + '&::before': { + borderColor: `${toggletipBorder} transparent transparent transparent`, + borderWidth: '7px 8px 0 7px', + position: 'absolute', + top: '1px', + }, - &::after { - border-color: ${tooltipBg} transparent transparent transparent; - border-width: 7px 8px 0 7px; - } - } + '&::after': { + borderColor: `${tooltipBg} transparent transparent transparent`, + borderWidth: '7px 8px 0 7px', + }, + }, - &[data-popper-placement*='right'] > div[data-popper-arrow='true'] { - left: 0; - margin-left: -10px; + "&[data-popper-placement*='right'] > div[data-popper-arrow='true']": { + left: 0, + marginLeft: '-10px', - &::before { - border-color: transparent ${toggletipBorder} transparent transparent; - border-width: 7px 6px 7px 0; - } + '&::before': { + borderColor: `transparent ${toggletipBorder} transparent transparent`, + borderWidth: '7px 6px 7px 0', + }, - &::after { - border-color: transparent ${tooltipBg} transparent transparent; - border-width: 6px 7px 7px 0; - left: 2px; - top: 1px; - } - } + '&::after': { + borderColor: `transparent ${tooltipBg} transparent transparent`, + borderWidth: '6px 7px 7px 0', + left: '2px', + top: '1px', + }, + }, - &[data-popper-placement*='left'] > div[data-popper-arrow='true'] { - margin-right: -11px; - right: 0; + "&[data-popper-placement*='left'] > div[data-popper-arrow='true']": { + marginRight: '-11px', + right: 0, - &::before { - border-color: transparent transparent transparent ${toggletipBorder}; - border-width: 7px 0 6px 7px; - } + '&::before': { + borderColor: `transparent transparent transparent ${toggletipBorder}`, + borderWidth: '7px 0 6px 7px', + }, - &::after { - border-color: transparent transparent transparent ${tooltipBg}; - border-width: 6px 0 5px 5px; - left: 1px; - top: 1px; - } - } + '&::after': { + borderColor: `transparent transparent transparent ${tooltipBg}`, + borderWidth: '6px 0 5px 5px', + left: '1px', + top: '1px', + }, + }, - code { - border: none; - display: inline; - background: ${colorManipulator.darken(tooltipBg, 0.1)}; - color: ${tooltipText}; - } + code: { + border: 'none', + display: 'inline', + background: colorManipulator.darken(tooltipBg, 0.1), + color: tooltipText, + }, - pre { - background: ${colorManipulator.darken(tooltipBg, 0.1)}; - color: ${tooltipText}; - } + pre: { + background: colorManipulator.darken(tooltipBg, 0.1), + color: tooltipText, + }, - a { - color: ${tooltipText}; - text-decoration: underline; - } + a: { + color: tooltipText, + textDecoration: 'underline', + }, - a:hover { - text-decoration: none; - } - `, - headerClose: css` - color: ${theme.colors.text.secondary}; - position: absolute; - right: ${theme.spacing(1)}; - top: ${theme.spacing(1.5)}; - background-color: transparent; - border: 0; - `, - header: css` - padding-top: ${theme.spacing(1)}; - padding-bottom: ${theme.spacing(2)}; - `, - body: css` - padding-top: ${theme.spacing(1)}; - padding-bottom: ${theme.spacing(1)}; - `, - footer: css` - padding-top: ${theme.spacing(2)}; - padding-bottom: ${theme.spacing(1)}; - `, + 'a:hover': { + textDecoration: 'none', + }, + }), + headerClose: css({ + color: theme.colors.text.secondary, + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1.5), + backgroundColor: 'transparent', + border: 0, + }), + header: css({ + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(2), + }), + body: css({ + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(1), + }), + footer: css({ + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(1), + }), }; }