Skip to content

feat(ui5-shellbar): align padding and logo styles with VD spec#13535

Open
NakataCode wants to merge 2 commits into
mainfrom
shellbar-branding-spec-alignment
Open

feat(ui5-shellbar): align padding and logo styles with VD spec#13535
NakataCode wants to merge 2 commits into
mainfrom
shellbar-branding-spec-alignment

Conversation

@NakataCode
Copy link
Copy Markdown
Contributor

@NakataCode NakataCode commented May 18, 2026

Aligns ShellBarBranding.css with the Shell Bar (Horizon) Visual Design specification.

Changes

  • Container height: added explicit height: 2.25rem (36px) to .ui5-shellbar-branding-root to cap the branding area at the correct size
  • Container padding-block: reduced from 0.25rem (4px) to 0.125rem (2px) top and bottom, as specified
  • Container padding-inline: kept at 0.25rem left / 0.5rem right (4px / 8px) — already correct
  • Standalone logo right spacing: reduced .ui5-shellbar-logo-area right padding from 0.5rem to 0.25rem to avoid the double 8px gap that was appearing when no product identifier is present
  • Slotted logo max-height: reduced from 2rem (32px) to 1.875rem (30px) with 1px top/bottom padding-block breathing space, so the logo renders at the correct 30px height without being clipped
  • Slotted logo width: added width: auto to ensure proportional scaling regardless of the logo's original dimensions

Spec reference

Shell Bar (Horizon) — Branding section:

  • Branding container: height 2.25rem, padding top/bottom 2px, padding left 0.25rem (4px), padding right 0.5rem (8px)
  • Logo: max-height 2rem, 1px top/bottom breathing space, padding left/right 0.25rem (4px)
  • Spacing between logo and product identifier: 0.25rem (4px)

JIRA: BGSOFUIPIRIN-7065

@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented May 18, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 18, 2026 08:15 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 20, 2026 11:41 Inactive
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.

2 participants