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(core/dropdown): adjusted height for dropdown (siemens#1671) #1762

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+130 −1
Open

fix(core/dropdown): adjusted height for dropdown (siemens#1671) #1762

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
cc49264
[IX-2325] FIX - adjusting dropdown height
varun-srinivasa Mar 7, 2025
bbe9565
test: added visualisation regression test cases for select and dropdown
varun-srinivasa Mar 10, 2025
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/core/src/components/dropdown/dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

:host(.overflow) {
max-height: 50vh;
max-height: calc(50vh - 50px);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can use here a variable which makes it looks less like a magic number 50px

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rem should be used over px.

overflow-y: auto;
}

Expand Down
56 changes: 56 additions & 0 deletions packages/core/src/tests/dropdown/centered-overflow/index.html
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just thought myself is a visual-regression test here really necessary? Should be also possible via a simple component test which makes snapshot creation not necessary.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional/edge cases (e.g. dropdown opened via trigger element, dropdown opening above trigger) are missing.

Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!--
SPDX-FileCopyrightText: 2024 Siemens AG

SPDX-License-Identifier: MIT
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
</head>
<body style="width: 100vw; height: 100vh;">

<div style="display: block; position: relative; width: 100rem; margin-top: 53vh; height: 90%">
<ix-dropdown>
<ix-dropdown-item label="Test 1"></ix-dropdown-item>
<ix-dropdown-item label="Test 2"></ix-dropdown-item>
<ix-dropdown-item label="Test 3"></ix-dropdown-item>
<ix-dropdown-item label="Test 4"></ix-dropdown-item>
<ix-dropdown-item label="Test 5"></ix-dropdown-item>
<ix-dropdown-item label="Test 6"></ix-dropdown-item>
<ix-dropdown-item label="Test 7"></ix-dropdown-item>
<ix-dropdown-item label="Test 8"></ix-dropdown-item>
<ix-dropdown-item label="Test 9"></ix-dropdown-item>
<ix-dropdown-item label="Test 10"></ix-dropdown-item>
<ix-dropdown-item label="Test 11"></ix-dropdown-item>
<ix-dropdown-item label="Test 12"></ix-dropdown-item>
<ix-dropdown-item label="Test 13"></ix-dropdown-item>
<ix-dropdown-item label="Test 14"></ix-dropdown-item>
<ix-dropdown-item label="Test 15"></ix-dropdown-item>
<ix-dropdown-item label="Test 16"></ix-dropdown-item>
<ix-dropdown-item label="Test 17"></ix-dropdown-item>
<ix-dropdown-item label="Test 18"></ix-dropdown-item>
<ix-dropdown-item
id="last-element"
label="Should be visible!"
></ix-dropdown-item>
</ix-dropdown>
<script type="module">
(async () => {
await window.customElements.whenDefined('ix-dropdown');
await window.customElements.whenDefined('ix-dropdown-item');

const dropdown = document.querySelector('ix-dropdown');
dropdown.show = true;
})();
</script>
</div>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions packages/core/src/tests/dropdown/dropdown.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,18 @@ regressionTest.describe('dropdown', () => {

await expect(page).toHaveScreenshot();
});

regressionTest('centered overflow', async ({ page }) => {
await page.goto('dropdown/centered-overflow');

const menuHandle = await page.waitForSelector('.dropdown-menu.show');

page.evaluate((menuElement) => {
menuElement.scrollTop = 9999;
menuElement.classList.add('__SCROLLED__');
}, menuHandle);

await page.waitForSelector('.dropdown-menu.show.__SCROLLED__');
await expect(page).toHaveScreenshot();
});
});
Binary file added ...-snapshots/dropdown-centered-overflow-1-chromium---theme-classic-dark-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/dropdown-centered-overflow-1-chromium---theme-classic-light-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions packages/core/src/tests/select/centered-overflow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!--
SPDX-FileCopyrightText: 2025 Siemens AG

SPDX-License-Identifier: MIT
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
</head>

<body style="width: 100vw; height: 100vh; padding-top: 52vh;">
<ix-select value="2">
<ix-select-item label="Item 1" value="1"></ix-select-item>
<ix-select-item label="Item 2" value="2"></ix-select-item>
<ix-select-item label="Item 3" value="3"></ix-select-item>
<ix-select-item label="Test 4" value="4"></ix-select-item>
<ix-select-item label="Test 5" value="5"></ix-select-item>
<ix-select-item label="Test 6" value="6"></ix-select-item>
<ix-select-item label="Test 7" value="7"></ix-select-item>
<ix-select-item label="Test 8" value="8"></ix-select-item>
<ix-select-item label="Test 9" value="9"></ix-select-item>
<ix-select-item label="Test 10" value="10"></ix-select-item>
<ix-select-item label="Test 11" value="11"></ix-select-item>
<ix-select-item label="Test 12" value="12"></ix-select-item>
<ix-select-item label="Test 13" value="13"></ix-select-item>
<ix-select-item label="Test 14" value="14"></ix-select-item>
<ix-select-item label="Test 15" value="15"></ix-select-item>
<ix-select-item label="Test 16" value="16"></ix-select-item>
<ix-select-item label="Test 17" value="17"></ix-select-item>
<ix-select-item label="Test 18" value="18"></ix-select-item>
<ix-select-item
id="last-element"
label="Should be visible!"
></ix-select-item>
</ix-select>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions packages/core/src/tests/select/select.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,5 +154,19 @@ regressionTest.describe('select', () => {

expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('centered overflow', async ({ page }) => {
await page.goto('select/centered-overflow');
await page.locator('ix-select').locator('[data-select-dropdown]').click();
const menuHandle = await page.waitForSelector('.dropdown-menu.show');

await page.evaluate((menuElement) => {
menuElement.scrollTop = 9999;
menuElement.classList.add('__SCROLLED__');
}, menuHandle);

await page.waitForSelector('.dropdown-menu.show.__SCROLLED__');
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
});
});
Binary file added ...ots/select-disabled-centered-overflow-1-chromium---theme-classic-dark-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ts/select-disabled-centered-overflow-1-chromium---theme-classic-light-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.