diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss b/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss index 49a6b01049da7..ce010aa4cf9a5 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss +++ b/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss @@ -113,10 +113,12 @@ z-index: $euiZLevel9; top: -$euiSizeXL; + // Show hover actions with drag handle .embPanel__hoverActions:has(.embPanel--dragHandle) { opacity: 1; } + // Hide hover actions without drag handle .embPanel__hoverActions:not(:has(.embPanel--dragHandle)) { opacity: 0; } diff --git a/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss b/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss index 93a95e1ef37e5..2b7ec068f827d 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss +++ b/src/plugins/dashboard/public/dashboard_container/component/grid/_dashboard_panel.scss @@ -1,44 +1,11 @@ -/** - * EDITING MODE - * Use .dshLayout--editing to target editing state because - * .embPanel--editing doesn't get updating without a hard refresh - */ - -.dshLayout--editing { - // change the style of the hover actions border to a dashed line in edit mode - .embPanel__hoverActionsAnchor { - .embPanel__hoverActionsWrapper { - .embPanel__hoverActions { - border-color: $euiColorMediumShade; - border-style: dashed; - } - } - } -} - // LAYOUT MODES // Adjust borders/etc... for non-spaced out and expanded panels .dshLayout-withoutMargins { - .embPanel, - .embPanel__hoverActionsAnchor { - box-shadow: none; - outline: none; - border-radius: 0; - } - - &.dshLayout--editing { - .embPanel__hoverActionsAnchor:hover { - outline: 1px dashed $euiColorMediumShade; - } - } - - .embPanel__hoverActionsAnchor:hover { - outline: $euiBorderThin; - z-index: $euiZLevel2; - } + margin-top: $euiSizeS; .embPanel__content, - .dshDashboardGrid__item--highlighted, + .embPanel, + .embPanel__hoverActionsAnchor, .lnsExpressionRenderer { border-radius: 0; } diff --git a/src/plugins/embeddable/public/__stories__/embeddable_panel.stories.tsx b/src/plugins/embeddable/public/__stories__/embeddable_panel.stories.tsx index 6e1f58d9689a6..bcb0af1cf9064 100644 --- a/src/plugins/embeddable/public/__stories__/embeddable_panel.stories.tsx +++ b/src/plugins/embeddable/public/__stories__/embeddable_panel.stories.tsx @@ -128,7 +128,7 @@ Default.args = { hideHeader: false, loading: false, showShadow: false, - showBorder: true, + showBorder: false, title: 'Hello World', viewMode: true, }; diff --git a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts index 9de624c7bcf6a..416c18c7f457f 100644 --- a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts +++ b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts @@ -72,6 +72,7 @@ export const getLensAttributes = (group: EventAnnotationGroupConfig, timeField: language: 'kuery', }, filters: [], + showBorder: false, datasourceStates: { formBased: { layers: { diff --git a/src/plugins/presentation_panel/public/panel_component/_presentation_panel.scss b/src/plugins/presentation_panel/public/panel_component/_presentation_panel.scss index 5094cf6b02ba3..86f9e8d378e5a 100644 --- a/src/plugins/presentation_panel/public/panel_component/_presentation_panel.scss +++ b/src/plugins/presentation_panel/public/panel_component/_presentation_panel.scss @@ -6,8 +6,6 @@ height: 100%; min-height: $euiSizeL + 2px; // + 2px to account for border position: relative; - border: none; - outline: $euiBorderThin; &-isLoading { // completely center the loading indicator @@ -105,47 +103,9 @@ } } -// OPTIONS MENU - -/** - * 1. Use opacity to make this element accessible to screen readers and keyboard. - * 2. Show on focus to enable keyboard accessibility. - * 3. Always show in editing mode - */ - -.embPanel__optionsMenuButton { - background-color: transparentize($euiColorLightShade, .5); - border-bottom-right-radius: 0; - border-top-left-radius: 0; - - &:focus { - background-color: transparentize($euiColorLightestShade, .5); - } -} - -.embPanel__optionsMenuPopover-loading { - width: $euiSizeS * 32; -} - -.embPanel__optionsMenuPopover-notification::after { - position: absolute; - top: 0; - right: 0; - content: '•'; - transform: translate(50%, -50%); - color: $euiColorAccent; - font-size: $euiSizeL; -} - // EDITING MODE - .embPanel--editing { - transition: all $euiAnimSpeedFast $euiAnimSlightResistance; - outline: 1px dashed $euiColorMediumShade; - .embPanel--dragHandle { - transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance; - .embPanel--dragHandle:hover { background-color: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7)); cursor: move; @@ -170,56 +130,14 @@ z-index: $euiZLevel1; } -.embPanel__hoverActionsAnchor { - position: relative; - height: 100%; - - .embPanel__hoverActionsWrapper { - height: $euiSizeXL; - position: absolute; - top: 0; - display: flex; - justify-content: space-between; - padding: 0 $euiSize; - flex-wrap: nowrap; - min-width: 100%; - z-index: -1; - pointer-events: none; // Prevent hover actions wrapper from blocking interactions with other panels - } - - .embPanel__hoverActions { - opacity: 0; - padding: calc($euiSizeXS - 1px); - display: flex; - flex-wrap: nowrap; - border: $euiBorderThin; - - background-color: $euiColorEmptyShade; - height: $euiSizeXL; - - pointer-events: all; // Re-enable pointer-events for hover actions - } - - .embPanel--dragHandle { - cursor: move; +.embPanel--dragHandle { + cursor: move; - img { - pointer-events: all !important; - } + img { + pointer-events: all !important; } +} - .embPanel__descriptionTooltipAnchor { - padding: $euiSizeXS; - } - - &:hover .embPanel__hoverActionsWrapper, - &:focus-within .embPanel__hoverActionsWrapper, - .embPanel__hoverActionsWrapper--lockHoverActions { - z-index: $euiZLevel9; - top: -$euiSizeXL; - - .embPanel__hoverActions { - opacity: 1; - } - } -} \ No newline at end of file +.embPanel__descriptionTooltipAnchor { + padding: $euiSizeXS; +} 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 469a1f8c4f6e3..b29563713d365 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 @@ -54,6 +54,9 @@ 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', @@ -67,12 +70,14 @@ const QUICK_ACTION_IDS = { const ALLOWED_NOTIFICATIONS = ['ACTION_FILTERS_NOTIFICATION'] as const; -const ALL_ROUNDED_CORNERS = `border-radius: ${euiThemeVars.euiBorderRadius}; +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 TOP_ROUNDED_CORNERS = `border-top-left-radius: ${euiThemeVars.euiBorderRadius}; - border-top-right-radius: ${euiThemeVars.euiBorderRadius}; - border-bottom: 0 !important; - `; const createClickHandler = (action: AnyApiAction, context: ActionExecutionContext) => @@ -101,6 +106,7 @@ export const PresentationPanelHoverActions = ({ className, viewMode, showNotifications = true, + showBorder, }: { index?: number; api: DefaultPresentationPanelApi | null; @@ -110,6 +116,7 @@ export const PresentationPanelHoverActions = ({ className?: string; viewMode?: ViewMode; showNotifications?: boolean; + showBorder?: boolean; }) => { const [quickActions, setQuickActions] = useState([]); const [contextMenuPanels, setContextMenuPanels] = useState([]); @@ -195,7 +202,6 @@ export const PresentationPanelHoverActions = ({ ); const hideTitle = hidePanelTitle || parentHideTitle; - const showDescription = description && (!title || hideTitle); const quickActionIds = useMemo( @@ -429,7 +435,7 @@ export const PresentationPanelHoverActions = ({ onClick={() => { setIsContextMenuOpen(!isContextMenuOpen); if (apiCanLockHoverActions(api)) { - api?.lockHoverActions(!hasLockedHoverActions); + api.lockHoverActions(!hasLockedHoverActions); } }} iconType="boxesVertical" @@ -451,26 +457,81 @@ export const PresentationPanelHoverActions = ({ /> ); + const hasHoverActions = quickActionElements.length || contextMenuPanels.lastIndexOf.length; + return (
{children} {api ? (
{viewMode === 'edit' && !combineHoverActions ? (
@@ -490,72 +552,75 @@ export const PresentationPanelHoverActions = ({ ) : (
// necessary for the right hover actions to align correctly when left hover actions are not present )} -
- {viewMode === 'edit' && combineHoverActions && dragHandle} - {showNotifications && notificationElements} - {showDescription && ( - - )} - {quickActionElements.map( - ({ iconType, 'data-test-subj': dataTestSubj, onClick, name }, i) => ( - - - - ) - )} - {contextMenuPanels.length ? ( - - + {viewMode === 'edit' && combineHoverActions && dragHandle} + {showNotifications && notificationElements} + {showDescription && ( + - - ) : null} -
+ )} + {quickActionElements.map( + ({ iconType, 'data-test-subj': dataTestSubj, onClick, name }, i) => ( + + + + ) + )} + {contextMenuPanels.length ? ( + + + + ) : null} +
+ ) : null}
) : null}
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 7a403261b5995..3f509ebdc0a6c 100644 --- a/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx +++ b/src/plugins/presentation_panel/public/panel_component/presentation_panel.tsx @@ -14,6 +14,8 @@ 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'; @@ -55,7 +57,11 @@ export const PresentationPanel = < ); diff --git a/src/plugins/presentation_panel/public/panel_component/presentation_panel_internal.tsx b/src/plugins/presentation_panel/public/panel_component/presentation_panel_internal.tsx index ccf2e694d1b7a..d8c85350f3801 100644 --- a/src/plugins/presentation_panel/public/panel_component/presentation_panel_internal.tsx +++ b/src/plugins/presentation_panel/public/panel_component/presentation_panel_internal.tsx @@ -92,7 +92,7 @@ export const PresentationPanelInternal = < return ( .embPanel--dragHandle { diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx index a7760014dec8c..a0079568803b6 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx +++ b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx @@ -288,8 +288,5 @@ const Wrapper = styled.div<{ right: 50%; transform: translate(50%, -50%); } - .embPanel { - outline: none; - } } `; diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx index 0461cb8888be5..6b264a4dc759f 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx @@ -43,19 +43,6 @@ const LensComponentWrapper = styled.div<{ height: ${({ $height }) => ($height ? `${$height}px` : 'auto')}; width: ${({ width }) => width ?? 'auto'}; - .embPanel { - outline: none; - } - - .embPanel__hoverActions.embPanel__hoverActionsRight { - border-radius: 6px !important; - border-bottom: 1px solid #d3dae6 !important; - } - - .embPanel__hoverActionsAnchor .embPanel__hoverActionsWrapper { - top: -20px; - } - .expExpressionRenderer__expression { padding: 2px 0 0 0 !important; } diff --git a/x-pack/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx b/x-pack/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx index 3f3a5431c2c1d..bdd86a09ba231 100644 --- a/x-pack/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx +++ b/x-pack/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx @@ -40,11 +40,6 @@ interface EmbeddableMapProps { const EmbeddableMapRatioHolder = styled.div.attrs(() => ({ className: 'siemEmbeddable__map', }))` - .embPanel { - border: none; - box-shadow: none; - } - .mapToolbarOverlay__button { display: none; }