feat: change labels and fix styling

Author: iobuhov

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

@@ -526,7 +526,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid .widget-datagrid-load-more {
     display: block !important;
-    margin: 0;
+    margin: var(--spacing-small, 8px) 0;
 }
 
 .infinite-loading.widget-datagrid-grid-body {
@@ -564,9 +564,6 @@ $root: ".widget-datagrid";
 :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-middle) {
@@ -575,7 +572,6 @@ $root: ".widget-datagrid";
 }
 
 :where(#{$root}-pb-start, #{$root}-tb-start) {
-    padding-inline: var(--spacing-medium);
     display: flex;
     align-items: center;
 }
@@ -596,6 +592,13 @@ $root: ".widget-datagrid";
     }
 }
 
+:where(#{$root}-selection-counter) {
+    display: flex;
+    align-items: center;
+    height: 54px;
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
 :where(#{$root}-select-all-bar) {
     grid-column: 1 / -1;
     background-color: #f0f1f2;

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -211,17 +211,17 @@
                     </enumerationValues>
                 </property>
                 <property key="showSelectAllToggle" type="boolean" defaultValue="true">
-                    <caption>Show (un)check all toggle</caption>
-                    <description>Show a checkbox in the grid header to check or uncheck multiple items.</description>
+                    <caption>"Select all" checkbox</caption>
+                    <description>Displays a checkbox in the grid header that allows selecting or deselecting all rows on the current page.</description>
+                </property>
+                <property key="enableSelectAll" type="boolean" defaultValue="false">
+                    <caption>"Select all" across pages</caption>
+                    <description>Shows a banner with the option to select all rows across all pages when all rows on the current page are selected.</description>
                 </property>
                 <property key="keepSelection" type="boolean" defaultValue="false">
                     <caption>Keep selection</caption>
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
-                <property key="enableSelectAll" type="boolean" defaultValue="false">
-                    <caption>Enable select all</caption>
-                    <description>Allow select all through multiple pages (based on current filter).</description>
-                </property>
                 <property key="selectionCounterPosition" type="enumeration" defaultValue="bottom" required="true">
                     <caption>Show selection count</caption>
                     <description />

packages/pluggableWidgets/datagrid-web/src/components/SelectionCounter.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react-lite";
-import { Fragment } from "react";
 import { useSelectionCounterViewModel } from "../deps-hooks";
 import { useLegacyContext } from "../helpers/root-context";
 
@@ -8,14 +7,14 @@ export const SelectionCounter = observer(function SelectionCounter() {
     const { selectActionHelper } = useLegacyContext();
 
     return (
-        <Fragment>
-            <span className="widget-datagrid-selection-count" aria-live="polite" aria-atomic="true">
+        <div className="widget-datagrid-selection-counter">
+            <span className="widget-datagrid-selection-text" aria-live="polite" aria-atomic="true">
                 {selectionCountStore.selectedCountText}
             </span>
             &nbsp;
             <button className="widget-datagrid-btn-link" onClick={selectActionHelper.onClearSelection}>
                 {selectionCountStore.clearButtonLabel}
             </button>
-        </Fragment>
+        </div>
     );
 });

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -102,8 +102,8 @@ export interface DatagridContainerProps {
     itemSelectionMethod: ItemSelectionMethodEnum;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
-    keepSelection: boolean;
     enableSelectAll: boolean;
+    keepSelection: boolean;
     selectionCounterPosition: SelectionCounterPositionEnum;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;
@@ -161,8 +161,8 @@ export interface DatagridPreviewProps {
     itemSelectionMethod: ItemSelectionMethodEnum;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
-    keepSelection: boolean;
     enableSelectAll: boolean;
+    keepSelection: boolean;
     selectionCounterPosition: SelectionCounterPositionEnum;
     loadingType: LoadingTypeEnum;
     refreshIndicator: boolean;