From 6d69138cee650b95b2a1d5968c5694ec6856cd23 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Mon, 16 Dec 2024 12:06:12 -0500 Subject: [PATCH 1/6] Replace euiThemeVars usage in presentation panel --- .../presentation_panel_hover_actions.tsx | 71 ++++++++++--------- .../use_presentation_panel_header_actions.tsx | 9 +-- .../panel_component/presentation_panel.tsx | 6 +- 3 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index f164af574c33c..d5d9d67745e6e 100644 --- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx @@ -29,6 +29,7 @@ import { EuiPopover, EuiToolTip, IconType, + useEuiTheme, } from '@elastic/eui'; import { ActionExecutionContext, buildContextMenuForActions } from '@kbn/ui-actions-plugin/public'; @@ -40,7 +41,6 @@ import { ViewMode, } from '@kbn/presentation-publishing'; import { Subscription } from 'rxjs'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { ActionWithContext } from '@kbn/ui-actions-plugin/public/context_menu/build_eui_context_menu_panels'; import { uiActions } from '../../kibana_services'; @@ -54,9 +54,6 @@ import { getContextMenuAriaLabel } from '../presentation_panel_strings'; import { DefaultPresentationPanelApi, PresentationPanelInternalProps } from '../types'; import { AnyApiAction } from '../../panel_actions/types'; -const DASHED_OUTLINE = `1px dashed ${euiThemeVars.euiColorMediumShade}`; -const SOLID_OUTLINE = `1px solid ${euiThemeVars.euiBorderColor}`; - const QUICK_ACTION_IDS = { edit: [ 'editPanel', @@ -70,15 +67,6 @@ const QUICK_ACTION_IDS = { const ALLOWED_NOTIFICATIONS = ['ACTION_FILTERS_NOTIFICATION'] as const; -const ALL_ROUNDED_CORNERS = ` - border-radius: ${euiThemeVars.euiBorderRadius}; -`; -const TOP_ROUNDED_CORNERS = ` - border-top-left-radius: ${euiThemeVars.euiBorderRadius}; - border-top-right-radius: ${euiThemeVars.euiBorderRadius}; - border-bottom: 0px; -`; - const createClickHandler = (action: AnyApiAction, context: ActionExecutionContext) => (event: React.MouseEvent) => { @@ -131,8 +119,25 @@ export const PresentationPanelHoverActions = ({ const rightHoverActionsRef = useRef(null); const [combineHoverActions, setCombineHoverActions] = useState(false); + + const { euiTheme } = useEuiTheme(); + + const EDIT_MODE_OUTLINE = `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`; + const VIEW_MODE_OUTLINE = euiTheme.border.thin; + + const ALL_ROUNDED_CORNERS = ` + border-radius: ${euiTheme.border.radius.medium}; +`; + const TOP_ROUNDED_CORNERS = ` + border-top-left-radius: ${euiTheme.border.radius.medium}; + border-top-right-radius: ${euiTheme.border.radius.medium}; + border-bottom: 0px; +`; + const [borderStyles, setBorderStyles] = useState(TOP_ROUNDED_CORNERS); + console.log({ EDIT_MODE_OUTLINE, VIEW_MODE_OUTLINE, ALL_ROUNDED_CORNERS, TOP_ROUNDED_CORNERS }); + const updateCombineHoverActions = () => { if (!hoverActionsRef.current || !anchorRef.current) return; const anchorBox = anchorRef.current.getBoundingClientRect(); @@ -142,11 +147,11 @@ export const PresentationPanelHoverActions = ({ const hoverActionsWidth = (rightHoverActionsRef.current?.offsetWidth ?? 0) + (dragHandleRef.current?.offsetWidth ?? 0) + - parseInt(euiThemeVars.euiSize, 10) * 2; + parseInt(euiTheme.size.m, 10) * 2; const hoverActionsHeight = rightHoverActionsRef.current?.offsetHeight ?? 0; // Left align hover actions when they would get cut off by the right edge of the window - if (anchorLeft - (hoverActionsWidth - anchorWidth) <= parseInt(euiThemeVars.euiSize, 10)) { + if (anchorLeft - (hoverActionsWidth - anchorWidth) <= parseInt(euiTheme.size.m, 10)) { dragHandleRef.current?.style.removeProperty('right'); dragHandleRef.current?.style.setProperty('left', '0'); } else { @@ -164,9 +169,9 @@ export const PresentationPanelHoverActions = ({ if (willGetCutOff) { hoverActionsRef.current.style.setProperty('position', 'absolute'); - hoverActionsRef.current.style.setProperty('top', `-${euiThemeVars.euiSizeS}`); + hoverActionsRef.current.style.setProperty('top', `-${euiTheme.size.s}`); } else if (shouldCombine) { - hoverActionsRef.current.style.setProperty('top', `-${euiThemeVars.euiSizeL}`); + hoverActionsRef.current.style.setProperty('top', `-${euiTheme.size.l}`); } else { hoverActionsRef.current.style.removeProperty('position'); hoverActionsRef.current.style.removeProperty('top'); @@ -396,7 +401,7 @@ export const PresentationPanelHoverActions = ({ notification.execute({ embeddable: api, trigger: panelNotificationTrigger }) } @@ -422,7 +427,7 @@ export const PresentationPanelHoverActions = ({ return notificationComponent; }); - }, [api, notifications, showNotifications]); + }, [api, euiTheme.size.xs, notifications, showNotifications]); const contextMenuClasses = classNames({ // eslint-disable-next-line @typescript-eslint/naming-convention @@ -463,7 +468,7 @@ export const PresentationPanelHoverActions = ({ })} data-test-subj="embeddablePanelDragHandle" css={css` - margin: ${euiThemeVars.euiSizeXS}; + margin: ${euiTheme.size.xs}; `} /> @@ -487,26 +492,26 @@ export const PresentationPanelHoverActions = ({ '' )}`} css={css` - border-radius: ${euiThemeVars.euiBorderRadius}; + border-radius: ${euiTheme.border.radius.medium}; position: relative; height: 100%; .embPanel { ${showBorder ? ` - outline: ${viewMode === 'edit' ? DASHED_OUTLINE : SOLID_OUTLINE}; + outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; ` : ''} } .embPanel__hoverActions { opacity: 0; - padding: calc(${euiThemeVars.euiSizeXS} - 1px); + padding: calc(${euiTheme.size.xs} - 1px); display: flex; flex-wrap: nowrap; - background-color: ${euiThemeVars.euiColorEmptyShade}; - height: ${euiThemeVars.euiSizeXL}; + background-color: ${euiTheme.colors.backgroundBasePlain}; + height: ${euiTheme.size.xl}; pointer-events: all; // Re-enable pointer-events for hover actions } @@ -515,12 +520,12 @@ export const PresentationPanelHoverActions = ({ &:focus-within, &.embPanel__hoverActionsAnchor--lockHoverActions { .embPanel { - outline: ${viewMode === 'edit' ? DASHED_OUTLINE : SOLID_OUTLINE}; - z-index: ${euiThemeVars.euiZLevel2}; + outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; + z-index: ${euiTheme.levels.menu}; } .embPanel__hoverActionsWrapper { - z-index: ${euiThemeVars.euiZLevel9}; - top: -${euiThemeVars.euiSizeXL}; + z-index: ${euiTheme.levels.modal}; + top: -${euiTheme.size.xl}; .embPanel__hoverActions { opacity: 1; @@ -535,12 +540,12 @@ export const PresentationPanelHoverActions = ({ ref={hoverActionsRef} className="embPanel__hoverActionsWrapper" css={css` - height: ${euiThemeVars.euiSizeXL}; + height: ${euiTheme.size.XL}; position: absolute; top: 0; display: flex; justify-content: space-between; - padding: 0 ${euiThemeVars.euiSize}; + padding: 0 ${euiTheme.size.medium}; flex-wrap: nowrap; min-width: 100%; z-index: -1; @@ -556,7 +561,7 @@ export const PresentationPanelHoverActions = ({ className )} css={css` - border: ${viewMode === 'edit' ? DASHED_OUTLINE : SOLID_OUTLINE}; + border: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; ${borderStyles} `} > @@ -575,7 +580,7 @@ export const PresentationPanelHoverActions = ({ className )} css={css` - border: ${viewMode === 'edit' ? DASHED_OUTLINE : SOLID_OUTLINE}; + border: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; ${borderStyles} `} > diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx index 795fd6b566a9b..062cc4d1b58a4 100644 --- a/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx +++ b/src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx @@ -7,8 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiBadge, EuiNotificationBadge, EuiToolTip } from '@elastic/eui'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { EuiBadge, EuiNotificationBadge, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useEffect, useMemo, useState } from 'react'; import { Subscription } from 'rxjs'; @@ -35,6 +34,8 @@ export const usePresentationPanelHeaderActions = < const [badges, setBadges] = useState([]); const [notifications, setNotifications] = useState([]); + const { euiTheme } = useEuiTheme(); + /** * Get all actions once on mount of the panel. Any actions that are Frequent Compatibility * Change Actions need to be subscribed to so they can change over the lifetime of this panel. @@ -167,7 +168,7 @@ export const usePresentationPanelHeaderActions = < notification.execute({ embeddable: api, trigger: panelNotificationTrigger }) } @@ -193,7 +194,7 @@ export const usePresentationPanelHeaderActions = < return notificationComponent; }); - }, [api, notifications, showNotifications]); + }, [api, euiTheme.size.xs, notifications, showNotifications]); return { badgeElements, notificationElements }; }; diff --git a/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx b/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx index 3f509ebdc0a6c..5de70f3a9b4cf 100644 --- a/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx +++ b/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx @@ -9,13 +9,12 @@ import './_presentation_panel.scss'; -import { EuiErrorBoundary, EuiFlexGroup } from '@elastic/eui'; +import { EuiErrorBoundary, EuiFlexGroup, useEuiTheme } from '@elastic/eui'; import { PanelLoader } from '@kbn/panel-loader'; import { isPromise } from '@kbn/std'; import React from 'react'; import useAsync from 'react-use/lib/useAsync'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { untilPluginStartServicesReady } from '../kibana_services'; import { PresentationPanelError } from './presentation_panel_error'; import { DefaultPresentationPanelApi, PresentationPanelProps } from './types'; @@ -30,6 +29,7 @@ export const PresentationPanel = < } ) => { const { Component, hidePanelChrome, ...passThroughProps } = props; + const { euiTheme } = useEuiTheme(); const { loading, value, error } = useAsync(async () => { if (hidePanelChrome) { return { @@ -58,7 +58,7 @@ export const PresentationPanel = < showShadow={props.showShadow} showBorder={props.showBorder} css={css` - border-radius: ${euiThemeVars.euiBorderRadius}; + border-radius: ${euiTheme.border.radius.medium}; `} dataTestSubj="embed dablePanelLoadingIndicator" From 8b6bd8669ab8e207125c06607584d15f54a8837a Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Tue, 17 Dec 2024 10:38:36 -0500 Subject: [PATCH 2/6] Fix eui sizes --- .../presentation_panel_hover_actions.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index d5d9d67745e6e..9602d849aa981 100644 --- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx @@ -136,8 +136,6 @@ export const PresentationPanelHoverActions = ({ const [borderStyles, setBorderStyles] = useState(TOP_ROUNDED_CORNERS); - console.log({ EDIT_MODE_OUTLINE, VIEW_MODE_OUTLINE, ALL_ROUNDED_CORNERS, TOP_ROUNDED_CORNERS }); - const updateCombineHoverActions = () => { if (!hoverActionsRef.current || !anchorRef.current) return; const anchorBox = anchorRef.current.getBoundingClientRect(); @@ -147,11 +145,11 @@ export const PresentationPanelHoverActions = ({ const hoverActionsWidth = (rightHoverActionsRef.current?.offsetWidth ?? 0) + (dragHandleRef.current?.offsetWidth ?? 0) + - parseInt(euiTheme.size.m, 10) * 2; + parseInt(euiTheme.size.base, 10) * 2; const hoverActionsHeight = rightHoverActionsRef.current?.offsetHeight ?? 0; // Left align hover actions when they would get cut off by the right edge of the window - if (anchorLeft - (hoverActionsWidth - anchorWidth) <= parseInt(euiTheme.size.m, 10)) { + if (anchorLeft - (hoverActionsWidth - anchorWidth) <= parseInt(euiTheme.size.base, 10)) { dragHandleRef.current?.style.removeProperty('right'); dragHandleRef.current?.style.setProperty('left', '0'); } else { @@ -524,7 +522,7 @@ export const PresentationPanelHoverActions = ({ z-index: ${euiTheme.levels.menu}; } .embPanel__hoverActionsWrapper { - z-index: ${euiTheme.levels.modal}; + z-index: ${euiTheme.levels.toast}; top: -${euiTheme.size.xl}; .embPanel__hoverActions { @@ -540,12 +538,12 @@ export const PresentationPanelHoverActions = ({ ref={hoverActionsRef} className="embPanel__hoverActionsWrapper" css={css` - height: ${euiTheme.size.XL}; + height: ${euiTheme.size.xl}; position: absolute; top: 0; display: flex; justify-content: space-between; - padding: 0 ${euiTheme.size.medium}; + padding: 0 ${euiTheme.size.base}; flex-wrap: nowrap; min-width: 100%; z-index: -1; From c39729e5f1b2cd7d1e11d2ded49ece87c3ce5630 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 17 Dec 2024 19:03:31 +0000 Subject: [PATCH 3/6] [CI] Auto-commit changed files from 'node scripts/notice' --- src/plugins/presentation_panel/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/presentation_panel/tsconfig.json b/src/plugins/presentation_panel/tsconfig.json index 255e4fd4eccde..eb600c8e3e0cc 100644 --- a/src/plugins/presentation_panel/tsconfig.json +++ b/src/plugins/presentation_panel/tsconfig.json @@ -18,7 +18,6 @@ "@kbn/unified-search-plugin", "@kbn/inspector-plugin", "@kbn/std", - "@kbn/ui-theme", "@kbn/expressions-plugin", "@kbn/utility-types", "@kbn/content-management-plugin", From db7251aca5fa79c525551931424f53484419c1ca Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Wed, 18 Dec 2024 00:12:17 -0500 Subject: [PATCH 4/6] Memoize presentation panel border style strings --- .../panel_header/presentation_panel_hover_actions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index 9602d849aa981..ffec5ef94a184 100644 --- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx @@ -122,8 +122,8 @@ export const PresentationPanelHoverActions = ({ const { euiTheme } = useEuiTheme(); - const EDIT_MODE_OUTLINE = `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`; - const VIEW_MODE_OUTLINE = euiTheme.border.thin; + const EDIT_MODE_OUTLINE = useMemo(()=> `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`,[euiTheme.border.width.thin, euiTheme.colors.borderBaseFormsControl]); + const VIEW_MODE_OUTLINE = useMemo(()=> `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,[euiTheme.border.width.thin, euiTheme.colors.borderBasePlain]); const ALL_ROUNDED_CORNERS = ` border-radius: ${euiTheme.border.radius.medium}; From aa956f56caaaa5346eecf98cbff12d2203923ff4 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Wed, 18 Dec 2024 00:23:47 -0500 Subject: [PATCH 5/6] Add missing dependency --- .../presentation_panel_hover_actions.tsx | 69 ++++++++++++++++++- 1 file changed, 66 insertions(+), 3 deletions(-) diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index ffec5ef94a184..b89798652d545 100644 --- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx @@ -122,8 +122,14 @@ export const PresentationPanelHoverActions = ({ const { euiTheme } = useEuiTheme(); - const EDIT_MODE_OUTLINE = useMemo(()=> `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`,[euiTheme.border.width.thin, euiTheme.colors.borderBaseFormsControl]); - const VIEW_MODE_OUTLINE = useMemo(()=> `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,[euiTheme.border.width.thin, euiTheme.colors.borderBasePlain]); + const EDIT_MODE_OUTLINE = useMemo( + () => `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`, + [euiTheme.border.width.thin, euiTheme.colors.borderBaseFormsControl] + ); + const VIEW_MODE_OUTLINE = useMemo( + () => `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`, + [euiTheme.border.width.thin, euiTheme.colors.borderBasePlain] + ); const ALL_ROUNDED_CORNERS = ` border-radius: ${euiTheme.border.radius.medium}; @@ -471,11 +477,68 @@ export const PresentationPanelHoverActions = ({ /> ), - [setDragHandle] + [setDragHandle, euiTheme.size.xs] ); const hasHoverActions = quickActionElements.length || contextMenuPanels.lastIndexOf.length; + const presentationPanelHoverActionsAnchorStyles = useMemo( + () => ` + border-radius: ${euiTheme.border.radius.medium}; + position: relative; + height: 100%; + + .embPanel { + ${ + showBorder + ? ` + outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; + ` + : '' + } + } + + .embPanel__hoverActions { + opacity: 0; + padding: calc(${euiTheme.size.xs} - 1px); + display: flex; + flex-wrap: nowrap; + + background-color: ${euiTheme.colors.backgroundBasePlain}; + height: ${euiTheme.size.xl}; + + pointer-events: all; // Re-enable pointer-events for hover actions + } + + &:hover, + &:focus-within, + &.embPanel__hoverActionsAnchor--lockHoverActions { + .embPanel { + outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; + z-index: ${euiTheme.levels.menu}; + } + .embPanel__hoverActionsWrapper { + z-index: ${euiTheme.levels.toast}; + top: -${euiTheme.size.xl}; + + .embPanel__hoverActions { + opacity: 1; + } + } + } + `, + [ + euiTheme.border.radius.medium, + euiTheme.size.xs, + EDIT_MODE_OUTLINE, + VIEW_MODE_OUTLINE, + euiTheme.colors.backgroundBasePlain, + euiTheme.size.xl, + euiTheme.levels.menu, + euiTheme.levels.toast, + ] + ); + return (
Date: Wed, 18 Dec 2024 00:36:17 -0500 Subject: [PATCH 6/6] undo memoize --- .../presentation_panel_hover_actions.tsx | 67 +------------------ 1 file changed, 2 insertions(+), 65 deletions(-) diff --git a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index b89798652d545..86798006a250a 100644 --- a/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/src/plugins/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx @@ -122,14 +122,8 @@ export const PresentationPanelHoverActions = ({ const { euiTheme } = useEuiTheme(); - const EDIT_MODE_OUTLINE = useMemo( - () => `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`, - [euiTheme.border.width.thin, euiTheme.colors.borderBaseFormsControl] - ); - const VIEW_MODE_OUTLINE = useMemo( - () => `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`, - [euiTheme.border.width.thin, euiTheme.colors.borderBasePlain] - ); + const EDIT_MODE_OUTLINE = `${euiTheme.border.width.thin} dashed ${euiTheme.colors.borderBaseFormsControl}`; + const VIEW_MODE_OUTLINE = `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`; const ALL_ROUNDED_CORNERS = ` border-radius: ${euiTheme.border.radius.medium}; @@ -482,63 +476,6 @@ export const PresentationPanelHoverActions = ({ const hasHoverActions = quickActionElements.length || contextMenuPanels.lastIndexOf.length; - const presentationPanelHoverActionsAnchorStyles = useMemo( - () => ` - border-radius: ${euiTheme.border.radius.medium}; - position: relative; - height: 100%; - - .embPanel { - ${ - showBorder - ? ` - outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; - ` - : '' - } - } - - .embPanel__hoverActions { - opacity: 0; - padding: calc(${euiTheme.size.xs} - 1px); - display: flex; - flex-wrap: nowrap; - - background-color: ${euiTheme.colors.backgroundBasePlain}; - height: ${euiTheme.size.xl}; - - pointer-events: all; // Re-enable pointer-events for hover actions - } - - &:hover, - &:focus-within, - &.embPanel__hoverActionsAnchor--lockHoverActions { - .embPanel { - outline: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; - z-index: ${euiTheme.levels.menu}; - } - .embPanel__hoverActionsWrapper { - z-index: ${euiTheme.levels.toast}; - top: -${euiTheme.size.xl}; - - .embPanel__hoverActions { - opacity: 1; - } - } - } - `, - [ - euiTheme.border.radius.medium, - euiTheme.size.xs, - EDIT_MODE_OUTLINE, - VIEW_MODE_OUTLINE, - euiTheme.colors.backgroundBasePlain, - euiTheme.size.xl, - euiTheme.levels.menu, - euiTheme.levels.toast, - ] - ); - return (