From ecfe50439b28003f5f810947a54e834121b127c0 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 28 May 2024 14:58:51 +0100 Subject: [PATCH] Chore: Remove last of the SCSS from grafana/ui (#88302) * remove last of scss from grafana/ui * add comment about legacySelect classes --- .betterer.results | 31 +++ .../DateTimePickers/TimeOfDayPicker.tsx | 2 + .../DateTimePickers/_TimeOfDayPicker.scss | 39 ---- .../Forms/Legacy/Select/_Select.scss | 207 ------------------ packages/grafana-ui/src/components/index.scss | 3 - .../grafana-ui/src/components/uPlot/Plot.scss | 24 -- .../grafana-ui/src/components/uPlot/Plot.tsx | 2 + packages/grafana-ui/src/index.scss | 1 - .../src/themes/GlobalStyles/GlobalStyles.tsx | 6 + .../src/themes/GlobalStyles/legacySelect.ts | 207 ++++++++++++++++++ .../src/themes/GlobalStyles/rcTimePicker.ts | 43 ++++ .../src/themes/GlobalStyles/uPlot.ts | 27 +++ public/sass/_grafana.scss | 3 - 13 files changed, 318 insertions(+), 277 deletions(-) delete mode 100644 packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss delete mode 100644 packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss delete mode 100644 packages/grafana-ui/src/components/index.scss delete mode 100644 packages/grafana-ui/src/components/uPlot/Plot.scss delete mode 100644 packages/grafana-ui/src/index.scss create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/rcTimePicker.ts create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/uPlot.ts diff --git a/.betterer.results b/.betterer.results index 648ea10524a..beb2b73dbac 100644 --- a/.betterer.results +++ b/.betterer.results @@ -5202,6 +5202,37 @@ exports[`no gf-form usage`] = { [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], + "packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts:5381": [ + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] + ], "public/app/angular/components/code_editor/code_editor.ts:5381": [ [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx index 13c5d69b685..f6e64fb279a 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx @@ -10,6 +10,8 @@ import { inputSizes } from '../Forms/commonStyles'; import { FormInputSize } from '../Forms/types'; import { Icon } from '../Icon/Icon'; +import 'rc-time-picker/assets/index.css'; + export interface Props { onChange: (value: DateTime) => void; value?: DateTime; diff --git a/packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss b/packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss deleted file mode 100644 index d4809ea7258..00000000000 --- a/packages/grafana-ui/src/components/DateTimePickers/_TimeOfDayPicker.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import 'rc-time-picker/assets/index.css'; - -.rc-time-picker-input, -.rc-time-picker-panel-input-wrap, -.rc-time-picker-panel-inner { - background-color: $input-bg; - color: $input-color; - border-color: $input-border-color; - font-size: $font-size-base; -} - -.rc-time-picker-input { - padding: $input-padding; - height: $input-height; -} - -.rc-time-picker-panel { - width: 176px; -} - -.rc-time-picker-panel-select { - width: 50%; - - &:only-child { - width: 100%; - } - - .rc-time-picker-panel-select-option-selected { - background-color: $menu-dropdown-hover-bg; - } - - li:hover { - background-color: $menu-dropdown-hover-bg; - } -} - -.rc-time-picker-panel-narrow { - max-width: none; -} diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss deleted file mode 100644 index ace4fcc36e6..00000000000 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss +++ /dev/null @@ -1,207 +0,0 @@ -$select-input-height: 32px; -$select-input-bg-disabled: $input-bg-disabled; - -@mixin select-control() { - width: 100%; - margin-right: $space-xs; - @include border-radius($input-border-radius); - background-color: $input-bg; -} - -@mixin select-control-focus() { - border-color: $input-border-focus; - outline: none; - // prettier-ignore - $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-box-shadow-focus; - @include box-shadow($shadow); -} - -.gf-form-select-box__control { - @include select-control(); - border: 1px solid $input-border-color; - color: $input-color; - cursor: default; - height: $select-input-height; - outline: none; - overflow: hidden; - position: relative; -} - -.gf-form-select-box__control--is-focused { - background-color: $input-bg; - @include select-control-focus(); -} - -.gf-form-select-box__control--is-disabled { - background-color: $select-input-bg-disabled; -} - -.gf-form-select-box__control--menu-right { - .gf-form-select-box__menu { - right: 0; - left: unset; - } -} - -.gf-form-select-box__input { - input { - line-height: inherit; - } -} - -.gf-form-select-box__menu { - background: $menu-dropdown-bg; - box-shadow: $menu-dropdown-shadow; - position: absolute; - z-index: $zindex-dropdown; - min-width: 100%; - - &-notice--no-options { - background-color: $input-bg; - padding: 10px; - } -} - -.gf-form-select-box__menu-list { - overflow-y: auto; - max-height: 300px; - max-width: 600px; -} - -.tag-filter .gf-form-select-box__menu { - width: 100%; -} - -/* .gf-form-select-box__single-value { */ -/* } */ - -.gf-form-select-box__multi-value { - display: inline; - margin: 0 6px 0 0; - cursor: pointer; -} - -.gf-form-select-box__multi-value__remove { - text-align: center; - display: inline-block; - margin-left: 2px; - position: relative; -} - -.gf-form-select-box__multi-value__label { - display: inline; - vertical-align: middle; -} - -.gf-form-select-box__option { - border-left: 2px solid transparent; - white-space: nowrap; - background-color: $input-bg; - - &.gf-form-select-box__option--is-focused { - color: $dropdownLinkColorHover; - background: $menu-dropdown-hover-bg; - @include left-brand-border-gradient(); - } - - &.gf-form-select-box__option--is-selected { - .fa { - color: $input-color-select-arrow; - } - } -} - -.gf-form-select-box__placeholder { - color: $input-color-placeholder; -} - -.gf-form-select-box__control--is-focused .gf-form-select-box__placeholder { - display: none; -} - -.gf-form-select-box__value-container { - display: inline-block; - padding: 6px 20px 6px 10px; - vertical-align: middle; - - > div { - display: inline-block; - vertical-align: middle; - } -} - -.gf-form-select-box__indicators { - position: absolute; - height: 100%; - right: 8px; - top: 1px; - display: inline-block; - text-align: right; -} - -.gf-form-input--form-dropdown { - padding: 0; - border: 0; - overflow: visible; - position: relative; -} - -.gf-form--has-input-icon { - .gf-form-select-box__value-container { - padding-left: 30px; - } -} - -.gf-form-select-box__desc-option { - display: flex; - align-items: center; - justify-content: flex-start; - justify-items: center; - cursor: pointer; - padding: 7px 10px; - width: 100%; -} - -.gf-form-select-box__desc-option__body { - display: flex; - flex-direction: column; - flex-grow: 1; - padding-right: 10px; - font-weight: $font-weight-semi-bold; -} - -.gf-form-select-box__desc-option__desc { - font-weight: normal; - font-size: $font-size-sm; - color: $text-muted; -} - -.gf-form-select-box__desc-option__img { - width: 16px; - margin-right: 10px; -} - -.gf-form-select-box__option-group__header { - display: flex; - align-items: center; - justify-content: flex-start; - justify-items: center; - cursor: pointer; - padding: 7px 10px; - width: 100%; - border-bottom: 1px solid $hr-border-color; - text-transform: capitalize; - - .fa { - padding-right: 2px; - } -} - -.gf-form-select-box-button-select { - height: auto; -} - -.select-button { - display: flex; - align-items: center; -} diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss deleted file mode 100644 index c882ae9b37e..00000000000 --- a/packages/grafana-ui/src/components/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'Forms/Legacy/Select/Select'; -@import 'DateTimePickers/TimeOfDayPicker'; -@import 'uPlot/Plot'; diff --git a/packages/grafana-ui/src/components/uPlot/Plot.scss b/packages/grafana-ui/src/components/uPlot/Plot.scss deleted file mode 100644 index 895e3329895..00000000000 --- a/packages/grafana-ui/src/components/uPlot/Plot.scss +++ /dev/null @@ -1,24 +0,0 @@ -// importing the uPlot css so it will be bundled with the rest of the styling. -@import 'uplot/dist/uPlot.min.css'; - -.uplot { - font-family: inherit; -} - -.u-select { - background: rgba(120, 120, 130, 0.2); -} - -.u-hz .u-cursor-x, -.u-vt .u-cursor-y { - border-right: 1px dashed rgba(120, 120, 130, 0.5); -} - -.u-hz .u-cursor-y, -.u-vt .u-cursor-x { - border-bottom: 1px dashed rgba(120, 120, 130, 0.5); -} - -.shared-crosshair:not(.plot-active) .u-cursor-pt { - display: none !important; -} diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx index 2bd4bdde244..a6690e77c5e 100644 --- a/packages/grafana-ui/src/components/uPlot/Plot.tsx +++ b/packages/grafana-ui/src/components/uPlot/Plot.tsx @@ -4,6 +4,8 @@ import uPlot, { AlignedData, Options } from 'uplot'; import { PlotProps } from './types'; import { pluginLog } from './utils'; +import 'uplot/dist/uPlot.min.css'; + function sameDims(prevProps: PlotProps, nextProps: PlotProps) { return nextProps.width === prevProps.width && nextProps.height === prevProps.height; } diff --git a/packages/grafana-ui/src/index.scss b/packages/grafana-ui/src/index.scss deleted file mode 100644 index 841415620d6..00000000000 --- a/packages/grafana-ui/src/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'components/index'; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 5b2d5fef657..791adfa5391 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -8,9 +8,12 @@ import { getCardStyles } from './card'; import { getElementStyles } from './elements'; import { getExtraStyles } from './extra'; import { getFormElementStyles } from './forms'; +import { getLegacySelectStyles } from './legacySelect'; import { getMarkdownStyles } from './markdownStyles'; import { getPageStyles } from './page'; +import { getRcTimePickerStyles } from './rcTimePicker'; import { getSkeletonStyles } from './skeletonStyles'; +import { getUplotStyles } from './uPlot'; /** @internal */ export function GlobalStyles() { @@ -27,6 +30,9 @@ export function GlobalStyles() { getAgularPanelStyles(theme), getMarkdownStyles(theme), getSkeletonStyles(theme), + getRcTimePickerStyles(theme), + getUplotStyles(theme), + getLegacySelectStyles(theme), ]} /> ); diff --git a/packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts b/packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts new file mode 100644 index 00000000000..e3836673419 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/legacySelect.ts @@ -0,0 +1,207 @@ +// some plugins depend on these classes +// TODO we should aim to remove this for Grafana 12 +import { css } from '@emotion/react'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export function getLegacySelectStyles(theme: GrafanaTheme2) { + return css({ + '.gf-form-select-box__control': { + width: '100%', + marginRight: theme.spacing(0.5), + backgroundColor: theme.components.input.background, + border: `1px solid ${theme.components.input.borderColor}`, + borderRadius: theme.shape.radius.default, + color: theme.components.input.text, + cursor: 'default', + height: theme.spacing(4), + outline: 'none', + overflow: 'hidden', + position: 'relative', + }, + + '.gf-form-select-box__control--is-focused': { + backgroundColor: theme.components.input.background, + borderColor: theme.colors.primary.border, + outline: 'none', + boxShadow: `inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px ${theme.colors.primary.border}`, + }, + + '.gf-form-select-box__control--is-disabled': { + backgroundColor: theme.colors.action.disabledBackground, + }, + + '.gf-form-select-box__control--menu-right': { + '.gf-form-select-box__menu': { + right: 0, + left: 'unset', + }, + }, + + '.gf-form-select-box__input': { + input: { + lineHeight: 'inherit', + }, + }, + + '.gf-form-select-box__menu': { + background: theme.colors.background.primary, + boxShadow: theme.shadows.z3, + position: 'absolute', + zIndex: theme.zIndex.dropdown, + minWidth: '100%', + + '&-notice--no-options': { + backgroundColor: theme.components.input.background, + padding: '10px', + }, + }, + + '.gf-form-select-box__menu-list': { + overflowY: 'auto', + maxHeight: '300px', + maxWidth: '600px', + }, + + '.tag-filter .gf-form-select-box__menu': { + width: '100%', + }, + + '.gf-form-select-box__multi-value': { + display: 'inline', + margin: '0 6px 0 0', + cursor: 'pointer', + }, + + '.gf-form-select-box__multi-value__remove': { + textAlign: 'center', + display: 'inline-block', + marginLeft: '2px', + position: 'relative', + }, + + '.gf-form-select-box__multi-value__label': { + display: 'inline', + verticalAlign: 'middle', + }, + + '.gf-form-select-box__option': { + borderLeft: '2px solid transparent', + whiteSpace: 'nowrap', + backgroundColor: theme.components.input.background, + + '&.gf-form-select-box__option--is-focused': { + color: theme.colors.text.primary, + background: theme.colors.action.hover, + borderImage: theme.colors.gradients.brandVertical, + borderImageSlice: 1, + borderStyle: 'solid', + borderTop: 0, + borderRight: 0, + borderBottom: 0, + borderLeftWidth: '2px', + }, + + '&.gf-form-select-box__option--is-selected': { + '.fa': { + color: theme.colors.text.primary, + }, + }, + }, + + '.gf-form-select-box__placeholder': { + color: theme.colors.text.disabled, + }, + + '.gf-form-select-box__control--is-focused .gf-form-select-box__placeholder': { + display: 'none', + }, + + '.gf-form-select-box__value-container': { + display: 'inline-block', + padding: '6px 20px 6px 10px', + verticalAlign: 'middle', + + '> div': { + display: 'inline-block', + verticalAlign: 'middle', + }, + }, + + '.gf-form-select-box__indicators': { + position: 'absolute', + height: '100%', + right: '8px', + top: '1px', + display: 'inline-block', + textAlign: 'right', + }, + + '.gf-form-input--form-dropdown': { + padding: 0, + border: 0, + overflow: 'visible', + position: 'relative', + }, + + '.gf-form--has-input-icon': { + '.gf-form-select-box__value-container': { + paddingLeft: '30px', + }, + }, + + '.gf-form-select-box__desc-option': { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + justifyItems: 'center', + cursor: 'pointer', + padding: '7px 10px', + width: '100%', + }, + + '.gf-form-select-box__desc-option__body': { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + paddingRight: '10px', + fontWeight: theme.typography.fontWeightMedium, + }, + + '.gf-form-select-box__desc-option__desc': { + fontWeight: 'normal', + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.secondary, + }, + + '.gf-form-select-box__desc-option__img': { + width: '16px', + marginRight: '10px', + }, + + '.gf-form-select-box__option-group__header': { + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + justifyItems: 'center', + cursor: 'pointer', + padding: '7px 10px', + width: '100%', + borderBottom: `1px solid ${theme.v1.palette.dark9}`, + textTransform: 'capitalize', + + '.fa': { + paddingRight: '2px', + }, + }, + + '.gf-form-select-box-button-select': { + height: 'auto', + }, + + '.select-button': { + display: 'flex', + alignItems: 'center', + }, + }); +} diff --git a/packages/grafana-ui/src/themes/GlobalStyles/rcTimePicker.ts b/packages/grafana-ui/src/themes/GlobalStyles/rcTimePicker.ts new file mode 100644 index 00000000000..36df58946b6 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/rcTimePicker.ts @@ -0,0 +1,43 @@ +import { css } from '@emotion/react'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export function getRcTimePickerStyles(theme: GrafanaTheme2) { + return css({ + '.rc-time-picker-input,.rc-time-picker-panel-input-wrap,.rc-time-picker-panel-inner': { + backgroundColor: theme.components.input.background, + color: theme.colors.text.secondary, + borderColor: theme.components.input.borderColor, + fontSize: theme.typography.body.fontSize, + }, + + '.rc-time-picker-input': { + padding: theme.spacing(0, 1), + height: theme.spacing(4), + }, + + '.rc-time-picker-panel': { + width: '176px', + }, + + '.rc-time-picker-panel-select': { + width: '50%', + + '&:only-child': { + width: '100%', + }, + + '.rc-time-picker-panel-select-option-selected': { + backgroundColor: theme.colors.background.secondary, + }, + + 'li:hover': { + backgroundColor: theme.colors.background.secondary, + }, + }, + + '.rc-time-picker-panel-narrow': { + maxWidth: 'none', + }, + }); +} diff --git a/packages/grafana-ui/src/themes/GlobalStyles/uPlot.ts b/packages/grafana-ui/src/themes/GlobalStyles/uPlot.ts new file mode 100644 index 00000000000..3637999adee --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/uPlot.ts @@ -0,0 +1,27 @@ +import { css } from '@emotion/react'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export function getUplotStyles(theme: GrafanaTheme2) { + return css({ + '.uplot': { + fontFamily: 'inherit', + }, + + '.u-select': { + background: 'rgba(120, 120, 130, 0.2)', + }, + + '.u-hz .u-cursor-x, .u-vt .u-cursor-y': { + borderRight: '1px dashed rgba(120, 120, 130, 0.5)', + }, + + '.u-hz .u-cursor-y, .u-vt .u-cursor-x': { + borderBottom: '1px dashed rgba(120, 120, 130, 0.5)', + }, + + '.shared-crosshair:not(.plot-active) .u-cursor-pt': { + display: 'none !important', + }, + }); +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 8dd2f7349d2..41459f45a71 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -50,9 +50,6 @@ @import 'components/add_data_source'; @import 'components/panel_header'; -// LOAD @grafana/ui components -@import '@grafana/ui/src/index'; - // PAGES @import 'pages/dashboard'; @import 'pages/alerting';