Skip to content

Commit 5ca3280

Browse files
MapTo0MapTo0
authored
refactor(ui5-shellbar): rename icon slot to startButton (#901)
FIXES: #884 BREAKING CHANGE: icon aggregation has been renamed to startButton. It accepts a ui5-button and overstyles it to match ShellBar's styling.
1 parent 140ac0b commit 5ca3280

File tree

6 files changed

+22
-58
lines changed

6 files changed

+22
-58
lines changed

‎packages/main/src/ShellBar.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
>
55
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
66

7-
{{#if icon.length}}
8-
<slot name="icon"></slot>
7+
{{#if startButton.length}}
8+
<slot name="startButton"></slot>
99
{{/if}}
1010

1111
{{#unless interactiveLogo}}

‎packages/main/src/ShellBar.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -183,13 +183,15 @@ const metadata = {
183183
},
184184

185185
/**
186-
* Defines a <code>ui5-icon</code> in the bar that will be placed in the beginning.
186+
* Defines a <code>ui5-button</code> in the bar that will be placed in the beginning.
187+
* We encourage this slot to be used for a back or home button.
188+
* It gets overstyled to match ShellBar's styling.
187189
*
188190
* @type {HTMLElement[]}
189191
* @slot
190192
* @public
191193
*/
192-
icon: {
194+
startButton: {
193195
type: HTMLElement,
194196
},
195197
},

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

+9-47
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,8 @@
1818

1919
.ui5-shellbar-menu-button,
2020
.ui5-shellbar-button,
21-
.ui5-shellbar-image-button {
22-
height: 2.25rem;
23-
padding: 0;
24-
margin-left: 0.5rem;
25-
border: none;
26-
outline: none;
27-
background: transparent;
28-
color: var(--sapUiShellTextColor);
29-
box-sizing: border-box;
30-
cursor: pointer;
31-
border-radius: 0.25rem;
32-
position: relative;
33-
font-size: 0.75rem;
34-
font-weight: bold;
35-
}
36-
37-
/* IE does not apply all selectors if separated by comma and 1 is invalid; TODOs - Keep that in sync and recheck after Shady CSS */
38-
::slotted(ui5-icon) {
21+
.ui5-shellbar-image-button,
22+
::slotted(ui5-button[slot="startButton"]) {
3923
height: 2.25rem;
4024
padding: 0;
4125
margin-left: 0.5rem;
@@ -51,19 +35,22 @@
5135
font-weight: bold;
5236
}
5337

38+
::slotted(ui5-button[slot="startButton"]:hover),
5439
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
5540
.ui5-shellbar-button:hover,
5641
.ui5-shellbar-image-button:hover {
5742
background: var(--sapUiShellHoverBackground);
5843
}
5944

45+
::slotted(ui5-button[slot="startButton"][active]),
6046
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
6147
.ui5-shellbar-button:active,
6248
.ui5-shellbar-image-button:active {
6349
background: var(--sapUiShellActiveBackground);
6450
color: var(--sapUiShellActiveTextColor);
6551
}
6652

53+
::slotted(ui5-button[slot="startButton"][focused])::after,
6754
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus::after,
6855
.ui5-shellbar-button:focus::after,
6956
.ui5-shellbar-image-button:focus::after {
@@ -162,7 +149,7 @@
162149
padding: 0.25rem 1rem;
163150
}
164151

165-
:host([breakpoint-size="S"]) ::slotted(ui5-icon) {
152+
:host([breakpoint-size="S"]) ::slotted(ui5-button[slot="startButton"]) {
166153
margin-right: 0;
167154
}
168155

@@ -395,7 +382,7 @@
395382
fill: var(--sapUiShellColor);
396383
}
397384

398-
:host [dir="rtl"] ::slotted(ui5-icon) {
385+
:host [dir="rtl"] ::slotted(ui5-button[slot="startButton"]) {
399386
margin-left: 0.5rem;
400387
margin-right: 0;
401388
}
@@ -423,34 +410,9 @@
423410
margin-right: 0;
424411
}
425412

426-
::slotted(ui5-icon) {
427-
width: .75rem;
428-
height: .75rem;
413+
::slotted(ui5-button[slot="startButton"]) {
429414
margin-right: 0.5rem;
430415
margin-left: 0;
431-
padding: .75rem;
432416
justify-content: center;
433417
align-items: center;
434-
box-sizing: content-box;
435-
}
436-
437-
::slotted(ui5-icon:hover) {
438-
background: var(--sapUiShellHoverBackground);
439-
}
440-
441-
::slotted(ui5-icon:active) {
442-
background: var(--sapUiShellActiveBackground);
443-
color: var(--sapUiShellActiveTextColor);
444-
}
445-
446-
::slotted(ui5-icon:focus)::after {
447-
content: "";
448-
position: absolute;
449-
width: calc(100% - 0.375rem);
450-
height: calc(100% - 0.375rem);
451-
border: 1px dotted var(--sapUiContentContrastFocusColor);
452-
pointer-events: none;
453-
left: 2px;
454-
top: 2px;
455-
z-index: 1;
456-
}
418+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
show-co-pilot
119119
>
120120

121-
<ui5-icon src="sap-icon://nav-back" slot="icon" tabindex="0"></ui5-icon>
121+
<ui5-button icon="sap-icon://nav-back" slot="startButton" id="start-button"></ui5-button>
122122

123123
<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
124124
<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ <h3>ShellBar</h3>
6161
show-co-pilot
6262
>
6363

64-
<ui5-icon src="sap-icon://nav-back" slot="icon"></ui5-icon>
64+
<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
6565

6666
<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
6767
<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
@@ -113,7 +113,7 @@ <h3>ShellBar</h3>
113113
show-co-pilot
114114
>
115115

116-
<ui5-icon src="nav-back" slot="icon"></ui5-icon>
116+
<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
117117

118118
<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
119119
<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe("Component Behaviour", () => {
1111

1212
const shellbar = browser.$("#shellbar");
1313
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
14-
const backButton = browser.$("#shellbar ui5-icon");
14+
const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
1515
const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
1616
const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
1717
const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
@@ -48,7 +48,7 @@ describe("Component Behaviour", () => {
4848

4949
const shellbar = browser.$("#shellbar");
5050
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
51-
const backButton = browser.$("#shellbar ui5-icon");
51+
const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
5252
const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
5353
const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
5454
const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
@@ -77,7 +77,7 @@ describe("Component Behaviour", () => {
7777
const shellbar = browser.$("#shellbar");
7878
const shellbarWrapper = browser.$("#shellbar").shadow$("div");
7979
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
80-
const backButton = browser.$("#shellbar ui5-icon");
80+
const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
8181
const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
8282
const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
8383
const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
@@ -159,7 +159,7 @@ describe("Component Behaviour", () => {
159159

160160
const shellbar = browser.$("#shellbar");
161161
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
162-
const backButton = browser.$("#shellbar ui5-icon");
162+
const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
163163
const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
164164
const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
165165
const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");

0 commit comments

Comments
 (0)