Skip to content

Commit

Permalink
Replace euiThemeVars usage in presentation panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@cqliu1
cqliu1 committed Dec 16, 2024
1 parent 7370cc7 commit bddbc7d
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 52 deletions.
6 changes: 3 additions & 3 deletions ...beddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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' ? (
<EuiMarkdownEditor
Expand All @@ -96,7 +96,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
) : (
<EuiMarkdownFormat
css={css`
padding: ${euiThemeVars.euiSizeM};
padding: ${euiTheme.size.m};
`}
>
{content ?? ''}
Expand Down
6 changes: 3 additions & 3 deletions ...s/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -150,6 +149,7 @@ export const getFieldListFactory = (
dataViews$,
selectedFieldNames$
);
const { euiTheme } = useEuiTheme();

const selectedDataView = renderDataViews?.[0];

Expand All @@ -165,7 +165,7 @@ export const getFieldListFactory = (
<EuiFlexItem
grow={false}
css={css`
padding: ${euiThemeVars.euiSizeS};
padding: ${euiTheme.size.s};
`}
>
<DataViewPicker
Expand Down
14 changes: 11 additions & 3 deletions ...s/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,15 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { EuiBadge, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
import {
EuiBadge,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiTitle,
useEuiTheme,
} from '@elastic/eui';
import { css } from '@emotion/react';
import { CoreStart } from '@kbn/core-lifecycle-browser';
import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
Expand All @@ -18,7 +26,6 @@ import {
SerializedTitles,
useBatchedPublishingSubjects,
} from '@kbn/presentation-publishing';
import { euiThemeVars } from '@kbn/ui-theme';
import React from 'react';
import { BehaviorSubject } from 'rxjs';
import { PresentationContainer } from '@kbn/presentation-containers';
Expand Down Expand Up @@ -157,6 +164,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
bookAttributesManager.bookTitle,
bookAttributesManager.bookSynopsis
);
const { euiTheme } = useEuiTheme();

return (
<div
Expand All @@ -182,7 +190,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
)}
<div
css={css`
padding: ${euiThemeVars.euiSizeM};
padding: ${euiTheme.size.m};
`}
>
<EuiFlexGroup
Expand Down
6 changes: 3 additions & 3 deletions examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { EuiBadge, EuiStat } from '@elastic/eui';
import { EuiBadge, EuiStat, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { DataView } from '@kbn/data-views-plugin/common';
import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
Expand All @@ -17,7 +17,6 @@ import {
initializeTimeRange,
useBatchedPublishingSubjects,
} from '@kbn/presentation-publishing';
import { euiThemeVars } from '@kbn/ui-theme';
import React, { useEffect } from 'react';
import { BehaviorSubject, switchMap, tap } from 'rxjs';
import { SEARCH_EMBEDDABLE_ID } from './constants';
Expand Down Expand Up @@ -124,6 +123,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
api,
Component: () => {
const [count, error] = useBatchedPublishingSubjects(count$, blockingError$);
const { euiTheme } = useEuiTheme();

useEffect(() => {
return () => {
Expand All @@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
<div
css={css`
width: 100%;
padding: ${euiThemeVars.euiSizeM};
padding: ${euiTheme.size.m};
`}
>
<EuiStat
Expand Down
71 changes: 38 additions & 33 deletions ...esentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
EuiPopover,
EuiToolTip,
IconType,
useEuiTheme,
} from '@elastic/eui';
import { ActionExecutionContext, buildContextMenuForActions } from '@kbn/ui-actions-plugin/public';

Expand All @@ -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';
Expand All @@ -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',
Expand All @@ -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<EmbeddableApiContext>) =>
(event: React.MouseEvent) => {
Expand Down Expand Up @@ -131,8 +119,25 @@ export const PresentationPanelHoverActions = ({
const rightHoverActionsRef = useRef<HTMLDivElement | null>(null);

const [combineHoverActions, setCombineHoverActions] = useState<boolean>(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<string>(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();
Expand All @@ -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 {
Expand All @@ -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');
Expand Down Expand Up @@ -396,7 +401,7 @@ export const PresentationPanelHoverActions = ({
<EuiNotificationBadge
data-test-subj={`embeddablePanelNotification-${notification.id}`}
key={notification.id}
css={{ marginTop: euiThemeVars.euiSizeXS, marginRight: euiThemeVars.euiSizeXS }}
css={{ marginTop: euiTheme.size.xs, marginRight: euiTheme.size.xs }}
onClick={() =>
notification.execute({ embeddable: api, trigger: panelNotificationTrigger })
}
Expand All @@ -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
Expand Down Expand Up @@ -463,7 +468,7 @@ export const PresentationPanelHoverActions = ({
})}
data-test-subj="embeddablePanelDragHandle"
css={css`
margin: ${euiThemeVars.euiSizeXS};
margin: ${euiTheme.size.xs};
`}
/>
</button>
Expand All @@ -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
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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}
`}
>
Expand All @@ -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}
`}
>
Expand Down
9 changes: 5 additions & 4 deletions ...ation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -35,6 +34,8 @@ export const usePresentationPanelHeaderActions = <
const [badges, setBadges] = useState<AnyApiAction[]>([]);
const [notifications, setNotifications] = useState<AnyApiAction[]>([]);

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.
Expand Down Expand Up @@ -167,7 +168,7 @@ export const usePresentationPanelHeaderActions = <
<EuiNotificationBadge
data-test-subj={`embeddablePanelNotification-${notification.id}`}
key={notification.id}
css={{ marginTop: euiThemeVars.euiSizeXS, marginRight: euiThemeVars.euiSizeXS }}
css={{ marginTop: euiTheme.size.xs, marginRight: euiTheme.size.xs }}
onClick={() =>
notification.execute({ embeddable: api, trigger: panelNotificationTrigger })
}
Expand All @@ -193,7 +194,7 @@ export const usePresentationPanelHeaderActions = <

return notificationComponent;
});
}, [api, notifications, showNotifications]);
}, [api, euiTheme.size.xs, notifications, showNotifications]);

return { badgeElements, notificationElements };
};
Loading

0 comments on commit bddbc7d

Please sign in to comment.