Skip to content

Commit

Permalink
fix(ui5-tabcontainer): adjust tabs to take 100% of TC height (#895)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MapTo0 @fifoosid
MapTo0 authored and fifoosid committed Nov 27, 2019
1 parent bdfeb78 commit 6fcf259
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 123 deletions.
2 changes: 1 addition & 1 deletion packages/main/src/Tab.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div id="{{_id}}">
<div id="{{_id}}" class="ui5-tab-root">
<slot></slot>
</div>
7 changes: 7 additions & 0 deletions packages/main/src/Tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -135,6 +138,10 @@ class Tab extends UI5Element {
return TabTemplate;
}

static get styles() {
return css;
}

static async define(...params) {
await Icon.define();

Expand Down
10 changes: 10 additions & 0 deletions packages/main/src/themes/Tab.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
:host {
display: inline-block;
width: 100%;
height: 100%;
}

.ui5-tab-root {
width: 100%;
height: 100%;
}
10 changes: 10 additions & 0 deletions packages/main/src/themes/TabContainer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
}

.ui5-tc-root {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
font-family: var(--sapUiFontFamily);
font-size: 1rem;
}
Expand Down Expand Up @@ -228,6 +232,7 @@
border-bottom: var(--_ui5_tc_content_border_bottom);
padding: 1rem;
position: relative;
height: 100%;
}

.ui5-tc__content--collapsed {
Expand All @@ -238,6 +243,11 @@
background-color: transparent;
}

.ui5-tc__contentItem {
height: 100%;
overflow: auto;
}

.ui5-tc__contentItem--hidden {
display: none;
}
Expand Down
291 changes: 169 additions & 122 deletions packages/main/test/pages/TabContainer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,129 +65,176 @@

<body>

<header class="header">
<h1 class="header-title">ui5-tabcontainer</h1>
</header>

<section class="main">
<div class="samples">
<h2>Tab Container</h2>
<div class="sample">
<h4>Filter</h4>

<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow="true">
<ui5-tab text="Products" additional-text="125">
</ui5-tab>
<ui5-tab-separator></ui5-tab-separator>
<ui5-tab icon="menu2" text="Laptops" semantic-color="Positive" additional-text="25">
</ui5-tab>
<ui5-tab icon="menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
</ui5-tab>
<ui5-tab icon="menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
</ui5-tab>
<ui5-tab icon="menu2" disabled="true" text="Disabled" semantic-color="Negative" additional-text="40">
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Icon and Text</h4>

<ui5-tabcontainer show-overflow="true">
<ui5-tab icon="card" text="Tab 1" additional-text="123" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab icon="menu2" text="Tab 2" additional-text="444">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab icon="employee" text="Tab 3" additional-text="123">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Icon only</h4>

<ui5-tabcontainer show-overflow="true" id="tabContainerIconOnly">
<ui5-tab icon="card" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab icon="menu2">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab icon="employee">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
<header class="header">
<h1 class="header-title">ui5-tabcontainer</h1>
</header>

<section class="main">
<div class="samples">
<h2>Tab Container</h2>
<div class="sample">
<h4>Filter</h4>

<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow="true">
<ui5-tab text="Products" additional-text="125">
</ui5-tab>
<ui5-tab-separator></ui5-tab-separator>
<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
</ui5-tab>
<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
</ui5-tab>
<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
</ui5-tab>
<ui5-tab icon="sap-icon://menu2" disabled="true" text="Disabled" semantic-color="Negative" additional-text="40">
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Icon and Text</h4>

<ui5-tabcontainer show-overflow="true">
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Icon only</h4>

<ui5-tabcontainer show-overflow="true" id="tabContainerIconOnly">
<ui5-tab icon="sap-icon://card" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab icon="sap-icon://menu2">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab icon="sap-icon://employee">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Text only</h4>

<ui5-tabcontainer show-overflow="true" id="tabContainerTextOnly">
<ui5-tab text="Tab 1" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 2">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 3">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 4">
<ui5-button>Button 4</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Text and additional text</h4>

<ui5-tabcontainer show-overflow="true">
<ui5-tab text="Tab 1" additional-text="additional" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 2" additional-text="additional">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 3" additional-text="additional">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Tabs with input elements</h4>

<ui5-tabcontainer show-overflow="true">
<ui5-tab text="Tab 1" selected>
<p>ui5-input</p>
<ui5-input></ui5-input>
</ui5-tab>
<ui5-tab text="Tab 2">
<p>browser input</p>
<input type="text">
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample" style="height: 300px">
<ui5-tabcontainer fixed showOverflow style="height: 100%;" id="tc-scrollable-child">
<ui5-tab text="Tab 1" selected id="scrollable-tab">
<ui5-button>Toggle style</ui5-button>


<!-- Simple use case -->
<!-- <div style="background: red; height: 100%; width: 100%"></div> -->

<!-- Complex use case -->
<ui5-table>
<ui5-table-column slot="columns">Source</ui5-table-column>
<ui5-table-column slot="columns">Method</ui5-table-column>

<ui5-table-row>
<ui5-table-cell>Cell 1</ui5-table-cell>
<ui5-table-cell>Cell 2</ui5-table-cell>
</ui5-table-row>

<ui5-table-row>
<ui5-table-cell>Cell 1</ui5-table-cell>
<ui5-table-cell>Cell 2</ui5-table-cell>
</ui5-table-row>

<ui5-table-row>
<ui5-table-cell>Cell 1</ui5-table-cell>
<ui5-table-cell>Cell 2</ui5-table-cell>
</ui5-table-row>

<ui5-table-row>
<ui5-table-cell>Cell 1</ui5-table-cell>
<ui5-table-cell>Cell 2</ui5-table-cell>
</ui5-table-row>

<ui5-table-row>
<ui5-table-cell>Cell 1</ui5-table-cell>
<ui5-table-cell>Cell 2</ui5-table-cell>
</ui5-table-row>

<ui5-table-row>
<ui5-table-cell>Cell 1</ui5-table-cell>
<ui5-table-cell>Cell 2</ui5-table-cell>
</ui5-table-row>
</ui5-table>
</ui5-tab>

</ui5-tabcontainer>
</div>
</div>

<div class="sample">
<h4>Text only</h4>

<ui5-tabcontainer show-overflow="true" id="tabContainerTextOnly">
<ui5-tab text="Tab 1" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 2">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 3">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 4">
<ui5-button>Button 4</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
<div class="result">
<h2>Result</h2>
<span id="result"></span>
</div>
</section>

<div class="sample">
<h4>Text and additional text</h4>

<ui5-tabcontainer show-overflow="true">
<ui5-tab text="Tab 1" additional-text="additional" selected>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 2" additional-text="additional">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 3" additional-text="additional">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</div>

<div class="sample">
<h4>Tabs with input elements</h4>

<ui5-tabcontainer show-overflow="true">
<ui5-tab text="Tab 1" selected>
<p>ui5-input</p>
<ui5-input></ui5-input>
</ui5-tab>
<ui5-tab text="Tab 2">
<p>browser input</p>
<input type="text">
</ui5-tab>
</ui5-tabcontainer>
</div>
</div>
<div class="result">
<h2>Result</h2>
<span id="result"></span>
</div>
</section>

<script>
var result = document.getElementById("result");

document.getElementById("tabContainer1").addEventListener("ui5-itemSelect", function (event) {
document.getElementById("result").innerHTML = event.detail.item.text;
});
</script>
<script>
document.getElementById("tabContainer1").addEventListener("ui5-itemSelect", function (event) {
document.getElementById("result").innerHTML = event.detail.item.text;
});
</script>
</body>
</html>
</html>
25 changes: 25 additions & 0 deletions packages/main/test/specs/TabContainer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
});

0 comments on commit 6fcf259

Please sign in to comment.