feat: fix wrong menu item component from forma (#1934)

* feat: fix wrong menu item component from forma

* feat: import section title directly

Author: missating

apps/entry-app-collapsible/package.json

@@ -8,9 +8,9 @@
     "@contentful/f36-components": "^5.1.1",
     "@contentful/f36-icons": "^5.4.0",
     "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/field-editor-rich-text": "^3.27.7",
-    "@contentful/field-editor-shared": "^1.6.2",
-    "@contentful/field-editor-single-line": "^1.4.5",
+    "@contentful/field-editor-rich-text": "^4.12.2",
+    "@contentful/field-editor-shared": "^2.12.2",
+    "@contentful/field-editor-single-line": "^1.8.5",
     "emotion": "^10.0.17",
     "prop-types": "^15.7.2",
     "react": "^18.3.1",

apps/rich-text-app/package.json

@@ -6,8 +6,8 @@
     "@contentful/app-sdk": "^4.17.1",
     "@contentful/f36-components": "^5.1.1",
     "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/field-editor-rich-text": "^3.4.21",
-    "@contentful/field-editor-single-line": "^1.2.0",
+    "@contentful/field-editor-rich-text": "^4.12.2",
+    "@contentful/field-editor-single-line": "^1.8.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

packages/reference/src/assets/WrappedAssetCard/AssetCardActions.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Menu, Text } from '@contentful/f36-components';
+import { MenuItem, Text, MenuSectionTitle } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
 import { shortenStorageUnit } from '@contentful/field-editor-shared';
 import { css } from 'emotion';
@@ -57,8 +57,8 @@ export function renderAssetInfo(props: { entityFile: File }) {
   const image = get(entityFile, 'details.image');
 
   return [
-    <Menu.SectionTitle key="file-section">File info</Menu.SectionTitle>,
-    <Menu.Item
+    <MenuSectionTitle key="file-section">File info</MenuSectionTitle>,
+    <MenuItem
       key="file-information"
       className={styles.fileInformation.menuItem}
       isDisabled
@@ -94,8 +94,8 @@ export function renderAssetInfo(props: { entityFile: File }) {
           </>
         )}
       </dl>
-    </Menu.Item>,
-  ].map((item, i) => <Menu key={i}>{item}</Menu>);
+    </MenuItem>,
+  ];
 }
 
 export function renderActions(props: {
@@ -107,14 +107,14 @@ export function renderActions(props: {
   const { entityFile, isDisabled, onEdit, onRemove } = props;
 
   return [
-    <Menu.SectionTitle key="section-title">Actions</Menu.SectionTitle>,
+    <MenuSectionTitle key="section-title">Actions</MenuSectionTitle>,
     onEdit ? (
-      <Menu.Item key="edit" onClick={onEdit} testId="card-action-edit">
+      <MenuItem key="edit" onClick={onEdit} testId="card-action-edit">
         Edit
-      </Menu.Item>
+      </MenuItem>
     ) : null,
     entityFile ? (
-      <Menu.Item
+      <MenuItem
         key="download"
         onClick={() => {
           if (typeof entityFile.url === 'string') {
@@ -124,14 +124,12 @@ export function renderActions(props: {
         testId="card-action-download"
       >
         Download
-      </Menu.Item>
+      </MenuItem>
     ) : null,
     onRemove && !isDisabled ? (
-      <Menu.Item key="remove" onClick={onRemove} testId="card-action-remove">
+      <MenuItem key="remove" onClick={onRemove} testId="card-action-remove">
         Remove
-      </Menu.Item>
+      </MenuItem>
     ) : null,
-  ]
-    .filter((item) => item)
-    .map((item, i) => <Menu key={i}>{item}</Menu>);
+  ].filter((item) => item);
 }

packages/reference/src/entries/WrappedEntryCard/WrappedEntryCard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { SpaceAPI } from '@contentful/app-sdk';
-import { EntryCard, Menu, MenuDivider } from '@contentful/f36-components';
+import { EntryCard, MenuDivider, MenuItem } from '@contentful/f36-components';
 import {
   entityHelpers,
   isValidImage,
@@ -178,51 +178,45 @@ export function WrappedEntryCard({
         onEdit || onRemove
           ? [
               hasCardEditActions && onEdit ? (
-                <Menu.Item
+                <MenuItem
                   key="edit"
                   testId="edit"
                   onClick={() => {
                     onEdit && onEdit();
                   }}
                 >
                   Edit
-                </Menu.Item>
+                </MenuItem>
               ) : null,
               hasCardRemoveActions && onRemove && !isDisabled ? (
-                <Menu.Item
+                <MenuItem
                   key="delete"
                   testId="delete"
                   onClick={() => {
                     onRemove && onRemove();
                   }}
                 >
                   Remove
-                </Menu.Item>
+                </MenuItem>
               ) : null,
               hasCardMoveActions && (onMoveTop || onMoveBottom) && !isDisabled ? (
                 <MenuDivider key="divider" />
               ) : null,
               hasCardMoveActions && onMoveTop && !isDisabled ? (
-                <Menu.Item
-                  key="move-top"
-                  onClick={() => onMoveTop && onMoveTop()}
-                  testId="move-top"
-                >
+                <MenuItem key="move-top" onClick={() => onMoveTop && onMoveTop()} testId="move-top">
                   Move to top
-                </Menu.Item>
+                </MenuItem>
               ) : null,
               hasCardMoveActions && onMoveBottom && !isDisabled ? (
-                <Menu.Item
+                <MenuItem
                   key="move-bottom"
                   onClick={() => onMoveBottom && onMoveBottom()}
                   testId="move-bottom"
                 >
                   Move to bottom
-                </Menu.Item>
+                </MenuItem>
               ) : null,
-            ]
-              .filter((item) => item)
-              .map((item, i) => <Menu key={i}>{item}</Menu>)
+            ].filter((item) => item)
           : []
       }
       onClick={