From 2cd520df470988306170e6e1f06cb2d4e5372148 Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Sat, 16 May 2020 16:00:46 -0400
Subject: [PATCH] fix(plugins/plugin-client-common): more DropDown theming
 fixes

Fixes #4618
---
 .../components/spi/DropDown/impl/Carbon.tsx   |  8 +------
 .../spi/DropDown/impl/PatternFly.tsx          |  9 +++++++-
 .../web/scss/components/DropDown/Carbon.scss  | 21 +++++++++++++------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/plugins/plugin-client-common/src/components/spi/DropDown/impl/Carbon.tsx b/plugins/plugin-client-common/src/components/spi/DropDown/impl/Carbon.tsx
index 7e51741f192..845af3f02e8 100644
--- a/plugins/plugin-client-common/src/components/spi/DropDown/impl/Carbon.tsx
+++ b/plugins/plugin-client-common/src/components/spi/DropDown/impl/Carbon.tsx
@@ -22,19 +22,13 @@ import Props from '../model'
 import '../../../../../web/scss/components/DropDown/Carbon.scss'
 
 export default class CarbonDropDown extends React.PureComponent<Props> {
-  private onClose() {
-    if (this.props.onClose) {
-      this.props.onClose()
-    }
-  }
-
   public render() {
     return (
       <OverflowMenu
         flipped
         menuOptionsClass={this.props.className}
         className={this.props.className}
-        onClose={this.onClose.bind(this)}
+        onClose={this.props.onClose && this.props.onClose.bind(this)}
       >
         {this.props.actions.map((_, idx) => (
           <OverflowMenuItem
diff --git a/plugins/plugin-client-common/src/components/spi/DropDown/impl/PatternFly.tsx b/plugins/plugin-client-common/src/components/spi/DropDown/impl/PatternFly.tsx
index ba4128d7cc8..d697d8450be 100644
--- a/plugins/plugin-client-common/src/components/spi/DropDown/impl/PatternFly.tsx
+++ b/plugins/plugin-client-common/src/components/spi/DropDown/impl/PatternFly.tsx
@@ -19,6 +19,8 @@ import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core'
 
 import Props, { Action } from '../model'
 
+import '../../../../../web/scss/components/DropDown/PatternFly.scss'
+
 interface State {
   isOpen: boolean
 }
@@ -45,7 +47,12 @@ export default class PatternFlyDropDown extends React.PureComponent<Props, State
     return (
       <Dropdown
         className={this.props.className}
-        onSelect={() => this.setState(curState => ({ isOpen: !curState.isOpen }))}
+        onSelect={() => {
+          this.setState(curState => ({ isOpen: !curState.isOpen }))
+          if (this.props.onClose) {
+            this.props.onClose.bind(this)
+          }
+        }}
         toggle={
           <KebabToggle
             onToggle={isOpen => {
diff --git a/plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss b/plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss
index 224e95701db..7e4207bd9a7 100644
--- a/plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss
+++ b/plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss
@@ -18,17 +18,19 @@
 
 $color: var(--color-text-01);
 $bg-color: var(--color-base01);
-$hover-color: var(--color-table-border3);
+$bg-open-color: var(--color-base03);
+$button-hover-color: var(--color-table-border3);
+$option-hover-color: var(--color-base02);
 
 [kui-theme-style] {
   .bx--overflow-menu {
     width: 1.5em;
     height: 1.5em;
     &:hover {
-      background-color: $hover-color;
+      background-color: $button-hover-color;
     }
     &.bx--overflow-menu--open {
-      background-color: $bg-color;
+      background-color: $bg-open-color;
     }
   }
   .bx--overflow-menu__icon {
@@ -36,10 +38,17 @@ $hover-color: var(--color-table-border3);
   }
   .bx--overflow-menu-options {
     width: 10em;
+    background-color: $bg-color;
+
+    &.bx--overflow-menu-options--open {
+      background-color: $bg-open-color;
+    }
 
-    &,
     &:after {
-      background-color: $bg-color;
+      background-color: $bg-open-color;
+      top: -0.1875em;
+      width: 1.4em;
+      height: 0.1875em;
     }
     &:active,
     &:focus {
@@ -49,7 +58,7 @@ $hover-color: var(--color-table-border3);
   .bx--overflow-menu-options__option {
     height: 2.5em;
     &:hover {
-      background-color: $hover-color;
+      background-color: $option-hover-color;
     }
   }
   .bx--overflow-menu--flip .bx--overflow-menu-options__btn {