From 06c30ee16547e299d56419d4091f24583b5c0281 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 10 Jun 2024 16:10:54 +0100 Subject: [PATCH] Chore: Migrate more SCSS styles (#88780) * remove animations mixins * move drop and drop-element to angular file * migrate submenu scss --- .betterer.results | 3 + .../new-query-variable.spec.ts | 4 +- .../src/selectors/components.ts | 1 + .../PanelChrome/LoadingIndicator.tsx | 24 +- .../components/SubMenu/SubMenuItems.tsx | 26 +- .../variables/editor/VariableEditorEditor.tsx | 41 +- .../pickers/OptionsPicker/OptionsPicker.tsx | 12 +- public/sass/_angular.scss | 394 ++++++++++++++++++ public/sass/_grafana.scss | 4 - public/sass/components/_drop.scss | 94 ----- public/sass/components/_submenu.scss | 27 -- public/sass/mixins/_animations.scss | 49 --- public/sass/mixins/_drop_element.scss | 285 ------------- 13 files changed, 490 insertions(+), 474 deletions(-) delete mode 100644 public/sass/components/_drop.scss delete mode 100644 public/sass/components/_submenu.scss delete mode 100644 public/sass/mixins/_animations.scss delete mode 100644 public/sass/mixins/_drop_element.scss diff --git a/.betterer.results b/.betterer.results index 076f8ed8568..98c6cf83ceb 100644 --- a/.betterer.results +++ b/.betterer.results @@ -7890,6 +7890,9 @@ 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"] ], + "public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx:5381": [ + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] + ], "public/app/features/datasources/components/BasicSettings.tsx: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"], diff --git a/e2e/dashboards-suite/new-query-variable.spec.ts b/e2e/dashboards-suite/new-query-variable.spec.ts index 5239060c2d7..c5edb437147 100644 --- a/e2e/dashboards-suite/new-query-variable.spec.ts +++ b/e2e/dashboards-suite/new-query-variable.spec.ts @@ -108,7 +108,7 @@ describe('Variables - Query - Add variable', () => { .should('have.length', 4) .eq(3) .within(() => { - cy.get('.variable-link-wrapper').should('be.visible').click(); + e2e.components.Variables.variableLinkWrapper().should('be.visible').click(); e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() .should('be.visible') .within(() => { @@ -168,7 +168,7 @@ describe('Variables - Query - Add variable', () => { .should('have.length', 4) .eq(3) .within(() => { - cy.get('.variable-link-wrapper').should('be.visible').click(); + e2e.components.Variables.variableLinkWrapper().should('be.visible').click(); e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown() .should('be.visible') .within(() => { diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 165861766c3..3a763ec3fe5 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -572,6 +572,7 @@ export const Components = { }, Variables: { variableOption: 'data-testid variable-option', + variableLinkWrapper: 'data-testid variable-link-wrapper', }, Annotations: { annotationsTypeInput: 'data-testid annotations-type-input', diff --git a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx index 77255379cda..27db3b16f79 100644 --- a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx @@ -1,6 +1,7 @@ -import { css, cx } from '@emotion/css'; +import { css, cx, keyframes } from '@emotion/css'; import React from 'react'; +import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { useStyles2 } from '../../themes'; @@ -19,6 +20,7 @@ export type LoadingIndicatorProps = { * @internal */ export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) => { + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const styles = useStyles2(getStyles); if (!loading) { @@ -28,8 +30,8 @@ export const LoadingIndicator = ({ onCancel, loading }: LoadingIndicatorProps) = return ( { +const spin = keyframes({ + '0%': { + transform: 'rotate(0deg) scaleX(-1)', // scaleX flips the `sync` icon so arrows point the correct way + }, + '100%': { + transform: 'rotate(359deg) scaleX(-1)', + }, +}); + +const getStyles = (theme: GrafanaTheme2) => { return { clickable: css({ cursor: 'pointer', }), + spin: css({ + [theme.transitions.handleMotion('no-preference')]: { + animation: `${spin} 3s linear infinite`, + }, + }), }; }; diff --git a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx index fb9fe623900..22e815c5aab 100644 --- a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx +++ b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx @@ -1,7 +1,9 @@ +import { css } from '@emotion/css'; import React, { useEffect, useState } from 'react'; -import { TypedVariableModel, VariableHide } from '@grafana/data'; +import { GrafanaTheme2, TypedVariableModel, VariableHide } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; +import { useStyles2 } from '@grafana/ui'; import { PickerRenderer } from '../../../variables/pickers/PickerRenderer'; @@ -12,6 +14,7 @@ interface Props { export const SubMenuItems = ({ variables, readOnly }: Props) => { const [visibleVariables, setVisibleVariables] = useState([]); + const styles = useStyles2(getStyles); useEffect(() => { setVisibleVariables(variables.filter((state) => state.hide !== VariableHide.hideVariable)); @@ -24,10 +27,29 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => { return ( <> {visibleVariables.map((variable) => ( -
+
))} ); }; + +const getStyles = (theme: GrafanaTheme2) => ({ + submenuItem: css({ + display: 'inline-block', + + '.fa-caret-down': { + fontSize: '75%', + paddingLeft: theme.spacing(1), + }, + + '.gf-form': { + marginBottom: 0, + }, + }), +}); diff --git a/public/app/features/variables/editor/VariableEditorEditor.tsx b/public/app/features/variables/editor/VariableEditorEditor.tsx index 893fa694b08..8c59ea08378 100644 --- a/public/app/features/variables/editor/VariableEditorEditor.tsx +++ b/public/app/features/variables/editor/VariableEditorEditor.tsx @@ -1,11 +1,12 @@ +import { css, keyframes } from '@emotion/css'; import React, { FormEvent, PureComponent } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { LoadingState, SelectableValue, VariableHide, VariableType } from '@grafana/data'; +import { GrafanaTheme2, LoadingState, SelectableValue, VariableHide, VariableType } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { locationService } from '@grafana/runtime'; -import { Button, HorizontalGroup, Icon } from '@grafana/ui'; +import { Button, HorizontalGroup, Icon, Themeable2, withTheme2 } from '@grafana/ui'; import { StoreState, ThunkDispatch } from '../../../types'; import { VariableHideSelect } from '../../dashboard-scene/settings/variables/components/VariableHideSelect'; @@ -54,7 +55,7 @@ const mapDispatchToProps = (dispatch: ThunkDispatch) => { const connector = connect(mapStateToProps, mapDispatchToProps); -export interface OwnProps { +export interface OwnProps extends Themeable2 { identifier: KeyedVariableIdentifier; } @@ -146,12 +147,14 @@ export class VariableEditorEditorUnConnected extends PureComponent }; render() { - const { variable } = this.props; + const { theme, variable } = this.props; const EditorToRender = variableAdapters.get(this.props.variable.type).editor; if (!EditorToRender) { return null; } const loading = variable.state === LoadingState.Loading; + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + const styles = getStyles(theme); return ( <> @@ -209,7 +212,14 @@ export class VariableEditorEditorUnConnected extends PureComponent variant="secondary" > Run query - {loading && } + {loading && ( + + )}