Improve styling to grid body (#2024)

Co-authored-by: Daniëlle Rameau <[email protected]>

Author: jpzwarte

.changeset/purple-pets-fix.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/locales': patch
+---
+
+New grid translations

.changeset/sixty-cobras-invite.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/data-source': patch
+---
+
+Expand `ListDataSource.setGroupBy` by adding a parameter for the label path

.changeset/tidy-tigers-bow.md

@@ -0,0 +1,12 @@
+---
+'@sl-design-system/grid': minor
+---
+
+Grid improvements:
+- Add "Cancel selection" button to the bulk action toolbar
+- Add `column` argument to `GridColumnHeaderRenderer` type
+- Fix missing aria-label on a selection column checkbox
+- Fix styling so a small button does not expand the header row above 48px
+- Fix styling so a row has a height of 40px
+- Fix empty `class` attributes
+- Fix missing `role="columnheader"` on the header cells

packages/components/data-source/src/list-data-source.spec.ts

@@ -34,7 +34,12 @@ describe('ListDataSource', () => {
   it('should group by after setting one', () => {
     ds.setGroupBy('profession');
 
-    expect(ds.groupBy).to.deep.equal({ path: 'profession', sorter: undefined, direction: undefined });
+    expect(ds.groupBy).to.deep.equal({
+      path: 'profession',
+      sorter: undefined,
+      direction: undefined,
+      labelPath: undefined
+    });
   });
 
   it('should not group by after removing it', () => {

packages/components/data-source/src/list-data-source.ts

@@ -5,6 +5,7 @@ export type ListDataSourceGroupBy<T> = {
   path: PathKeys<T>;
   sorter?: DataSourceSortFunction<T>;
   direction?: DataSourceSortDirection;
+  labelPath?: PathKeys<T>;
 };
 
 export type ListDataSourceOptions = {
@@ -62,9 +63,15 @@ export abstract class ListDataSource<T = any, U = T> extends DataSource<T, U> {
    * @param path Path to group by attribute.
    * @param sorter Optional sorter function.
    * @param direction Optional sort direction.
+   * @param labelPath Optional path for the group label.
    */
-  setGroupBy(path: PathKeys<T>, sorter?: DataSourceSortFunction<T>, direction?: DataSourceSortDirection): void {
-    this.#groupBy = { path, sorter, direction };
+  setGroupBy(
+    path: PathKeys<T>,
+    sorter?: DataSourceSortFunction<T>,
+    direction?: DataSourceSortDirection,
+    labelPath?: PathKeys<T>
+  ): void {
+    this.#groupBy = { path, sorter, direction, labelPath };
   }
 
   /**

packages/components/grid/package.json

@@ -39,6 +39,7 @@
     "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
   },
   "dependencies": {
+    "@sl-design-system/button": "^1.2.3",
     "@sl-design-system/checkbox": "^2.1.3",
     "@sl-design-system/data-source": "^0.1.3",
     "@sl-design-system/ellipsize-text": "^0.0.1",
@@ -50,7 +51,8 @@
     "@sl-design-system/shared": "^0.7.1",
     "@sl-design-system/skeleton": "^1.0.0",
     "@sl-design-system/text-field": "^1.6.3",
-    "@sl-design-system/tool-bar": "^0.0.8"
+    "@sl-design-system/tool-bar": "^0.0.8",
+    "@sl-design-system/tooltip": "^1.1.4"
   },
   "devDependencies": {
     "@lit-labs/virtualizer": "^2.1.0",

packages/components/grid/src/column-group.spec.ts

@@ -36,7 +36,7 @@ describe('sl-column-group', () => {
     });
 
     it('should render column headers', () => {
-      const columns = Array.from(el.renderRoot.querySelectorAll('th')).map(col => col.textContent);
+      const columns = Array.from(el.renderRoot.querySelectorAll('th')).map(col => col.textContent?.trim());
 
       expect(columns).to.deep.equal([
         'Name',
@@ -86,7 +86,7 @@ describe('sl-column-group', () => {
     it('should have the correct width when one is set explicitly', () => {
       const cells = Array.from(el.renderRoot.querySelectorAll('th'));
       expect(cells.map(cell => Math.floor(parseFloat(getComputedStyle(cell).width)))).to.deep.equal([
-        281, 724, 214, 212, 197, 186, 195
+        271, 734, 214, 212, 197, 186, 195
       ]);
     });
   });

packages/components/grid/src/column.spec.ts

@@ -38,7 +38,7 @@ describe('sl-column', () => {
     });
 
     it('should render column headers', () => {
-      const columns = Array.from(el.renderRoot.querySelectorAll('th')).map(col => col.textContent);
+      const columns = Array.from(el.renderRoot.querySelectorAll('th')).map(col => col.textContent?.trim());
 
       expect(columns).to.deep.equal(['First name', 'Last name', 'Current age']);
     });

packages/components/grid/src/column.ts

@@ -9,6 +9,7 @@ import {
 } from '@sl-design-system/shared';
 import { type CSSResult, LitElement, type TemplateResult, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { type Grid } from './grid.js';
 
 declare global {
@@ -25,7 +26,8 @@ declare global {
 export type GridColumnAlignment = 'start' | 'center' | 'end';
 
 /** Custom renderer type for column headers. */
-export type GridColumnHeaderRenderer = () => string | undefined | TemplateResult;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type GridColumnHeaderRenderer<T = any> = (column: GridColumn<T>) => string | undefined | TemplateResult;
 
 /** Custom renderer type for column cells. */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -177,7 +179,30 @@ export class GridColumn<T = any> extends LitElement {
     const classes = this.getClasses(),
       parts = ['header', ...this.getParts()];
 
-    return html`<th class=${classes.join(' ')} part=${parts.join(' ')}>${this.header ?? getNameByPath(this.path)}</th>`;
+    return html`
+      <th
+        class=${ifDefined(classes.length ? classes.join(' ') : undefined)}
+        part=${parts.join(' ')}
+        role="columnheader"
+      >
+        ${this.renderHeaderLabel()}
+      </th>
+    `;
+  }
+
+  /**
+   * This method renders the label for the header. This is used to render the content of the
+   * `<th>` element. Override this method if you want to customize how a header label is rendered.
+   * Do not override this if you only want to change the classes, contents or parts of the header.
+   */
+  renderHeaderLabel(): string | undefined | TemplateResult {
+    if (this.header) {
+      return typeof this.header === 'string' ? html`<span>${this.header}</span>` : this.header(this);
+    } else if (this.path) {
+      return html`<span>${getNameByPath(this.path)}</span>`;
+    }
+
+    return undefined;
   }
 
   /**
@@ -193,12 +218,14 @@ export class GridColumn<T = any> extends LitElement {
 
     if (this.ellipsizeText && typeof data === 'string') {
       return html`
-        <td class=${classes.join(' ')} part=${parts.join(' ')}>
+        <td class=${ifDefined(classes.length ? classes.join(' ') : undefined)} part=${parts.join(' ')}>
           <sl-ellipsize-text>${data}</sl-ellipsize-text>
         </td>
       `;
     } else {
-      return html`<td class=${classes.join(' ')} part=${parts.join(' ')}>${data}</td>`;
+      return html`
+        <td class=${ifDefined(classes.length ? classes.join(' ') : undefined)} part=${parts.join(' ')}>${data}</td>
+      `;
     }
   }
 

packages/components/grid/src/drag-handle-column.ts

@@ -34,7 +34,7 @@ export class GridDragHandleColumn<T = any> extends GridColumn<T> {
       return nothing;
     }
 
-    return html`<th part="header drag-handle"></th>`;
+    return html`<th part="header drag-handle" role="columnheader"></th>`;
   }
 
   override renderData(item: T): TemplateResult {

packages/components/grid/src/filter-column.ts

@@ -13,7 +13,7 @@ declare global {
   }
 }
 
-export type GridFilterMode = 'select' | 'text';
+export type GridFilterMode = 'date' | 'date-range' | 'select' | 'text';
 
 export interface GridFilterOption {
   label: string;

packages/components/grid/src/filter.scss

@@ -5,7 +5,7 @@
   gap: var(--sl-size-100);
   inline-size: 100%;
   min-inline-size: 0;
-  padding: var(--sl-size-075) var(--sl-size-200);
+  padding: var(--sl-size-075) var(--sl-size-150);
 }
 
 sl-search-field,