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 6d69138
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 40 deletions.
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 };
};
6 changes: 3 additions & 3 deletions src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -30,6 +29,7 @@ export const PresentationPanel = <
}
) => {
const { Component, hidePanelChrome, ...passThroughProps } = props;
const { euiTheme } = useEuiTheme();
const { loading, value, error } = useAsync(async () => {
if (hidePanelChrome) {
return {
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 6d69138

Please sign in to comment.