Emotion: Upgrades emotion from 10 to 11 and updates all import paths (#32541)

* Babel: Updates babel dependencies to latest version

* Emotion: Upgrade form 10 to 11

* Fixing tests

* Updated to use emotion/css instead in test

.eslintrc

@@ -1,10 +1,12 @@
 {
   "extends": ["@grafana/eslint-config"],
   "root": true,
-  "plugins": ["no-only-tests"],
+  "plugins": ["no-only-tests", "@emotion"],
   "rules": {
     "no-only-tests/no-only-tests": "error",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "@emotion/jsx-import": "error",
+    "@emotion/pkg-renaming": "error"
   },
   "overrides": [
     {

package.json

@@ -73,6 +73,7 @@
     "@babel/plugin-proposal-optional-chaining": "7.13.12",
     "@babel/plugin-proposal-private-methods": "7.13.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/plugin-transform-react-constant-elements": "7.13.13",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-react": "7.13.13",
@@ -203,8 +204,9 @@
     "zone.js": "0.7.8"
   },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@emotion/core": "10.0.27",
+    "@emotion/css": "11.1.3",
+    "@emotion/eslint-plugin": "11.2.0",
+    "@emotion/react": "11.1.5",
     "@grafana/aws-sdk": "0.0.3",
     "@grafana/slate-react": "0.22.9-grafana",
     "@popperjs/core": "2.5.4",
@@ -242,7 +244,6 @@
     "d3-scale-chromatic": "1.5.0",
     "dangerously-set-html-content": "1.0.6",
     "debounce-promise": "3.1.2",
-    "emotion": "10.0.27",
     "eventemitter3": "4.0.0",
     "fast-json-patch": "2.2.1",
     "fast-text-encoding": "^1.0.0",

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -175,6 +175,8 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
       'moment',
       'slate',
       'emotion',
+      '@emotion/react',
+      '@emotion/css',
       'prismjs',
       'slate-plain-serializer',
       '@grafana/slate-react',

packages/grafana-ui/package.json

@@ -26,7 +26,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/core": "10.0.27",
+    "@emotion/react": "11.1.5",
+    "@emotion/css": "11.1.3",
     "@grafana/data": "7.5.0-pre.0",
     "@grafana/e2e-selectors": "7.5.0-pre.0",
     "@grafana/slate-react": "0.22.9-grafana",
@@ -52,7 +53,6 @@
     "react-router-dom": "^5.2.0",
     "classnames": "2.2.6",
     "d3": "5.15.0",
-    "emotion": "10.0.27",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "jquery": "3.5.1",

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import React, { FC, HTMLAttributes, ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useTheme } from '../../themes';

packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { ThemeContext } from '../../index';
 import { PluginState } from '@grafana/data';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ import { IconName } from '../../types';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
 import tinycolor from 'tinycolor2';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { HorizontalGroup } from '../Layout/Layout';
 
 export type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple';

packages/grafana-ui/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import { useTheme } from '../../themes';
 import { IconName } from '../../types/icon';

packages/grafana-ui/src/components/Button/ButtonGroup.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 

packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 
 export interface Props {

packages/grafana-ui/src/components/Button/ToolbarButton.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, ButtonHTMLAttributes } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { styleMixins, useStyles } from '../../themes';
 import { IconName } from '../../types/icon';

packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 

packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types/icon';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 // @ts-ignore
 import RCCascader from 'rc-cascader';

packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Themeable } from '../../types/theme';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 
 export interface CallToActionCardProps extends Themeable {

packages/grafana-ui/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React, { memo, cloneElement, FC, HTMLAttributes, ReactNode, useCallback } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme, styleMixins, stylesFactory } from '../../themes';
 import { Tooltip, PopoverContent } from '../Tooltip/Tooltip';

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -5,7 +5,7 @@ import RCCascader from 'rc-cascader';
 import { Select } from '../Select/Select';
 import { Input } from '../Input/Input';
 import { SelectableValue } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { onChangeCascader } from './optionMappings';
 import memoizeOne from 'memoize-one';
 

packages/grafana-ui/src/components/Chart/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Portal } from '../Portal/Portal';
 import { Dimensions, TimeZone } from '@grafana/data';
 import { FlotPosition } from '../Graph/types';

packages/grafana-ui/src/components/Chart/TooltipContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useLayoutEffect, useRef, HTMLAttributes, useMemo } from 'react';
 import { stylesFactory } from '../../themes/stylesFactory';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '../../themes/ThemeContext';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import { Dimensions2D, GrafanaTheme } from '@grafana/data';

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 import { Icon } from '..';
@@ -13,16 +13,12 @@ export interface Props {
 export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
   const [open, toggleOpen] = useState<boolean>(isOpen);
   const styles = useStyles(collapsableSectionStyles);
-  const headerClass = cx({
-    [styles.header]: true,
-    [styles.headerCollapsed]: !open,
-  });
-
+  const headerStyle = open ? styles.header : styles.headerCollapsed;
   const tooltip = `Click to ${open ? 'collapse' : 'expand'}`;
 
   return (
     <div>
-      <div onClick={() => toggleOpen(!open)} className={headerClass} title={tooltip}>
+      <div onClick={() => toggleOpen(!open)} className={headerStyle} title={tooltip}>
         {label}
         <Icon name={open ? 'angle-down' : 'angle-right'} size="xl" className={styles.icon} />
       </div>
@@ -32,22 +28,22 @@ export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
 };
 
 const collapsableSectionStyles = (theme: GrafanaTheme) => {
-  return {
-    header: css`
-      display: flex;
-      justify-content: space-between;
-      font-size: ${theme.typography.size.lg};
-      line-height: ${theme.spacing.base * 5}px;
-      cursor: pointer;
-    `,
-    headerCollapsed: css`
-      border-bottom: 1px solid ${theme.colors.border2};
-    `,
-    icon: css`
-      color: ${theme.colors.textWeak};
-    `,
-    content: css`
-      padding: ${theme.spacing.md} 0;
-    `,
-  };
+  const header = css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: theme.typography.size.lg,
+    padding: `${theme.spacing.xs} 0`,
+    cursor: 'pointer',
+  });
+  const headerCollapsed = css(header, {
+    borderBottom: `1px solid ${theme.colors.border2}`,
+  });
+  const icon = css({
+    color: theme.colors.textWeak,
+  });
+  const content = css({
+    padding: `${theme.spacing.md} 0`,
+  });
+
+  return { header, headerCollapsed, icon, content };
 };

packages/grafana-ui/src/components/Collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useContext, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme } from '@grafana/data';
 import { ThemeContext } from '../../themes/ThemeContext';

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -6,7 +6,7 @@ import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from '
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { withTheme, stylesFactory } from '../../themes';
 import { ColorPickerTrigger } from './ColorPickerTrigger';
 

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -4,7 +4,7 @@ import { PopoverContentProps } from '../Tooltip/Tooltip';
 import SpectrumPalette from './SpectrumPalette';
 import { Themeable } from '../../types/theme';
 import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, GrafanaThemeType, getColorForTheme } from '@grafana/data';
 import { stylesFactory, withTheme } from '../../themes';
 

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent } from 'react';
 import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
 import { PopoverContentProps } from '../Tooltip/Tooltip';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { withTheme, useStyles } from '../../themes';
 
 export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent, SyntheticEvent } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { stylesFactory, withTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { Themeable } from '../../types';

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Modal } from '../Modal/Modal';
 import { IconName } from '../../types/icon';
 import { Button } from '../Button';

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import isNil from 'lodash/isNil';
 import classNames from 'classnames';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import Scrollbars from 'react-custom-scrollbars';
 import { useStyles } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';

packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useContext } from 'react';
 import { VariableSuggestion, GrafanaTheme, DataLink } from '@grafana/data';
 import { Switch } from '../Switch/Switch';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ThemeContext, stylesFactory } from '../../themes/index';
 import { DataLinkInput } from './DataLinkInput';
 import { Field } from '../Forms/Field';

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -11,7 +11,7 @@ import { Editor } from '@grafana/slate-react';
 import { Value } from 'slate';
 import Plain from 'slate-plain-serializer';
 import { Popper as ReactPopper } from 'react-popper';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { SlatePrism } from '../../slate-plugins';
 import { SCHEMA } from '../../utils/slate';

packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx

@@ -1,6 +1,6 @@
 import { ThemeContext } from '../../index';
 import { GrafanaTheme, VariableSuggestion } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import _ from 'lodash';
 import React, { useRef, useContext, useMemo } from 'react';
 import useClickAway from 'react-use/lib/useClickAway';

packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FieldConfig, LinkModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { WithContextMenu } from '../ContextMenu/WithContextMenu';
 import { linkModelToContextMenuItems } from '../../utils/dataLinks';
 import { MenuGroup, MenuItemsGroup } from '../Menu/MenuGroup';

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx

@@ -1,6 +1,6 @@
 import { DataFrame, DataLink, GrafanaTheme, VariableSuggestion } from '@grafana/data';
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button } from '../../Button/Button';
 import cloneDeep from 'lodash/cloneDeep';
 import { Modal } from '../../Modal/Modal';

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { DataFrame, DataLink, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../../themes';
 import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout';

packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx

@@ -1,5 +1,5 @@
 import { Field, GrafanaTheme, LinkModel } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 import { useStyles } from '../../themes';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import uniqueId from 'lodash/uniqueId';
 import { DataSourceSettings } from '@grafana/data';
 import { Button } from '../Button';

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { BasicAuthSettings } from './BasicAuthSettings';
 import { HttpProxySettings } from './HttpProxySettings';

packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { KeyValue } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { Icon } from '../Icon/Icon';
 import { CertificationKey } from './CertificationKey';

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, FC, ReactNode, useState } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import RcDrawer from 'rc-drawer';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -3,7 +3,7 @@ import { PopoverContent } from '../Tooltip/Tooltip';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { ToolbarButtonVariant, ToolbarButton } from '../Button';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles } from '../../themes/ThemeContext';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';

packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles } from '../../themes';
 
 export interface Props {

packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { ErrorBoundaryApi } from './ErrorBoundary';
 import { stylesFactory } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const getStyles = stylesFactory(() => {
   return css`

packages/grafana-ui/src/components/FileUpload/FileUpload.tsx

@@ -1,6 +1,6 @@
 import React, { FC, FormEvent, useCallback, useState } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getFormStyles, Icon } from '../index';
 import { stylesFactory, useTheme } from '../../themes';
 import { ComponentSize } from '../../types/size';

packages/grafana-ui/src/components/FilterPill/FilterPill.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { stylesFactory, ThemeContext } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IconButton } from '../IconButton/IconButton';
 import { IconName } from '../../types';
 

packages/grafana-ui/src/components/FormField/FormField.tsx

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { InlineFormLabel } from '../FormLabel/FormLabel';
 import { PopoverContent } from '../Tooltip/Tooltip';

packages/grafana-ui/src/components/Forms/Checkbox.tsx

@@ -2,7 +2,7 @@ import React, { HTMLProps, useCallback } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import { getLabelStyles } from './Label';
 import { useTheme, stylesFactory } from '../../themes';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { focusCss } from '../../themes/mixins';
 
 export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'> {

packages/grafana-ui/src/components/Forms/Field.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import { Label } from './Label';
 import { stylesFactory, useTheme } from '../../themes';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { FieldValidationMessage } from './FieldValidationMessage';
 import { getChildId } from '../../utils/children';

packages/grafana-ui/src/components/Forms/FieldSet.tsx

@@ -1,5 +1,5 @@
 import React, { FC, HTMLProps } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 import { Legend } from './Legend';

packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { useTheme, stylesFactory } from '../../themes';

packages/grafana-ui/src/components/Forms/Form.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLProps, useEffect } from 'react';
 import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form';
 import { FormAPI } from '../../types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
   validateOn?: Mode;

packages/grafana-ui/src/components/Forms/InlineField.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '../../themes';
 import { InlineLabel } from './InlineLabel';

packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx

@@ -1,5 +1,5 @@
 import React, { FC, HTMLProps, ReactNode } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useStyles } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 

packages/grafana-ui/src/components/Forms/InlineLabel.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Tooltip, PopoverContent } from '../Tooltip/Tooltip';
 import { Icon } from '../Icon/Icon';
 import { useTheme } from '../../themes';

packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '../../themes';
 

packages/grafana-ui/src/components/Forms/Label.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Icon } from '../Icon/Icon';
 import tinycolor from 'tinycolor2';
 

packages/grafana-ui/src/components/Forms/Legend.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useTheme, stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 export interface LabelProps extends React.HTMLAttributes<HTMLLegendElement> {
   children: string | ReactNode;

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getPropertiesForButtonSize } from '../commonStyles';
 import { focusCss } from '../../../themes/mixins';
 

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import uniqueId from 'lodash/uniqueId';
 import { SelectableValue } from '@grafana/data';
 import { RadioButtonSize, RadioButton } from './RadioButton';

packages/grafana-ui/src/components/Forms/commonStyles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { focusCss } from '../../themes/mixins';
 import { ComponentSize } from '../../types/size';

packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx

@@ -14,7 +14,7 @@ import { useTheme } from '../../themes';
 import { HorizontalGroup } from '../Layout/Layout';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 import { SeriesIcon } from '../VizLegend/SeriesIcon';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MenuGroup, MenuGroupProps } from '../Menu/MenuGroup';
 import { MenuItem } from '../Menu/MenuItem';
 

packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { stylesFactory } from '../../../themes/stylesFactory';
 import { GrafanaTheme, GraphSeriesValue } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { SeriesIcon } from '../../VizLegend/SeriesIcon';
 import { useTheme } from '../../../themes';
 

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -1,7 +1,7 @@
 // Libraries
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GraphSeriesValue } from '@grafana/data';
 
 import { Graph, GraphProps } from './Graph';

packages/grafana-ui/src/components/Icon/Icon.story.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { Input, Field, Icon } from '@grafana/ui';
 import { getAvailableIcons, IconName } from '../../types';

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, toPascalCase } from '@grafana/data';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { useTheme } from '../../themes/ThemeContext';

packages/grafana-ui/src/components/IconButton/IconButton.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IconButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { useTheme } from '../../themes/ThemeContext';

packages/grafana-ui/src/components/IconButton/IconButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, getSvgSize } from '../Icon/Icon';
 import { IconName, IconSize, IconType } from '../../types/icon';
 import { stylesFactory } from '../../themes/stylesFactory';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '../../themes/ThemeContext';
 import { GrafanaTheme } from '@grafana/data';
 import { Tooltip } from '../Tooltip/Tooltip';

packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx

@@ -3,7 +3,7 @@ import { InfoBox, InfoBoxProps } from './InfoBox';
 import { FeatureState, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useStyles } from '../../themes';
 import { Badge, BadgeProps } from '../Badge/Badge';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'title' | 'urlTitle'> {
   title: string;

packages/grafana-ui/src/components/InfoBox/InfoBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';

packages/grafana-ui/src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLProps, ReactNode } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';
 import { stylesFactory, useTheme } from '../../themes';
 import { Spinner } from '../Spinner/Spinner';

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLProps } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 

packages/grafana-ui/src/components/List/AbstractList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 
 export interface ListProps<T> {

packages/grafana-ui/src/components/List/List.story.internal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { number, select } from '@storybook/addon-knobs';
 import { List } from './List';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import { InlineList } from './InlineList';
 

packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, SFC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Spinner } from '../Spinner/Spinner';
 import { useStyles } from '../../themes';

packages/grafana-ui/src/components/Logs/LogDetails.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import {
   calculateFieldStats,
   calculateLogsLabelStats,

packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';

packages/grafana-ui/src/components/Logs/LogLabelStats.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';

packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useContext } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { ThemeContext } from '../../themes/ThemeContext';
 import { GrafanaTheme } from '@grafana/data';

packages/grafana-ui/src/components/Logs/LogLabels.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, Labels } from '@grafana/data';
 
 import { stylesFactory } from '../../themes';

packages/grafana-ui/src/components/Logs/LogRow.tsx

@@ -13,7 +13,7 @@ import {
 } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 
 import {
   LogRowContextRows,

packages/grafana-ui/src/components/Logs/LogRowContext.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { GrafanaTheme, DataQueryError, LogRowModel, textUtil } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { Alert } from '../Alert/Alert';
 import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider';

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/data';
 
 // @ts-ignore

packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { LogRowModel, Field, LinkModel } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, LogLevel } from '@grafana/data';
 import { styleMixins, stylesFactory } from '../../themes';
 

packages/grafana-ui/src/components/Menu/Menu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 

packages/grafana-ui/src/components/Menu/MenuGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 import { MenuItemProps } from './MenuItem';

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, LinkTarget } from '@grafana/data';
 import { styleMixins, useStyles } from '../../themes';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/Modal/Modal.story.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { oneLineTrim } from 'common-tags';
 import { boolean, text } from '@storybook/addon-knobs';
 import { Icon, Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';

packages/grafana-ui/src/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { FC, PropsWithChildren, useCallback, useEffect } from 'react';
 import { Portal } from '../Portal/Portal';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import { useTheme } from '../../themes';
 import { IconName } from '../../types';
 import { getModalStyles } from './getModalStyles';

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '../../themes';
 

packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { EdgeDatum, NodeDatum } from './types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import tinycolor from 'tinycolor2';

packages/grafana-ui/src/components/NodeGraph/Node.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, memo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import cx from 'classnames';
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';

packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx

@@ -11,7 +11,7 @@ import { useZoom } from './useZoom';
 import { Bounds, Config, defaultConfig, useLayout } from './layout';
 import { EdgeArrowMarker } from './EdgeArrowMarker';
 import { stylesFactory, useTheme } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useCategorizeFrames } from './useCategorizeFrames';
 import { EdgeLabel } from './EdgeLabel';
 import { useContextMenu } from './useContextMenu';

packages/grafana-ui/src/components/NodeGraph/ViewControls.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button } from '../Button';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { HorizontalGroup } from '..';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({

packages/grafana-ui/src/components/NodeGraph/useContextMenu.tsx

@@ -5,7 +5,7 @@ import { ContextMenu } from '../ContextMenu/ContextMenu';
 import { useTheme } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { getEdgeFields, getNodeFields } from './utils';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MenuGroup } from '../Menu/MenuGroup';
 import { MenuItem } from '../Menu/MenuItem';
 

packages/grafana-ui/src/components/OptionsUI/color.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { stylesFactory, useTheme } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ColorPickerTrigger } from '../ColorPicker/ColorPickerTrigger';
 
 export interface Props {

packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx

@@ -15,7 +15,7 @@ import {
 import { Select } from '../Select/Select';
 import { ColorValueEditor } from './color';
 import { useStyles, useTheme } from '../../themes/ThemeContext';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Field } from '../Forms/Field';
 import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
 

packages/grafana-ui/src/components/OptionsUI/strings.tsx

@@ -3,7 +3,7 @@ import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme } from
 import { Input } from '../Input/Input';
 import { Icon } from '../Icon/Icon';
 import { stylesFactory, getTheme } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button } from '../Button';
 
 type Props = FieldConfigEditorProps<string[], StringFieldConfigSettings>;

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes/ThemeContext';
 import { IconName } from '../../types';

packages/grafana-ui/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 import { Button, ButtonVariant } from '../Button';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 

packages/grafana-ui/src/components/PieChart/PieChart.tsx

@@ -8,7 +8,7 @@ import { RadialGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { useComponentInstanceId } from '../../utils/useComponetInstanceId';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { VizLegend, VizLegendItem } from '..';
 import { VizLayout } from '../VizLayout/VizLayout';
 import { LegendDisplayMode, VizLegendOptions } from '../VizLegend/types';

packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx

@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormField } from '../FormField/FormField';
 import { Button } from '../Button/Button';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { PopoverContent } from '../Tooltip/Tooltip';
 
 export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {