fix(plugins/plugin-client-common): stop using Carbon's TooltipIcon fo…

…r DropDown 1) carbon specific, not patternfly-ified 2) tooltip renders either below (carbon dropdown) or above (patternfly dropdown) the dropdown, so that you see both simultaneously 3) with carbon dropdown + carbon tooltip, you get a "nested button" react validation error also there are some spurious hover effect issues with dropdown, e.g. in the Terminal white on gray for the kebab Fixes #4767
kubernetes-sigs · May 29, 2020 · be04d20 · be04d20
1 parent d627272
commit be04d20
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 25 deletions.
diff --git a/packages/test/src/api/sidecar-expect.ts b/packages/test/src/api/sidecar-expect.ts
@@ -100,7 +100,7 @@ export const badge = (title: string, css?: string, absent = false) => async (app
 }
 
 export const button = (button: { mode: string; label?: string }) => async (app: Application) => {
-  await expectText(app, button.label || button.mode)(Selectors.SIDECAR_TOOLBAR_BUTTON(button.mode))
+  await app.client.waitForVisible(Selectors.SIDECAR_TOOLBAR_BUTTON(button.mode))
   return app
 }
 

diff --git a/plugins/plugin-client-common/src/components/Views/Sidecar/ToolbarButton.tsx b/plugins/plugin-client-common/src/components/Views/Sidecar/ToolbarButton.tsx
@@ -15,7 +15,6 @@
  */
 
 import * as React from 'react'
-import { TooltipIcon } from 'carbon-components-react'
 import {
   Tab as KuiTab,
   Button,
@@ -35,8 +34,6 @@ interface Props {
   }
 }
 
-import '../../../../web/css/static/Tooltip.scss'
-
 export default class ToolbarButton<T extends ResourceWithMetadata = ResourceWithMetadata> extends React.PureComponent<
   Props
 > {
@@ -83,14 +80,8 @@ export default class ToolbarButton<T extends ResourceWithMetadata = ResourceWith
         data-mode={button.mode}
         onClick={this.buttonOnclick.bind(this)}
       >
-        <span role="tab">
-          {button.icon ? (
-            <TooltipIcon className="zoomable" direction="bottom" align="end" tooltipText={button.label || button.mode}>
-              {button.icon}
-            </TooltipIcon>
-          ) : (
-            button.label || button.mode
-          )}
+        <span role="tab" title={button.label || button.mode}>
+          {button.icon ? button.icon : button.label || button.mode}
         </span>
       </a>
     )

diff --git a/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx b/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx
@@ -357,7 +357,12 @@ export default class Input extends InputProvider {
   private dropdown() {
     if (!isActive(this.props.model)) {
       const actions = this.removeAction().concat(this.screenshotAction())
-      return <DropDown actions={actions} className="kui--repl-block-right-element small-left-pad" />
+      return (
+        <DropDown
+          actions={actions}
+          className="kui--repl-block-right-element small-left-pad kui--toolbar-button-with-icon"
+        />
+      )
     }
   }
 

diff --git a/plugins/plugin-client-common/web/css/static/ToolbarButton.scss b/plugins/plugin-client-common/web/css/static/ToolbarButton.scss
@@ -7,11 +7,12 @@
 
   svg,
   .bx--tooltip__trigger svg {
-    fill: var(--color-sidecar-toolbar-foreground);
+    fill: currentColor;
   }
 
   &:hover {
     background-color: var(--color-table-border3);
+
     svg {
       fill: var(--color-text-01);
     }

diff --git a/plugins/plugin-client-common/web/css/static/repl.scss b/plugins/plugin-client-common/web/css/static/repl.scss
@@ -79,8 +79,8 @@
 }
 
 [kui-theme-style] .kui--repl-block-right-element {
-  color: var(--color-text-02);
-  font-size: 0.6875em;
+  color: inherit;
+  font-size: 0.75em;
 }
 
 .repl-result,

diff --git a/plugins/plugin-client-common/web/css/static/sidecar-main.css b/plugins/plugin-client-common/web/css/static/sidecar-main.css
@@ -370,9 +370,10 @@
     a {
       padding: 3px;
       display: flex;
+      color: var(--color-text-01);
 
       svg {
-        fill: var(--color-text-01);
+        fill: currentColor;
       }
     }
 

diff --git a/plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss b/plugins/plugin-client-common/web/scss/components/DropDown/Carbon.scss
@@ -23,6 +23,12 @@ $button-hover-color: var(--color-table-border3);
 $option-hover-color: var(--color-base02);
 
 [kui-theme-style] {
+  .sidecar-bottom-stripe-button .bx--overflow-menu.bx--overflow-menu--open svg,
+  .sidecar-bottom-stripe-button:hover .bx--overflow-menu.bx--overflow-menu--open svg,
+  .kui--toolbar-button-with-icon:hover .bx--overflow-menu.bx--overflow-menu--open svg {
+    fill: var(--color-base01);
+  }
+
   .bx--overflow-menu {
     width: 1.5em;
     height: 1.5em;
@@ -31,9 +37,6 @@ $option-hover-color: var(--color-base02);
     }
     &.bx--overflow-menu--open {
       background-color: $bg-open-color;
-      svg {
-        fill: $bg-color;
-      }
     }
   }
   .bx--overflow-menu--divider {
@@ -58,10 +61,6 @@ $option-hover-color: var(--color-base02);
       background-color: $bg-open-color;
     }
 
-    svg[data-mode='selected container'] {
-      padding-right: 2px;
-    }
-
     &:after {
       background-color: $bg-open-color;
       top: -0.1875em;
@@ -84,7 +83,7 @@ $option-hover-color: var(--color-base02);
   }
   .bx--overflow-menu-options__btn {
     font-size: 1em;
-    line-height: 1.125em;
+    line-height: 1.25em;
     max-width: unset;
     color: $color;