diff --git a/packages/components/src/components/Actions/Actions.jsx b/packages/components/src/components/Actions/Actions.jsx index 3ac1d597c..7f83f3e29 100644 --- a/packages/components/src/components/Actions/Actions.jsx +++ b/packages/components/src/components/Actions/Actions.jsx @@ -15,11 +15,12 @@ import { Component } from 'react'; import { injectIntl } from 'react-intl'; import { Button, + MenuButton, + MenuItem, + MenuItemDivider, OverflowMenu, - OverflowMenuItem, - PrefixContext + OverflowMenuItem } from '@carbon/react'; -import { CaretDown } from '@carbon/react/icons'; import Modal from '../Modal'; @@ -44,48 +45,23 @@ class Actions extends Component { } }; - render() { - const { modal = {}, showDialog } = this.state; + getButton() { const { intl, items, kind, resource } = this.props; const isButton = kind === 'button'; - const dialog = showDialog ? ( - - {modal.body && modal.body(resource)} - - ) : null; - if (isButton && items.length === 1) { const { action, actionText, icon, modalProperties } = items[0]; return ( - <> - - {dialog} - + ); } @@ -94,33 +70,14 @@ class Actions extends Component { defaultMessage: 'Actions' }); - const carbonPrefix = this.context; - - // TODO: carbon11 - for `isButton` case, use MenuButton component instead - return ( - <> - ( - - {title} - - - ) - : undefined - } + if (isButton) { + return ( + {items.map(item => { const { @@ -133,25 +90,93 @@ class Actions extends Component { } = item; const disabled = disable && disable(resource); return ( - - this.handleClick(() => action(resource), modalProperties) - } - requireTitle - /> + <> + {hasDivider && } + + this.handleClick(() => action(resource), modalProperties) + } + /> + ); })} - + + ); + } + return ( + + {items.map(item => { + const { + actionText, + action, + danger, + disable, + hasDivider, + modalProperties + } = item; + const disabled = disable && disable(resource); + return ( + + this.handleClick(() => action(resource), modalProperties) + } + requireTitle + /> + ); + })} + + ); + } + + render() { + const { modal = {}, showDialog } = this.state; + const { intl, resource } = this.props; + + const dialog = showDialog ? ( + + {modal.body && modal.body(resource)} + + ) : null; + + return ( + <> + {this.getButton()} {dialog} ); } } -Actions.contextType = PrefixContext; export default injectIntl(Actions); diff --git a/packages/components/src/components/Actions/_Actions.scss b/packages/components/src/components/Actions/_Actions.scss deleted file mode 100644 index af6815daa..000000000 --- a/packages/components/src/components/Actions/_Actions.scss +++ /dev/null @@ -1,16 +0,0 @@ -/* -Copyright 2022-2024 The Tekton Authors -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. -*/ - -.tkn--actions-dropdown--button { - inline-size: auto; -} diff --git a/src/scss/App.scss b/src/scss/App.scss index c5b52f452..2ee7f9332 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -32,7 +32,6 @@ limitations under the License. @use '@tektoncd/dashboard-components/src/scss/common'; @use '@tektoncd/dashboard-components/src/scss/Run'; -@use '@tektoncd/dashboard-components/src/components/Actions/Actions'; @use '@tektoncd/dashboard-components/src/components/DataTableSkeleton/DataTableSkeleton'; @use '@tektoncd/dashboard-components/src/components/DeleteModal/DeleteModal'; @use '@tektoncd/dashboard-components/src/components/DetailsHeader/DetailsHeader'; diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss index 860f336bf..cc8580093 100644 --- a/src/scss/_carbon.scss +++ b/src/scss/_carbon.scss @@ -49,6 +49,7 @@ limitations under the License. @use '@carbon/react/scss/components/link'; @use '@carbon/react/scss/components/list'; @use '@carbon/react/scss/components/loading'; +@use '@carbon/react/scss/components/menu'; @use '@carbon/react/scss/components/modal'; @use '@carbon/react/scss/components/notification'; @use '@carbon/react/scss/components/overflow-menu';