Merge pull request #9 from cchaos/2019-05-30-embeddable-api-plugin__d…

…esign

Clean up some classes and SASS

src/legacy/core_plugins/embeddable_api/public/_variables.scss

@@ -1,2 +1 @@
-
 $embEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7));

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 (

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}

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,23 +79,43 @@
 }
 
 .embPanel
-.embPanel_optionsMenuButton {
+.embPanel__optionsMenuButton {
   opacity: 0; /* 1 */
 
   &:focus {
     opacity: 1; /* 2 */
   }
 }
 
-.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 */
   }
 }

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';

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>
     );
   }

src/legacy/core_plugins/embeddable_api/public/panel/panel_header/_index.scss

@@ -0,0 +1 @@
+@import './panel_options_menu_form';

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}

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,
     };