diff --git a/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx b/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
index efa97fdc25..e66eae6fa8 100644
--- a/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
+++ b/packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx
@@ -29,8 +29,9 @@ import {
Tooltip,
EmptyStateLayout,
LinkButton,
- Menu,
Dialog,
+ SimpleMenu,
+ MenuItem,
} from '@strapi/design-system';
import {
CheckCircle,
@@ -85,7 +86,7 @@ const ReleaseInfoWrapper = styled(Flex)`
border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
`;
-const StyledMenuItem = styled(Menu.Item)<{
+const StyledMenuItem = styled(MenuItem)<{
disabled?: boolean;
$variant?: 'neutral' | 'danger';
}>`
@@ -408,90 +409,70 @@ const ReleaseDetailsLayout = ({
primaryAction={
!release.releasedAt && (
-
- {/*
- TODO Fix in the DS
- - tag={IconButton} has TS error: Property 'icon' does not exist on type 'IntrinsicAttributes & TriggerProps & RefAttributes'
- - The Icon doesn't actually show unless you hack it with some padding...and it's still a little strange
- */}
-
-
-
- {/*
- TODO: Using Menu instead of SimpleMenu mainly because there is no positioning provided from the DS,
- Refactor this once fixed in the DS
- */}
-
-
-
-
-
-
- {formatMessage({
- id: 'content-releases.header.actions.edit',
- defaultMessage: 'Edit',
- })}
-
-
-
-
-
-
-
- {formatMessage({
- id: 'content-releases.header.actions.delete',
- defaultMessage: 'Delete',
- })}
-
-
-
-
-
-
+ }
+ variant="tertiary"
+ endIcon={null}
+ paddingLeft={2}
+ paddingRight={2}
+ aria-label={formatMessage({
+ id: 'content-releases.header.actions.open-release-actions',
+ defaultMessage: 'Release edit and delete menu',
+ })}
+ popoverPlacement="bottom-end"
+ >
+
+
+
+
{formatMessage({
- id: 'content-releases.header.actions.created',
- defaultMessage: 'Created',
+ id: 'content-releases.header.actions.edit',
+ defaultMessage: 'Edit',
})}
-
-
- {formatMessage(
- {
- id: 'content-releases.header.actions.created.description',
- defaultMessage:
- '{hasCreatedByUser, select, true { by {createdBy}} other { by deleted user}}',
- },
- { createdBy: getCreatedByUser(), hasCreatedByUser }
- )}
+
+
+
+
+
+
+ {formatMessage({
+ id: 'content-releases.header.actions.delete',
+ defaultMessage: 'Delete',
+ })}
-
-
-
+
+
+
+
+ {formatMessage({
+ id: 'content-releases.header.actions.created',
+ defaultMessage: 'Created',
+ })}
+
+
+
+ {formatMessage(
+ {
+ id: 'content-releases.header.actions.created.description',
+ defaultMessage:
+ '{hasCreatedByUser, select, true { by {createdBy}} other { by deleted user}}',
+ },
+ { createdBy: getCreatedByUser(), hasCreatedByUser }
+ )}
+
+
+