fix: fix failing e2e

yordan-st · yordan-st · commit 37560da8fcc1 · 2025-10-21T11:50:45.000+02:00
diff --git a/packages/modules/data-widgets/CHANGELOG.md b/packages/modules/data-widgets/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - We enhanced datagrid selection UI with responsive container queries and improved layout styling for header and footer components.
+- We enhanced gallery selection UI with responsive container queries and improved layout styling for header and footer components to match datagrid implementation.
 
 ## [3.6.1] DataWidgets - 2025-10-14
 
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss
@@ -75,11 +75,18 @@ $gallery-screen-md: $screen-md;
     }
 
     .widget-gallery-filter,
-    .widget-gallery-empty,
-    .widget-gallery-pagination {
+    .widget-gallery-empty {
         flex: 1;
     }
 
+    &-top-bar {
+        container: widget-gallery-header / inline-size;
+    }
+
+    &-footer {
+        container: widget-gallery-footer / inline-size;
+    }
+
     /**
      Helper classes
       */
@@ -91,20 +98,30 @@ $gallery-screen-md: $screen-md;
     width: inherit;
 }
 
-:where(.widget-gallery-footer-controls) {
+:where(.widget-gallery-footer-controls, .widget-gallery-top-bar-controls) {
     display: flex;
     flex-flow: row nowrap;
+    align-items: center;
 }
 
-:where(.widget-gallery-fc-start) {
-    margin-block: var(--spacing-medium);
-    padding-inline: var(--spacing-medium);
+:where(.widget-gallery-fc-end, .widget-gallery-tb-end) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 }
 
-:where(.widget-gallery-fc-start, .widget-gallery-fc-middle, .widget-gallery-fc-end) {
+:where(.widget-gallery-fc-start, .widget-gallery-tb-start, .widget-gallery-fc-end, .widget-gallery-tb-end) {
     flex-grow: 1;
     flex-basis: 33.33%;
     min-height: 20px;
+    height: 54px;
+    padding: var(--spacing-small) 0;
+}
+
+:where(.widget-gallery-fc-start, .widget-gallery-tb-start) {
+    padding-inline: var(--spacing-medium);
+    display: flex;
+    align-items: center;
 }
 
 .widget-gallery-clear-selection {
@@ -115,4 +132,33 @@ $gallery-screen-md: $screen-md;
     color: var(--link-color);
     padding: 0;
     display: inline-block;
+
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 1px solid var(--brand-primary, $brand-primary);
+        outline-offset: 2px;
+    }
+}
+
+@container widget-gallery-footer (width < 500px) {
+    .widget-gallery-footer-controls {
+        flex-direction: column;
+        :where(.widget-gallery-fc-start, .widget-gallery-fc-end, .widget-gallery-fc-middle) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}
+
+@container widget-gallery-header (width < 500px) {
+    .widget-gallery-top-bar-controls {
+        flex-direction: column-reverse;
+        :where(.widget-gallery-tb-start, .widget-gallery-tb-end) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
 }
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withParentProvidedEnumStore.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withParentProvidedEnumStore.tsx
@@ -22,7 +22,7 @@ export function withParentProvidedEnumStore<P extends { filterable: boolean }>(
 
 function useEnumFilterAPI(): Result<EnumFilterProps, APIError> {
     const ctx = useFilterAPI();
-    const slctAPI = useRef<EnumFilterProps>(undefined);
+    const slctAPI = useRef<EnumFilterProps | undefined>(undefined);
 
     if (ctx.hasError) {
         return error(ctx.error);
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx
@@ -1,6 +1,5 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
-import { createElement } from "react";
 import { useDatagridRootScope } from "../helpers/root-context";
 
 type SelectionCounterLocation = "top" | "bottom" | undefined;
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -8,7 +8,7 @@ type WidgetFooterProps = {
     loadMoreButtonCaption?: string;
     hasMoreItems: boolean;
     setPage?: (computePage: (prevPage: number) => number) => void;
-} & JSX.IntrinsicElements["div"];
+} & React.JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     const { pagination, selectionCount, paginationType, loadMoreButtonCaption, hasMoreItems, setPage, ...rest } = props;
diff --git a/packages/pluggableWidgets/gallery-web/CHANGELOG.md b/packages/pluggableWidgets/gallery-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added configurable selection count visibility and clear selection button label template for improved row selection management.
+
 ### Fixed
 
 - We fixed an issue where setting the gallery gap to 0 caused an offset, which made the bottom border of items to dissapear.
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.editorConfig.ts b/packages/pluggableWidgets/gallery-web/src/Gallery.editorConfig.ts
@@ -19,7 +19,11 @@ export function getProperties(values: GalleryPreviewProps, defaultProperties: Pr
     }
 
     if (values.itemSelection !== "Multi") {
-        hidePropertiesIn(defaultProperties, values, ["keepSelection"]);
+        hidePropertiesIn(defaultProperties, values, [
+            "keepSelection",
+            "selectionCountPosition",
+            "clearSelectionButtonLabel"
+        ]);
     }
 
     const usePersonalization = values.storeFilters || values.storeSort;
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx
@@ -64,7 +64,7 @@ function Preview(props: GalleryPreviewProps): ReactElement {
     );
 
     return (
-        <div ref={containerRef}>
+        <div ref={containerRef as React.RefObject<HTMLDivElement>}>
             <GalleryComponent
                 className={props.class}
                 desktopItems={props.desktopItems!}
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx
@@ -92,6 +92,7 @@ const Container = observer(function GalleryContainer(props: GalleryContainerProp
             getPosition={getPositionCallback}
             loadMoreButtonCaption={props.loadMoreButtonCaption?.value}
             showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator}
+            selectionCountPosition={props.selectionCountPosition}
         />
     );
 });
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml
@@ -37,6 +37,22 @@
                     <caption>Keep selection</caption>
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
+                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
+                    <caption>Show selection count</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="top">Top</enumerationValue>
+                        <enumerationValue key="bottom">Bottom</enumerationValue>
+                        <enumerationValue key="off">Off</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
+                    <caption>Clear selection label</caption>
+                    <description>Customize the label of the 'Clear section' button</description>
+                    <translations>
+                        <translation lang="en_US">Clear selection</translation>
+                    </translations>
+                </property>
                 <property key="content" type="widgets" dataSource="datasource" required="false">
                     <caption>Content placeholder</caption>
                     <description />
diff --git a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx
@@ -14,7 +14,7 @@ import { GalleryTopBar } from "./GalleryTopBar";
 import { ListBox } from "./ListBox";
 import { ListItem } from "./ListItem";
 
-import { PaginationEnum, ShowPagingButtonsEnum } from "typings/GalleryProps";
+import { PaginationEnum, SelectionCountPositionEnum, ShowPagingButtonsEnum } from "typings/GalleryProps";
 import { LoadMore, LoadMoreButton as LoadMorePreview } from "../components/LoadMore";
 import { ItemEventsController } from "../typings/ItemEventsController";
 import { SelectionCounter } from "./SelectionCounter";
@@ -45,6 +45,7 @@ export interface GalleryProps<T extends ObjectItem> {
     ariaLabelListBox?: string;
     ariaLabelItem?: (item: T) => string | undefined;
     preview?: boolean;
+    selectionCountPosition?: SelectionCountPositionEnum;
 
     // Helpers
     focusController: FocusTargetController;
@@ -59,35 +60,46 @@ export interface GalleryProps<T extends ObjectItem> {
 export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElement {
     const { loadMoreButtonCaption = "Load more" } = props;
     const pagination = props.paging ? (
-        <div className="widget-gallery-pagination">
-            <Pagination
-                canNextPage={props.hasMoreItems}
-                canPreviousPage={props.page !== 0}
-                gotoPage={(page: number) => props.setPage && props.setPage(() => page)}
-                nextPage={() => props.setPage && props.setPage(prev => prev + 1)}
-                numberOfItems={props.numberOfItems}
-                page={props.page}
-                pageSize={props.pageSize}
-                previousPage={() => props.setPage && props.setPage(prev => prev - 1)}
-                pagination={props.paginationType}
-                showPagingButtons={props.showPagingButtons}
-            />
-        </div>
+        <Pagination
+            canNextPage={props.hasMoreItems}
+            canPreviousPage={props.page !== 0}
+            gotoPage={(page: number) => props.setPage && props.setPage(() => page)}
+            nextPage={() => props.setPage && props.setPage(prev => prev + 1)}
+            numberOfItems={props.numberOfItems}
+            page={props.page}
+            pageSize={props.pageSize}
+            previousPage={() => props.setPage && props.setPage(prev => prev - 1)}
+            pagination={props.paginationType}
+            showPagingButtons={props.showPagingButtons}
+        />
     ) : null;
 
     const showTopPagination =
         props.paging && (props.paginationPosition === "top" || props.paginationPosition === "both");
     const showBottomPagination =
         props.paging && (props.paginationPosition === "bottom" || props.paginationPosition === "both");
 
+    const selectionCounter =
+        !props.preview && props.selectionCountPosition !== "off" ? (
+            <SelectionCounter location={props.selectionCountPosition} />
+        ) : null;
+
+    const showTopSelectionCounter = selectionCounter && props.selectionCountPosition === "top";
+    const showBottomSelectionCounter = selectionCounter && props.selectionCountPosition === "bottom";
+
     return (
         <GalleryRoot
             className={props.className}
             style={props.style}
             selectable={false}
             data-focusindex={props.tabIndex || 0}
         >
-            <GalleryTopBar>{showTopPagination && pagination}</GalleryTopBar>
+            <GalleryTopBar>
+                <div className="widget-gallery-top-bar-controls">
+                    {showTopSelectionCounter && selectionCounter}
+                    {showTopPagination && <div className="widget-gallery-tb-end">{pagination}</div>}
+                </div>
+            </GalleryTopBar>
             {props.showHeader && <GalleryHeader aria-label={props.headerTitle}>{props.header}</GalleryHeader>}
             {props.showRefreshIndicator ? <RefreshIndicator className="mx-refresh-container-padding" /> : null}
             <GalleryContent
@@ -130,14 +142,17 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                 ))}
             <GalleryFooter>
                 <div className="widget-gallery-footer-controls">
-                    <div className="widget-gallery-fc-start">{!props.preview && <SelectionCounter />}</div>
-                    {props.paginationType === "loadMore" && (
-                        <div className="widget-gallery-fc-middle">
-                            {props.preview && <LoadMorePreview>{loadMoreButtonCaption}</LoadMorePreview>}{" "}
-                            {!props.preview && <LoadMore>{loadMoreButtonCaption}</LoadMore>}
-                        </div>
-                    )}
-                    <div className="widget-gallery-fc-end">{showBottomPagination && pagination}</div>
+                    {showBottomSelectionCounter && <div className="widget-gallery-fc-start">{selectionCounter}</div>}
+
+                    <div className="widget-gallery-fc-end">
+                        {showBottomPagination && pagination}
+                        {props.paginationType === "loadMore" &&
+                            (props.preview ? (
+                                <LoadMorePreview>{loadMoreButtonCaption}</LoadMorePreview>
+                            ) : (
+                                <LoadMore>{loadMoreButtonCaption}</LoadMore>
+                            ))}
+                    </div>
                 </div>
             </GalleryFooter>
         </GalleryRoot>
diff --git a/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx b/packages/pluggableWidgets/gallery-web/src/components/SelectionCounter.tsx
@@ -2,15 +2,34 @@ import { If } from "@mendix/widget-plugin-component-kit/If";
 import { observer } from "mobx-react-lite";
 import { useGalleryRootScope } from "../helpers/root-context";
 
-export const SelectionCounter = observer(function SelectionCounter() {
+type SelectionCounterLocation = "top" | "bottom" | undefined;
+
+export const SelectionCounter = observer(function SelectionCounter({
+    location
+}: {
+    location?: SelectionCounterLocation;
+}) {
     const { selectionCountStore, itemSelectHelper } = useGalleryRootScope();
 
+    const containerClass = location === "top" ? "widget-gallery-tb-start" : "widget-gallery-pb-start";
+
+    const clearButtonAriaLabel = `${selectionCountStore.clearButtonLabel} (${selectionCountStore.selectedCount} selected)`;
+
     return (
         <If condition={selectionCountStore.displayCount !== ""}>
-            <span className="widget-gallery-selection-count">{selectionCountStore.displayCount}</span>&nbsp;|&nbsp;
-            <button className="widget-gallery-clear-selection" onClick={itemSelectHelper.onClearSelection}>
-                Clear selection
-            </button>
+            <div className={containerClass}>
+                <span className="widget-gallery-selection-count" aria-live="polite" aria-atomic="true">
+                    {selectionCountStore.displayCount}
+                </span>
+                &nbsp;|&nbsp;
+                <button
+                    className="widget-gallery-clear-selection"
+                    onClick={itemSelectHelper.onClearSelection}
+                    aria-label={clearButtonAriaLabel}
+                >
+                    {selectionCountStore.clearButtonLabel}
+                </button>
+            </div>
         </If>
     );
 });
diff --git a/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap b/packages/pluggableWidgets/gallery-web/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
diff --git a/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx
diff --git a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,11 @@ export function getProperties(values: GalleryPreviewProps, defaultProperties: Pr`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`if (values.itemSelection !== "Multi") {`
`22`		`- hidePropertiesIn(defaultProperties, values, ["keepSelection"]);`
	`22`	`+ hidePropertiesIn(defaultProperties, values, [`
	`23`	`+ "keepSelection",`
	`24`	`+ "selectionCountPosition",`
	`25`	`+ "clearSelectionButtonLabel"`
	`26`	`+ ]);`
`23`	`27`	`}`
`24`	`28`
`25`	`29`	`const usePersonalization = values.storeFilters \|\| values.storeSort;`