Use EuiPanel to for dashboard panels (#22078) (#23717)

* Use EuiPanel to for dashboard panels * Fixed styles (#27) * Fixed styles - Removed extraneous panel styles no longer needed - Fixed overflow issue in FF * Couple classname adjustments * removed styles in expanded mode * remove styles in expanded mode
elastic · Oct 2, 2018 · ca84844 · ca84844
1 parent fc45377
commit ca84844
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 116 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss b/src/core_plugins/kibana/public/dashboard/grid/_dashboard_grid.scss
@@ -35,7 +35,7 @@
 }
 
 /**
- * .dshLayout-withMargins only affects the panel styles themselves, see ../panel
+ * .dshLayout-withoutMargins only affects the panel styles themselves, see ../panel
  */
 
 /**
@@ -57,10 +57,6 @@
 
 // REACT-GRID
 
-.react-grid-layout .dshPanel {
-  overflow: visible;
-}
-
 .react-grid-item {
   /**
    * Disable transitions from the library on each grid element.
@@ -87,6 +83,7 @@
   }
 
   &.react-draggable-dragging {
+    transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
     @include euiBottomShadowLarge;
     border-radius: $euiBorderRadius; // keeps shadow within bounds
   }

diff --git a/src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js b/src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js
@@ -70,7 +70,7 @@ function ResponsiveGrid({
     'dshLayout--viewing': isViewMode,
     'dshLayout--editing': !isViewMode,
     'dshLayout-isMaximizedPanel': maximizedPanelId !== undefined,
-    'dshLayout-withMargins': useMargins,
+    'dshLayout-withoutMargins': !useMargins,
   });
 
   const MARGINS = useMargins ? 8 : 0;

diff --git a/src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap b/src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap
@@ -2,69 +2,65 @@
 
 exports[`DashboardPanel matches snapshot 1`] = `
 <div
-  class="dshPanel"
+  class="euiPanel dshPanel dshPanel--editing"
+  data-test-subj="dashboardPanel"
 >
   <div
-    class="dshPanel__panel dshPanel__panel--editing"
-    data-test-subj="dashboardPanel"
+    class="dshPanel__header"
+    data-test-subj="dashboardPanelHeading-myembeddabletitle"
   >
+    <span
+      aria-label="Dashboard panel: my embeddable title"
+      class="dshPanel__title"
+      data-test-subj="dashboardPanelTitle"
+      title="my embeddable title"
+    >
+      my embeddable title
+    </span>
     <div
-      class="dshPanel__header"
-      data-test-subj="dashboardPanelHeading-myembeddabletitle"
+      class="dshPanel__headerButtonGroup"
     >
-      <span
-        aria-label="Dashboard panel: my embeddable title"
-        class="dshPanel__title"
-        data-test-subj="dashboardPanelTitle"
-        title="my embeddable title"
-      >
-        my embeddable title
-      </span>
       <div
-        class="dshPanel__headerButtonGroup"
+        class="euiPopover euiPopover--anchorDownRight euiPopover--withTitle dshPanel_optionsMenuPopover"
+        id="dashboardPanelContextMenu"
       >
         <div
-          class="euiPopover euiPopover--anchorDownRight euiPopover--withTitle dshPanel_optionsMenuPopover"
-          id="dashboardPanelContextMenu"
+          class="euiPopover__anchor"
         >
-          <div
-            class="euiPopover__anchor"
+          <button
+            aria-label="Panel options"
+            class="euiButtonIcon euiButtonIcon--text"
+            data-test-subj="dashboardPanelToggleMenuIcon"
+            type="button"
           >
-            <button
-              aria-label="Panel options"
-              class="euiButtonIcon euiButtonIcon--text"
-              data-test-subj="dashboardPanelToggleMenuIcon"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
             >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiButtonIcon__icon"
-                focusable="false"
-                height="16"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <path
-                    d="M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
-                    id="gear-a"
-                  />
-                </defs>
-                <use
-                  xlink:href="#gear-a"
+              <defs>
+                <path
+                  d="M.164 10.329L1.87 8 .163 5.67c.18-.601.43-1.19.758-1.757a8.197 8.197 0 0 1 1.142-1.535l2.872.313L6.099.05a8.166 8.166 0 0 1 3.8-.003l1.166 2.644 2.872-.313a8.166 8.166 0 0 1 1.899 3.293L14.13 8l1.706 2.33c-.18.601-.43 1.19-.758 1.757a8.197 8.197 0 0 1-1.142 1.535l-2.872-.313-1.164 2.641a8.166 8.166 0 0 1-3.8.003l-1.166-2.644-2.872.313a8.166 8.166 0 0 1-1.899-3.293zm4.663 1.986a1 1 0 0 1 1.023.591l.957 2.17c.79.134 1.597.132 2.387-.001l.956-2.169a1 1 0 0 1 1.023-.59l2.358.256a7.23 7.23 0 0 0 1.194-2.068l-1.401-1.913a1 1 0 0 1 0-1.182l1.4-1.912a7.165 7.165 0 0 0-1.192-2.069l-2.359.257a1 1 0 0 1-1.023-.591L9.193.924a7.165 7.165 0 0 0-2.387.001L5.85 3.094a1 1 0 0 1-1.023.59l-2.358-.256a7.23 7.23 0 0 0-1.194 2.068l1.401 1.913a1 1 0 0 1 0 1.182l-1.4 1.912c.28.751.681 1.45 1.192 2.069l2.359-.257zM8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                  id="gear-a"
                 />
-              </svg>
-            </button>
-          </div>
+              </defs>
+              <use
+                xlink:href="#gear-a"
+              />
+            </svg>
+          </button>
         </div>
       </div>
     </div>
-    <div
-      class="panel-content"
-      id="embeddedPanel"
-    />
   </div>
+  <div
+    class="panel-content"
+    id="embeddedPanel"
+  />
 </div>
 `;
diff --git a/src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss b/src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss
@@ -12,7 +12,7 @@
     flex: 1 1 100%;
     height: auto;
     z-index: 1;
-    background-color: inherit;
+    min-height: 0; // Absolute must for Firefox to scroll contents
   }
 
   // SASSTODO: Pretty sure this doesn't do anything since the flex-basis 100%,
@@ -24,64 +24,48 @@
   /**
    * 1. We want the doc-table-container to scroll only when embedded in a dashboard panel
    * 2. Fix overflow of vis's specifically for inside dashboard panels, lets the panel decide the overflow
+   * 3. Force a better looking scrollbar
    */
   .doc-table-container {
     flex: 1 1 0; /* 1 */
     overflow: auto; /* 1 */
   }
 
+  .visualization {
+    @include euiScrollBar; /* 3 */
+  }
+
   .visualization .vis-container {
     overflow: visible; /* 2 */
   }
 }
 
-// CONTENT
+.dshPanel--editing {
+  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
 
-.dshPanel__panel {
-  background-color: $euiColorEmptyShade;
-  border: 1px solid $euiColorEmptyShade;
-  overflow: hidden;
-
-  // maintain the 100% height of the panel
-  height: 100%;
-  flex: 1;
-
-  // flex layout allows us to define the visualize element as "fill available space"
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.dshPanel__panel--editing {
-  // SASSTOD: Change this back $euiBorderColor, when EUI adds !default to borders
-  border-color: $euiColorLightShade;
-
-  &:hover {
+  &:hover,
+  &:focus {
     border-color: $euiColorPrimary;
+    @include euiSlightShadowHover;
   }
 }
 
-// Adjust borders/margin/etc... for spaced out panels
-.dshLayout-withMargins {
-  .dshPanel__panel {
-    @include euiBottomShadowSmall;
-    // SASSTOD: Change this back $euiBorderColor, when EUI adds !default to borders
-    border-color: $euiColorLightShade;
-    border-radius: $euiBorderRadius;
-  }
+// LAYOUT MODES
 
-  .dshPanel__panel--editing {
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+// Adjust borders/etc... for non-spaced out and expanded panels
+.dshLayout-withoutMargins,
+.dshDashboardGrid__item--expanded {
+  // Remove border color unless in editing mode
+  .dshPanel:not(.dshPanel--editing) {
+    border-color: transparent;
+  }
 
-    &:hover,
-    &:focus {
-      border-color: $euiColorPrimary;
-      @include euiSlightShadowHover;
-    }
+  .dshPanel {
+    box-shadow: none;
+    border-radius: 0;
   }
 }
 
-
 // HEADER
 
 .dshPanel__header {
@@ -91,12 +75,6 @@
   display: flex;
   border: none;
   transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  // Add a rounded corner to stay within the bordered panel
-  .dshLayout-withMargins & {
-    border-top-left-radius: $euiBorderRadius - 1px;
-    border-top-right-radius: $euiBorderRadius - 1px;
-  }
 }
 
 .dshPanel__title {
@@ -111,7 +89,7 @@
   display: inline-block;
 }
 
-.dshPanel__panel--editing:hover {
+.dshPanel--editing:hover {
   .dshPanel__header {
     background-color: rgba($euiColorFullShade,.05) !important;
     cursor: move;

diff --git a/src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js b/src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js
@@ -25,6 +25,10 @@ import _ from 'lodash';
 import { PanelHeader } from './panel_header';
 import { PanelError } from './panel_error';
 
+import {
+  EuiPanel,
+} from '@elastic/eui';
+
 export class DashboardPanel extends React.Component {
   constructor(props) {
     super(props);
@@ -125,28 +129,24 @@ export class DashboardPanel extends React.Component {
 
   render() {
     const { viewOnlyMode, panel } = this.props;
-    const classes = classNames('dshPanel__panel', this.props.className, {
-      'dshPanel__panel--editing': !viewOnlyMode
+    const classes = classNames('dshPanel', this.props.className, {
+      'dshPanel--editing': !viewOnlyMode
     });
     return (
-      <div
-        className="dshPanel"
+      <EuiPanel
+        className={classes}
+        data-test-subj="dashboardPanel"
         onFocus={this.onFocus}
         onBlur={this.onBlur}
+        paddingSize="none"
       >
-        <div
-          className={classes}
-          data-test-subj="dashboardPanel"
-        >
-          <PanelHeader
-            panelId={panel.panelIndex}
-            embeddable={this.embeddable}
-          />
-
-          {this.renderContent()}
-
-        </div>
-      </div>
+        <PanelHeader
+          panelId={panel.panelIndex}
+          embeddable={this.embeddable}
+        />
+
+        {this.renderContent()}
+      </EuiPanel>
     );
   }
 }