Skip to content

Commit 951aa44

Browse files
yanaminkovayanaminkova
authored
feat(ui5-shellbar-branding): introduce new component (#11320)
The branding slot has been introduced to the ui5-shellbar component. Additionally, a new component called ui5-shellbar-branding has been added. This component combines a logo and a title, with the ability to open links. Its primary purpose is to be used within the branding slot, replacing the default primary title and logo of the ui5-shellbar. The branding slot and its content take higher priority. As a result, if both the branding and the primary title + logo slot are used, only the ui5-shellbar-branding will be displayed.
1 parent eb18c32 commit 951aa44

File tree

42 files changed

+613
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+613
-103
lines changed

‎packages/fiori/cypress/specs/ShellBar.cy.tsx‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
1111
import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
1212
import Avatar from "@ui5/webcomponents/dist/Avatar.js";
1313
import Switch from "@ui5/webcomponents/dist/Switch.js";
14+
import ShellBarBranding from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js"
1415
import ShellBarSearch from "../../src/ShellBarSearch.js";
1516

1617
const RESIZE_THROTTLE_RATE = 300; // ms
@@ -553,7 +554,7 @@ describe("Events", () => {
553554
.shadow()
554555
.find(".ui5-shellbar-search-button")
555556
.as("searchButton");
556-
557+
557558
cy.get("@searchButton")
558559
.click();
559560

@@ -567,7 +568,7 @@ describe("Events", () => {
567568
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
568569
</ShellBar>
569570
);
570-
571+
571572
cy.get("[ui5-shellbar]")
572573
.as("shellbar");
573574

@@ -619,23 +620,23 @@ describe("ButtonBadge in ShellBar", () => {
619620
<ShellBarItem id="test-item" icon="accept" text="Item" count="42" />
620621
</ShellBar>
621622
);
622-
623+
623624
cy.get("#shellbarwithitems")
624625
.shadow()
625626
.find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']")
626627
.should("exist")
627628
.should("have.attr", "text", "42");
628629
});
629-
630+
630631
it("Test count updates propagate to ButtonBadge", () => {
631632
cy.mount(
632633
<ShellBar id="test-invalidation">
633634
<ShellBarItem id="test-invalidation-item" icon="accept" text="Item" count="1" />
634635
</ShellBar>
635636
);
636-
637+
637638
cy.get("#test-invalidation-item").invoke("attr", "count", "3");
638-
639+
639640
cy.get("#test-invalidation")
640641
.shadow()
641642
.find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']")
@@ -644,7 +645,7 @@ describe("ButtonBadge in ShellBar", () => {
644645

645646
it("Test if overflow button shows appropriate badge when items are overflowed", () => {
646647
cy.mount(
647-
<ShellBar id="shellbar-with-overflow"
648+
<ShellBar id="shellbar-with-overflow"
648649
primaryTitle="Product Title"
649650
secondaryTitle="Secondary Title"
650651
showNotifications={true}
@@ -662,23 +663,23 @@ describe("ButtonBadge in ShellBar", () => {
662663
<Input placeholder="Search" slot="searchField" />
663664
</ShellBar>
664665
);
665-
666+
666667
cy.viewport(320, 800);
667-
668+
668669
cy.get("#shellbar-with-overflow")
669670
.shadow()
670671
.find(".ui5-shellbar-overflow-button")
671672
.should("be.visible");
672-
673+
673674
cy.get("#shellbar-with-overflow")
674675
.shadow()
675676
.find(".ui5-shellbar-overflow-button ui5-button-badge[slot='badge']")
676677
.should("exist")
677678
.should("have.attr", "design", "AttentionDot");
678-
679+
679680
cy.mount(
680681
<ShellBar id="shellbar-with-single-overflow"
681-
primaryTitle="Product Title"
682+
primaryTitle="Product Title"
682683
secondaryTitle="Secondary Title"
683684
showProductSwitch={true}>
684685
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
@@ -691,14 +692,14 @@ describe("ButtonBadge in ShellBar", () => {
691692
</Avatar>
692693
</ShellBar>
693694
);
694-
695+
695696
cy.viewport(320, 800);
696-
697+
697698
cy.get("#shellbar-with-single-overflow")
698699
.shadow()
699700
.find(".ui5-shellbar-overflow-button")
700701
.should("be.visible");
701-
702+
702703
cy.get("#shellbar-with-single-overflow")
703704
.shadow()
704705
.find(".ui5-shellbar-overflow-button ui5-button-badge[slot='badge']")
@@ -788,3 +789,28 @@ describe("Keyboard Navigation", () => {
788789
cy.get("@nativeInput").should("be.focused");
789790
});
790791
});
792+
793+
describe("Branding slot", () => {
794+
it("Test branding slot priority over logo", () => {
795+
cy.mount(
796+
<ShellBar id="shellbar" primaryTitle="Primary Title">
797+
<img id="mainLogo" slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
798+
799+
<ShellBarBranding brandingTitle="Branding Comp" href="https://www.w3schools.com" target="_blank" slot="branding">
800+
<img id="brandingLogo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
801+
</ShellBarBranding>
802+
</ShellBar>
803+
)
804+
805+
cy.get("#shellbar")
806+
.find("#mainLogo")
807+
.should('exist')
808+
.should('not.be.visible');
809+
810+
cy.get("#shellbar")
811+
.find("#brandingLogo")
812+
.should('exist')
813+
.should('be.visible');
814+
815+
});
816+
});

‎packages/fiori/cypress/specs/ShellBarBranding.cy.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import ShellBar from "../../src/ShellBar.js";
2+
import ShellBarBranding from "../../src/ShellBarBranding.js"
3+
4+
describe("ShellBarBranding", () => {
5+
const basicTemplate = (brandingProps = {}, shellBarProps = {}) => {
6+
const defaultShellBarProps = {
7+
id: "shellbar",
8+
...shellBarProps
9+
};
10+
11+
const defaultBrandingProps = {
12+
id: "shellbarBranding",
13+
slot: "branding",
14+
...brandingProps
15+
};
16+
17+
cy.mount(
18+
<ShellBar {...defaultShellBarProps}>
19+
<ShellBarBranding {...defaultBrandingProps}>
20+
Branding Comp
21+
<img id="brandingLogo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
22+
</ShellBarBranding>
23+
</ShellBar>
24+
);
25+
26+
cy.get("#shellbar").find("#shellbarBranding").shadow().as("shellbarBranding");
27+
};
28+
29+
describe("Properties", () => {
30+
it("Test ui5-shellbar-branding href property", () => {
31+
basicTemplate({ href: "https://sap.github.io/ui5-webcomponents/", target: "_blank" });
32+
33+
cy.get("@shellbarBranding")
34+
.find("a")
35+
.should("have.prop", "href", "https://sap.github.io/ui5-webcomponents/");
36+
});
37+
38+
it("Test ui5-shellbar-branding target property", () => {
39+
basicTemplate({ href: "https://sap.github.io/ui5-webcomponents/", target: "_blank" });
40+
41+
cy.get("@shellbarBranding")
42+
.find("a")
43+
.should("have.attr", "target", "_blank");
44+
});
45+
46+
it("Test ui5-shellbar-branding accessibleName property", () => {
47+
basicTemplate({ accessibleName: "Accessible Name" });
48+
49+
cy.get("@shellbarBranding")
50+
.find("a")
51+
.should("have.attr", "aria-label", "Accessible Name");
52+
});
53+
});
54+
55+
describe("Slots", () => {
56+
it("Test ui5-shellbar-branding logo slot", () => {
57+
basicTemplate();
58+
59+
cy.get("#brandingLogo")
60+
.should("exist")
61+
.should("have.attr", "slot", "logo");
62+
63+
cy.get("@shellbarBranding")
64+
.find("slot[name='logo']")
65+
.should("exist");
66+
});
67+
68+
it("Test ui5-shellbar-branding default content slot", () => {
69+
basicTemplate();
70+
71+
cy.get("@shellbarBranding")
72+
.find(".ui5-shellbar-title")
73+
.find("slot")
74+
.should("exist");
75+
});
76+
77+
});
78+
79+
describe("Accessibility", () => {
80+
it("Test ui5-shellbar-branding accessibility - role when href is not added", () => {
81+
basicTemplate();
82+
83+
cy.get("@shellbarBranding")
84+
.find("a")
85+
.should("have.attr", "role", "button");
86+
});
87+
88+
it("Test ui5-shellbar-branding accessibility - role when href is added", () => {
89+
basicTemplate({ href: "https://sap.github.io/ui5-webcomponents/" });
90+
91+
cy.get("@shellbarBranding")
92+
.find("a")
93+
.should("have.attr", "role", "link");
94+
});
95+
96+
it("Test ui5-shellbar-branding accessibility - default aria-label", () => {
97+
basicTemplate();
98+
99+
cy.get("@shellbarBranding")
100+
.find("a")
101+
.should("have.attr", "aria-label", "Branding Comp");
102+
});
103+
104+
it("Test ui5-shellbar-branding tabIndex", () => {
105+
basicTemplate();
106+
107+
cy.get("@shellbarBranding")
108+
.find("a")
109+
.should("have.attr", "tabIndex", "0");
110+
});
111+
});
112+
});

‎packages/fiori/src/ShellBar.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
4646
import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
4747
import type ShellBarItem from "./ShellBarItem.js";
4848
import type { ShellBarItemAccessibilityAttributes } from "./ShellBarItem.js";
49+
import type ShellBarBranding from "./ShellBarBranding.js";
4950

5051
// Templates
5152
import ShellBarTemplate from "./ShellBarTemplate.js";
@@ -456,6 +457,19 @@ class ShellBar extends UI5Element {
456457
@slot()
457458
assistant!: Array<IButton>;
458459

460+
/**
461+
* Defines the branding slot.
462+
* The `ui5-shellbar-branding` component is intended to be placed inside this slot.
463+
* Content placed here takes precedence over the `primaryTitle` property and the `logo` content slot.
464+
*
465+
* **Note:** The `branding` slot is in an experimental state and is a subject to change.
466+
*
467+
* @since 2.12.0
468+
* @public
469+
*/
470+
@slot()
471+
branding!: Array<ShellBarBranding>;
472+
459473
/**
460474
* Defines the `ui5-shellbar` additional items.
461475
*
@@ -892,6 +906,10 @@ class ShellBar extends UI5Element {
892906
if (this.breakpointSize !== mappedSize) {
893907
this.breakpointSize = mappedSize;
894908
}
909+
910+
this.branding.forEach(brandingEl => {
911+
brandingEl._isSBreakPoint = this.isSBreakPoint;
912+
});
895913
}
896914

897915
_hideItems(items: IShellBarHidableItem[]) {
@@ -1458,6 +1476,10 @@ class ShellBar extends UI5Element {
14581476
return !!this.assistant.length;
14591477
}
14601478

1479+
get hasBranding() {
1480+
return !!this.branding.length;
1481+
}
1482+
14611483
get hasSearchField() {
14621484
return !!this.searchField.length;
14631485
}

0 commit comments

Comments
 (0)