Skip to content

Commit 9dab18b

Browse files
fifoosidfifoosid
authored
feat(ui5-shellbar): add profile slot (#1222)
Introduce profile slot, instead of property profile to give more freedom to users, enabling usage of both images and icons for a profile. Fixes: #1099 BREAKING CHANGE: profile property is removed in favour of profile slot
1 parent 756b78b commit 9dab18b

File tree

6 files changed

+52
-35
lines changed

6 files changed

+52
-35
lines changed

‎packages/fiori/src/ShellBar.hbs

+5-6
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,14 @@
5757
@click={{this.press}}>
5858
</ui5-icon>
5959
{{else}}
60-
<div
61-
tabindex="{{this._tabIndex}}"
60+
<slot
61+
name="profile"
6262
id="{{this.id}}"
6363
style="{{this.style}}"
6464
class="{{this.classes}}"
65-
@click="{{this.press}}"
66-
>
67-
<span style="{{this.subStyles}}" class="{{this.subclasses}}"></span>
68-
</div>
65+
tabindex="{{this._tabIndex}}"
66+
@click={{this.press}}
67+
></slot>
6968
{{/if}}
7069
{{/each}}
7170
</div>

‎packages/fiori/src/ShellBar.js

+15-13
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,6 @@ const metadata = {
7474
type: String,
7575
},
7676

77-
/**
78-
* Defines the source URI of the profile action.
79-
* If no source is set - profile will be excluded from actions.
80-
* @type {string}
81-
* @public
82-
*/
83-
profile: {
84-
type: String,
85-
},
86-
8777
/**
8878
* Defines, if the notification icon would be displayed.
8979
* @type {boolean}
@@ -167,6 +157,18 @@ const metadata = {
167157
type: HTMLElement,
168158
},
169159

160+
/**
161+
* You can pass <code>ui5-avatar</code> to set the profile image/icon.
162+
* If no profile slot is set - profile will be excluded from actions.
163+
* @type {HTMLElement}
164+
* @slot
165+
* @since 1.0.0-rc.6
166+
* @public
167+
*/
168+
profile: {
169+
type: HTMLElement,
170+
},
171+
170172
/**
171173
* Defines the items displayed in menu after a click on the primary title.
172174
* <br><br>
@@ -223,7 +225,7 @@ const metadata = {
223225
},
224226

225227
/**
226-
* Fired, when the profile icon is activated.
228+
* Fired, when the profile slot is present.
227229
*
228230
* @event
229231
* @param {HTMLElement} targetRef dom ref of the activated element
@@ -297,7 +299,7 @@ const metadata = {
297299
* <h3 class="comment-api-title">Overview</h3>
298300
*
299301
* The <code>ui5-shellbar</code> is meant to serve as an application header
300-
* and includes numerous built-in features, such as: logo, profile icon, title, search field, notifications and so on.
302+
* and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.
301303
* <br><br>
302304
* <h3>ES6 Module Import</h3>
303305
* <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
@@ -802,7 +804,7 @@ class ShellBar extends UI5Element {
802804
priority: 4,
803805
subclasses: "ui5-shellbar-image-buttonImage",
804806
style: `order: ${this.profile ? 5 : -10};`,
805-
subStyles: `${this.profile ? `background-image: url(${this.profile})` : ""}`,
807+
profile: true,
806808
id: `${this._id}-item-${3}`,
807809
domOrder: this.profile ? (++domOrder) : -1,
808810
show: this.profile,

‎packages/fiori/src/themes/ShellBar.css

+12
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@
6565
z-index: 1;
6666
}
6767

68+
slot[name="profile"] {
69+
min-width: 0;
70+
}
71+
72+
::slotted(ui5-avatar) {
73+
min-width: 0;
74+
width: 2.25rem;
75+
height: 2.25rem;
76+
padding: .25rem;
77+
background-color: transparent;
78+
}
79+
6880
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
6981
border: none;
7082
}

‎packages/fiori/test/pages/ShellBar.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,11 @@
8686
class="shellbar-example"
8787
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
8888
primary-title="SAP Labs Bulgaria"
89-
profile="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"
9089
show-notifications
9190
show-product-switch
9291
>
92+
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
93+
9394
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
9495
<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
9596
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
@@ -105,14 +106,15 @@
105106
primary-title="Product Title"
106107
secondary-title="Second title"
107108
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
108-
profile="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"
109109
second-title="Second Title"
110110
notification-count="99+"
111111
show-notifications
112112
show-product-switch
113113
show-co-pilot
114114
>
115115

116+
<ui5-avatar slot="profile" image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"></ui5-avatar>
117+
116118
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
117119

118120
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>

‎packages/fiori/test/samples/ShellBar.sample.html

+14-12
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ <h3>ShellBar</h3>
1818
primary-title="Corporate Portal"
1919
secondary-title="secondary title"
2020
logo="../../../assets/images/sap-logo-svg.svg"
21-
profile="../../../assets/images/avatars/woman_avatar_5.png"
2221
notification-count="99+"
2322
show-notifications
2423
show-product-switch
2524
show-co-pilot
2625
>
26+
<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
2727

2828
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
2929

@@ -67,13 +67,14 @@ <h3>ShellBar</h3>
6767
primary-title="Corporate Portal"
6868
secondary-title="secondary title"
6969
logo="../../../assets/images/sap-logo-svg.svg"
70-
profile="../../../assets/images/avatars/woman_avatar_5.png"
7170
notification-count="99+"
7271
show-notifications
7372
show-product-switch
7473
show-co-pilot
7574
>
7675

76+
<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
77+
7778
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
7879

7980
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
@@ -118,54 +119,57 @@ <h3>ShellBar</h3>
118119
<h3>Basic ShellBar</h3>
119120
<div class="snippet">
120121
<ui5-shellbar
121-
profile="../../../assets/images/avatars/woman_avatar_5.png"
122122
primary-title="Corporate Portal"
123123
secondary-title="secondary title"
124124
logo="../../../assets/images/sap-logo-svg.svg"
125125
>
126126

127-
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
127+
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
128+
129+
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
128130

129131
</ui5-shellbar>
130132
</div>
131133

132134
<pre class="prettyprint lang-html"><xmp>
133135
<ui5-shellbar
134-
profile="../../../assets/images/avatars/woman_avatar_5.png"
135136
primary-title="Corporate Portal"
136137
secondary-title="secondary title"
137138
logo="../../../assets/images/sap-logo-svg.svg"
138139
>
140+
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
141+
142+
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
139143
</ui5-shellbar>
140144
</xmp></pre>
141145
</section>
142146

143-
<!-- ShellBar with searhc and notifications -->
147+
<!-- ShellBar with search and notifications -->
144148
<section>
145149
<h3>ShellBar with search and notifications</h3>
146150
<div class="snippet">
147151
<ui5-shellbar
148-
profile="../../../assets/images/avatars/woman_avatar_5.png"
149152
primary-title="Corporate Portal"
150153
secondary-title="secondary title"
151154
logo="../../../assets/images/sap-logo-svg.svg"
152155
show-notifications
153156
notification-count="22"
154157
>
158+
<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
155159

156160
<ui5-input slot="searchField" placeholer="Enter service..."></ui5-input>
157161
</ui5-shellbar>
158162
</div>
159163

160164
<pre class="prettyprint lang-html"><xmp>
161165
<ui5-shellbar
162-
profile="../../../assets/images/avatars/woman_avatar_5.png"
163166
primary-title="Corporate Portal"
164167
secondary-title="secondary title"
165168
logo="../../../images/sap-logo-svg.svg"
166169
show-notifications
167170
notification-count="22"
168171
>
172+
<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
169173

170174
<ui5-input slot="searchField" placeholer="Enter service..."></ui5-input>
171175
</ui5-shellbar>
@@ -177,7 +181,6 @@ <h3>ShellBar with search and notifications</h3>
177181
<h3>ShellBar with product switch and CoPilot</h3>
178182
<div class="snippet">
179183
<ui5-shellbar
180-
profile="../../../assets/images/avatars/woman_avatar_5.png"
181184
primary-title="Corporate Portal"
182185
secondary-title="secondary title"
183186
logo="../../../assets/images/sap-logo-svg.svg"
@@ -186,13 +189,12 @@ <h3>ShellBar with product switch and CoPilot</h3>
186189
show-notifications
187190
notification-count="22"
188191
>
189-
192+
<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
190193
</ui5-shellbar>
191194
</div>
192195

193196
<pre class="prettyprint lang-html"><xmp>
194197
<ui5-shellbar
195-
profile="../../../assets/images/avatars/woman_avatar_5.png"
196198
primary-title="Corporate Portal"
197199
secondary-title="secondary title"
198200
logo="../../../assets/images/sap-logo-svg.svg"
@@ -201,7 +203,7 @@ <h3>ShellBar with product switch and CoPilot</h3>
201203
show-notifications
202204
notification-count="22"
203205
>
204-
206+
<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
205207
</ui5-shellbar>
206208
</xmp></pre>
207209
</section>

‎packages/fiori/test/specs/ShellBar.spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ describe("Component Behavior", () => {
223223
});
224224

225225
it("tests profilePress event", () => {
226-
const profileIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
226+
const profileIcon = browser.$("#shellbar").$("ui5-avatar");
227227
const input = browser.$("#press-input");
228228

229229
profileIcon.click();
@@ -325,7 +325,7 @@ describe("Component Behavior", () => {
325325
});
326326

327327
it("tests profilePress event", () => {
328-
const profileIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
328+
const profileIcon = browser.$("#shellbar").$("ui5-avatar");
329329
const input = browser.$("#press-input");
330330

331331
profileIcon.click();

0 commit comments

Comments
 (0)