[WC-3088] DataGrid: Row selection indicator (#1907)

Author: leonardomendix

packages/modules/data-widgets/CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### 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
 
 ### [3.6.1] Datagrid

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

@@ -311,7 +311,7 @@ $root: ".widget-datagrid";
     justify-content: flex-end;
     white-space: nowrap;
     align-items: baseline;
-    margin: 16px;
+    margin: 0 16px;
     color: $pagination-caption-color;
 
     .paging-status {
@@ -397,6 +397,10 @@ $root: ".widget-datagrid";
         }
     }
 
+    &-top-bar {
+        container: widget-datagrid-header / inline-size;
+    }
+
     &-content {
         overflow-x: auto;
     }
@@ -409,6 +413,10 @@ $root: ".widget-datagrid";
         display: contents;
     }
 
+    &-footer {
+        container: widget-datagrid-footer / inline-size;
+    }
+
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
             background-color: $grid-selected-row-background;
@@ -517,7 +525,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid .widget-datagrid-load-more {
     display: block !important;
-    margin: 0 auto;
+    margin: 0;
 }
 
 .infinite-loading.widget-datagrid-grid-body {
@@ -540,21 +548,30 @@ $root: ".widget-datagrid";
     grid-column: 1 / -1;
 }
 
-:where(#{$root}-paging-bottom) {
+:where(#{$root}-paging-bottom, #{$root}-padding-top) {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
 }
 
-:where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {
+:where(#{$root}-pb-end, #{$root}-tb-end) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+:where(#{$root}-pb-start, #{$root}-tb-start, #{$root}-pb-end, #{$root}-tb-end, #{$root}-pb-middle) {
     flex-grow: 1;
     flex-basis: 33.33%;
     min-height: 20px;
+    height: 54px;
+    padding: var(--spacing-small) 0;
 }
 
-:where(#{$root}-pb-start) {
-    margin-block: var(--spacing-medium);
+:where(#{$root}-pb-start, #{$root}-tb-start) {
     padding-inline: var(--spacing-medium);
+    display: flex;
+    align-items: center;
 }
 
 #{$root}-clear-selection {
@@ -565,6 +582,15 @@ $root: ".widget-datagrid";
     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;
+    }
 }
 
 @keyframes skeleton-loading {
@@ -578,3 +604,23 @@ $root: ".widget-datagrid";
         transform: rotate(1turn);
     }
 }
+
+@container widget-datagrid-footer (width < 500px) {
+    #{$root}-paging-bottom {
+        flex-direction: column;
+        :where(#{$root}-pb-start, #{$root}-pb-end, #{$root}-pb-middle) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}
+
+@container widget-datagrid-header (width < 500px) {
+    #{$root}-padding-top {
+        flex-direction: column-reverse;
+        :where(#{$root}-tb-start, #{$root}-tb-end) {
+            width: 100%;
+            justify-content: center;
+        }
+    }
+}

packages/modules/data-widgets/src/themesource/datawidgets/web/_export-alert.scss

@@ -20,7 +20,7 @@
             display: flex;
             padding: 4px;
             &:focus-visible {
-                outline: 1px solid $brand-primary;
+                outline: 1px solid var(--brand-primary, $brand-primary);
             }
         }
     }

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;
+        }
+    }
 }

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

@@ -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);

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withParentProvidedEnumStore.tsx

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- We added configurable selection count visibility and clear selection button label template for improved row selection management.
+
 - We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro
 
 ## [3.6.1] - 2025-10-14