From bddbc7d388115f9cdbcfca9dfa35b0bec95a6261 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Mon, 16 Dec 2024 12:05:05 -0500 Subject: [PATCH] Replace euiThemeVars usage in presentation panel --- .../eui_markdown_react_embeddable.tsx | 6 +- .../field_list_react_embeddable.tsx | 6 +- .../saved_book_react_embeddable.tsx | 14 +++- .../search/search_react_embeddable.tsx | 6 +- .../presentation_panel_hover_actions.tsx | 71 ++++++++++--------- .../use_presentation_panel_header_actions.tsx | 9 +-- .../panel_component/presentation_panel.tsx | 6 +- 7 files changed, 66 insertions(+), 52 deletions(-) diff --git a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx index 2ad9cd639a223..7c262d744a55e 100644 --- a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx +++ b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiMarkdownEditor, EuiMarkdownFormat } from '@elastic/eui'; +import { EuiMarkdownEditor, EuiMarkdownFormat, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; @@ -16,7 +16,6 @@ import { useInheritedViewMode, useStateFromPublishingSubject, } from '@kbn/presentation-publishing'; -import { euiThemeVars } from '@kbn/ui-theme'; import React from 'react'; import { BehaviorSubject } from 'rxjs'; import { EUI_MARKDOWN_ID } from './constants'; @@ -80,6 +79,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory< // get state for rendering const content = useStateFromPublishingSubject(content$); const viewMode = useInheritedViewMode(api) ?? 'view'; + const { euiTheme } = useEuiTheme(); return viewMode === 'edit' ? ( {content ?? ''} diff --git a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx index c6b13d2419971..c88219d1fafc3 100644 --- a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx +++ b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; import type { Reference } from '@kbn/content-management-utils'; import { CoreStart } from '@kbn/core-lifecycle-browser'; @@ -17,7 +17,6 @@ import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { i18n } from '@kbn/i18n'; import { initializeTitles, useBatchedPublishingSubjects } from '@kbn/presentation-publishing'; import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public'; -import { euiThemeVars } from '@kbn/ui-theme'; import { UnifiedFieldListSidebarContainer, type UnifiedFieldListSidebarContainerProps, @@ -150,6 +149,7 @@ export const getFieldListFactory = ( dataViews$, selectedFieldNames$ ); + const { euiTheme } = useEuiTheme(); const selectedDataView = renderDataViews?.[0]; @@ -165,7 +165,7 @@ export const getFieldListFactory = ( { bookAttributesManager.bookTitle, bookAttributesManager.bookSynopsis ); + const { euiTheme } = useEuiTheme(); return (
{ )}
{ api, Component: () => { const [count, error] = useBatchedPublishingSubjects(count$, blockingError$); + const { euiTheme } = useEuiTheme(); useEffect(() => { return () => { @@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
) => (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"