UX: Edit Content form UI inconsistencies after Lara Theme migration

[oidacra]

Problem Statement

After the Lara Theme migration, several UI inconsistencies exist in the Edit Content form:

1. Tags field is not full width: The Tags input field does not stretch to 100% width like all other form fields, appearing significantly narrower and breaking visual consistency.

2. Action buttons (Save/Publish) not disabled during execution: When the user clicks Save, Publish, or any workflow action button, the button is not disabled and no loading indicator is shown. If the user clicks multiple times, the action is triggered multiple times causing duplicate operations.

3. Block Editor visual consistency with input text: The Block Editor field must visually behave like a standard input text field across all interactive states. Today it has a different gray border color, and the hover, focus, and border-radius treatments do not match the rest of the form inputs. It should use the PrimeNG Lara Theme input tokens for:

   • Default border (color + width) — same as standard inputs
   • Hover state — same border color transition as an input text on hover
   • Focus state — same focus ring / border color + box-shadow as an input text on focus
   • Border radius — same radius as standard inputs

4. Tabs missing bottom border line: Both the main content tabs (Content/Advanced Properties) and the sidebar tabs (info, history, comments) are missing the bottom border line that visually anchors them. Without it, the tabs appear to float with no visual connection to the content below.

5. Binary field border-radius mismatch: The border-radius on binary/file fields (e.g., File Asset, Image) does not match the standard border-radius used by other input fields in the form.

Steps to Reproduce

1. Go to Content > Add new content of any type with a Tags field
2. Observe: the Tags input is narrower than other fields in the form
3. Edit any content and click "Publish" or "Save" rapidly multiple times
4. Observe: the button remains clickable and the action fires multiple times
5. Edit content with a Block Editor field (e.g., a Blog content type)
6. Observe: the Block Editor border is a different shade of gray than other field borders
7. Look at the main tabs (Content/Advanced Properties) and sidebar tabs (info/history/comments)
8. Observe: no bottom border line under the tab bar
9. Edit a File Asset or any content with a binary field
10. Observe: the border-radius on the binary field container differs from standard inputs

Acceptance Criteria

• Tags field input renders at 100% width, matching all other form fields in the Edit Content form
• Action buttons (Save, Publish, and all workflow actions) are disabled immediately after click and show a loading spinner until the operation completes
• The split-button dropdown is also disabled during the operation to prevent triggering a different action mid-save
• Clicking an action button multiple times rapidly triggers the action only once
• Block Editor field uses the PrimeNG Lara Theme input border token (e.g., --p-inputtext-border-color) for its default border, matching standard input fields
• Block Editor field hover state matches the hover treatment of a standard input text (same border color / transition tokens)
• Block Editor field focus state matches the focus treatment of a standard input text (same focus border color and focus ring / box-shadow tokens, e.g., --p-inputtext-focus-border-color, --p-focus-ring-*)
• Block Editor field border-radius matches the border-radius of a standard input text (same --p-inputtext-border-radius / equivalent token)
• No hardcoded colors, radii, or shadows on the Block Editor wrapper — all values come from Lara tokens so theme switches propagate correctly
• Main content tabs (Content / Advanced Properties) have a bottom border line visually connecting them to the content area below
• Sidebar tabs (info / history / comments icons) have a bottom border line consistent with the main content tabs
• Binary field containers (e.g., File Asset, Image) use the same border-radius as standard input fields

dotCMS Version

Latest from main branch

Severity

Medium - Some functionality impacted