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 { - private onClose() { - if (this.props.onClose) { - this.props.onClose() - } - } - public render() { return ( {this.props.actions.map((_, idx) => ( this.setState(curState => ({ isOpen: !curState.isOpen }))} + onSelect={() => { + this.setState(curState => ({ isOpen: !curState.isOpen })) + if (this.props.onClose) { + this.props.onClose.bind(this) + } + }} toggle={ { 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 { diff --git a/plugins/plugin-client-common/web/scss/components/DropDown/PatternFly.scss b/plugins/plugin-client-common/web/scss/components/DropDown/PatternFly.scss new file mode 100644 index 00000000000..5e137873e5d --- /dev/null +++ b/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; +}