diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index eae123f3dfe29..0eaadafb3b48e 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/src/platform/plugins/private/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'; @@ -53,9 +53,6 @@ import { 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 getContextMenuAriaLabel = (title?: string, index?: number) => { if (title) { return i18n.translate('presentationPanel.contextMenu.ariaLabelWithTitle', { @@ -87,15 +84,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) => { @@ -148,6 +136,21 @@ 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.width.thin} solid ${euiTheme.colors.borderBasePlain}`; + + 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); const updateCombineHoverActions = () => { @@ -159,11 +162,11 @@ export const PresentationPanelHoverActions = ({ const hoverActionsWidth = (rightHoverActionsRef.current?.offsetWidth ?? 0) + (dragHandleRef.current?.offsetWidth ?? 0) + - parseInt(euiThemeVars.euiSize, 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(euiThemeVars.euiSize, 10)) { + if (anchorLeft - (hoverActionsWidth - anchorWidth) <= parseInt(euiTheme.size.base, 10)) { dragHandleRef.current?.style.removeProperty('right'); dragHandleRef.current?.style.setProperty('left', '0'); } else { @@ -181,9 +184,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'); @@ -416,7 +419,7 @@ export const PresentationPanelHoverActions = ({ notification.execute({ embeddable: api, trigger: panelNotificationTrigger }) } @@ -442,7 +445,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 @@ -483,12 +486,12 @@ export const PresentationPanelHoverActions = ({ })} data-test-subj="embeddablePanelDragHandle" css={css` - margin: ${euiThemeVars.euiSizeXS}; + margin: ${euiTheme.size.xs}; `} /> ), - [setDragHandle] + [setDragHandle, euiTheme.size.xs] ); const hasHoverActions = quickActionElements.length || contextMenuPanels.lastIndexOf.length; @@ -507,26 +510,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 } @@ -535,12 +538,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.toast}; + top: -${euiTheme.size.xl}; .embPanel__hoverActions { opacity: 1; @@ -555,12 +558,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.base}; flex-wrap: nowrap; min-width: 100%; z-index: -1; @@ -576,7 +579,7 @@ export const PresentationPanelHoverActions = ({ className )} css={css` - border: ${viewMode === 'edit' ? DASHED_OUTLINE : SOLID_OUTLINE}; + border: ${viewMode === 'edit' ? EDIT_MODE_OUTLINE : VIEW_MODE_OUTLINE}; ${borderStyles} `} > @@ -595,7 +598,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/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx index e1e0a532129da..a42179785e9e7 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx +++ b/src/platform/plugins/private/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. @@ -170,7 +171,7 @@ export const usePresentationPanelHeaderActions = < notification.execute({ embeddable: api, trigger: panelNotificationTrigger }) } @@ -196,7 +197,7 @@ export const usePresentationPanelHeaderActions = < return notificationComponent; }); - }, [api, notifications, showNotifications]); + }, [api, euiTheme.size.xs, notifications, showNotifications]); return { badgeElements, notificationElements }; }; diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx index e4628881eb372..f16d30158cab3 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx +++ b/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx @@ -7,13 +7,12 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -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 { i18n } from '@kbn/i18n'; import { untilPluginStartServicesReady } from '../kibana_services'; import type { DefaultPresentationPanelApi, PresentationPanelProps } from './types'; @@ -33,6 +32,7 @@ export const PresentationPanel = < ) => { const panelErrorCss = usePanelErrorCss(); const { Component, hidePanelChrome, ...passThroughProps } = props; + const { euiTheme } = useEuiTheme(); const { loading, value } = useAsync(async () => { if (hidePanelChrome) { return { @@ -77,7 +77,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" diff --git a/src/platform/plugins/private/presentation_panel/tsconfig.json b/src/platform/plugins/private/presentation_panel/tsconfig.json index a97e902207605..c7a770c9522c1 100644 --- a/src/platform/plugins/private/presentation_panel/tsconfig.json +++ b/src/platform/plugins/private/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",