From 71e7d654dea1b11f271900feda1f04072fa925c2 Mon Sep 17 00:00:00 2001 From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com> Date: Mon, 12 Feb 2024 13:07:40 +0000 Subject: [PATCH 001/103] Card: Revert adding overline component (#82308) --- .../grafana-ui/src/components/Card/Card.mdx | 18 ------------- .../src/components/Card/Card.story.tsx | 14 ----------- .../grafana-ui/src/components/Card/Card.tsx | 25 ------------------- .../src/components/Card/CardContainer.tsx | 3 +-- 4 files changed, 1 insertion(+), 59 deletions(-) diff --git a/packages/grafana-ui/src/components/Card/Card.mdx b/packages/grafana-ui/src/components/Card/Card.mdx index b6b1445de7f..2e604d527f7 100644 --- a/packages/grafana-ui/src/components/Card/Card.mdx +++ b/packages/grafana-ui/src/components/Card/Card.mdx @@ -445,24 +445,6 @@ Card can have a disabled state, effectively making it and its actions non-clicka -### With overline - -```jsx - - Filter option - Filter by name - Filter data by query. - -``` - - - - Filter option - Filter by name - Filter data by query. - - - ### Props diff --git a/packages/grafana-ui/src/components/Card/Card.story.tsx b/packages/grafana-ui/src/components/Card/Card.story.tsx index 4d4f8367b17..e54bed30b77 100644 --- a/packages/grafana-ui/src/components/Card/Card.story.tsx +++ b/packages/grafana-ui/src/components/Card/Card.story.tsx @@ -179,18 +179,4 @@ export const NotSelected: StoryFn = () => { ); }; -export const WithOverline: StoryFn = (args) => { - return ( - - Overline text above the title - Card title - - Description, body text. Greetings! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - - - ); -}; - export default meta; diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index be178a25c29..08f363dda25 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -5,7 +5,6 @@ import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '../../themes'; import { getFocusStyles } from '../../themes/mixins'; -import { Text } from '../Text/Text'; import { CardContainer, CardContainerProps, getCardContainerStyles } from './CardContainer'; @@ -29,7 +28,6 @@ export interface Props extends Omit { - Overline: typeof Overline; Heading: typeof Heading; Tags: typeof Tags; Figure: typeof Figure; @@ -166,28 +164,6 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({ }), }); -/** Card text to be displayed above title */ -const Overline = ({ children, className }: ChildProps) => { - const styles = useStyles2(getOverlineStyles); - return ( -
- {children && ( - - {children} - - )} -
- ); -}; -Overline.displayName = 'Overline'; - -const getOverlineStyles = (theme: GrafanaTheme2) => ({ - overline: css({ - gridArea: 'Overline', - marginBottom: theme.spacing(0.5), - }), -}); - const Tags = ({ children, className }: ChildProps) => { const styles = useStyles2(getTagStyles); return
{children}
; @@ -384,7 +360,6 @@ export const getCardStyles = (theme: GrafanaTheme2) => { }; }; -Card.Overline = Overline; Card.Heading = Heading; Card.Tags = Tags; Card.Figure = Figure; diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx index 430634f9ba7..8879a87ed4f 100644 --- a/packages/grafana-ui/src/components/Card/CardContainer.tsx +++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx @@ -80,11 +80,10 @@ export const getCardContainerStyles = ( display: 'grid', position: 'relative', gridTemplateColumns: 'auto 1fr auto', - gridTemplateRows: 'auto 1fr auto auto auto', + gridTemplateRows: '1fr auto auto auto', gridAutoColumns: '1fr', gridAutoFlow: 'row', gridTemplateAreas: ` - "Figure Overline Tags" "Figure Heading Tags" "Figure Meta Tags" "Figure Description Tags" From 685e84b1f806d45972117d7e237f4b1738d7851a Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 12 Feb 2024 13:22:24 +0000 Subject: [PATCH 002/103] Chore: Remove `react-popper` from `DataLinkInput` and `SuggestionsInput` (#82160) * replace popper with floating-ui in DataLinkInput * replace popper with floating-ui in SuggestionsInput --- .../components/DataLinks/DataLinkInput.tsx | 90 +++++++-------- .../suggestionsInput/SuggestionsInput.tsx | 103 +++++++++--------- 2 files changed, 94 insertions(+), 99 deletions(-) diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx index 55186d2352f..ecc981cf3a2 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx @@ -1,7 +1,7 @@ import { css, cx } from '@emotion/css'; +import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react'; import Prism, { Grammar, LanguageMap } from 'prismjs'; -import React, { memo, useEffect, useMemo, useRef, useState } from 'react'; -import { Popper as ReactPopper } from 'react-popper'; +import React, { memo, useEffect, useRef, useState } from 'react'; import usePrevious from 'react-use/lib/usePrevious'; import { Value } from 'slate'; import Plain from 'slate-plain-serializer'; @@ -86,6 +86,29 @@ export const DataLinkInput = memo( const prevLinkUrl = usePrevious(linkUrl); const [scrollTop, setScrollTop] = useState(0); + // the order of middleware is important! + const middleware = [ + offset(({ rects }) => ({ + alignmentAxis: rects.reference.width, + })), + flip({ + fallbackAxisSideDirection: 'start', + // see https://floating-ui.com/docs/flip#combining-with-shift + crossAxis: false, + boundary: document.body, + }), + shift(), + ]; + + const { refs, floatingStyles } = useFloating({ + open: showingSuggestions, + placement: 'bottom-start', + onOpenChange: setShowingSuggestions, + middleware, + whileElementsMounted: autoUpdate, + strategy: 'fixed', + }); + // Workaround for https://github.com/ianstormtaylor/slate/issues/2927 const stateRef = useRef({ showingSuggestions, suggestions, suggestionsIndex, linkUrl, onChange }); stateRef.current = { showingSuggestions, suggestions, suggestionsIndex, linkUrl, onChange }; @@ -96,12 +119,11 @@ export const DataLinkInput = memo( setScrollTop(getElementPosition(activeRef.current, suggestionsIndex)); }, [suggestionsIndex]); - // SelectionReference is used to position the variables suggestion relatively to current DOM selection - const selectionRef = useMemo(() => new SelectionReference(), []); - const onKeyDown = React.useCallback((event: React.KeyboardEvent, next: () => void) => { if (!stateRef.current.showingSuggestions) { if (event.key === '=' || event.key === '$' || (event.keyCode === 32 && event.ctrlKey)) { + const selectionRef = new SelectionReference(); + refs.setReference(selectionRef); return setShowingSuggestions(true); } return next(); @@ -181,49 +203,21 @@ export const DataLinkInput = memo(