Skip to content

xiiui ← Update header and navigation bar and introduce shell theme scope#27058

Merged
formfcw merged 132 commits intofeat/twelve-uifrom
florian/cms-1926-update-header-bar-module-nav-bar-base-design
Apr 9, 2026
Merged

xiiui ← Update header and navigation bar and introduce shell theme scope#27058
formfcw merged 132 commits intofeat/twelve-uifrom
florian/cms-1926-update-header-bar-module-nav-bar-base-design

Conversation

@formfcw
Copy link
Copy Markdown
Contributor

@formfcw formfcw commented Apr 7, 2026

Scope

What's changed:

  • Introduced shell theme scope that consolidates navigation.background, navigation.backgroundAccent, navigation.border*, header.background, and header.border* into shell.background, shell.backgroundAccent, shell.borderWidth, shell.borderColor — applied to private view root, main split, nav, and drawer
  • Moved VDrawerHeader above the drawer content (outside main) and applied shell background to the drawer
  • Added border-start-start-radius on the content area when nav is expanded, with a vertical divider pseudo-element on the header bar

Potential Risks / Drawbacks

  • Breaking for custom themes: navigation.background, navigation.backgroundAccent, navigation.border*, header.background, header.border* are removed — must migrate to shell._ (CSS variables change from --theme--navigation--_ / --theme--header--_ to --theme--shell--_)

Tested Scenarios

  • Shell background and border apply consistently across root, main split, nav, and drawer

Review Notes / Questions

  • Detailled alignment and rework of header and nav bar will happen in a future PR
  • Review appearance of header and nav bar in all modules and drawers

Checklist

  • Added or updated tests
  • Documentation PR created here or not required
  • OpenAPI package PR created here or not required

Addresses CMS-1926

formfcw and others added 30 commits March 18, 2026 14:43
Review note: Rebuild `pnpm --filter themes build`
… components

Review note: Rebuild `pnpm --filter composables --filter themes --filter types build`

Docs note: sidebarShadow and headerShadow prop removed from defineLayout()
…ll type scales

Review note: Rebuild `pnpm --filter themes --filter types build`
- v-text-overflow.vue (line-height: normal)
- v-card-title.vue (font-weight, line-height)
- form-field-label.vue (scoped .type-label, magic numbers → --label-height)
- form-field.vue (link underline)
- user-popover.vue (status chip margin)
…n theme types

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…in theme defs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…cus ring

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… ring

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…e--primary

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Review note: Test e.g. in data model settings > <collection> > display template
Review note: In the new design there won’t be a default border for this element, that’s why I’ve already removed it here.
@formfcw formfcw requested a review from AlexGaillard as a code owner April 7, 2026 07:31
@linear
Copy link
Copy Markdown

linear Bot commented Apr 7, 2026

@formfcw formfcw requested a review from HZooly April 7, 2026 07:31
Copy link
Copy Markdown
Member

@HZooly HZooly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks so nice, great work!

Copy link
Copy Markdown
Contributor

@alvarosabu alvarosabu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Base automatically changed from florian/cms-2079-fix-bookmark-icon-color-not-showing-in-header to feat/twelve-ui April 9, 2026 09:08
@formfcw formfcw merged commit 2e4345d into feat/twelve-ui Apr 9, 2026
3 checks passed
@formfcw formfcw deleted the florian/cms-1926-update-header-bar-module-nav-bar-base-design branch April 9, 2026 09:12
formfcw added a commit that referenced this pull request Apr 9, 2026
…ope (#27058)

Co-authored-by: HZooly <torzuoli.hugo@gmail.com>
formfcw added a commit that referenced this pull request Apr 20, 2026
…ope (#27058)

Co-authored-by: HZooly <torzuoli.hugo@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants