Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[kbn-grid-layout] EUI Visual Refresh Integration #204445

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
+38 −34
Open

[kbn-grid-layout] EUI Visual Refresh Integration #204445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3382715
Replace euiThemeVars in kbn-grid-layout
cqliu1 Dec 16, 2024
76d307b
[CI] Auto-commit changed files from 'node scripts/notice'
kibanamachine Dec 18, 2024
b1fbd32
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Dec 18, 2024
fcda98a
Fix linting error
cqliu1 Dec 18, 2024
2738f96
Apply suggestions from code review
cqliu1 Dec 18, 2024
b945fc3
Merge branch 'borealis/kbn-grid-layout/replace-euiThemeVars-usage' of…
cqliu1 Dec 18, 2024
e08ee61
Merge branch 'main' of https://github.com/elastic/kibana into boreali…
cqliu1 Dec 18, 2024
df59aa2
Merge branch 'main' of https://github.com/elastic/kibana into boreali…
cqliu1 Dec 18, 2024
8271477
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Dec 18, 2024
cf55789
Merge branch 'main' of https://github.com/elastic/kibana into boreali…
cqliu1 Dec 19, 2024
11393e4
Merge branch 'borealis/kbn-grid-layout/replace-euiThemeVars-usage' of…
cqliu1 Dec 19, 2024
babaaf3
Merge branch 'main' of https://github.com/elastic/kibana into boreali…
cqliu1 Dec 26, 2024
0f36ce8
Remove z-index from drag handle
cqliu1 Dec 27, 2024
e50e7da
Remove z-index from drag handle
cqliu1 Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/kbn-grid-layout/grid/drag_preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@
import React, { useEffect, useRef } from 'react';
import { combineLatest, skip } from 'rxjs';

import { transparentize } from '@elastic/eui';
import { transparentize, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';

import { GridLayoutStateManager } from './types';

Expand All @@ -24,6 +23,7 @@ export const DragPreview = ({
gridLayoutStateManager: GridLayoutStateManager;
}) => {
const dragPreviewRef = useRef<HTMLDivElement | null>(null);
const { euiTheme } = useEuiTheme();

useEffect(
() => {
Expand Down Expand Up @@ -62,8 +62,8 @@ export const DragPreview = ({
css={css`
display: none;
pointer-events: none;
border-radius: ${euiThemeVars.euiBorderRadius};
background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.2)};
border-radius: ${euiTheme.border.radius};
background-color: ${transparentize(euiTheme.colors.accentSecondary, 0.2)};
Heenawter marked this conversation as resolved.
Show resolved Hide resolved
transition: opacity 100ms linear;
`}
/>
Expand Down
16 changes: 7 additions & 9 deletions packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import React, { useCallback, useEffect, useImperativeHandle, useRef, useState }

import { EuiIcon, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { i18n } from '@kbn/i18n';
import { GridLayoutStateManager, PanelInteractionEvent } from '../types';

Expand Down Expand Up @@ -101,17 +100,16 @@ export const DragHandle = React.forwardRef<
position: absolute;
align-items: center;
justify-content: center;
top: -${euiThemeVars.euiSizeL};
width: ${euiThemeVars.euiSizeL};
height: ${euiThemeVars.euiSizeL};
z-index: ${euiThemeVars.euiZLevel3};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Heenawter Can you confirm if it's okay to remove this z-index from the drag handle? From what I could tell testing locally, the z-index isn't doing anything here.

Copy link
Contributor

@Heenawter Heenawter Dec 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the native drag handle that is used if the panel renderer isn't providing one. To see it, remove setDragHandles from the ReactEmbeddableRenderer in examples/grid_example/public/app.tsx (I also removed the drag handle component in src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx in order to make it easier to test).

By removing this z-index, the native drag handle sometimes floats below panel contents:

Dec-30-2024 10-08-52

So I think we should maintain a high z-index for this, even if it's not currently used by embeddables :) I switch out the embeddable renderer a lot in my testing and rely on the kbn-grid-layout drag handle, so it would be a pain to have to add this back every time.

margin-left: ${euiThemeVars.euiSizeS};
top: -${euiTheme.size.l};
width: ${euiTheme.size.l};
height: ${euiTheme.size.l};
margin-left: ${euiTheme.size.s};
border: 1px solid ${euiTheme.border.color};
border-bottom: none;
background-color: ${euiTheme.colors.emptyShade};
border-radius: ${euiThemeVars.euiBorderRadius} ${euiThemeVars.euiBorderRadius} 0 0;
background-color: ${euiTheme.colors.backgroundBasePlain};
border-radius: ${euiTheme.border.radius} ${euiTheme.border.radius} 0 0;
cursor: grab;
transition: ${euiThemeVars.euiAnimSpeedSlow} opacity;
transition: ${euiTheme.animation.slow} opacity;
.kbnGridPanel:hover &,
.kbnGridPanel:focus-within &,
&:active,
Expand Down
5 changes: 3 additions & 2 deletions packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
import React, { forwardRef, useEffect, useMemo, useState } from 'react';
import { combineLatest, skip } from 'rxjs';

import { useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';

import { GridLayoutStateManager, PanelInteractionEvent } from '../types';
import { getKeysInOrder } from '../utils/resolve_grid_row';
Expand All @@ -38,6 +38,7 @@ export const GridPanel = forwardRef<HTMLDivElement, GridPanelProps>(
panelRef
) => {
const [dragHandleApi, setDragHandleApi] = useState<DragHandleApi | null>(null);
const { euiTheme } = useEuiTheme();

useEffect(() => {
const onDropEventHandler = (dropEvent: MouseEvent) => interactionStart('drop', dropEvent);
Expand Down Expand Up @@ -107,7 +108,7 @@ export const GridPanel = forwardRef<HTMLDivElement, GridPanelProps>(
// if the current panel is active, give it fixed positioning depending on the interaction event
const { position: draggingPosition } = activePanel;

ref.style.zIndex = `${euiThemeVars.euiZModal}`;
ref.style.zIndex = `${euiTheme.levels.modal}`;
if (currentInteractionEvent?.type === 'resize') {
// if the current panel is being resized, ensure it is not shrunk past the size of a single cell
ref.style.width = `${Math.max(
Expand Down
15 changes: 8 additions & 7 deletions packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@

import { transparentize } from '@elastic/eui';
import { css } from '@emotion/react';
import { useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { euiThemeVars } from '@kbn/ui-theme';
import React from 'react';
import { PanelInteractionEvent } from '../types';

Expand All @@ -22,6 +22,7 @@ export const ResizeHandle = ({
e: MouseEvent | React.MouseEvent<HTMLButtonElement, MouseEvent>
) => void;
}) => {
const { euiTheme } = useEuiTheme();
return (
<button
className="kbnGridPanel__resizeHandle"
Expand All @@ -40,19 +41,19 @@ export const ResizeHandle = ({
opacity: 0;
margin: -2px;
position: absolute;
width: ${euiThemeVars.euiSizeL};
width: ${euiTheme.size.l};
max-width: 100%;
height: ${euiThemeVars.euiSizeL};
z-index: ${euiThemeVars.euiZLevel9};
height: ${euiTheme.size.l};
z-index: ${euiTheme.levels.toast};
transition: opacity 0.2s, border 0.2s;
border-radius: 7px 0 7px 0;
border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
border-right: 2px solid ${euiThemeVars.euiColorSuccess};
border-bottom: 2px solid ${euiTheme.colors.accentSecondary};
border-right: 2px solid ${euiTheme.colors.accentSecondary};
&:hover,
&:focus {
outline-style: none !important;
opacity: 1;
background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
background-color: ${transparentize(euiTheme.colors.accentSecondary, 0.05)};
cursor: se-resize;
}
.kbnGrid--static & {
Expand Down
11 changes: 6 additions & 5 deletions packages/kbn-grid-layout/grid/grid_row/grid_row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { combineLatest, map, pairwise, skip } from 'rxjs';

import { transparentize } from '@elastic/eui';
import { transparentize, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';

import { cloneDeep } from 'lodash';
import { DragPreview } from '../drag_preview';
Expand Down Expand Up @@ -42,6 +41,8 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
const [rowTitle, setRowTitle] = useState<string>(currentRow.title);
const [isCollapsed, setIsCollapsed] = useState<boolean>(currentRow.isCollapsed);

const { euiTheme } = useEuiTheme();

const getRowCount = useCallback(
(row: GridRowData) => {
const maxRow = Object.values(row.panels).reduce((acc, panel) => {
Expand Down Expand Up @@ -92,7 +93,7 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
const targetRow = interactionEvent?.targetRowIndex;
if (rowIndex === targetRow && interactionEvent) {
// apply "targetted row" styles
const gridColor = transparentize(euiThemeVars.euiColorSuccess, 0.2);
const gridColor = euiTheme.colors.backgroundLightAccentSecondary;
rowRef.style.backgroundPosition = `top -${gutterSize / 2}px left -${
gutterSize / 2
}px`;
Expand All @@ -102,8 +103,8 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
rowRef.style.backgroundImage = `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`;
rowRef.style.backgroundColor = `${transparentize(
euiThemeVars.euiColorSuccess,
0.05
euiTheme.colors.backgroundLightAccentSecondary,
0.25
)}`;
} else {
// undo any "targetted row" styles
Expand Down
11 changes: 8 additions & 3 deletions packages/kbn-grid-layout/grid/use_grid_layout_state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useEffect, useMemo, useRef } from 'react';
import { BehaviorSubject, combineLatest, debounceTime } from 'rxjs';
import useResizeObserver, { type ObservedSize } from 'use-resize-observer/polyfilled';
import { cloneDeep } from 'lodash';

import { useEuiTheme } from '@elastic/eui';
import {
ActivePanel,
GridAccessMode,
Expand Down Expand Up @@ -40,6 +40,7 @@ export const useGridLayoutState = ({
} => {
const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
const panelRefs = useRef<Array<{ [id: string]: HTMLDivElement | null }>>([]);
const { euiTheme } = useEuiTheme();

const expandedPanelId$ = useMemo(
() => new BehaviorSubject<string | undefined>(expandedPanelId),
Expand Down Expand Up @@ -89,7 +90,9 @@ export const useGridLayoutState = ({
runtimeSettings$,
interactionEvent$,
expandedPanelId$,
isMobileView$: new BehaviorSubject<boolean>(shouldShowMobileView(accessMode)),
isMobileView$: new BehaviorSubject<boolean>(
shouldShowMobileView(accessMode, euiTheme.breakpoint.m)
),
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
Expand All @@ -107,7 +110,9 @@ export const useGridLayoutState = ({
gridSettings.columnCount;

gridLayoutStateManager.runtimeSettings$.next({ ...gridSettings, columnPixelWidth });
gridLayoutStateManager.isMobileView$.next(shouldShowMobileView(currentAccessMode));
gridLayoutStateManager.isMobileView$.next(
shouldShowMobileView(currentAccessMode, euiTheme.breakpoint.m)
);
});

return () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/kbn-grid-layout/grid/utils/mobile_view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { euiThemeVars } from '@kbn/ui-theme';
import { GridAccessMode } from '../types';

const getViewportWidth = () =>
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

export const shouldShowMobileView = (accessMode: GridAccessMode) =>
accessMode === 'VIEW' && getViewportWidth() < parseFloat(euiThemeVars.euiBreakpoints.m);
export const shouldShowMobileView = (accessMode: GridAccessMode, breakpoint: number) =>
accessMode === 'VIEW' && getViewportWidth() < breakpoint;
1 change: 0 additions & 1 deletion packages/kbn-grid-layout/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"target/**/*"
],
"kbn_references": [
"@kbn/ui-theme",
"@kbn/i18n",
]
}