Skip to content

N
nexpie-grafana-theme
Commit 671b3193 by Dominik Prokop Committed by GitHub
Options

Fix warnings for conflicting style rules (#29249) 

* Bump popper

* Bump react-transition group

* Fix react conflicting style ruls warning

* Fix ts
parent c94e8e61
Showing with 72 additions and 28 deletions
package.json
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
"@types/react-redux": "7.1.7", "@types/react-redux": "7.1.7",
"@types/react-select": "3.0.8", "@types/react-select": "3.0.8",
"@types/react-test-renderer": "16.9.2", "@types/react-test-renderer": "16.9.2",
"@types/react-transition-group": "4.2.4", "@types/react-transition-group": "4.4.0",
"@types/react-window": "1.8.1", "@types/react-window": "1.8.1",
"@types/redux-logger": "3.0.7", "@types/redux-logger": "3.0.7",
"@types/redux-mock-store": "1.0.2", "@types/redux-mock-store": "1.0.2",
...@@ -207,6 +207,7 @@ ...@@ -207,6 +207,7 @@
}, },
"dependencies": { "dependencies": {
"@grafana/slate-react": "0.22.9-grafana", "@grafana/slate-react": "0.22.9-grafana",
"@popperjs/core": "2.5.4",
"@reduxjs/toolkit": "1.3.4", "@reduxjs/toolkit": "1.3.4",
"@sentry/browser": "5.25.0", "@sentry/browser": "5.25.0",
"@sentry/types": "5.24.2", "@sentry/types": "5.24.2",
...@@ -269,12 +270,12 @@ ...@@ -269,12 +270,12 @@
"react-grid-layout": "0.17.1", "react-grid-layout": "0.17.1",
"react-highlight-words": "0.16.0", "react-highlight-words": "0.16.0",
"react-loadable": "5.5.0", "react-loadable": "5.5.0",
"react-popper": "1.3.3", "react-popper": "2.2.4",
"react-redux": "7.2.0", "react-redux": "7.2.0",
"react-reverse-portal": "^2.0.1", "react-reverse-portal": "^2.0.1",
"react-sizeme": "2.6.12", "react-sizeme": "2.6.12",
"react-split-pane": "0.1.89", "react-split-pane": "0.1.89",
"react-transition-group": "4.3.0", "react-transition-group": "4.4.1",
"react-use": "13.27.0", "react-use": "13.27.0",
"react-virtualized-auto-sizer": "1.0.2", "react-virtualized-auto-sizer": "1.0.2",
"react-window": "1.8.5", "react-window": "1.8.5",
......
packages/grafana-ui/package.json
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
"@grafana/slate-react": "0.22.9-grafana", "@grafana/slate-react": "0.22.9-grafana",
"@grafana/tsconfig": "^1.0.0-rc1", "@grafana/tsconfig": "^1.0.0-rc1",
"@iconscout/react-unicons": "1.1.4", "@iconscout/react-unicons": "1.1.4",
"@popperjs/core": "2.5.4",
"@torkelo/react-select": "3.0.8", "@torkelo/react-select": "3.0.8",
"@types/hoist-non-react-statics": "3.3.1", "@types/hoist-non-react-statics": "3.3.1",
"@types/react-beautiful-dnd": "12.1.2", "@types/react-beautiful-dnd": "12.1.2",
...@@ -64,10 +65,10 @@ ...@@ -64,10 +65,10 @@
"react-highlight-words": "0.16.0", "react-highlight-words": "0.16.0",
"react-hook-form": "5.1.3", "react-hook-form": "5.1.3",
"react-monaco-editor": "0.36.0", "react-monaco-editor": "0.36.0",
"react-popper": "1.3.3", "react-popper": "2.2.4",
"react-storybook-addon-props-combinations": "1.1.0", "react-storybook-addon-props-combinations": "1.1.0",
"react-table": "7.0.0", "react-table": "7.0.0",
"react-transition-group": "4.3.0", "react-transition-group": "4.4.1",
"slate": "0.47.8", "slate": "0.47.8",
"tinycolor2": "1.4.1", "tinycolor2": "1.4.1",
"uplot": "1.3.0" "uplot": "1.3.0"
...@@ -95,7 +96,7 @@ ...@@ -95,7 +96,7 @@
"@types/react": "16.9.9", "@types/react": "16.9.9",
"@types/react-custom-scrollbars": "4.0.5", "@types/react-custom-scrollbars": "4.0.5",
"@types/react-test-renderer": "16.9.2", "@types/react-test-renderer": "16.9.2",
"@types/react-transition-group": "4.2.4", "@types/react-transition-group": "4.4.0",
"@types/rollup-plugin-visualizer": "2.6.0", "@types/rollup-plugin-visualizer": "2.6.0",
"@types/tinycolor2": "1.4.1", "@types/tinycolor2": "1.4.1",
"common-tags": "^1.8.0", "common-tags": "^1.8.0",
......
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
...@@ -149,11 +149,25 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo( ...@@ -149,11 +149,25 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
<ReactPopper <ReactPopper
referenceElement={selectionRef} referenceElement={selectionRef}
placement="top-end" placement="top-end"
modifiers={{ modifiers={[
preventOverflow: { enabled: true, boundariesElement: 'window' }, {
arrow: { enabled: false }, name: 'preventOverflow',
offset: { offset: 250 }, // width of the suggestions menu enabled: true,
}} options: {
rootBoundary: 'viewport',
},
},
{
name: 'arrow',
enabled: false,
},
{
name: 'offset',
options: {
offset: [250, 0],
},
},
]}
> >
{({ ref, style, placement }) => { {({ ref, style, placement }) => {
return ( return (
......
packages/grafana-ui/src/components/Tooltip/Popover.tsx
...@@ -6,7 +6,9 @@ import Transition from 'react-transition-group/Transition'; ...@@ -6,7 +6,9 @@ import Transition from 'react-transition-group/Transition';
import { PopoverContent } from './Tooltip'; import { PopoverContent } from './Tooltip';
const defaultTransitionStyles = { const defaultTransitionStyles = {
transition: 'opacity 200ms linear', transitionProperty: 'opacity',
transitionDuration: '200ms',
transitionTimingFunction: 'linear',
opacity: 0, opacity: 0,
}; };
...@@ -26,14 +28,9 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> { ...@@ -26,14 +28,9 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
referenceElement: PopperJS.ReferenceObject; referenceElement: PopperJS.ReferenceObject;
wrapperClassName?: string; wrapperClassName?: string;
renderArrow?: RenderPopperArrowFn; renderArrow?: RenderPopperArrowFn;
eventsEnabled?: boolean;
} }
class Popover extends PureComponent<Props> { class Popover extends PureComponent<Props> {
static defaultProps: Partial<Props> = {
eventsEnabled: true,
};
render() { render() {
const { const {
content, content,
...@@ -45,7 +42,6 @@ class Popover extends PureComponent<Props> { ...@@ -45,7 +42,6 @@ class Popover extends PureComponent<Props> {
wrapperClassName, wrapperClassName,
renderArrow, renderArrow,
referenceElement, referenceElement,
eventsEnabled,
} = this.props; } = this.props;
return ( return (
...@@ -57,11 +53,15 @@ class Popover extends PureComponent<Props> { ...@@ -57,11 +53,15 @@ class Popover extends PureComponent<Props> {
<ReactPopper <ReactPopper
placement={placement} placement={placement}
referenceElement={referenceElement} referenceElement={referenceElement}
eventsEnabled={eventsEnabled} modifiers={[
// TODO: move modifiers config to popper controller { name: 'preventOverflow', enabled: true, options: { rootBoundary: 'viewport' } },
modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }} {
name: 'eventListeners',
options: { scroll: true, resize: true },
},
]}
> >
{({ ref, style, placement, arrowProps, scheduleUpdate }) => { {({ ref, style, placement, arrowProps, update }) => {
return ( return (
<div <div
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter}
...@@ -80,7 +80,7 @@ class Popover extends PureComponent<Props> { ...@@ -80,7 +80,7 @@ class Popover extends PureComponent<Props> {
{React.isValidElement(content) && React.cloneElement(content)} {React.isValidElement(content) && React.cloneElement(content)}
{typeof content === 'function' && {typeof content === 'function' &&
content({ content({
updatePopperPosition: scheduleUpdate, updatePopperPosition: update,
})} })}
{renderArrow && {renderArrow &&
renderArrow({ renderArrow({
......
public/app/core/components/Animations/FadeIn.tsx
...@@ -6,7 +6,7 @@ interface Props { ...@@ -6,7 +6,7 @@ interface Props {
children: JSX.Element; children: JSX.Element;
in: boolean; in: boolean;
unmountOnExit?: boolean; unmountOnExit?: boolean;
onExited?: ExitHandler; onExited?: ExitHandler<HTMLDivElement>;
} }
export const FadeIn: FC<Props> = props => { export const FadeIn: FC<Props> = props => {
......
yarn.lock
...@@ -5005,6 +5005,11 @@ ...@@ -5005,6 +5005,11 @@
once "^1.4.0" once "^1.4.0"
universal-user-agent "^4.0.0" universal-user-agent "^4.0.0"
"@popperjs/core@2.5.4":
version "2.5.4"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==
"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf" resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
...@@ -6919,10 +6924,10 @@ ...@@ -6919,10 +6924,10 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-transition-group@4.2.4": "@types/react-transition-group@4.4.0":
version "4.2.4" version "4.4.0"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA== integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
...@@ -22566,6 +22571,11 @@ react-fast-compare@^2.0.4: ...@@ -22566,6 +22571,11 @@ react-fast-compare@^2.0.4:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-fast-compare@^3.0.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-focus-lock@^2.1.0: react-focus-lock@^2.1.0:
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a" resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
...@@ -22726,6 +22736,14 @@ react-popper@1.3.3: ...@@ -22726,6 +22736,14 @@ react-popper@1.3.3:
typed-styles "^0.0.7" typed-styles "^0.0.7"
warning "^4.0.2" warning "^4.0.2"
react-popper@2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.4.tgz#d2ad3d2474ac9f1abf93df3099d408e5aa6a2e22"
integrity sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==
dependencies:
react-fast-compare "^3.0.1"
warning "^4.0.2"
react-popper@^1.3.4: react-popper@^1.3.4:
version "1.3.4" version "1.3.4"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.4.tgz#f0cd3b0d30378e1f663b0d79bcc8614221652ced" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.4.tgz#f0cd3b0d30378e1f663b0d79bcc8614221652ced"
...@@ -22902,6 +22920,16 @@ react-transition-group@4.3.0, react-transition-group@^4.3.0: ...@@ -22902,6 +22920,16 @@ react-transition-group@4.3.0, react-transition-group@^4.3.0:
loose-envify "^1.4.0" loose-envify "^1.4.0"
prop-types "^15.6.2" prop-types "^15.6.2"
react-transition-group@4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-transition-group@^2.2.1: react-transition-group@^2.2.1:
version "2.9.0" version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment