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

Merged
merged 1 commit into from
Jan 3, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 8 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,17 @@ 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};
Heenawter marked this conversation as resolved.
Show resolved Hide resolved
margin-left: ${euiThemeVars.euiSizeS};
top: -${euiTheme.size.l};
width: ${euiTheme.size.l};
height: ${euiTheme.size.l};
z-index: ${euiTheme.levels.modal};
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 I restored the z-index and removed the comment

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",
]
}
Loading