fix(plugins/plugin-client-common): more DropDown theming fixes

Fixes #4618

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

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 => {

plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss

@@ -18,28 +18,37 @@
 
 $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 {
     fill: currentColor;
   }
   .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 {

plugins/plugin-client-common/web/scss/components/DropDown/PatternFly.scss

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.pf-c-dropdown__toggle:focus {
+  outline: none;
+}