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 @@
"@types/react-redux": "7.1.7",
"@types/react-select": "3.0.8",
"@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/redux-logger": "3.0.7",
"@types/redux-mock-store": "1.0.2",
......@@ -207,6 +207,7 @@
},
"dependencies": {
"@grafana/slate-react": "0.22.9-grafana",
"@popperjs/core": "2.5.4",
"@reduxjs/toolkit": "1.3.4",
"@sentry/browser": "5.25.0",
"@sentry/types": "5.24.2",
......@@ -269,12 +270,12 @@
"react-grid-layout": "0.17.1",
"react-highlight-words": "0.16.0",
"react-loadable": "5.5.0",
"react-popper": "1.3.3",
"react-popper": "2.2.4",
"react-redux": "7.2.0",
"react-reverse-portal": "^2.0.1",
"react-sizeme": "2.6.12",
"react-split-pane": "0.1.89",
"react-transition-group": "4.3.0",
"react-transition-group": "4.4.1",
"react-use": "13.27.0",
"react-virtualized-auto-sizer": "1.0.2",
"react-window": "1.8.5",
......
packages/grafana-ui/package.json
......@@ -32,6 +32,7 @@
"@grafana/slate-react": "0.22.9-grafana",
"@grafana/tsconfig": "^1.0.0-rc1",
"@iconscout/react-unicons": "1.1.4",
"@popperjs/core": "2.5.4",
"@torkelo/react-select": "3.0.8",
"@types/hoist-non-react-statics": "3.3.1",
"@types/react-beautiful-dnd": "12.1.2",
......@@ -64,10 +65,10 @@
"react-highlight-words": "0.16.0",
"react-hook-form": "5.1.3",
"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-table": "7.0.0",
"react-transition-group": "4.3.0",
"react-transition-group": "4.4.1",
"slate": "0.47.8",
"tinycolor2": "1.4.1",
"uplot": "1.3.0"
......@@ -95,7 +96,7 @@
"@types/react": "16.9.9",
"@types/react-custom-scrollbars": "4.0.5",
"@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/tinycolor2": "1.4.1",
"common-tags": "^1.8.0",
......
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
......@@ -149,11 +149,25 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
<ReactPopper
referenceElement={selectionRef}
placement="top-end"
modifiers={{
preventOverflow: { enabled: true, boundariesElement: 'window' },
arrow: { enabled: false },
offset: { offset: 250 }, // width of the suggestions menu
}}
modifiers={[
{
name: 'preventOverflow',
enabled: true,
options: {
rootBoundary: 'viewport',
},
},
{
name: 'arrow',
enabled: false,
},
{
name: 'offset',
options: {
offset: [250, 0],
},
},
]}
>
{({ ref, style, placement }) => {
return (
......
packages/grafana-ui/src/components/Tooltip/Popover.tsx
......@@ -6,7 +6,9 @@ import Transition from 'react-transition-group/Transition';
import { PopoverContent } from './Tooltip';
const defaultTransitionStyles = {
transition: 'opacity 200ms linear',
transitionProperty: 'opacity',
transitionDuration: '200ms',
transitionTimingFunction: 'linear',
opacity: 0,
};
......@@ -26,14 +28,9 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
referenceElement: PopperJS.ReferenceObject;
wrapperClassName?: string;
renderArrow?: RenderPopperArrowFn;
eventsEnabled?: boolean;
}
class Popover extends PureComponent<Props> {
static defaultProps: Partial<Props> = {
eventsEnabled: true,
};
render() {
const {
content,
......@@ -45,7 +42,6 @@ class Popover extends PureComponent<Props> {
wrapperClassName,
renderArrow,
referenceElement,
eventsEnabled,
} = this.props;
return (
......@@ -57,11 +53,15 @@ class Popover extends PureComponent<Props> {
<ReactPopper
placement={placement}
referenceElement={referenceElement}
eventsEnabled={eventsEnabled}
// TODO: move modifiers config to popper controller
modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }}
modifiers={[
{ name: 'preventOverflow', enabled: true, options: { rootBoundary: 'viewport' } },
{
name: 'eventListeners',
options: { scroll: true, resize: true },
},
]}
>
{({ ref, style, placement, arrowProps, scheduleUpdate }) => {
{({ ref, style, placement, arrowProps, update }) => {
return (
<div
onMouseEnter={onMouseEnter}
......@@ -80,7 +80,7 @@ class Popover extends PureComponent<Props> {
{React.isValidElement(content) && React.cloneElement(content)}
{typeof content === 'function' &&
content({
updatePopperPosition: scheduleUpdate,
updatePopperPosition: update,
})}
{renderArrow &&
renderArrow({
......
public/app/core/components/Animations/FadeIn.tsx
......@@ -6,7 +6,7 @@ interface Props {
children: JSX.Element;
in: boolean;
unmountOnExit?: boolean;
onExited?: ExitHandler;
onExited?: ExitHandler<HTMLDivElement>;
}
export const FadeIn: FC<Props> = props => {
......
yarn.lock
......@@ -5005,6 +5005,11 @@
once "^1.4.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":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
......@@ -6919,10 +6924,10 @@
dependencies:
"@types/react" "*"
"@types/react-transition-group@4.2.4":
version "4.2.4"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==
"@types/react-transition-group@4.4.0":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
dependencies:
"@types/react" "*"
......@@ -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"
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:
version "2.2.1"
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:
typed-styles "^0.0.7"
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:
version "1.3.4"
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:
loose-envify "^1.4.0"
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:
version "2.9.0"
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