Skip to content

Commit 6a990a7

Browse files
ilhan007ilhan007
authoredJul 3, 2019
refactor(ui5-popover, ui5-dialog): remove noHeader property (#615)
BREAKING CHANGE: the property noHeader is removed, the presence of header is based on the values of "headerText" property and "header" slot
·
v./29.5v0.0.0-7b49a7ff1
1 parent 1f06d10 commit 6a990a7

File tree

14 files changed

+54
-74
lines changed

14 files changed

+54
-74
lines changed
 

‎packages/main/src/DatePicker.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
id="{{_id}}-popover"
3131
allow-target-overlap="{{_popover.allowTargetOverlap}}"
3232
placement-type="{{_popover.placementType}}"
33-
no-header
3433
no-arrow
3534
horizontal-align="{{_popover.horizontalAlign}}"
3635
stay-open-on-scroll="{{_popover.stayOpenOnScroll}}"

‎packages/main/src/Dialog.hbs

+2-24
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
{{>include "./Popup.hbs"}}
2+
13
<span class="{{classes.frame}}">
24
<span id="{{_id}}-firstfe" tabindex="0"></span>
35
<div style="{{zindex}}" class="{{classes.dialogParent}}">
@@ -16,27 +18,3 @@
1618
<span id="{{_id}}-lastfe" tabindex="0"></span>
1719
<div tabindex="0" id="{{_id}}-blocklayer" style="{{blockLayer}}" class="{{classes.blockLayer}}"></div>
1820
</span>
19-
20-
{{#*inline "header"}}
21-
{{#unless noHeader}}
22-
<header>
23-
{{#if header.length}}
24-
<div role="heading" class="ui5-popup-wrapper-header">
25-
<slot name="header"></slot>
26-
</div>
27-
{{else}}
28-
<h2 role="heading" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
29-
{{/if}}
30-
</header>
31-
{{/unless}}
32-
{{/inline}}
33-
34-
{{#*inline "footer"}}
35-
{{#if footer.length}}
36-
<footer>
37-
<div class="ui5-popup-wrapper-footer">
38-
<slot name="footer"></slot>
39-
</div>
40-
</footer>
41-
{{/if}}
42-
{{/inline}}

‎packages/main/src/Input.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
{{#if showSuggestions}}
3333
<ui5-popover
3434
placement-type="Bottom"
35-
no-header
3635
no-arrow
3736
horizontal-align="Stretch"
3837
initial-focus="{{_id}}-inner">

‎packages/main/src/MultiComboBox.hbs

-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
<ui5-popover
3737
class="ui5-multi-combobox-selected-items--popover"
3838
horizontal-align="Stretch"
39-
no-header
4039
?no-arrow={{editable}}
4140
placement-type="Bottom">
4241
<ui5-list separators="None" mode="{{selectedItemsListMode}}"
@@ -51,7 +50,6 @@
5150

5251
<ui5-popover class="ui5-multi-combobox-all-items--popover"
5352
no-arrow
54-
no-header
5553
horizontal-align="Stretch"
5654
initial-focus="ui5-multi-combobox--input"
5755
horizontal-align="Left"

‎packages/main/src/Popover.hbs

+2-24
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
{{>include "./Popup.hbs"}}
2+
13
<span class="{{classes.frame}}" @focusin="{{onfocusin}}">
24
<span id="{{_id}}-firstfe" tabindex="0" @focusin={{focusHelper.forwardToLast}}></span>
35
<div style="{{styles.main}}" role="dialog" aria-labelledby="{{headerId}}" tabindex="-1" class="{{classes.main}}">
@@ -13,27 +15,3 @@
1315
<span id="{{_id}}-lastfe" tabindex="0" @focusin={{focusHelper.forwardToFirst}}></span>
1416
<div tabindex="0" id="{{_id}}-blocklayer" style="{{styles.blockLayer}}" class="{{classes.blockLayer}}"></div>
1517
</span>
16-
17-
{{#*inline "header"}}
18-
{{#unless noHeader}}
19-
<header>
20-
{{#if header.length}}
21-
<div role="toolbar" class="ui5-popup-wrapper-header">
22-
<slot name="header"></slot>
23-
</div>
24-
{{else}}
25-
<h2 role="toolbar" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
26-
{{/if}}
27-
</header>
28-
{{/unless}}
29-
{{/inline}}
30-
31-
{{#*inline "footer"}}
32-
{{#if footer.length}}
33-
<footer>
34-
<div class="ui5-popup-wrapper-footer">
35-
<slot name="footer"></slot>
36-
</div>
37-
</footer>
38-
{{/if}}
39-
{{/inline}}

‎packages/main/src/Popover.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -467,7 +467,7 @@ class Popover extends Popup {
467467

468468
let maxContentHeight = Math.round(maxHeight);
469469

470-
if (!this.noHeader) {
470+
if (this.hasHeader) {
471471
const headerDomRef = this.getPopupDomRef().querySelector(".ui5-popup-wrapper-header");
472472
if (headerDomRef) {
473473
maxContentHeight = Math.round(maxHeight - headerDomRef.offsetHeight);
@@ -645,7 +645,7 @@ class Popover extends Popup {
645645
}
646646

647647
get headerId() {
648-
return this.noHeader ? undefined : `${this._id}-header`;
648+
return this.hasHeader ? `${this._id}-header` : undefined;
649649
}
650650

651651
get focusHelper() {
@@ -654,6 +654,10 @@ class Popover extends Popup {
654654
forwardToFirst: this._focusElementsHandlers.forwardToFirst,
655655
};
656656
}
657+
658+
get role() {
659+
return "toolbar";
660+
}
657661
}
658662

659663
Popover.define();

‎packages/main/src/Popup.hbs

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{{#*inline "header"}}
2+
{{#if hasHeader}}
3+
<header>
4+
{{#if header.length}}
5+
<div role="{{role}}" class="ui5-popup-wrapper-header">
6+
<slot name="header"></slot>
7+
</div>
8+
{{else}}
9+
<h2 role="{{role}}" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
10+
{{/if}}
11+
</header>
12+
{{/if}}
13+
{{/inline}}
14+
15+
{{#*inline "footer"}}
16+
{{#if hasFooter}}
17+
<footer>
18+
<div class="ui5-popup-wrapper-footer">
19+
<slot name="footer"></slot>
20+
</div>
21+
</footer>
22+
{{/if}}
23+
{{/inline}}

‎packages/main/src/Popup.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,7 @@ const metadata = {
5757
type: String,
5858
association: true,
5959
},
60-
/**
61-
* Defines whether the header is hidden.
62-
*
63-
* @type {Boolean}
64-
* @defaultvalue false
65-
* @public
66-
*/
67-
noHeader: {
68-
type: Boolean,
69-
},
60+
7061
/**
7162
* Defines the header text.
7263
* <br><b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
@@ -443,6 +434,18 @@ class Popup extends UI5Element {
443434
onExitDOM() {
444435
removeBodyStyles();
445436
}
437+
438+
get hasHeader() {
439+
return !!(this.headerText.length || this.header.length);
440+
}
441+
442+
get hasFooter() {
443+
return !!this.footer.length;
444+
}
445+
446+
get role() {
447+
return "heading";
448+
}
446449
}
447450

448451
export default Popup;

‎packages/main/src/Select.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
<ui5-popover
1616
id="ui5-select--popover"
1717
placement-type="Bottom"
18-
no-header
1918
no-arrow
2019
horizontal-align="Stretch"
2120
@ui5-afterOpen="{{_applyFocusAfterOpen}}"

‎packages/main/src/ShellBar.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</button>
2929
{{/if}}
3030

31-
<ui5-popover class="sapWCShellBarMenuPopover" no-header placement-type="Bottom">
31+
<ui5-popover class="sapWCShellBarMenuPopover" placement-type="Bottom">
3232
<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{_menuItemPress}}>
3333
<slot name="menuItems"></slot>
3434
</ui5-list>
@@ -75,7 +75,7 @@
7575
</div>
7676
</div>
7777

78-
<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-header no-arrow>
78+
<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-arrow>
7979
<ui5-list separators="None" @ui5-itemPress="{{_actionList.itemPress}}">
8080
{{#each _hiddenIcons}}
8181
<ui5-li

‎packages/main/src/TabContainer.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@
7373
<ui5-popover
7474
id="{{_id}}-overflowMenu"
7575
no-arrow
76-
no-header
7776
placement-type="Bottom"
7877
horizontal-align="Right">
7978
<ui5-list @ui5-itemPress="{{_onOverflowListItemSelect}}">

‎packages/main/test/sap/ui/webcomponents/main/pages/Popups.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
<content id="popover"></content>
6767
</div>
6868

69-
<ui5-popover placement-type="Bottom" horizontal-align="Stretch" no-arrow no-header initial-focus="input1" class="wcPopoverWithList">
69+
<ui5-popover placement-type="Bottom" horizontal-align="Stretch" no-arrow initial-focus="input1" class="wcPopoverWithList">
7070
<ui5-list id="myList" inset separators="Inner" mode="MultiSelect" footer-text="Copyright" no-data-text="No data">
7171
<!-- Header -->
7272
<div style="display: flex; align-items: center;" slot="header">

‎packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132
<ui5-li slot="menuItems">Application 5</ui5-li>
133133
</ui5-shellbar>
134134

135-
<ui5-popover id="popover" no-header placement-type="Bottom">
135+
<ui5-popover id="popover" placement-type="Bottom">
136136
<div class="popover-header">
137137
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>
138138
</div>
@@ -148,7 +148,7 @@
148148
</div>
149149
</ui5-popover>
150150

151-
<ui5-popover id="app-list-popover" no-header placement-type="Bottom">
151+
<ui5-popover id="app-list-popover" placement-type="Bottom">
152152
<ui5-list separators="None">
153153
<ui5-li>Application 1</ui5-li>
154154
<ui5-li>Application 2</ui5-li>
@@ -158,7 +158,7 @@
158158
</ui5-list>
159159
</ui5-popover>
160160

161-
<ui5-popover id="custom-item-popover" no-header placement-type="Bottom">
161+
<ui5-popover id="custom-item-popover" placement-type="Bottom">
162162
<ui5-list separators="None">
163163
<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
164164
<ui5-li type="Active">Custom Popover Item 2</ui5-li>

‎packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ <h3>ShellBar</h3>
7575
<ui5-li slot="menuItems">Application 5</ui5-li>
7676
</ui5-shellbar>
7777

78-
<ui5-popover id="action-popover" no-header placement-type="Bottom">
78+
<ui5-popover id="action-popover" placement-type="Bottom">
7979
<div class="action-popover-header">
8080
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
8181
</div>
@@ -128,7 +128,7 @@ <h3>ShellBar</h3>
128128

129129
</ui5-shellbar>
130130

131-
<ui5-popover id="popover" no-header placement-type="Bottom">
131+
<ui5-popover id="popover" placement-type="Bottom">
132132
<div class="popover-header">
133133
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
134134
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.