Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-tabcontainer): left arrow correctly scrolls to left in textOnly #97

Merged
merged 2 commits into from
Feb 26, 2019
Merged

fix(ui5-tabcontainer): left arrow correctly scrolls to left in textOnly #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c349b9
fix(ui5-tabcontainer): left arrow correctly scrolls to left in textOnly
adrian-bobev Feb 26, 2019
ad4c9b2
add comments for todo on some lines
adrian-bobev Feb 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/TabContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -755,7 +755,7 @@ class TabContainer extends WebComponent {
}

_navigationIconPress(icon) {
if (icon.classList.contains("sapMITBArrowScrollLeft")) {
if (icon.classList.contains("sapMITBArrowScrollLeft") || icon.classList.contains("sapMITBArrowScrollLeftTextOnly")) {
this._leftArrow.onPress();
} else {
this._rightArrow.onPress();
Expand Down
9 changes: 5 additions & 4 deletions packages/main/test/sap/ui/webcomponents/main/pages/TabContainer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h5>Horizontal design</h5>
</ui5-tabcontainer>

<h5>Icons only</h5>
<ui5-tabcontainer show-overflow="true" selected-index="1">
<ui5-tabcontainer show-overflow="true" selected-index="1" id="tabContainerIconOnly">
<ui5-tab key="item1" icon="sap-icon://employee" count="12343455">
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
Expand All @@ -117,14 +117,15 @@ <h5>Icons only</h5>


<h5>Text Only</h5>
<ui5-tabcontainer show-overflow="true" selected-index="3">
<ui5-tabcontainer show-overflow="true" id="tabContainerTextOnly">
<ui5-tab key="item1" text="Tab 1">
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab key="item2" text="Tab 2">
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab key="item3" text="Tab 2">
<ui5-tab key="item3" text="Tab 3">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
Expand Down Expand Up @@ -173,4 +174,4 @@ <h5>Text and Count Inline Mode</h5>
});
</script>
</body>
</html>
</html>
47 changes: 46 additions & 1 deletion packages/main/test/specs/TabContainer.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,49 @@ describe("TabContainer general interaction", () => {
assert.strictEqual(field2.getProperty("value"), SELECTED_TAB_KEY, "Item data-key is retrieved correctly");
assert.strictEqual(field3.getProperty("value"), SELECTED_TAB_TEXT, "Item text is retrieved correctly.");
});
});

it("scroll works on iconsOnly TabContainer", () => {
browser.setWindowSize(250, 1080);

const arrowLeft = browser.findElementDeep("#tabContainerIconOnly >>> .sapMITBArrowScrollLeft");
const arrowRight = browser.findElementDeep("#tabContainerIconOnly >>> .sapMITBArrowScrollRight");

assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be initially hidden");
assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be initially shown");

arrowRight.click();
browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level

assert.ok(arrowLeft.isDisplayed(), "'Left Arrow' should be shown after 'Right Arrow' click");
assert.ok(!arrowRight.isDisplayed(), "'Right Arrow' should be hidden after 'Right Arrow' click");

arrowLeft.click();
browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level

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("scroll works on textOnly TabContainer", () => {
browser.setWindowSize(250, 1080);
browser.findElementDeep("#tabContainerTextOnly").scrollIntoView();

const arrowLeft = browser.findElementDeep("#tabContainerTextOnly >>> .sapMITBArrowScrollLeftTextOnly");
const arrowRight = browser.findElementDeep("#tabContainerTextOnly >>> .sapMITBArrowScrollRightTextOnly");

assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be initially hidden");
assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be initially shown");

arrowRight.click();
browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level

assert.ok(arrowLeft.isDisplayed(), "'Left Arrow' should be shown after 'Right Arrow' click");
assert.ok(!arrowRight.isDisplayed(), "'Right Arrow' should be hidden after 'Right Arrow' click");

arrowLeft.click();
browser.pause(300); // TODO: wait for animation finish. Remove when solved on framework level

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");
});
});