Implement Main Tabs for Edit Contentlent

[oidacra]

Parent Issue

#30012

Task

Implement the main tabs for the Edit Contentlent interface according to the final design specifications.

Proposed Objective

Technical User Experience

Proposed Priority

Priority 2 - Important

Acceptance Criteria

1. Implement the final design of the tabs in the new Edit Contentlet

[oidacra]

Internal QA Steps

1. Contentlet Operations

• - Create a new contentlet and verify it saves properly
• - Edit the saved contentlet and confirm changes are maintained
• - Check that all fields are saving correctly - Category field not saving. Error reported on a separate issue

2. Tab Display Rules

• Single Tab:

• 1. Create a content type with only the default Content tab

• 2. Verify no tab navigation appears

• 3. Check all content is visible and accessible

• Multiple Tabs:

• 1. Create a content type with 2+ tabs

• 2. Verify both Content tab and custom tab(s) are visible

• 3. Check you can switch between tabs normally

3. Back Button Navigation

• - Work on a content type
• - Click back button
• - Verify it returns to the correct content type you were working on

4. Sidebar Controls

• - Click open/close sidebar buttons
• - Verify sidebar opens and closes correctly
• - Check it works from different sections

[dsilvam]

Passed Internal QA.
I am capturing small style details that can be worked on GD.

Design: blue font for selected

Implementation: black font for selected

Design: hover area smaller with radius

Implementation: bigger over area without radius

[josemejias11]

Failed: Tested on trunk_fe2a36c, Docker, macOS 14.5, FF v126.0.1

When switching an already existing content like blogs to the new Edit, some of the already existing tabs are not getting throughout the change

New

Old

[josemejias11]

Approved: Tested on trunk_fe2a36c, Docker, macOS 14.5, FF v126.0.1

Feedback from above will be place in the new sidebar feature.