Skip to content

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

Merged
NakataCode merged 2 commits into
mainfrom
shellbar-branding-spec-alignment
May 26, 2026
Merged

feat(ui5-shellbar): align padding and logo styles with VD spec#13535
NakataCode merged 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

🧹 Preview deployment cleaned up: https://pr-13535--ui5-webcomponents.netlify.app

@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
@PetyaMarkovaBogdanova PetyaMarkovaBogdanova self-requested a review May 26, 2026 07:37
@NakataCode NakataCode merged commit f0c277e into main May 26, 2026
13 checks passed
@NakataCode NakataCode deleted the shellbar-branding-spec-alignment branch May 26, 2026 13:18
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview May 26, 2026 13:18 Inactive
@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version v2.23.0-rc.1 🎉

The release is available on v2.23.0-rc.1

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants