IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Babel: Updates babel dependencies to latest version

* Emotion: Upgrade form 10 to 11

* Fixing tests

* Updated to use emotion/css instead in test
This commit is contained in:
Torkel Ödegaard 2021-04-01 14:15:23 +02:00 committed by GitHub
parent b714cdf395
commit 10badea19e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
403 changed files with 539 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc
View File

@ -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": [
{

7
package.json
View File

@ -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",

2
packages/grafana-toolkit/src/config/webpack.plugin.config.ts
View File

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

4
packages/grafana-ui/package.json
View File

@ -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",

2
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Badge/Badge.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Button/ButtonGroup.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx
View File

@ -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 {

2
packages/grafana-ui/src/components/Button/ToolbarButton.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
View File

@ -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 {

2
packages/grafana-ui/src/components/Card/Card.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Cascader/Cascader.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Chart/Tooltip.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
View File

@ -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';

46
packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
View File

@ -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 };
};

2
packages/grafana-ui/src/components/Collapse/Collapse.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
View File

@ -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 {

2
packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
View File

@ -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';

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

@ -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';

2
packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Drawer/Drawer.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
View File

@ -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 {

2
packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx
View File

@ -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`

2
packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/FormField/FormField.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/Checkbox.tsx
View File

@ -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'> {

2
packages/grafana-ui/src/components/Forms/Field.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/FieldSet.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/Form.tsx
View File

@ -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;

2
packages/grafana-ui/src/components/Forms/InlineField.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/InlineLabel.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/Label.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/Legend.tsx
View File

@ -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;

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

@ -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';

2
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Forms/commonStyles.ts
View File

@ -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';

2
packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
View File

@ -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';

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

@ -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';

2
packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Icon/Icon.story.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Icon/Icon.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/IconButton/IconButton.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
View File

@ -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;

2
packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Input/Input.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Layout/Layout.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/List/AbstractList.tsx
View File

@ -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> {

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

@ -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';

2
packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/LogDetails.tsx
View File

@ -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,

2
packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/LogLabels.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/LogRow.tsx
View File

@ -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,

2
packages/grafana-ui/src/components/Logs/LogRowContext.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
View File

@ -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

2
packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
View File

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

2
packages/grafana-ui/src/components/Menu/Menu.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Menu/MenuGroup.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Menu/MenuItem.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Modal/Modal.story.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Modal/Modal.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Modal/getModalStyles.ts
View File

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

2
packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/NodeGraph/Node.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/NodeGraph/ViewControls.tsx
View File

@ -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) => ({

2
packages/grafana-ui/src/components/NodeGraph/useContextMenu.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/OptionsUI/color.tsx
View File

@ -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 {

2
packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/OptionsUI/strings.tsx
View File

@ -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>;

2
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/Pagination/Pagination.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/PieChart/PieChart.tsx
View File

@ -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';

2
packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
View File

@ -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'> {

Some files were not shown because too many files have changed in this diff Show More