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 && }
+
+
+ );
+ }
+ 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';