Skip to content

Commit 6fcf259

Browse files
MapTo0fifoosid
MapTo0
authored and
fifoosid
committed
fix(ui5-tabcontainer): adjust tabs to take 100% of TC height (#895)
1 parent bdfeb78 commit 6fcf259

File tree

6 files changed

+222
-123
lines changed

6 files changed

+222
-123
lines changed

‎packages/main/src/Tab.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div id="{{_id}}">
1+
<div id="{{_id}}" class="ui5-tab-root">
22
<slot></slot>
33
</div>

‎packages/main/src/Tab.js

+7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import SemanticColor from "./types/SemanticColor.js";
44
import Icon from "./Icon.js";
55
import TabTemplate from "./generated/templates/TabTemplate.lit.js";
66

7+
// Styles
8+
import css from "./generated/themes/Tab.css.js";
9+
710
/**
811
* @public
912
*/
@@ -135,6 +138,10 @@ class Tab extends UI5Element {
135138
return TabTemplate;
136139
}
137140

141+
static get styles() {
142+
return css;
143+
}
144+
138145
static async define(...params) {
139146
await Icon.define();
140147

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
:host {
2+
display: inline-block;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
.ui5-tab-root {
8+
width: 100%;
9+
height: 100%;
10+
}

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

+10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
}
88

99
.ui5-tc-root {
10+
display: flex;
11+
flex-direction: column;
12+
width: 100%;
13+
height: 100%;
1014
font-family: var(--sapUiFontFamily);
1115
font-size: 1rem;
1216
}
@@ -228,6 +232,7 @@
228232
border-bottom: var(--_ui5_tc_content_border_bottom);
229233
padding: 1rem;
230234
position: relative;
235+
height: 100%;
231236
}
232237

233238
.ui5-tc__content--collapsed {
@@ -238,6 +243,11 @@
238243
background-color: transparent;
239244
}
240245

246+
.ui5-tc__contentItem {
247+
height: 100%;
248+
overflow: auto;
249+
}
250+
241251
.ui5-tc__contentItem--hidden {
242252
display: none;
243253
}

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

+169-122
Original file line numberDiff line numberDiff line change
@@ -65,129 +65,176 @@
6565

6666
<body>
6767

68-
<header class="header">
69-
<h1 class="header-title">ui5-tabcontainer</h1>
70-
</header>
71-
72-
<section class="main">
73-
<div class="samples">
74-
<h2>Tab Container</h2>
75-
<div class="sample">
76-
<h4>Filter</h4>
77-
78-
<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow="true">
79-
<ui5-tab text="Products" additional-text="125">
80-
</ui5-tab>
81-
<ui5-tab-separator></ui5-tab-separator>
82-
<ui5-tab icon="menu2" text="Laptops" semantic-color="Positive" additional-text="25">
83-
</ui5-tab>
84-
<ui5-tab icon="menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
85-
</ui5-tab>
86-
<ui5-tab icon="menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
87-
</ui5-tab>
88-
<ui5-tab icon="menu2" disabled="true" text="Disabled" semantic-color="Negative" additional-text="40">
89-
</ui5-tab>
90-
</ui5-tabcontainer>
91-
</div>
92-
93-
<div class="sample">
94-
<h4>Icon and Text</h4>
95-
96-
<ui5-tabcontainer show-overflow="true">
97-
<ui5-tab icon="card" text="Tab 1" additional-text="123" selected>
98-
<ui5-button>Button 11</ui5-button>
99-
<ui5-button>Button 12</ui5-button>
100-
</ui5-tab>
101-
<ui5-tab icon="menu2" text="Tab 2" additional-text="444">
102-
<ui5-button>Button 2</ui5-button>
103-
</ui5-tab>
104-
<ui5-tab icon="employee" text="Tab 3" additional-text="123">
105-
<ui5-button>Button 3</ui5-button>
106-
</ui5-tab>
107-
</ui5-tabcontainer>
108-
</div>
109-
110-
<div class="sample">
111-
<h4>Icon only</h4>
112-
113-
<ui5-tabcontainer show-overflow="true" id="tabContainerIconOnly">
114-
<ui5-tab icon="card" selected>
115-
<ui5-button>Button 11</ui5-button>
116-
<ui5-button>Button 12</ui5-button>
117-
</ui5-tab>
118-
<ui5-tab icon="menu2">
119-
<ui5-button>Button 2</ui5-button>
120-
</ui5-tab>
121-
<ui5-tab icon="employee">
122-
<ui5-button>Button 3</ui5-button>
123-
</ui5-tab>
124-
</ui5-tabcontainer>
68+
<header class="header">
69+
<h1 class="header-title">ui5-tabcontainer</h1>
70+
</header>
71+
72+
<section class="main">
73+
<div class="samples">
74+
<h2>Tab Container</h2>
75+
<div class="sample">
76+
<h4>Filter</h4>
77+
78+
<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow="true">
79+
<ui5-tab text="Products" additional-text="125">
80+
</ui5-tab>
81+
<ui5-tab-separator></ui5-tab-separator>
82+
<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
83+
</ui5-tab>
84+
<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
85+
</ui5-tab>
86+
<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
87+
</ui5-tab>
88+
<ui5-tab icon="sap-icon://menu2" disabled="true" text="Disabled" semantic-color="Negative" additional-text="40">
89+
</ui5-tab>
90+
</ui5-tabcontainer>
91+
</div>
92+
93+
<div class="sample">
94+
<h4>Icon and Text</h4>
95+
96+
<ui5-tabcontainer show-overflow="true">
97+
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123" selected>
98+
<ui5-button>Button 11</ui5-button>
99+
<ui5-button>Button 12</ui5-button>
100+
</ui5-tab>
101+
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444">
102+
<ui5-button>Button 2</ui5-button>
103+
</ui5-tab>
104+
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
105+
<ui5-button>Button 3</ui5-button>
106+
</ui5-tab>
107+
</ui5-tabcontainer>
108+
</div>
109+
110+
<div class="sample">
111+
<h4>Icon only</h4>
112+
113+
<ui5-tabcontainer show-overflow="true" id="tabContainerIconOnly">
114+
<ui5-tab icon="sap-icon://card" selected>
115+
<ui5-button>Button 11</ui5-button>
116+
<ui5-button>Button 12</ui5-button>
117+
</ui5-tab>
118+
<ui5-tab icon="sap-icon://menu2">
119+
<ui5-button>Button 2</ui5-button>
120+
</ui5-tab>
121+
<ui5-tab icon="sap-icon://employee">
122+
<ui5-button>Button 3</ui5-button>
123+
</ui5-tab>
124+
</ui5-tabcontainer>
125+
</div>
126+
127+
<div class="sample">
128+
<h4>Text only</h4>
129+
130+
<ui5-tabcontainer show-overflow="true" id="tabContainerTextOnly">
131+
<ui5-tab text="Tab 1" selected>
132+
<ui5-button>Button 11</ui5-button>
133+
<ui5-button>Button 12</ui5-button>
134+
</ui5-tab>
135+
<ui5-tab text="Tab 2">
136+
<ui5-button>Button 2</ui5-button>
137+
</ui5-tab>
138+
<ui5-tab text="Tab 3">
139+
<ui5-button>Button 3</ui5-button>
140+
</ui5-tab>
141+
<ui5-tab text="Tab 4">
142+
<ui5-button>Button 4</ui5-button>
143+
</ui5-tab>
144+
</ui5-tabcontainer>
145+
</div>
146+
147+
<div class="sample">
148+
<h4>Text and additional text</h4>
149+
150+
<ui5-tabcontainer show-overflow="true">
151+
<ui5-tab text="Tab 1" additional-text="additional" selected>
152+
<ui5-button>Button 11</ui5-button>
153+
<ui5-button>Button 12</ui5-button>
154+
</ui5-tab>
155+
<ui5-tab text="Tab 2" additional-text="additional">
156+
<ui5-button>Button 2</ui5-button>
157+
</ui5-tab>
158+
<ui5-tab text="Tab 3" additional-text="additional">
159+
<ui5-button>Button 3</ui5-button>
160+
</ui5-tab>
161+
</ui5-tabcontainer>
162+
</div>
163+
164+
<div class="sample">
165+
<h4>Tabs with input elements</h4>
166+
167+
<ui5-tabcontainer show-overflow="true">
168+
<ui5-tab text="Tab 1" selected>
169+
<p>ui5-input</p>
170+
<ui5-input></ui5-input>
171+
</ui5-tab>
172+
<ui5-tab text="Tab 2">
173+
<p>browser input</p>
174+
<input type="text">
175+
</ui5-tab>
176+
</ui5-tabcontainer>
177+
</div>
178+
179+
<div class="sample" style="height: 300px">
180+
<ui5-tabcontainer fixed showOverflow style="height: 100%;" id="tc-scrollable-child">
181+
<ui5-tab text="Tab 1" selected id="scrollable-tab">
182+
<ui5-button>Toggle style</ui5-button>
183+
184+
185+
<!-- Simple use case -->
186+
<!-- <div style="background: red; height: 100%; width: 100%"></div> -->
187+
188+
<!-- Complex use case -->
189+
<ui5-table>
190+
<ui5-table-column slot="columns">Source</ui5-table-column>
191+
<ui5-table-column slot="columns">Method</ui5-table-column>
192+
193+
<ui5-table-row>
194+
<ui5-table-cell>Cell 1</ui5-table-cell>
195+
<ui5-table-cell>Cell 2</ui5-table-cell>
196+
</ui5-table-row>
197+
198+
<ui5-table-row>
199+
<ui5-table-cell>Cell 1</ui5-table-cell>
200+
<ui5-table-cell>Cell 2</ui5-table-cell>
201+
</ui5-table-row>
202+
203+
<ui5-table-row>
204+
<ui5-table-cell>Cell 1</ui5-table-cell>
205+
<ui5-table-cell>Cell 2</ui5-table-cell>
206+
</ui5-table-row>
207+
208+
<ui5-table-row>
209+
<ui5-table-cell>Cell 1</ui5-table-cell>
210+
<ui5-table-cell>Cell 2</ui5-table-cell>
211+
</ui5-table-row>
212+
213+
<ui5-table-row>
214+
<ui5-table-cell>Cell 1</ui5-table-cell>
215+
<ui5-table-cell>Cell 2</ui5-table-cell>
216+
</ui5-table-row>
217+
218+
<ui5-table-row>
219+
<ui5-table-cell>Cell 1</ui5-table-cell>
220+
<ui5-table-cell>Cell 2</ui5-table-cell>
221+
</ui5-table-row>
222+
</ui5-table>
223+
</ui5-tab>
224+
225+
</ui5-tabcontainer>
226+
</div>
125227
</div>
126-
127-
<div class="sample">
128-
<h4>Text only</h4>
129-
130-
<ui5-tabcontainer show-overflow="true" id="tabContainerTextOnly">
131-
<ui5-tab text="Tab 1" selected>
132-
<ui5-button>Button 11</ui5-button>
133-
<ui5-button>Button 12</ui5-button>
134-
</ui5-tab>
135-
<ui5-tab text="Tab 2">
136-
<ui5-button>Button 2</ui5-button>
137-
</ui5-tab>
138-
<ui5-tab text="Tab 3">
139-
<ui5-button>Button 3</ui5-button>
140-
</ui5-tab>
141-
<ui5-tab text="Tab 4">
142-
<ui5-button>Button 4</ui5-button>
143-
</ui5-tab>
144-
</ui5-tabcontainer>
228+
<div class="result">
229+
<h2>Result</h2>
230+
<span id="result"></span>
145231
</div>
232+
</section>
146233

147-
<div class="sample">
148-
<h4>Text and additional text</h4>
149-
150-
<ui5-tabcontainer show-overflow="true">
151-
<ui5-tab text="Tab 1" additional-text="additional" selected>
152-
<ui5-button>Button 11</ui5-button>
153-
<ui5-button>Button 12</ui5-button>
154-
</ui5-tab>
155-
<ui5-tab text="Tab 2" additional-text="additional">
156-
<ui5-button>Button 2</ui5-button>
157-
</ui5-tab>
158-
<ui5-tab text="Tab 3" additional-text="additional">
159-
<ui5-button>Button 3</ui5-button>
160-
</ui5-tab>
161-
</ui5-tabcontainer>
162-
</div>
163-
164-
<div class="sample">
165-
<h4>Tabs with input elements</h4>
166-
167-
<ui5-tabcontainer show-overflow="true">
168-
<ui5-tab text="Tab 1" selected>
169-
<p>ui5-input</p>
170-
<ui5-input></ui5-input>
171-
</ui5-tab>
172-
<ui5-tab text="Tab 2">
173-
<p>browser input</p>
174-
<input type="text">
175-
</ui5-tab>
176-
</ui5-tabcontainer>
177-
</div>
178-
</div>
179-
<div class="result">
180-
<h2>Result</h2>
181-
<span id="result"></span>
182-
</div>
183-
</section>
184-
185-
<script>
186-
var result = document.getElementById("result");
187-
188-
document.getElementById("tabContainer1").addEventListener("ui5-itemSelect", function (event) {
189-
document.getElementById("result").innerHTML = event.detail.item.text;
190-
});
191-
</script>
234+
<script>
235+
document.getElementById("tabContainer1").addEventListener("ui5-itemSelect", function (event) {
236+
document.getElementById("result").innerHTML = event.detail.item.text;
237+
});
238+
</script>
192239
</body>
193-
</html>
240+
</html>

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

+25
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,29 @@ describe("TabContainer general interaction", () => {
6363
// assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be hidden after 'Left Arrow' click");
6464
// assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be shown after 'Left Arrow' click");
6565
// });
66+
67+
68+
it("tests if content is scrollable when tabcontainer takes limited height by its parent", () => {
69+
const { tcHeight, tcScrollHeight } = browser.execute(() => {
70+
const scrollableContent = document.getElementById("tc-scrollable-child");
71+
72+
return {
73+
tcHeight: scrollableContent.offsetHeight,
74+
tcScrollHeight: scrollableContent.scrollHeight,
75+
}
76+
});
77+
78+
79+
const { tabHeight, tabScrollHeight } = browser.execute(() => {
80+
const scrollableContent = document.getElementById("scrollable-tab").shadowRoot.querySelector("div");
81+
82+
return {
83+
tabHeight: scrollableContent.offsetHeight,
84+
tabScrollHeight: scrollableContent.scrollHeight,
85+
}
86+
});
87+
88+
assert.ok(tabHeight < tabScrollHeight, "Tab Content is scrollable");
89+
assert.ok(tcHeight >= tcScrollHeight, "TabContainer is not scrollable scrollable");
90+
});
6691
});

0 commit comments

Comments
 (0)