Skip to content

Commit aa516ff

Browse files
adrian-bobevadrian-bobev
authored
refactor(ui5-tabcontainer): refactor the component (#318)
Closes: #313 BREAKING CHANGE: 'selectedIndex' property is removed. Instead use 'selected' property of the Tab BREAKING CHANGE: 'headerMode' property is removed. All Tabs by Fiori guidelines are rendered in inline mode BREAKING CHANGE: 'headerBackgroundDesign' property is removed BREAKING CHANGE: 'backgroundDesign' property is removed BREAKING CHANGE: 'content' property is removed. Instead if you want to use the TabContainer as a filter just use it with 'collapsed' set to true and 'fixed' set to true BREAKING CHANGE: 'TabContainerDensityMode' is deleted. To set different size modes use ?sap-ui-compactSize=true BREAKING CHANGE: Tab's 'design' property is removed BREAKING CHANGE: Tab's 'count' property is removed. Instead use the additional-text property
1 parent c1f4c9c commit aa516ff

24 files changed

+1098
-1052
lines changed

‎packages/main/src/Tab.js

+25-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
22
import URI from "@ui5/webcomponents-base/src/types/URI";
3-
import Integer from "@ui5/webcomponents-base/src/types/Integer";
3+
import Function from "@ui5/webcomponents-base/src/types/Function";
44
import TabBase from "./TabBase";
55
import TabTemplateContext from "./TabTemplateContext";
6-
import TabDesignMode from "./types/TabDesignMode";
76
import IconColor from "./types/IconColor";
87
import Icon from "./Icon";
98
import TabRenderer from "./build/compiled/TabRenderer.lit";
@@ -47,14 +46,15 @@ const metadata = {
4746
*/
4847
disabled: {
4948
type: Boolean,
49+
defaultValue: false,
5050
},
5151

5252
/**
53-
* Represents the "count" text, which is displayed in the tab filter.
53+
* Represents the "additionalText" text, which is displayed in the tab filter.
5454
* @type {String}
5555
* @public
5656
*/
57-
count: {
57+
additionalText: {
5858
type: String,
5959
defaultValue: "",
6060
},
@@ -85,27 +85,19 @@ const metadata = {
8585
defaultValue: IconColor.Default,
8686
},
8787

88-
/**
89-
* Specifies whether the icon and the texts are placed vertically or horizontally.
90-
* @type {TabDesignMode}
91-
* @public
92-
*/
93-
design: {
94-
type: TabDesignMode,
95-
defaultValue: TabDesignMode.Vertical,
88+
selected: {
89+
type: Boolean,
90+
defaultValue: false,
91+
},
92+
93+
_tabIndex: {
94+
type: String,
95+
defaultValue: "-1",
9696
},
9797

98-
_showAll: { type: Boolean },
99-
_isSelected: { type: Boolean, defaultValue: false },
100-
_isInline: { type: Boolean },
101-
_isNoIcon: { type: Boolean },
102-
_isNoText: { type: Boolean },
103-
_tabIndex: { type: String, defaultValue: "-1" },
104-
_posinset: { type: Integer },
105-
_setsize: { type: Integer },
106-
_contentId: { type: String, defaultValue: " " },
107-
_labelledbyControls: { type: String, defaultValue: " " },
108-
_isIconColorRead: { type: Boolean },
98+
_getTabContainerHeaderItemCallback: {
99+
type: Function,
100+
},
109101
},
110102
events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
111103

@@ -143,6 +135,16 @@ class Tab extends TabBase {
143135

144136
super.define(...params);
145137
}
138+
139+
getFocusDomRef() {
140+
let focusedDomRef = super.getFocusDomRef();
141+
142+
if (this._getTabContainerHeaderItemCallback) {
143+
focusedDomRef = this._getTabContainerHeaderItemCallback();
144+
}
145+
146+
return focusedDomRef;
147+
}
146148
}
147149

148150
Bootstrap.boot().then(_ => {

‎packages/main/src/TabBase.js

+4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ class TabBase extends WebComponent {
2424
static get metadata() {
2525
return metadata;
2626
}
27+
28+
isSeparator() {
29+
return false;
30+
}
2731
}
2832

2933
export default TabBase;

‎packages/main/src/TabContainer.hbs

+126-135
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,146 @@
11
<div {{> controlData}} class="{{classes.main}}">
2-
<div role='tablist' class="{{classes.tablist}}">
3-
<ui5-icon
4-
src="sap-icon://slim-arrow-left"
5-
class="{{ctr._leftArrow.classes}}"
6-
tabindex="-1"></ui5-icon>
7-
<div id="{{ctr._id}}-scrollContainer" class="sapMITBScrollContainer">
8-
<div id="{{ctr._id}}-head" tabindex="-1" class="{{classes.head}}">
9-
{{#each ctr._headerItems}}
10-
{{#if isSeparator}}
11-
{{> renderTabSeparator}}
12-
{{else}}
13-
{{> renderTab}}
2+
<div class="{{classes.header}}" id="{{ctr._id}}-header">
3+
<ui5-icon @press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
4+
5+
<!-- tab items -->
6+
<div class="{{classes.headerScrollContainer}}" id="{{ctr._id}}-headerScrollContainer">
7+
<ul role="tablist" class="{{classes.headerList}}">
8+
{{#each renderItems}}
9+
{{#unless this.isSeparator}}
10+
<li class="{{this.headerItemClasses}}"
11+
id="{{this.item._id}}"
12+
tabindex="{{this.item._tabIndex}}"
13+
@click="{{../ctr._headerItem.click}}"
14+
@keydown="{{../ctr._headerItem.keydown}}"
15+
@keyup="{{../ctr._headerItem.keyup}}"
16+
role="tab"
17+
aria-posinset="{{this.position}}"
18+
aria-setsize="{{../renderItems.length}}"
19+
aria-controls="ui5-tc-contentItem-{{this.position}}"
20+
aria-selected="{{this.selected}}"
21+
aria-disabled="{{this.disabled}}"
22+
disabled="{{this.disabled}}"
23+
aria-labelledby="{{this.ariaLabelledBy}}"
24+
>
25+
{{#if this.isTextOnlyTab}}
26+
{{> textOnlyTab}}
27+
{{/if}}
28+
29+
{{#if this.isIconTab}}
30+
{{> iconTab}}
31+
{{/if}}
32+
33+
{{#if this.isMixedModeTab}}
34+
{{> mixedModeTab}}
35+
{{/if}}
36+
</li>
37+
{{/unless}}
38+
{{#if this.isSeparator}}
39+
<li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li>
1440
{{/if}}
1541
{{/each}}
16-
</div>
42+
</ul>
1743
</div>
18-
<ui5-icon
19-
src="sap-icon://slim-arrow-right"
20-
class="{{ctr._rightArrow.classes}}"
21-
tabindex="-1"></ui5-icon>
44+
45+
<ui5-icon @press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
46+
47+
<!-- overflow button -->
2248
{{#if ctr.showOverflow}}
23-
<ui5-button ._customAttributes="{{ctr._overflowButton._customAttributes}}"
24-
id="{{ctr._id}}-overflow-button"
25-
class="{{ctr._overflowButton.classes}}"
26-
@press="{{ctr._overflowButton.onPress}}"
27-
icon="sap-icon://slim-arrow-down" type="Transparent"></ui5-button>
49+
<ui5-button
50+
@press="{{ctr._overflowButton.click}}"
51+
class="{{classes.overflowButton}}"
52+
icon="sap-icon://slim-arrow-down"
53+
type="Transparent"
54+
></ui5-button>
2855
{{/if}}
2956
</div>
30-
<div id="{{ctr._id}}-containerContent" class="{{classes.content}}">
31-
<div id="{{ctr._id}}-content" class="sapMITBContent" role="tabpanel">
32-
{{#each ctr._selectedContent}}
33-
<slot name="{{this._slot}}"></slot>
34-
{{/each}}
35-
</div>
57+
58+
<!-- content area -->
59+
<div class="{{classes.content}}">
60+
{{#each renderItems}}
61+
{{#unless this.isSeparator}}
62+
<div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}">
63+
<slot name="{{this.item._slot}}"></slot>
64+
</div>
65+
{{/unless}}
66+
{{/each}}
3667
</div>
37-
{{#if ctr.showOverflow}}
38-
<ui5-popover id="{{ctr._id}}-popover"
39-
hide-arrow
40-
hide-header
41-
placement-type="Bottom"
42-
horizontal-align="Right">
43-
<ui5-list @itemPress="{{ctr._overflowList.onItemPress}}">
44-
{{#each ctr._overflowList.items}}
45-
<ui5-li-custom id="{{this.id}}"
46-
type="{{this.type}}"
47-
selected="{{this.selected}}"
48-
class="{{this.classes}}">
49-
<div class="{{this.innerClasses}}">
50-
{{#if this.content.icon}}
51-
<ui5-icon src="{{this.content.icon}}" class="sapMITBSelectItemIcon"></ui5-icon>
68+
69+
<!-- overflow menu -->
70+
<ui5-popover
71+
id="{{ctr._id}}-overflowMenu"
72+
hide-arrow
73+
hide-header
74+
placement-type="Bottom"
75+
horizontal-align="Right">
76+
<ui5-list @itemPress="{{ctr._overflowList.click}}">
77+
{{#each renderItems}}
78+
{{#unless this.isSeparator}}
79+
<ui5-li-custom id="{{this.item._id}}"
80+
class="{{this.overflowItemClasses}}"
81+
type="{{this.overflowItemState}}"
82+
selected="{{this.selected}}"
83+
disabled="{{this.disabled}}"
84+
>
85+
<div class="{{this.overflowItemContentClasses}}">
86+
{{#if this.item.icon}}
87+
<ui5-icon src="{{this.item.icon}}"></ui5-icon>
5288
{{/if}}
53-
{{#unless this.content._isNoText}}
54-
<span class="sapMITBText sapMText sapMTextNoWrap">{{this.content.displayText}}</span>
55-
{{/unless}}
56-
{{#if this.content.isIconColorRead}}
57-
<div id="{{this.content._id}}-iconColor" style="display: none;">{{this.content.iconColor}}</div>
89+
90+
{{this.item.text}}
91+
92+
{{#if this.item.additionalText}}
93+
({{this.item.additionalText}})
5894
{{/if}}
5995
</div>
6096
</ui5-li-custom>
61-
{{/each}}
62-
</ui5-list>
63-
</ui5-popover>
64-
{{/if}}
97+
{{/unless}}s
98+
{{/each}}
99+
</ui5-list>
100+
</ui5-popover>
65101
</div>
66102

67-
{{#*inline "renderTab"}}
68-
<div id="{{id}}"
69-
tabindex="{{_tabIndex}}"
70-
class="{{classes.main}}"
71-
role="tab"
72-
aria-selected="{{isSelected}}"
73-
aria-disabled="{{isDisabled}}"
74-
aria-posinset="{{posinset}}"
75-
aria-setsize="{{setsize}}"
76-
aria-controls="{{contentId}}"
77-
aria-labelledby="{{labelledbyControls}}">
78-
{{#if showAll}}
79-
<div id="{{id}}-tab" class="sapMITBTab">
80-
<span id="{{id}}-count" class="sapMITBCount">
81-
{{count}}
103+
{{#*inline "textOnlyTab"}}
104+
<div class="{{this.headerItemContentClasses}}">
105+
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
106+
<span class="{{this.headerItemSemanticIconClasses}}"></span>
107+
{{this.item.text}}
82108
</span>
83-
</div>
84-
{{#if displayText}}
85-
<div id="{{id}}-text" class="sapMITBText">
86-
{{displayText}}
87-
</div>
88-
{{/if}}
89-
{{else if isHorizontalDesign}}
90-
<div id="{{id}}-tab" class="sapMITBTab">
91-
{{#if isIconColorRead}}
92-
<div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div>
93-
{{/if}}
94-
{{#if icon}}
95-
<ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon>
96-
{{/if}}
97-
</div>
98-
<div class="sapMITBHorizontalWrapper">
99-
<span id="{{id}}-count" class="sapMITBCount">
100-
{{count}}
101-
</span>
102-
<div id="{{id}}-text" class="sapMITBText">
103-
{{displayText}}
104-
</div>
105-
</div>
106-
{{else if isInline}}
107-
<div id="{{id}}-text" class="sapMITBText">
108-
{{displayText}}
109-
</div>
110-
{{else if isNoIcon}}
111-
<div id="{{id}}-tab" class="sapMITBTab">
112-
<span id="{{id}}-count" class="sapMITBCount">
113-
{{count}}
109+
110+
{{#if this.item.additionalText}}
111+
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">({{this.item.additionalText}})</span>
112+
{{/if}}
113+
</div>
114+
{{/inline}}
115+
116+
{{#*inline "iconTab"}}
117+
<ui5-icon src="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
118+
119+
<div class="{{this.headerItemContentClasses}}">
120+
{{#if this.item.additionalText}}
121+
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
122+
{{/if}}
123+
124+
{{#if this.item.text}}
125+
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
126+
<span class="{{this.headerItemSemanticIconClasses}}"></span>
127+
{{this.item.text}}
114128
</span>
115-
</div>
116-
{{#if displayText}}
117-
<div id="{{id}}-text" class="sapMITBText">
118-
{{displayText}}
119-
</div>
120-
{{/if}}
121-
{{else if isNoText}}
122-
<div id="{{id}}-tab" class="sapMITBTab">
123-
{{#if isIconColorRead}}
124-
<div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div>
125-
{{/if}}
126-
{{#if icon}}
127-
<ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon>
128-
{{/if}}
129-
<span id="{{id}}-count" class="sapMITBCount">
130-
{{count}}
131-
</span>
132-
</div>
133-
{{else}}
134-
<div id="{{id}}-tab" class="sapMITBTab">
135-
{{#if isIconColorRead}}
136-
<div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div>
137-
{{/if}}
138-
{{#if icon}}
139-
<ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon>
140-
{{/if}}
141-
<span id="{{id}}-count" class="sapMITBCount">
142-
{{count}}
143-
</span>
144-
</div>
145-
<div id="{{id}}-text" class="sapMITBText">
146-
{{displayText}}
147-
</div>
148129
{{/if}}
149-
<div class="sapMITBContentArrow"></div>
150130
</div>
151131
{{/inline}}
152132

153-
{{#*inline "renderTabSeparator"}}
154-
<div role="separator" class="sapMITBItem sapMITBSep sapMITBSepLine"></div>
155-
{{/inline}}
133+
{{#*inline "mixedModeTab"}}
134+
<div class="{{this.headerItemContentClasses}}">
135+
{{#if this.item.additionalText}}
136+
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
137+
{{/if}}
138+
139+
{{#if this.item.text}}
140+
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
141+
<span class="{{this.headerItemSemanticIconClasses}}"></span>
142+
{{this.item.text}}
143+
</span>
144+
{{/if}}
145+
</div>
146+
{{/inline}}

0 commit comments

Comments
 (0)