Skip to content

Commit d122a99

Browse files
r0b1nr0b1n
authored
[WC-3053] Filter empty option caption - Backport dw2.32 [mx10.21] (#1748)
2 parents 8073e8a + 8c2f4f2 commit d122a99

File tree

41 files changed

+361
-211
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+361
-211
lines changed

‎automation/run-e2e/lib/update-test-project.mjs‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,16 @@ async function updateAtlasTheme() {
7171

7272
rm("-rf", "tests/testProject/theme");
7373

74-
const release = await getLatestReleaseByName("Atlas UI - Theme Folder Files", config.atlasCoreReleaseUrl);
75-
76-
if (!release) {
77-
throw new Error("Can't fetch latest Atlas UI theme release");
74+
// Fetch the specific release by tag from GitHub API
75+
const tag = "atlasui-theme-files-2024-01-25";
76+
const releaseResponse = await fetchGithubRestAPI(`${config.atlasCoreReleaseUrl}/tags/${tag}`);
77+
if (!releaseResponse.ok) {
78+
throw new Error(`Can't fetch release for tag: ${tag}`);
79+
}
80+
const release = await releaseResponse.json();
81+
if (!release.assets || release.assets.length === 0) {
82+
throw new Error(`No assets found for release tag: ${tag}`);
7883
}
79-
8084
const [{ browser_download_url }] = release.assets;
8185
const downloadedPath = join(await usetmp(), config.nameForDownloadedAtlasTheme);
8286
const outPath = await usetmp();
@@ -94,6 +98,10 @@ async function updateAtlasTheme() {
9498
cp("-r", nativePath, themePath);
9599

96100
cp("-r", themePath, config.testProjectDir);
101+
// Fix file permissions to ensure Docker can write to theme files
102+
// The Atlas theme files are copied with read-only permissions
103+
// but mxbuild needs to write to some generated files during build
104+
sh.exec(`chmod -R +w "${config.testProjectDir}/themesource"`, { silent: true });
97105
}
98106

99107
async function runReleaseScript() {

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@mixin scroll-shadow {
22
background:
3-
/* Shadow Cover TOP */
3+
/* Shadow Cover TOP */
44
linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
55
/* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
66
/* Shadow TOP */ linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center top,
@@ -138,7 +138,6 @@ $root: ".widget-dropdown-filter";
138138
&-clear {
139139
@include btn-with-cross;
140140
align-items: center;
141-
align-self: center;
142141
display: flex;
143142
flex-shrink: 0;
144143
justify-self: end;
@@ -150,6 +149,11 @@ $root: ".widget-dropdown-filter";
150149
&:has(+ #{$root}-toggle) {
151150
border-inline-end: 1px solid var(--gray, #787d87);
152151
}
152+
153+
&:focus-visible {
154+
outline-offset: -2px;
155+
outline: var(--brand-primary, $brand-primary) solid 1px;
156+
}
153157
}
154158

155159
&-state-icon {
@@ -262,9 +266,13 @@ $root: ".widget-dropdown-filter";
262266
justify-content: center;
263267
line-height: 1.334;
264268
padding: var(--wdf-tag-padding);
269+
margin: var(--spacing-smallest, 2px);
265270
&:focus-visible {
266271
outline: var(--brand-primary, #264ae5) auto 1px;
267272
}
273+
&:focus {
274+
background-color: var(--color-primary-light, $color-primary-light);
275+
}
268276
}
269277

270278
#{$root}-input {
@@ -273,6 +281,14 @@ $root: ".widget-dropdown-filter";
273281
width: initial;
274282
}
275283

284+
&:not(:focus-within):not([data-empty]) {
285+
#{$root}-input {
286+
opacity: 0;
287+
flex-shrink: 1;
288+
min-width: 1px;
289+
}
290+
}
291+
276292
#{$root}-clear {
277293
border-color: transparent;
278294
}

‎packages/pluggableWidgets/datagrid-date-filter-web/e2e/DataGridDateFilter.spec.js-snapshots/dataGridDateFilter-chromium-linux.png‎

-131 Bytes
Loading

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Fixed
10+
11+
- We enhanced dropdown widget customization by separating texts for empty selection, empty option caption, and input placeholder. This change allows for more granular control over the widget's text configurations.
12+
13+
- We improved dropdown widget usability with enhanced keyboard navigation, visual feedback, and interaction behavior.
14+
15+
### Breaking changes
16+
17+
- Text configurations for empty option, empty selection, and input placeholder need to be reviewed and reconfigured.
18+
919
## [2.10.1] - 2025-04-16
1020

1121
### Fixed

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilter.spec.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
2626

2727
test.describe("using enumeration as attribute", () => {
2828
test("shows the expected result", async ({ page }) => {
29-
await page.click(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1");
30-
await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
31-
await page.click(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
29+
await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 1 });
30+
await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
31+
await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 1 });
3232
await page.waitForTimeout(300); // wait for filter to apply
33-
await page.click("#DataGrid4-column0");
33+
await page.locator("#DataGrid4-column0").click({ delay: 1 });
3434
const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
3535
elements.map(element => element.textContent)
3636
);
3737
await expect(cells).toEqual(["10", "test", "test", "Yes", ""]);
3838
});
3939

4040
test("shows the expected result with multiple selected items", async ({ page }) => {
41-
await page.click(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1");
41+
await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 1 });
4242
await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
43-
await page.click(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
43+
await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 1 });
4444
await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
45-
await page.click(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
45+
await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)").click({ delay: 1 });
4646
await page.waitForTimeout(300); // wait for filter to apply
47-
await page.click("#DataGrid4-column0");
47+
await page.locator("#DataGrid4-column0").click({ delay: 1 });
4848
const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
4949
elements.map(element => element.textContent)
5050
);
@@ -54,20 +54,20 @@ test.describe("datagrid-dropdown-filter-web", () => {
5454

5555
test.describe("using boolean as attribute", () => {
5656
test("shows the expected result", async ({ page }) => {
57-
await page.getByRole("combobox", { name: "Empty" }).click();
57+
await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
5858
const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
5959
await expect(dropdownItem).toHaveText("No");
60-
await dropdownItem.click();
61-
await page.locator("#DataGrid4-column1").click();
60+
await dropdownItem.click({ delay: 1 });
61+
await page.locator("#DataGrid4-column1").click({ delay: 1 });
6262
const cells = await page.locator(".mx-name-datagrid1 .tr");
6363
expect(cells).toHaveCount(1);
6464
});
6565

6666
test("shows no results when no items selected", async ({ page }) => {
67-
await page.getByRole("combobox", { name: "Empty" }).click();
67+
await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
6868
const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)"); //the first item means none selected
69-
await dropdownItem.click();
70-
await page.locator("#DataGrid4-column1").click();
69+
await dropdownItem.click({ delay: 1 });
70+
await page.locator("#DataGrid4-column1").click({ delay: 1 });
7171
const cells = await page.locator(".mx-name-datagrid1 .tr");
7272
expect(cells).toHaveCount(4);
7373
});

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilter.spec.js-snapshots/dataGridDropDownFilter-undefined-chromium-linux.png‎

-786 Bytes
Loading

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilterAssociation.spec.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test.describe("datagrid-dropdown-filter-web", () => {
1515
test("show list of Companies with empty option on top of the list", async ({ page }) => {
1616
const menu = () => page.locator("text=FMC Corp");
1717

18-
await page.locator(".mx-name-drop_downFilter2").click();
18+
await page.locator(".mx-name-drop_downFilter2").click({ delay: 1 });
1919
await expect(menu()).toBeVisible();
2020
const list = page.locator(".widget-dropdown-filter-menu-slot > ul > li");
2121
await expect(list).toHaveCount(21);
@@ -25,15 +25,15 @@ test.describe("datagrid-dropdown-filter-web", () => {
2525
});
2626

2727
test("set value after option is clicked", async ({ page }) => {
28-
const select = () => page.getByRole("columnheader", { name: "sort Company" }).getByLabel("Search");
28+
const select = () => page.getByRole("combobox", { name: "Company column filter" });
2929
const toggle = page.locator(".widget-dropdown-filter-toggle");
3030
const menu = () => page.locator("text=FMC Corp");
3131
const option1 = () => page.getByRole("option", { name: "Brown-Forman Corporation" });
32-
const clickOutside = async () => page.locator("body").click();
32+
const clickOutside = async () => page.locator("body").click({ delay: 1 });
3333

34-
await select().click();
34+
await select().click({ delay: 1 });
3535
await expect(menu()).toBeVisible();
36-
await option1().click();
36+
await option1().click({ delay: 1 });
3737
await expect(toggle.nth(3)).toHaveText("Brown-Forman Corporation");
3838
await clickOutside();
3939
await expect(menu()).not.toBeVisible();
@@ -45,25 +45,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
4545

4646
test.describe("multiselect", () => {
4747
test("shows list of Roles", async ({ page }) => {
48-
const select = () => page.getByRole("columnheader", { name: "Roles" }).getByLabel("Search");
48+
const select = () => page.getByRole("combobox", { name: "Role column filter" });
4949
const menu = () => page.locator("text=Economist");
5050
const option1 = () => page.getByRole("option", { name: "Economist" });
5151
const option2 = () => page.getByRole("option", { name: "Public librarian" });
5252
const option3 = () => page.getByRole("option", { name: "Prison officer" });
5353

54-
await select().click();
54+
await select().click({ delay: 1 });
5555
await expect(menu().first()).toBeVisible();
5656
await expect(option1()).toBeVisible();
5757
await expect(option2()).toBeVisible();
5858
await expect(option3()).toBeVisible();
5959
});
6060

6161
test("does filtering when option is checked", async ({ page }) => {
62-
const select = () => page.getByRole("columnheader", { name: "Roles" }).getByLabel("Search");
62+
const select = () => page.getByRole("combobox", { name: "Role column filter" });
6363
const option2 = () => page.getByRole("option", { name: "Public librarian" });
6464

65-
await select().click();
66-
await option2().click();
65+
await select().click({ delay: 1 });
66+
await option2().click({ delay: 1 });
6767
const rows = page.locator(".mx-name-dataGrid21 .tr");
6868
await expect(rows).toHaveCount(5); // 4 rows + 1 header row
6969
});
@@ -73,9 +73,9 @@ test.describe("datagrid-dropdown-filter-web", () => {
7373
test("open menu with no options selected", async ({ page }) => {
7474
const select = () => page.locator(".mx-name-drop_downFilter1");
7575
const menu = () => page.getByRole("option", { name: "Environmental scientist" });
76-
const clickOutside = async () => (await page.locator("body")).click();
76+
const clickOutside = async () => (await page.locator("body")).click({ delay: 1 });
7777

78-
await select().click();
78+
await select().click({ delay: 1 });
7979
const checkedOptions = await menu().locator("input:checked");
8080
await expect(checkedOptions).toHaveCount(0);
8181
await clickOutside();
@@ -88,8 +88,8 @@ test.describe("datagrid-dropdown-filter-web", () => {
8888
const menu = () => page.getByRole("option", { name: "Environmental scientist" });
8989
const option1 = () => page.getByRole("option", { name: "Environmental scientist" });
9090

91-
await select().click();
92-
await option1().click();
91+
await select().click({ delay: 1 });
92+
await option1().click({ delay: 1 });
9393
const checkedOptions = await menu().locator("input:checked");
9494
await expect(checkedOptions).toHaveCount(1);
9595
await expect(checkedOptions.first()).toBeChecked();
@@ -106,9 +106,9 @@ test.describe("datagrid-dropdown-filter-web", () => {
106106
const option1 = () => page.getByRole("option", { name: "Environmental scientist" });
107107
const option2 = () => page.getByRole("option", { name: "Trader" });
108108

109-
await select().click();
110-
await option1().click();
111-
await option2().click();
109+
await select().click({ delay: 1 });
110+
await option1().click({ delay: 1 });
111+
await option2().click({ delay: 1 });
112112
const checkedOptions = await menu().locator("input:checked");
113113
await expect(checkedOptions).toHaveCount(2);
114114
await expect(checkedOptions.first()).toBeChecked();

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@mendix/datagrid-dropdown-filter-web",
33
"widgetName": "DatagridDropdownFilter",
4-
"version": "2.10.1",
4+
"version": "2.32.0",
55
"description": "",
66
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
77
"license": "Apache-2.0",

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
2020
if (values.filterable) {
2121
hidePropertyIn(defaultProperties, values, "clearable");
2222
hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
23+
} else {
24+
hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
2325
}
2426

2527
if (!showSelectedItemsStyle) {
@@ -54,7 +56,7 @@ export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMod
5456
text({
5557
fontColor: palette.text.secondary,
5658
italic: true
57-
})(values.emptyOptionCaption || " ")
59+
})(values.emptySelectionCaption || " ")
5860
],
5961
grow: 1
6062
} as ContainerProps,

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
1010
return (
1111
<Select
1212
className={props.class}
13+
ariaLabel={props.ariaLabel}
1314
style={parseStyle(props.style)}
1415
options={[]}
1516
empty={!props.clearable}
1617
clearable={props.clearable}
18+
showCheckboxes={false}
1719
value={getPreviewValue(props)}
1820
onClear={noop}
1921
useSelectProps={() => ({ items: [] })}
@@ -25,11 +27,7 @@ const noop = (): void => {};
2527

2628
function getPreviewValue(props: DatagridDropdownFilterPreviewProps): string {
2729
let value = props.defaultValue;
28-
if (!props.filterable) {
29-
value ||= props.emptyOptionCaption || "Select";
30-
} else {
31-
value ||= "Search";
32-
}
30+
value ||= props.emptySelectionCaption || (props.filterable ? "Search" : "Select");
3331
return value;
3432
}
3533

0 commit comments

Comments
 (0)