Add theming property to define max checkbox size (#1061)

* Add theming property to define max checkbox size

* Remove

* Set checkbox max size propt to 18

Author: lukasmasuch

packages/core/API.md

@@ -391,6 +391,8 @@ The data grid uses the `Theme` provided to the DataEditer in the `theme` prop. T
 | bubbleHeight          | number              | --gdg-bubble-height           | The height (in pixels) of a bubble.                                                               |
 | bubblePadding         | number              | --gdg-bubble-padding          | The left & right padding (in pixels) of a bubble.                                                 |
 | bubbleMargin          | number              | --gdg-bubble-margin           | The margin (in pixels) between bubbles.                                                           |
+| checkboxMaxSize       | number              | --gdg-checkbox-max-size       | The maximum size of checkboxes (in pixels), e.g. for boolean cell and row markers.                |
+| roundingRadius        | number \| undefined | --gdg-rounding-radius         | The radius of rounded corners used by various grid elements (in pixels).                          |
 
 ---
 
@@ -1317,4 +1319,4 @@ If `isDraggable` is set, the whole Grid is draggable, and `onDragStart` will be
 
 Behavior not defined or officially supported. Feel free to check out what this does in github but anything in here is up for grabs to be changed at any time.
 
----
+---

packages/core/src/cells/boolean-cell.tsx

@@ -12,8 +12,6 @@ import {
 import { drawCheckbox } from "../internal/data-grid/render/draw-checkbox.js";
 import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
 
-const defaultCellMaxSize = 20;
-
 function isOverEditableRegion(e: {
     readonly cell: BooleanCell;
     readonly posX: number;
@@ -23,7 +21,7 @@ function isOverEditableRegion(e: {
 }): boolean {
     const { cell, posX: pointerX, posY: pointerY, bounds, theme } = e;
     const { width, height, x: cellX, y: cellY } = bounds;
-    const maxWidth = cell.maxSize ?? defaultCellMaxSize;
+    const maxWidth = cell.maxSize ?? theme.checkboxMaxSize;
     const cellCenterY = Math.floor(bounds.y + height / 2);
     const checkBoxWidth = getSquareWidth(maxWidth, height, theme.cellVerticalPadding);
     const posX = getSquareXPosFromAlign(
@@ -51,7 +49,7 @@ export const booleanCellRenderer: InternalCellRenderer<BooleanCell> = {
             a,
             a.cell.data,
             booleanCellIsEditable(a.cell),
-            a.cell.maxSize ?? defaultCellMaxSize,
+            a.cell.maxSize ?? a.theme.checkboxMaxSize,
             a.cell.hoverEffectIntensity ?? 0.35
         ),
     onDelete: c => ({

packages/core/src/cells/marker-cell.tsx

@@ -73,7 +73,7 @@ function drawMarkerRowCell(
             true,
             undefined,
             undefined,
-            18,
+            theme.checkboxMaxSize,
             "center",
             style
         );

packages/core/src/common/styles.ts

@@ -42,6 +42,7 @@ export function makeCSSStyle(theme: Theme): Record<string, string> {
         "--gdg-marker-font-style": theme.markerFontStyle,
         "--gdg-font-family": theme.fontFamily,
         "--gdg-editor-font-size": theme.editorFontSize,
+        "--gdg-checkbox-max-size": `${theme.checkboxMaxSize}px`,
         ...(theme.resizeIndicatorColor === undefined
             ? {}
             : { "--gdg-resize-indicator-color": theme.resizeIndicatorColor }),
@@ -91,6 +92,7 @@ export interface Theme {
     fontFamily: string;
     editorFontSize: string;
     lineHeight: number;
+    checkboxMaxSize: number;
 
     resizeIndicatorColor?: string;
     horizontalBorderColor?: string;
@@ -145,6 +147,7 @@ const dataEditorBaseTheme: Theme = {
         "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
     editorFontSize: "13px",
     lineHeight: 1.4, //unitless scaler depends on your font
+    checkboxMaxSize: 18,
 };
 
 export interface FullTheme extends Theme {

packages/core/src/data-editor/stories/utils.tsx

@@ -105,7 +105,6 @@ export function lossyCopyData<T extends EditableGridCell>(source: EditableGridCe
             }
             // No default
         }
-    assertNever(target);
 }
 
 export type GridColumnWithMockingInfo = GridColumn & {
@@ -814,7 +813,7 @@ export function useAllMockedKinds() {
                 const copied = lossyCopyData(val, current);
                 cache.current.set(col, row, {
                     ...copied,
-                    displayData: noDisplay === true ? undefined : copied.data?.toString() ?? "",
+                    displayData: noDisplay === true ? undefined : (copied.data?.toString() ?? ""),
                 } as any);
 
                 if (forceUpdate === true) {

packages/core/src/docs/08-theming.stories.tsx

@@ -277,6 +277,8 @@ The global theme is provided by the DataEditor by default and can be overriden b
 | fontFamily | --gdg-font-family | string | The font family used by the data grid. |
 | editorFontSize | --gdg-editor-font-size | string | The font size used by overlay editors. |
 | lineHeight | None | number | A unitless scaler which defines the height of a line of text relative to the ink size. |
+| checkboxMaxSize | --gdg-checkbox-max-size | number | The maximum size of checkboxes (in pixels), e.g. for boolean cell and row markers. |
+| roundingRadius | --gdg-rounding-radius | number | The radius of rounded corners used by various grid elements (in pixels). |
 
 If an option is missing from any theme it will be filled in with the default theme.
 `}

packages/core/src/docs/examples/theme-support.stories.tsx

@@ -57,6 +57,7 @@ const darkTheme = {
     baseFontStyle: "13px",
     fontFamily:
         "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
+    checkboxMaxSize: 18,
 };
 
 const hotdogStand = {
@@ -94,6 +95,7 @@ const hotdogStand = {
     fontFamily:
         "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
     roundingRadius: 6,
+    checkboxMaxSize: 40,
 };
 
 export const ThemeSupport: React.VFC = () => {

packages/core/src/internal/data-grid/render/data-grid-render.header.ts

@@ -81,7 +81,7 @@ export function drawGridHeaders(
         const hoveredBoolean = !noHover && hRow === -1 && hCol === c.sourceIndex;
         const hover = noHover
             ? 0
-            : hoverValues.find(s => s.item[0] === c.sourceIndex && s.item[1] === -1)?.hoverAmount ?? 0;
+            : (hoverValues.find(s => s.item[0] === c.sourceIndex && s.item[1] === -1)?.hoverAmount ?? 0);
 
         const hasSelectedCell = selection?.current !== undefined && selection.current.cell[0] === c.sourceIndex;
 
@@ -186,8 +186,8 @@ export function drawGroups(
             group?.overrideTheme === undefined ? theme : mergeAndRealizeTheme(theme, group.overrideTheme);
         const isHovered = hRow === -2 && hCol !== undefined && hCol >= span[0] && hCol <= span[1];
         const fillColor = isHovered
-            ? groupTheme.bgGroupHeaderHovered ?? groupTheme.bgHeaderHovered
-            : groupTheme.bgGroupHeader ?? groupTheme.bgHeader;
+            ? (groupTheme.bgGroupHeaderHovered ?? groupTheme.bgHeaderHovered)
+            : (groupTheme.bgGroupHeader ?? groupTheme.bgHeader);
 
         if (fillColor !== theme.bgHeader) {
             ctx.fillStyle = fillColor;
@@ -389,7 +389,7 @@ export function computeHeaderLayout(
     if (c.indicatorIcon !== undefined) {
         const textWidth =
             ctx === undefined
-                ? getMeasuredTextCache(c.title, theme.headerFontFull)?.width ?? 0
+                ? (getMeasuredTextCache(c.title, theme.headerFontFull)?.width ?? 0)
                 : measureTextCached(c.title, ctx, theme.headerFontFull).width;
         textBounds.width = textWidth;
         drawX += textWidth + xPad;
@@ -448,7 +448,7 @@ function drawHeaderInner(
             false,
             undefined,
             undefined,
-            18,
+            theme.checkboxMaxSize,
             "center",
             c.rowMarker
         );

packages/core/src/internal/data-grid/render/draw-checkbox.ts

@@ -1,8 +1,8 @@
 import { assertNever } from "../../../common/support.js";
-import { getSquareWidth, getSquareXPosFromAlign, getSquareBB, pointIsWithinBB } from "../../../common/utils.js";
+import { getSquareBB, getSquareWidth, getSquareXPosFromAlign, pointIsWithinBB } from "../../../common/utils.js";
 import type { Theme } from "../../../index.js";
-import { roundedRect } from "./data-grid-lib.js";
 import { BooleanEmpty, BooleanIndeterminate, type BaseGridCell } from "../data-grid-types.js";
+import { roundedRect } from "./data-grid-lib.js";
 
 export function drawCheckbox(
     ctx: CanvasRenderingContext2D,
@@ -15,13 +15,13 @@ export function drawCheckbox(
     highlighted: boolean,
     hoverX: number = -20,
     hoverY: number = -20,
-    maxSize: number = 32,
+    maxSize: number | undefined = undefined,
     alignment: BaseGridCell["contentAlign"] = "center",
     style: "circle" | "square" = "square"
 ) {
     const centerY = Math.floor(y + height / 2);
-    const rectBordRadius = style === "circle" ? 10_000 : theme.roundingRadius ?? 4;
-    let checkBoxWidth = getSquareWidth(maxSize, height, theme.cellVerticalPadding);
+    const rectBordRadius = style === "circle" ? 10_000 : (theme.roundingRadius ?? 4);
+    let checkBoxWidth = getSquareWidth(maxSize ?? theme.checkboxMaxSize, height, theme.cellVerticalPadding);
     let checkBoxHalfWidth = checkBoxWidth / 2;
     const posX = getSquareXPosFromAlign(alignment, x, width, theme.cellHorizontalPadding, checkBoxWidth);
     const bb = getSquareBB(posX, centerY, checkBoxWidth);