diff --git a/packages/main/src/Tab.hbs b/packages/main/src/Tab.hbs index 0c16f310e9b7..50eb4be3dad5 100644 --- a/packages/main/src/Tab.hbs +++ b/packages/main/src/Tab.hbs @@ -1,3 +1,3 @@ -
+
diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index da802f4eb959..3bc4b61ac9df 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -4,6 +4,9 @@ import SemanticColor from "./types/SemanticColor.js"; import Icon from "./Icon.js"; import TabTemplate from "./generated/templates/TabTemplate.lit.js"; +// Styles +import css from "./generated/themes/Tab.css.js"; + /** * @public */ @@ -135,6 +138,10 @@ class Tab extends UI5Element { return TabTemplate; } + static get styles() { + return css; + } + static async define(...params) { await Icon.define(); diff --git a/packages/main/src/themes/Tab.css b/packages/main/src/themes/Tab.css new file mode 100644 index 000000000000..3e6f4726dd6a --- /dev/null +++ b/packages/main/src/themes/Tab.css @@ -0,0 +1,10 @@ +:host { + display: inline-block; + width: 100%; + height: 100%; +} + +.ui5-tab-root { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index f97757873660..5f57b1a1287b 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -7,6 +7,10 @@ } .ui5-tc-root { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; font-family: var(--sapUiFontFamily); font-size: 1rem; } @@ -228,6 +232,7 @@ border-bottom: var(--_ui5_tc_content_border_bottom); padding: 1rem; position: relative; + height: 100%; } .ui5-tc__content--collapsed { @@ -238,6 +243,11 @@ background-color: transparent; } +.ui5-tc__contentItem { + height: 100%; + overflow: auto; +} + .ui5-tc__contentItem--hidden { display: none; } diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 602686890cc5..295e11217bb9 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -65,129 +65,176 @@ -
-

ui5-tabcontainer

-
- -
-
-

Tab Container

-
-

Filter

- - - - - - - - - - - - - - -
- -
-

Icon and Text

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - -
- -
-

Icon only

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - +
+

ui5-tabcontainer

+
+ +
+
+

Tab Container

+
+

Filter

+ + + + + + + + + + + + + + +
+ +
+

Icon and Text

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Icon only

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Text only

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + + Button 4 + + +
+ +
+

Text and additional text

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Tabs with input elements

+ + + +

ui5-input

+ + + +

browser input

+ + + +
+ +
+ + + Toggle style + + + + + + + + Source + Method + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + + +
- -
-

Text only

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - - Button 4 - - +
+

Result

+
+
-
-

Text and additional text

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - -
- -
-

Tabs with input elements

- - - -

ui5-input

- - - -

browser input

- - - -
-
-
-

Result

- -
-
- - + - + \ No newline at end of file diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 66b9f1a81da1..85a4e4e8e45a 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -63,4 +63,29 @@ describe("TabContainer general interaction", () => { // assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be hidden after 'Left Arrow' click"); // assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be shown after 'Left Arrow' click"); // }); + + + it("tests if content is scrollable when tabcontainer takes limited height by its parent", () => { + const { tcHeight, tcScrollHeight } = browser.execute(() => { + const scrollableContent = document.getElementById("tc-scrollable-child"); + + return { + tcHeight: scrollableContent.offsetHeight, + tcScrollHeight: scrollableContent.scrollHeight, + } + }); + + + const { tabHeight, tabScrollHeight } = browser.execute(() => { + const scrollableContent = document.getElementById("scrollable-tab").shadowRoot.querySelector("div"); + + return { + tabHeight: scrollableContent.offsetHeight, + tabScrollHeight: scrollableContent.scrollHeight, + } + }); + + assert.ok(tabHeight < tabScrollHeight, "Tab Content is scrollable"); + assert.ok(tcHeight >= tcScrollHeight, "TabContainer is not scrollable scrollable"); + }); });