Add new datatable param for checkboxes visibility (#9908)

docs/content-services/components/document-list.component.md

@@ -66,6 +66,7 @@ Displays the documents from a repository.
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
 | contextMenuActions | `boolean` | false | Toggles context menus for each row |
 | currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
+| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. | 
 | emptyFolderImageUrl | `string` |  | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
 | filterValue | `any` |  | Initial value for filter. |
 | headerFilters | `boolean` | false | Toggles the header filters mode. |

docs/core/components/datatable.component.md

@@ -429,6 +429,8 @@ Learn more about styling your datatable: [Customizing the component's styles](#c
 | columns                  | `any[]`                                                                             | \[]           | The columns that the datatable will show.                                                                                                                                  |
 | contextMenu              | `boolean`                                                                           | false         | Toggles custom context menu for the component.                                                                                                                             |
 | data                     | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) |               | Data source for the table                                                                                                                                                  |
+| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. | 
+
 | fallbackThumbnail        | `string`                                                                            |               | Fallback image for rows where the thumbnail is missing.                                                                                                                    |
 | isResizingEnabled        | `boolean`                                                                           | false         | Flag that indicates if the datatable allows column resizing.                                                                                                               |
 | loading                  | `boolean`                                                                           | false         | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template).               |

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -17,6 +17,7 @@
     [allowFiltering]="allowFiltering"
     [isResizingEnabled]="isResizingEnabled"
     [blurOnResize]="blurOnResize"
+    [displayCheckboxesOnHover]="displayCheckboxesOnHover"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -340,6 +340,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     blurOnResize = true;
 
+    /** Display checkboxes in datatable rows on hover only */
+    @Input()
+    displayCheckboxesOnHover = false;
+
     /** Emitted when the user clicks a list node */
     @Output()
     nodeClick = new EventEmitter<NodeEntityEvent>();

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -186,6 +186,7 @@
                     <mat-checkbox
                         [id]="'select-file-' + idx"
                         [class.adf-datatable-checkbox-selected]="row.isSelected"
+                        [class.adf-datatable-hover-only]="displayCheckboxesOnHover"
                         [checked]="row.isSelected"
                         [attr.aria-checked]="row.isSelected"
                         role="checkbox"

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -159,17 +159,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         align-items: center;
 
         &:hover {
-            .adf-datatable-checkbox-cell {
+            .adf-datatable-hover-only {
-                &.adf-datatable-checkbox-single {
                 visibility: visible;
             }
         }
-        }
 
-        .adf-datatable-checkbox-single {
+        .adf-datatable-hover-only {
             visibility: hidden;
 
-            &:has(.adf-datatable-checkbox-selected) {
+            &.adf-datatable-checkbox-selected {
                 visibility: visible;
             }
         }
@@ -453,6 +451,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         display: none;
     }
 
+    /* stylelint-disable media-feature-range-notation */
+
     /* mobile phone */
     @media all and (max-width: 768px) {
         .adf-desktop-only.adf-ellipsis-cell {
@@ -578,6 +578,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
+/* stylelint-disable selector-class-pattern */
 .cdk-drag-preview {
     &.adf-datatable-cell-header {
         border-radius: 6px;
@@ -641,7 +642,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     align-items: center;
     height: inherit;
 
-    .adf-datatable-body[role="rowgroup"] {
+    .adf-datatable-body[role='rowgroup'] {
         .adf-datatable-row {
             height: 100%;
             background-color: var(--adf-theme-background-card-color);

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -1329,6 +1329,36 @@ describe('DataTable', () => {
         expect(rows[1].getValue('icon')).toBe('directions_car');
         expect(rows[2].getValue('icon')).toBe('local_shipping');
     });
+
+    describe('displayCheckboxesOnHover', () => {
+        const getCheckboxes = () =>
+            fixture.debugElement.queryAll(By.css('.adf-datatable-checkbox-single .adf-checkbox-sr-only')).map((row) => row.nativeElement);
+
+        beforeEach(() => {
+            dataTable.data = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
+            dataTable.multiselect = true;
+        });
+
+        it('should always display checkboxes when displayCheckboxesOnHover is set to false', () => {
+            dataTable.displayCheckboxesOnHover = false;
+            fixture.detectChanges();
+
+            const checkboxes = getCheckboxes();
+            checkboxes.forEach((checkbox) => {
+                expect(checkbox.classList).not.toContain('adf-datatable-hover-only');
+            });
+        });
+
+        it('should display checkboxes on hover when displayCheckboxesOnHover is set to true', () => {
+            dataTable.displayCheckboxesOnHover = true;
+            fixture.detectChanges();
+
+            const checkboxes = getCheckboxes();
+            checkboxes.forEach((checkbox) => {
+                expect(checkbox.classList).toContain('adf-datatable-hover-only');
+            });
+        });
+    });
 });
 
 describe('Accesibility', () => {

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -238,6 +238,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Input()
     blurOnResize = true;
 
+    /**
+     * Flag that indicates if selection checkboxes inside row should be displayed on hover only.
+     */
+    @Input()
+    displayCheckboxesOnHover = false;
+
     headerFilterTemplate: TemplateRef<any>;
     noContentTemplate: TemplateRef<any>;
     noPermissionTemplate: TemplateRef<any>;