fix: reference to updated scss variable

yordan-st · yordan-st · commit 07c86b089db3 · 2025-09-22T11:22:43.000+02:00
diff --git a/packages/modules/data-widgets/CHANGELOG.md b/packages/modules/data-widgets/CHANGELOG.md
@@ -6,6 +6,10 @@ 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.
+
 ## [3.5.0] DataWidgets - 2025-09-16
 
 ### Changed
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/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;
 }
 
 :where(.widget-datagrid-grid.infinite-loading) {
@@ -529,21 +537,30 @@ $root: ".widget-datagrid";
     z-index: 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 {
@@ -567,3 +584,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;
+        }
+    }
+}
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-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.
+
 ## [3.4.0] - 2025-09-12
 
 ### Fixed
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -9,8 +9,8 @@ import {
     LoadingTypeEnum,
     PaginationEnum,
     PagingPositionEnum,
-    ShowPagingButtonsEnum,
-    SelectionCountVisibilityEnum
+    SelectionCountVisibilityEnum,
+    ShowPagingButtonsEnum
 } from "../../typings/DatagridProps";
 import { SelectActionHelper } from "../helpers/SelectActionHelper";
 import { useDatagridRootScope } from "../helpers/root-context";
@@ -136,10 +136,11 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         visibleColumns
     } = props;
 
-    const { basicData } = useDatagridRootScope();
+    const { basicData, selectionCountStore } = useDatagridRootScope();
 
     const showHeader = !!headerContent;
     const showTopBar = paging && (pagingPosition === "top" || pagingPosition === "both");
+    const showFooter = paging && (pagingPosition === "bottom" || pagingPosition === "both");
 
     const pagination = paging ? (
         <Pagination
@@ -165,14 +166,14 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     return (
         <Fragment>
-            {showTopBar && (
-                <WidgetTopBar
-                    selectionCountVisibility={selectionCountVisibility}
-                    clearSelectionButtonLabel={clearSelectionButtonLabel}
-                >
-                    {pagination}
-                </WidgetTopBar>
-            )}
+            <WidgetTopBar
+                selectedCount={selectionCountStore.selectedCount}
+                showTopBar={showTopBar}
+                selectionCountVisibility={selectionCountVisibility}
+                clearSelectionButtonLabel={clearSelectionButtonLabel}
+            >
+                {pagination}
+            </WidgetTopBar>
             {showHeader && <WidgetHeader headerTitle={headerTitle}>{headerContent}</WidgetHeader>}
             <WidgetContent>
                 <Grid
@@ -243,8 +244,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 </Grid>
             </WidgetContent>
             <WidgetFooter
+                selectedCount={selectionCountStore.selectedCount}
+                showFooter={showFooter}
                 pagination={pagination}
-                pagingPosition={pagingPosition}
                 paginationType={paginationType}
                 loadMoreButtonCaption={loadMoreButtonCaption}
                 clearSelectionButtonLabel={clearSelectionButtonLabel}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx
@@ -1,52 +1,52 @@
 import { createElement, ReactElement, ReactNode } from "react";
-import { PaginationEnum, PagingPositionEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
+import { PaginationEnum, SelectionCountVisibilityEnum } from "../../typings/DatagridProps";
 import { SelectionCounter } from "./SelectionCounter";
 
 type WidgetFooterProps = {
-    pagingPosition: PagingPositionEnum;
     pagination: ReactNode;
     paginationType: PaginationEnum;
     loadMoreButtonCaption?: string;
     clearSelectionButtonLabel?: string;
     selectionCountVisibility?: SelectionCountVisibilityEnum;
     hasMoreItems: boolean;
+    showFooter: boolean;
+    selectedCount: number;
     setPage?: (computePage: (prevPage: number) => number) => void;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetFooter(props: WidgetFooterProps): ReactElement | null {
     const {
-        pagingPosition,
         pagination,
         paginationType,
         loadMoreButtonCaption,
         clearSelectionButtonLabel,
         selectionCountVisibility,
         hasMoreItems,
         setPage,
+        showFooter,
+        selectedCount,
         ...rest
     } = props;
 
     return (
         <div {...rest} className="widget-datagrid-footer table-footer">
             <div className="widget-datagrid-paging-bottom">
-                <div className="widget-datagrid-pb-start">
-                    {selectionCountVisibility === "bottom" && (
+                {selectionCountVisibility === "bottom" && selectedCount > 0 && (
+                    <div className="widget-datagrid-pb-start">
                         <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-                    )}
-                </div>
-                {hasMoreItems && paginationType === "loadMore" && (
-                    <div className="widget-datagrid-pb-middle">
+                    </div>
+                )}
+                <div className="widget-datagrid-pb-end">
+                    {showFooter && pagination}
+                    {hasMoreItems && paginationType === "loadMore" && (
                         <button
                             className="btn btn-primary widget-datagrid-load-more"
                             onClick={() => setPage && setPage(prev => prev + 1)}
                             tabIndex={0}
                         >
                             {loadMoreButtonCaption}
                         </button>
-                    </div>
-                )}
-                <div className="widget-datagrid-pb-end">
-                    {(pagingPosition === "bottom" || pagingPosition === "both") && pagination}
+                    )}
                 </div>
             </div>
         </div>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx b/packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx
@@ -5,19 +5,22 @@ import { SelectionCounter } from "./SelectionCounter";
 type WidgetTopBarProps = {
     selectionCountVisibility?: SelectionCountVisibilityEnum;
     clearSelectionButtonLabel?: string;
+    showTopBar: boolean;
+    selectedCount: number;
 } & JSX.IntrinsicElements["div"];
 
 export function WidgetTopBar(props: WidgetTopBarProps): ReactElement {
-    const { selectionCountVisibility, clearSelectionButtonLabel } = props;
-
-    console.warn(selectionCountVisibility);
-
+    const { selectionCountVisibility, clearSelectionButtonLabel, showTopBar, selectedCount, ...restProps } = props;
     return (
-        <div {...props} className="widget-datagrid-top-bar table-header">
-            {selectionCountVisibility === "top" && (
-                <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
-            )}
-            {props.children}
+        <div {...restProps} className="widget-datagrid-top-bar table-header">
+            <div className="widget-datagrid-padding-top">
+                {selectionCountVisibility === "top" && selectedCount > 0 && (
+                    <div className="widget-datagrid-tb-start">
+                        <SelectionCounter clearSelectionButtonLabel={clearSelectionButtonLabel} />
+                    </div>
+                )}
+                {showTopBar && <div className="widget-datagrid-tb-end">{props.children}</div>}
+            </div>
         </div>
     );
 }
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
