[8.x] [Dashboard Usability] Remove borders from presentation panel an…

…d CSS clean up for hover actions (#198454) (#200051) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard Usability] Remove borders from presentation panel and CSS clean up for hover actions (#198454)](#198454)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Catherine Liu <[email protected]>
elastic · Nov 13, 2024 · 9b162c5 · 9b162c5
1 parent 1b38ec1
commit 9b162c5
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 243 deletions.
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
@@ -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
@@ -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
@@ -128,7 +128,7 @@ Default.args = {
   hideHeader: false,
   loading: false,
   showShadow: false,
-  showBorder: true,
+  showBorder: false,
   title: 'Hello World',
   viewMode: true,
 };

diff --git a/...plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts b/...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
@@ -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;
-    }
-  }
-}
+.embPanel__descriptionTooltipAnchor {
+  padding: $euiSizeXS;
+}