Replace euiThemeVars in kbn-grid-layout

Fix linting error [CI] Auto-commit changed files from 'node scripts/notice' [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' Apply suggestions from code review Use backgroundLightAccentSecondary Co-authored-by: Hannah Mudge <[email protected]> [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' Remove z-index from drag handle Remove z-index from drag handle Revert "Remove z-index from drag handle" This reverts commit e50e7da. Remove comment
elastic · Jan 2, 2025 · a313690 · a313690
1 parent 2ee9cbf
commit a313690
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 34 deletions.
diff --git a/packages/kbn-grid-layout/grid/drag_preview.tsx b/packages/kbn-grid-layout/grid/drag_preview.tsx
@@ -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';
 
@@ -24,6 +23,7 @@ export const DragPreview = ({
   gridLayoutStateManager: GridLayoutStateManager;
 }) => {
   const dragPreviewRef = useRef<HTMLDivElement | null>(null);
+  const { euiTheme } = useEuiTheme();
 
   useEffect(
     () => {
@@ -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)};
         transition: opacity 100ms linear;
       `}
     />

diff --git a/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx b/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx
@@ -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';
 
@@ -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};
-        margin-left: ${euiThemeVars.euiSizeS};
+        top: -${euiTheme.size.l};
+        width: ${euiTheme.size.l};
+        height: ${euiTheme.size.l};
+        z-index: ${euiTheme.levels.modal};
+        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,

diff --git a/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx
@@ -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';
@@ -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);
@@ -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(

diff --git a/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx b/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx
@@ -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';
 
@@ -22,6 +22,7 @@ export const ResizeHandle = ({
     e: MouseEvent | React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => void;
 }) => {
+  const { euiTheme } = useEuiTheme();
   return (
     <button
       className="kbnGridPanel__resizeHandle"
@@ -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 & {

diff --git a/packages/kbn-grid-layout/grid/grid_row/grid_row.tsx b/packages/kbn-grid-layout/grid/grid_row/grid_row.tsx
@@ -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';
@@ -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) => {
@@ -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`;
@@ -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

diff --git a/packages/kbn-grid-layout/grid/use_grid_layout_state.ts b/packages/kbn-grid-layout/grid/use_grid_layout_state.ts
@@ -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,
@@ -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),
@@ -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
   }, []);
@@ -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 () => {

diff --git a/packages/kbn-grid-layout/grid/utils/mobile_view.ts b/packages/kbn-grid-layout/grid/utils/mobile_view.ts
@@ -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;
diff --git a/packages/kbn-grid-layout/tsconfig.json b/packages/kbn-grid-layout/tsconfig.json
@@ -11,7 +11,6 @@
     "target/**/*"
   ],
   "kbn_references": [
-    "@kbn/ui-theme",
     "@kbn/i18n",
   ]
 }