Skip to content

fix(ui5-shellbar): update samples to use modern branding API #13585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NakataCode wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(ui5-shellbar): update samples to use modern branding API #13585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
18 changes: 12 additions & 6 deletions packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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 -->
Expand Down
25 changes: 12 additions & 13 deletions packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand All @@ -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
Expand All @@ -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
Expand Down
7 changes: 5 additions & 2 deletions packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 7 additions & 6 deletions packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand All @@ -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
Expand Down
Loading