From 3f91414e791a43458e8ec4f11ac50ad54e91a854 Mon Sep 17 00:00:00 2001
From: Nikola Anachkov <nikola.anachkov@sap.com>
Date: Tue, 26 May 2026 16:24:03 +0300
Subject: [PATCH] fix(ui5-shellbar): update samples to use modern branding API

---
 .../sample.html                               |  7 ++++--
 .../MultipleNonProductiveInstances/sample.tsx |  6 +++--
 .../MultipleProductiveInstances/sample.html   | 18 ++++++++-----
 .../MultipleProductiveInstances/sample.tsx    | 25 +++++++++----------
 .../fiori/ShellBar/TrialExample/sample.html   |  7 ++++--
 .../fiori/ShellBar/TrialExample/sample.tsx    | 13 +++++-----
 6 files changed, 45 insertions(+), 31 deletions(-)
diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html
index 648a025d9bc8..63d16db0f923 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html
+++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html
@@ -31,9 +31,12 @@
             </ui5-avatar>
         </ui5-shellbar>
 
-        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications>
+        <ui5-shellbar notifications-count="72" show-notifications>
+            <ui5-shellbar-branding slot="branding">
+                Product Identifier
+                <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+            </ui5-shellbar-branding>
             <ui5-button icon="menu2" slot="startButton"></ui5-button>
-            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
 
             <ui5-tag design="Set2" color-scheme="8" slot="content">Q System</ui5-tag>
             <ui5-text slot="content">Region APJ</ui5-text>
diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.tsx b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.tsx
index 128c3985a0a9..5b339d4da83d 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.tsx
+++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.tsx
@@ -57,12 +57,14 @@ function App() {
       </ShellBar>
 
       <ShellBar
-        primaryTitle="Product Identifier"
         notificationsCount="72"
         showNotifications={true}
       >
+        <ShellBarBranding slot="branding">
+          Product Identifier
+          <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
+        </ShellBarBranding>
         <Button icon="menu2" slot="startButton" />
-        <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
 
         <Tag design="Set2" colorScheme="8" slot="content">
           Q System
diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html
index 2f5d8290556e..8886294aa1cd 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html
+++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html
@@ -11,9 +11,12 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-        <ui5-shellbar primary-title="Product Identifier" style="margin-bottom: 1rem;" notifications-count="72" show-notifications>
+        <ui5-shellbar style="margin-bottom: 1rem;" notifications-count="72" show-notifications>
+            <ui5-shellbar-branding slot="branding">
+                Product Identifier
+                <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+            </ui5-shellbar-branding>
             <ui5-button icon="menu2" slot="startButton"></ui5-button>
-            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
 
             <ui5-tag design="Set2" color-scheme="10" slot="content">Region EMEA</ui5-tag>
 
@@ -27,9 +30,12 @@
             </ui5-avatar>
         </ui5-shellbar>
 
-        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications>
+        <ui5-shellbar notifications-count="72" show-notifications>
+            <ui5-shellbar-branding slot="branding">
+                Product Identifier
+                <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+            </ui5-shellbar-branding>
             <ui5-button icon="menu2" slot="startButton"></ui5-button>
-            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
 
             <ui5-tag design="Set2" color-scheme="10" slot="content">Region APJ</ui5-tag>
 
@@ -38,8 +44,8 @@
             <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
             <ui5-toggle-button icon="sap-icon://da" tooltip="Joule" slot="assistant"></ui5-toggle-button>
             <ui5-avatar slot="profile">
-    <img src="../assets/images/avatars/man_avatar_3.png"/>
-</ui5-avatar>
+                <img src="../assets/images/avatars/man_avatar_3.png"/>
+            </ui5-avatar>
         </ui5-shellbar>
 
     <!-- playground-fold -->
diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.tsx b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.tsx
index 8d5d42c64cdf..ef17afea22e4 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.tsx
+++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.tsx
@@ -1,5 +1,6 @@
 import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
 import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
 import ShellBarItemClass from "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
 import ShellBarSearchClass from "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
 import AvatarClass from "@ui5/webcomponents/dist/Avatar.js";
@@ -12,6 +13,7 @@ import "@ui5/webcomponents-icons/dist/customer.js";
 import "@ui5/webcomponents-icons/dist/da.js";
 
 const ShellBar = createReactComponent(ShellBarClass);
+const ShellBarBranding = createReactComponent(ShellBarBrandingClass);
 const ShellBarItem = createReactComponent(ShellBarItemClass);
 const ShellBarSearch = createReactComponent(ShellBarSearchClass);
 const Avatar = createReactComponent(AvatarClass);
@@ -22,14 +24,12 @@ const ToggleButton = createReactComponent(ToggleButtonClass);
 function App() {
   return (
     <>
-      <ShellBar
-        style={{ marginBottom: "1rem" }}
-        primary-title="Product Identifier"
-        notifications-count={72}
-        show-notifications={true}
-      >
+      <ShellBar style={{ marginBottom: "1rem" }} notificationsCount="72" showNotifications={true}>
+        <ShellBarBranding slot="branding">
+          Product Identifier
+          <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
+        </ShellBarBranding>
         <Button icon="menu2" slot="startButton" />
-        <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
 
         <Tag design="Set2" colorScheme="10" slot="content">
           Region EMEA
@@ -48,13 +48,12 @@ function App() {
         </Avatar>
       </ShellBar>
 
-      <ShellBar
-        primaryTitle="Product Identifier"
-        notificationsCount="72"
-        showNotifications={true}
-      >
+      <ShellBar notificationsCount="72" showNotifications={true}>
+        <ShellBarBranding slot="branding">
+          Product Identifier
+          <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
+        </ShellBarBranding>
         <Button icon="menu2" slot="startButton" />
-        <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
 
         <Tag design="Set2" colorScheme="10" slot="content">
           Region APJ
diff --git a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html
index ecd47a2e4fc2..9bd8781f2cee 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html
+++ b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html
@@ -11,9 +11,12 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-        <ui5-shellbar primary-title="Product Identifier" notifications-count="72" show-notifications>
+        <ui5-shellbar notifications-count="72" show-notifications>
+            <ui5-shellbar-branding slot="branding">
+                Product Identifier
+                <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
+            </ui5-shellbar-branding>
             <ui5-button icon="menu2" slot="startButton"></ui5-button>
-            <img slot="logo" src="../assets/images/sap-logo-svg.svg" />
 
             <ui5-tag design="Set2" color-scheme="7" slot="content">Trial</ui5-tag>
             <ui5-text slot="content">30 days remaining</ui5-text>
diff --git a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.tsx b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.tsx
index a14c8cf0aed1..7a6a62734d82 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.tsx
+++ b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.tsx
@@ -1,5 +1,6 @@
 import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
 import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
 import ShellBarItemClass from "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
 import ShellBarSearchClass from "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
 import AvatarClass from "@ui5/webcomponents/dist/Avatar.js";
@@ -13,6 +14,7 @@ import "@ui5/webcomponents-icons/dist/customer.js";
 import "@ui5/webcomponents-icons/dist/da.js";
 
 const ShellBar = createReactComponent(ShellBarClass);
+const ShellBarBranding = createReactComponent(ShellBarBrandingClass);
 const ShellBarItem = createReactComponent(ShellBarItemClass);
 const ShellBarSearch = createReactComponent(ShellBarSearchClass);
 const Avatar = createReactComponent(AvatarClass);
@@ -24,13 +26,12 @@ const ToggleButton = createReactComponent(ToggleButtonClass);
 function App() {
   return (
     <>
-      <ShellBar
-        primaryTitle="Product Identifier"
-        notificationsCount="72"
-        showNotifications={true}
-      >
+      <ShellBar notificationsCount="72" showNotifications={true}>
+        <ShellBarBranding slot="branding">
+          Product Identifier
+          <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
+        </ShellBarBranding>
         <Button icon="menu2" slot="startButton" />
-        <img slot="logo" src="/images/sap-logo-svg.svg" alt="SAP Logo" />
 
         <Tag design="Set2" colorScheme="7" slot="content">
           Trial
