From 5603491fb2aa9191b03cc78bbe66ad1e2084ad44 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 5 Jun 2019 10:55:35 -0400
Subject: [PATCH] Clean up some classes and SASS

---
 .../embeddable_api/public/_variables.scss     |  1 -
 .../containers/embeddable_child_panel.tsx     |  4 +-
 .../open_context_menu.tsx                     |  2 +-
 .../public/panel/_embeddable_panel.scss       | 63 +++++++++----------
 .../embeddable_api/public/panel/_index.scss   |  3 +-
 .../public/panel/embeddable_panel.tsx         |  2 +-
 .../public/panel/panel_header/_index.scss     |  1 +
 .../panel/panel_header/panel_options_menu.tsx |  4 +-
 .../embeddable/visualize_embeddable.ts        |  2 +-
 9 files changed, 40 insertions(+), 42 deletions(-)
 create mode 100644 src/legacy/core_plugins/embeddable_api/public/panel/panel_header/_index.scss

diff --git a/src/legacy/core_plugins/embeddable_api/public/_variables.scss b/src/legacy/core_plugins/embeddable_api/public/_variables.scss
index 5f4f314ff9db71..1c5b1664eab683 100644
--- a/src/legacy/core_plugins/embeddable_api/public/_variables.scss
+++ b/src/legacy/core_plugins/embeddable_api/public/_variables.scss
@@ -1,2 +1 @@
-
 $embEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7));
diff --git a/src/legacy/core_plugins/embeddable_api/public/containers/embeddable_child_panel.tsx b/src/legacy/core_plugins/embeddable_api/public/containers/embeddable_child_panel.tsx
index de41b4b2f9d444..cd15b80795bcdf 100644
--- a/src/legacy/core_plugins/embeddable_api/public/containers/embeddable_child_panel.tsx
+++ b/src/legacy/core_plugins/embeddable_api/public/containers/embeddable_child_panel.tsx
@@ -82,8 +82,8 @@ class EmbeddableChildPanelUi extends React.Component<EmbeddableChildPanelUiProps
   }
 
   public render() {
-    const classes = classNames('embPanel panel-content', {
-      'panel-content-isLoading': this.state.loading,
+    const classes = classNames('embPanel embPanel__content', {
+      'embPanel__content-isLoading': this.state.loading,
     });
 
     return (
diff --git a/src/legacy/core_plugins/embeddable_api/public/context_menu_actions/open_context_menu.tsx b/src/legacy/core_plugins/embeddable_api/public/context_menu_actions/open_context_menu.tsx
index 814996706516be..eaf5adc26a05e1 100644
--- a/src/legacy/core_plugins/embeddable_api/public/context_menu_actions/open_context_menu.tsx
+++ b/src/legacy/core_plugins/embeddable_api/public/context_menu_actions/open_context_menu.tsx
@@ -144,7 +144,7 @@ export function openContextMenu(
     <I18nContext>
       <EuiPopover
         id="dashboardPanelContextMenu"
-        className="embPanel_optionsMenuPopover"
+        className="embPanel__optionsMenuPopover"
         button={container}
         isOpen={true}
         closePopover={onClose}
diff --git a/src/legacy/core_plugins/embeddable_api/public/panel/_embeddable_panel.scss b/src/legacy/core_plugins/embeddable_api/public/panel/_embeddable_panel.scss
index 37265188b99f6d..a39dcd0eb9e2c2 100644
--- a/src/legacy/core_plugins/embeddable_api/public/panel/_embeddable_panel.scss
+++ b/src/legacy/core_plugins/embeddable_api/public/panel/_embeddable_panel.scss
@@ -1,45 +1,33 @@
-
 .embPanel {
   z-index: auto;
   flex: 1;
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: $euiSizeL + 2px; // + 2px to account for border
   position: relative;
 
   // SASSTODO: The inheritence factor stemming from embeddables makes this class hard to change
-  .panel-content {
+  .embPanel__content {
     display: flex;
     flex: 1 1 100%;
     z-index: 1;
-    min-height: 0; // Absolute must for Firefox to scroll contents 
+    min-height: 0; // Absolute must for Firefox to scroll contents
   }
 
-
   // SASSTODO: Pretty sure this doesn't do anything since the flex-basis 100%,
   // but it MIGHT be fixing IE
-  .panel-content--fullWidth {
+  .embPanel__content--fullWidth {
     width: 100%;
   }
 
-  .panel-content-isLoading {
+  .embPanel__content-isLoading {
     // completely center the loading indicator
     justify-content: center;
     align-items: center;
   }
 }
 
-.embPanel--editing {
-  border-style: dashed;
-  border-color: $euiColorMediumShade;
-  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  &:hover,
-  &:focus {
-    @include euiSlightShadowHover;
-  }
-}
-
 // HEADER
 
 .embPanel__header {
@@ -60,17 +48,6 @@
   }
 }
 
-.embPanel--editing {
-  .embPanel__dragger {
-    transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance;
-  }
-
-  .embPanel__dragger:hover {
-    background-color: $embEditingModeHoverColor;
-    cursor: move;
-  }
-}
-
 .embPanel__dragger:not(.embPanel__title) {
   flex-grow: 1;
 }
@@ -91,7 +68,7 @@
   * 3. Always show in editing mode
   */
 
-.embPanel_optionsMenuButton {
+.embPanel__optionsMenuButton {
   background-color: transparentize($euiColorDarkestShade, .9);
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
@@ -102,7 +79,7 @@
 }
 
 .embPanel
-.embPanel_optionsMenuButton {
+.embPanel__optionsMenuButton {
   opacity: 0; /* 1 */
 
   &:focus {
@@ -110,15 +87,35 @@
   }
 }
 
-.embPanel_optionsMenuPopover[class*="-isOpen"],
+.embPanel__optionsMenuPopover[class*="-isOpen"],
 .embPanel:hover  {
-  .embPanel_optionsMenuButton {
+  .embPanel__optionsMenuButton {
     opacity: 1;
   }
 }
 
+// EDITING MODE
+
 .embPanel--editing {
-  .embPanel_optionsMenuButton {
+  border-style: dashed;
+  border-color: $euiColorMediumShade;
+  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
+
+  &:hover,
+  &:focus {
+    @include euiSlightShadowHover;
+  }
+
+  .embPanel__dragger {
+    transition: background-color $euiAnimSpeedFast $euiAnimSlightResistance;
+
+    &:hover {
+      background-color: $embEditingModeHoverColor;
+      cursor: move;
+    }
+  }
+
+  .embPanel__optionsMenuButton {
     opacity: 1; /* 3 */
   }
 }
diff --git a/src/legacy/core_plugins/embeddable_api/public/panel/_index.scss b/src/legacy/core_plugins/embeddable_api/public/panel/_index.scss
index e6049404dc0a19..8ff319f660072b 100644
--- a/src/legacy/core_plugins/embeddable_api/public/panel/_index.scss
+++ b/src/legacy/core_plugins/embeddable_api/public/panel/_index.scss
@@ -1,2 +1,3 @@
 @import './embeddable_panel';
-@import 'panel_header/panel_options_menu_form';
+
+@import './panel_header/index';
diff --git a/src/legacy/core_plugins/embeddable_api/public/panel/embeddable_panel.tsx b/src/legacy/core_plugins/embeddable_api/public/panel/embeddable_panel.tsx
index 2cd687fca86a38..015d2a49af0e6f 100644
--- a/src/legacy/core_plugins/embeddable_api/public/panel/embeddable_panel.tsx
+++ b/src/legacy/core_plugins/embeddable_api/public/panel/embeddable_panel.tsx
@@ -132,7 +132,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
           closeContextMenu={this.state.closeContextMenu}
           title={title}
         />
-        <div className="panel-content" ref={this.embeddableRoot} />
+        <div className="embPanel__content" ref={this.embeddableRoot} />
       </EuiPanel>
     );
   }
diff --git a/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/_index.scss b/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/_index.scss
new file mode 100644
index 00000000000000..b6cea833f65cfe
--- /dev/null
+++ b/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/_index.scss
@@ -0,0 +1 @@
+@import './panel_options_menu_form';
diff --git a/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_options_menu.tsx b/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_options_menu.tsx
index 5db87ab791ab42..351e007357e5af 100644
--- a/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_options_menu.tsx
+++ b/src/legacy/core_plugins/embeddable_api/public/panel/panel_header/panel_options_menu.tsx
@@ -82,7 +82,7 @@ class PanelOptionsMenuUi extends React.Component<PanelOptionsMenuUiProps, State>
       <EuiButtonIcon
         iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
         color="text"
-        className="embPanel_optionsMenuButton"
+        className="embPanel__optionsMenuButton"
         aria-label={intl.formatMessage({
           id: 'kbn.dashboard.panel.optionsMenu.panelOptionsButtonAriaLabel',
           defaultMessage: 'Panel options',
@@ -95,7 +95,7 @@ class PanelOptionsMenuUi extends React.Component<PanelOptionsMenuUiProps, State>
     return (
       <EuiPopover
         id="dashboardPanelContextMenu"
-        className="embPanel_optionsMenuPopover"
+        className="embPanel__optionsMenuPopover"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
diff --git a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
index d284bda9405ab4..7529f1e92678d4 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
+++ b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
@@ -180,7 +180,7 @@ export class VisualizeEmbeddable extends Embeddable {
       timeRange: containerState.timeRange,
       query: containerState.query,
       filters: containerState.filters,
-      cssClass: `panel-content panel-content--fullWidth`,
+      cssClass: `embPanel__content embPanel__content--fullWidth`,
       dataAttrs,
     };