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..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 @@ -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,6 +119,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 = () => { @@ -142,11 +145,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 { @@ -164,9 +167,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 +399,7 @@ export const PresentationPanelHoverActions = ({ notification.execute({ embeddable: api, trigger: panelNotificationTrigger }) } @@ -422,7 +425,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,12 +466,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; @@ -487,26 +490,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 +518,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; @@ -535,12 +538,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; @@ -556,7 +559,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 +578,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" 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",