From 90df8c4bb0ca90edb2f46d53acdb788f2b3a91ef Mon Sep 17 00:00:00 2001 From: Tobias Skarhed Date: Mon, 19 Aug 2019 11:40:47 +0200 Subject: [PATCH] Chore: Rename Popper to Popover (#18543) * Rename PopperContent to TooltipContent * Move exports from PopperController * Change ToolipContent to PopoverContent and PopoverController * Rename Popper to Popover * Add forgotten files * Update snapshot * Remove generic --- .../src/components/ColorPicker/ColorPicker.tsx | 10 +++++----- .../ColorPicker/ColorPickerPopover.tsx | 4 ++-- .../ColorPicker/SeriesColorPickerPopover.tsx | 4 ++-- .../src/components/FormField/FormField.tsx | 4 ++-- .../src/components/FormLabel/FormLabel.tsx | 5 ++--- .../src/components/InfoTooltip/InfoTooltip.tsx | 5 ++--- .../src/components/Select/ButtonSelect.tsx | 4 ++-- .../grafana-ui/src/components/Select/Select.tsx | 6 +++--- .../ThresholdsEditor.test.tsx.snap | 4 ++-- .../Tooltip/{Popper.tsx => Popover.tsx} | 8 ++++---- ...pperController.tsx => PopoverController.tsx} | 16 ++++++---------- .../src/components/Tooltip/Tooltip.tsx | 17 ++++++++++++----- packages/grafana-ui/src/components/index.ts | 6 +++--- .../dashgrid/PanelHeader/PanelHeaderCorner.tsx | 4 ++-- public/app/features/plugins/PluginStateInfo.tsx | 4 ++-- .../datasource/graphite/FunctionEditor.tsx | 8 ++++---- 16 files changed, 55 insertions(+), 54 deletions(-) rename packages/grafana-ui/src/components/Tooltip/{Popper.tsx => Popover.tsx} (95%) rename packages/grafana-ui/src/components/Tooltip/{PopperController.tsx => PopoverController.tsx} (83%) diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index 2cf89d0be5e..b1464189246 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -1,7 +1,7 @@ import React, { Component, createRef } from 'react'; import omit from 'lodash/omit'; -import { PopperController } from '../Tooltip/PopperController'; -import { Popper } from '../Tooltip/Popper'; +import { PopoverController } from '../Tooltip/PopoverController'; +import { Popover } from '../Tooltip/Popover'; import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover'; import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; @@ -46,12 +46,12 @@ export const colorPickerFactory = ( }); return ( - + {(showPopper, hidePopper, popperProps) => { return ( <> {this.pickerTriggerRef.current && ( - ( ); }} - + ); } }; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx index 934bc56a550..e75985aca20 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { NamedColorsPalette } from './NamedColorsPalette'; import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette'; -import { PopperContentProps } from '../Tooltip/PopperController'; +import { PopoverContentProps } from '../Tooltip/Tooltip'; import SpectrumPalette from './SpectrumPalette'; import { GrafanaThemeType, Themeable } from '../../types/theme'; import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation'; @@ -19,7 +19,7 @@ export interface ColorPickerProps extends Themeable { enableNamedColors?: boolean; } -export interface Props extends ColorPickerProps, PopperContentProps { +export interface Props extends ColorPickerProps, PopoverContentProps { customPickers?: T; } diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index 219d2dd357a..c40d7434611 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -1,11 +1,11 @@ import React, { FunctionComponent } from 'react'; import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover'; -import { PopperContentProps } from '../Tooltip/PopperController'; +import { PopoverContentProps } from '../Tooltip/Tooltip'; import { Switch } from '../Switch/Switch'; import { withTheme } from '../../themes/ThemeContext'; -export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps { +export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps { yaxis?: number; onToggleAxis?: () => void; } diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index 13005dfaca3..c18148b4942 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -1,10 +1,10 @@ import React, { InputHTMLAttributes, FunctionComponent } from 'react'; import { FormLabel } from '../FormLabel/FormLabel'; -import { PopperContent } from '../Tooltip/PopperController'; +import { PopoverContent } from '../Tooltip/Tooltip'; import { cx } from 'emotion'; export interface Props extends InputHTMLAttributes { label: string; - tooltip?: PopperContent; + tooltip?: PopoverContent; labelWidth?: number; inputWidth?: number; inputEl?: React.ReactNode; diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index 5e54cb2de43..b4fc429727f 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; -import { Tooltip } from '../Tooltip/Tooltip'; -import { PopperContent } from '../Tooltip/PopperController'; +import { Tooltip, PopoverContent } from '../Tooltip/Tooltip'; interface Props { children: ReactNode; @@ -9,7 +8,7 @@ interface Props { htmlFor?: string; isFocused?: boolean; isInvalid?: boolean; - tooltip?: PopperContent; + tooltip?: PopoverContent; width?: number; } diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx index 98eeaef9646..189aa36d86c 100644 --- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx +++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { Tooltip, TooltipProps } from '../Tooltip/Tooltip'; -import { PopperContent } from '../Tooltip/PopperController'; +import { Tooltip, TooltipProps, PopoverContent } from '../Tooltip/Tooltip'; interface InfoTooltipProps extends Omit { - children: PopperContent; + children: PopoverContent; } export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => { diff --git a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Select/ButtonSelect.tsx index 5ed8419608d..b15fd9e2152 100644 --- a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx +++ b/packages/grafana-ui/src/components/Select/ButtonSelect.tsx @@ -1,6 +1,6 @@ import React, { PureComponent, ReactElement } from 'react'; import Select from './Select'; -import { PopperContent } from '../Tooltip/PopperController'; +import { PopoverContent } from '../Tooltip/Tooltip'; import { SelectableValue } from '@grafana/data'; interface ButtonComponentProps { @@ -38,7 +38,7 @@ export interface Props { components?: any; maxMenuHeight?: number; onChange: (item: SelectableValue) => void; - tooltipContent?: PopperContent; + tooltipContent?: PopoverContent; isMenuOpen?: boolean; onOpenMenu?: () => void; onCloseMenu?: () => void; diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/packages/grafana-ui/src/components/Select/Select.tsx index 78d63675c1a..929d369c951 100644 --- a/packages/grafana-ui/src/components/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Select/Select.tsx @@ -17,7 +17,7 @@ import IndicatorsContainer from './IndicatorsContainer'; import NoOptionsMessage from './NoOptionsMessage'; import resetSelectStyles from './resetSelectStyles'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; -import { PopperContent } from '../Tooltip/PopperController'; +import { PopoverContent } from '../Tooltip/Tooltip'; import { Tooltip } from '../Tooltip/Tooltip'; import { SelectableValue } from '@grafana/data'; @@ -43,7 +43,7 @@ export interface CommonProps { backspaceRemovesValue?: boolean; isOpen?: boolean; components?: any; - tooltipContent?: PopperContent; + tooltipContent?: PopoverContent; onOpenMenu?: () => void; onCloseMenu?: () => void; tabSelectsValue?: boolean; @@ -269,7 +269,7 @@ export interface TooltipWrapperProps { onOpenMenu?: () => void; onCloseMenu?: () => void; isOpen?: boolean; - tooltipContent?: PopperContent; + tooltipContent?: PopoverContent; } export interface TooltipWrapperState { diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index 0743bea9ef4..eb61c639d81 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -225,7 +225,7 @@ exports[`Render should render with base threshold 1`] = ` } } > - - + diff --git a/packages/grafana-ui/src/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popover.tsx similarity index 95% rename from packages/grafana-ui/src/components/Tooltip/Popper.tsx rename to packages/grafana-ui/src/components/Tooltip/Popover.tsx index 84b92d8233a..49daf9c589e 100644 --- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Popover.tsx @@ -3,7 +3,7 @@ import * as PopperJS from 'popper.js'; import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper'; import { Portal } from '../Portal/Portal'; import Transition from 'react-transition-group/Transition'; -import { PopperContent } from './PopperController'; +import { PopoverContent } from './Tooltip'; const defaultTransitionStyles = { transition: 'opacity 200ms linear', @@ -22,14 +22,14 @@ export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placem interface Props extends React.HTMLAttributes { show: boolean; placement?: PopperJS.Placement; - content: PopperContent; + content: PopoverContent; referenceElement: PopperJS.ReferenceObject; wrapperClassName?: string; renderArrow?: RenderPopperArrowFn; eventsEnabled?: boolean; } -class Popper extends PureComponent { +class Popover extends PureComponent { static defaultProps: Partial = { eventsEnabled: true, }; @@ -101,4 +101,4 @@ class Popper extends PureComponent { } } -export { Popper }; +export { Popover }; diff --git a/packages/grafana-ui/src/components/Tooltip/PopperController.tsx b/packages/grafana-ui/src/components/Tooltip/PopoverController.tsx similarity index 83% rename from packages/grafana-ui/src/components/Tooltip/PopperController.tsx rename to packages/grafana-ui/src/components/Tooltip/PopoverController.tsx index 79556bd816f..a76f89c12ea 100644 --- a/packages/grafana-ui/src/components/Tooltip/PopperController.tsx +++ b/packages/grafana-ui/src/components/Tooltip/PopoverController.tsx @@ -1,18 +1,14 @@ import React from 'react'; import * as PopperJS from 'popper.js'; +import { PopoverContent } from './Tooltip'; // This API allows popovers to update Popper's position when e.g. popover content changes // updatePopperPosition is delivered to content by react-popper -export interface PopperContentProps { - updatePopperPosition?: () => void; -} - -export type PopperContent = string | React.ReactElement | ((props: T) => JSX.Element); export interface UsingPopperProps { show?: boolean; placement?: PopperJS.Placement; - content: PopperContent; + content: PopoverContent; children: JSX.Element; } @@ -22,13 +18,13 @@ type PopperControllerRenderProp = ( popperProps: { show: boolean; placement: PopperJS.Placement; - content: PopperContent; + content: PopoverContent; } ) => JSX.Element; interface Props { placement?: PopperJS.Placement; - content: PopperContent; + content: PopoverContent; className?: string; children: PopperControllerRenderProp; hideAfter?: number; @@ -39,7 +35,7 @@ interface State { show: boolean; } -class PopperController extends React.Component { +class PopoverController extends React.Component { private hideTimeout: any; constructor(props: Props) { @@ -101,4 +97,4 @@ class PopperController extends React.Component { } } -export { PopperController }; +export { PopoverController }; diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx index e0310300288..4e09a55dbeb 100644 --- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx @@ -1,17 +1,24 @@ import React, { createRef } from 'react'; import * as PopperJS from 'popper.js'; -import { Popper } from './Popper'; -import { PopperController, UsingPopperProps } from './PopperController'; +import { Popover } from './Popover'; +import { PopoverController, UsingPopperProps } from './PopoverController'; export interface TooltipProps extends UsingPopperProps { theme?: 'info' | 'error'; } + +export interface PopoverContentProps { + updatePopperPosition?: () => void; +} + +export type PopoverContent = string | React.ReactElement | ((props: PopoverContentProps) => JSX.Element); + export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => { const tooltipTriggerRef = createRef(); const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : ''); return ( - + {(showPopper, hidePopper, popperProps) => { { /* Override internal 'show' state if passed in as prop */ @@ -23,7 +30,7 @@ export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) = return ( <> {tooltipTriggerRef.current && ( - ); }} - + ); }; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 7d1261ef7fc..52a1994640f 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -1,7 +1,7 @@ export { DeleteButton } from './DeleteButton/DeleteButton'; -export { Tooltip } from './Tooltip/Tooltip'; -export { PopperController, PopperContent } from './Tooltip/PopperController'; -export { Popper } from './Tooltip/Popper'; +export { Tooltip, PopoverContent } from './Tooltip/Tooltip'; +export { PopoverController } from './Tooltip/PopoverController'; +export { Popover } from './Tooltip/Popover'; export { Portal } from './Portal/Portal'; export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar'; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx index 2df808c19a5..0a34242450e 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { renderMarkdown } from '@grafana/data'; -import { Tooltip, ScopedVars, PopperContent } from '@grafana/ui'; +import { Tooltip, ScopedVars, PopoverContent } from '@grafana/ui'; import { DataLink } from '@grafana/data'; import { PanelModel } from 'app/features/dashboard/state/PanelModel'; @@ -71,7 +71,7 @@ export class PanelHeaderCorner extends Component { ); }; - renderCornerType(infoMode: InfoMode, content: PopperContent) { + renderCornerType(infoMode: InfoMode, content: PopoverContent) { const theme = infoMode === InfoMode.Error ? 'error' : 'info'; return ( diff --git a/public/app/features/plugins/PluginStateInfo.tsx b/public/app/features/plugins/PluginStateInfo.tsx index fe8ce13095e..5da0acc9e88 100644 --- a/public/app/features/plugins/PluginStateInfo.tsx +++ b/public/app/features/plugins/PluginStateInfo.tsx @@ -1,13 +1,13 @@ import React, { FC, useContext } from 'react'; import { css } from 'emotion'; import { PluginState, Tooltip, ThemeContext } from '@grafana/ui'; -import { PopperContent } from '@grafana/ui/src/components/Tooltip/PopperController'; +import { PopoverContent } from '@grafana/ui/src/components/Tooltip/Tooltip'; interface Props { state?: PluginState; } -function getPluginStateInfoText(state?: PluginState): PopperContent | null { +function getPluginStateInfoText(state?: PluginState): PopoverContent | null { switch (state) { case PluginState.alpha: return ( diff --git a/public/app/plugins/datasource/graphite/FunctionEditor.tsx b/public/app/plugins/datasource/graphite/FunctionEditor.tsx index 412dc31155c..3e38fdc1200 100644 --- a/public/app/plugins/datasource/graphite/FunctionEditor.tsx +++ b/public/app/plugins/datasource/graphite/FunctionEditor.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { PopperController, Popper } from '@grafana/ui'; +import { PopoverController, Popover } from '@grafana/ui'; // @ts-ignore import rst2html from 'rst2html'; import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls'; @@ -68,12 +68,12 @@ class FunctionEditor extends React.PureComponent + {(showPopper, hidePopper, popperProps) => { return ( <> {this.triggerRef && ( - ); }} - + ); } }