Update StandardTable to allow easy ways to reduce text size (#621)

Co-authored-by: Johan Lindskogen <[email protected]>

packages/grid/src/features/standard-table/components/StandardTableCell.tsx

@@ -20,6 +20,7 @@ import { getCellBorder } from "../util/CellBorderCalculator";
 import { formatValueLabel } from "../util/LabelFormatter";
 import { StandardTableCellUi } from "./StandardTableCellUi";
 import { TextCell } from "./TextCell";
+import { DefaultStandardTableCellRenderer } from "../config/StandardTableColumnConfig";
 
 export interface StandardTableCellProps<TItem> {
   columnId: string;
@@ -31,6 +32,11 @@ export interface StandardTableCellProps<TItem> {
   disableBorderLeft?: boolean;
 }
 
+const fallbackCellRenderer: DefaultStandardTableCellRenderer<unknown> = ({
+  label,
+  textSize,
+}) => <TextCell label={label} size={textSize} />;
+
 export const StandardTableCell = React.memo(function StandardTableCell<TItem>({
   columnId,
   item,
@@ -58,14 +64,17 @@ export const StandardTableCell = React.memo(function StandardTableCell<TItem>({
     return selectedIds.indexOf(itemKey) >= 0;
   }, [itemKey, selectedIds]);
 
+  const { defaultCellRenderer = fallbackCellRenderer, defaultTextSize } =
+    useStandardTableConfig();
+
   const {
     itemValueResolver,
     itemLabelFormatter,
     width,
     minWidth,
     justifyContentCell = "flex-start",
     borderLeft,
-    renderCell,
+    renderCell = defaultCellRenderer,
     gridCellOptions: gridCellOptionsForColumn,
     isEditable,
     onChange,
@@ -132,20 +141,17 @@ export const StandardTableCell = React.memo(function StandardTableCell<TItem>({
 
   const content = useMemo(
     () =>
-      renderCell ? (
-        renderCell({
-          label,
-          value: itemValue,
-          item,
-          gridCell,
-          isEditable: editable,
-          isSelected,
-          zIndex: currentZIndex,
-          itemKey,
-        })
-      ) : (
-        <TextCell label={label} />
-      ),
+      renderCell({
+        label,
+        value: itemValue,
+        item,
+        gridCell,
+        isEditable: editable,
+        isSelected,
+        zIndex: currentZIndex,
+        textSize: defaultTextSize,
+        itemKey,
+      }),
     [
       renderCell,
       label,
@@ -156,6 +162,7 @@ export const StandardTableCell = React.memo(function StandardTableCell<TItem>({
       isSelected,
       currentZIndex,
       itemKey,
+      defaultTextSize,
     ]
   );
 

packages/grid/src/features/standard-table/components/TextCell.tsx

@@ -1,17 +1,21 @@
-import { Indent, Text } from "@stenajs-webui/core";
+import { Indent, Text, TextSize } from "@stenajs-webui/core";
 import * as React from "react";
 import styles from "./TextCell.module.css";
 
 interface Props {
   label?: string;
+  size?: TextSize;
+  color?: string;
 }
 
 export const TextCell: React.FC<Props> = React.memo(function TextCell({
   label,
+  size,
+  color,
 }) {
   return (
     <Indent overflow={"hidden"}>
-      <Text className={styles.textCell} title={label}>
+      <Text className={styles.textCell} title={label} size={size} color={color}>
         {label}
       </Text>
     </Indent>

packages/grid/src/features/standard-table/config/StandardTableColumnConfig.ts

@@ -1,11 +1,12 @@
+import * as React from "react";
 import { ReactNode } from "react";
 import {
   UseGridCellOptions,
   UseGridCellResult,
 } from "../../grid-cell/hooks/UseGridCell";
 import { SortOrderIconVariant } from "../../table-ui/components/table/SortOrderIcon";
 import { StandardTableOnKeyDownArgs } from "./StandardTableConfig";
-import * as React from "react";
+import { TextSize } from "@stenajs-webui/core";
 
 export type StandardTableColumnConfig<
   TItem,
@@ -211,12 +212,21 @@ export interface StandardTableCellRendererArgObject<TItemValue, TItem> {
   gridCell: UseGridCellResult<string>;
   isEditable?: boolean;
   isSelected: boolean;
+  textSize?: TextSize;
   /**
    * The z-index used for that cell. Usable if the cell has a popover which should get same z-index for example.
    */
   zIndex?: number | string;
 }
 
+/**
+ * Default renderer. This is defined in config, not for a specific column.
+ * Therefor, it can not know "value: TItemValue", since it has not been defined yet.
+ */
+export type DefaultStandardTableCellRenderer<TItem> = (
+  arg: StandardTableCellRendererArgObject<unknown, TItem>
+) => ReactNode;
+
 export type BackgroundResolver<TItem> = (item: TItem) => string | undefined;
 
 export interface ItemValueResolver<TItem, TItemValue> {

packages/grid/src/features/standard-table/config/StandardTableConfig.ts

@@ -2,10 +2,12 @@ import { ReactNode } from "react";
 import { UseGridCellOptions } from "../../grid-cell/hooks/UseGridCell";
 import { SortOrderIconVariant } from "../../table-ui/components/table/SortOrderIcon";
 import {
+  DefaultStandardTableCellRenderer,
   StandardTableColumnConfig,
   StandardTableColumnConfigWithGroups,
 } from "./StandardTableColumnConfig";
 import { StandardTableColumnGroupConfig } from "./StandardTableColumnGroupConfig";
+import { TextSize } from "@stenajs-webui/core";
 
 export interface RowExpansionArgs {
   onRequestCollapse?: () => void;
@@ -220,6 +222,20 @@ export interface StandardTableConfigBase<TItem, TColumnKey extends string> {
    * @default amount
    */
   sortOrderIconVariant?: SortOrderIconVariant;
+
+  /**
+   * This can be used to override default text renderer for the whole table.
+   * Column cellRenderer will still override this. Since this is global for the table, and not local to a column,
+   * the type of itemValue can not be known. It should use `label` as source of text instead.
+   * If omitted, TextCell is used as usual.
+   */
+  defaultCellRenderer?: DefaultStandardTableCellRenderer<TItem>;
+
+  /**
+   * This config specifies the text size to be used by the default TextCell component.
+   * If omitted, "normal" is used.
+   */
+  defaultTextSize?: TextSize;
 }
 
 export interface RowBackgroundResolverColorCombination {

packages/grid/src/features/standard-table/helpers/cell-renderers/editable-text-cell/EditableTextCell.tsx

@@ -1,10 +1,12 @@
-import { Indent, Text } from "@stenajs-webui/core";
+import { Indent, Text, TextSize } from "@stenajs-webui/core";
 import { TextInput } from "@stenajs-webui/forms";
 import * as React from "react";
 import { StandardTableCellRenderer } from "../../../config/StandardTableColumnConfig";
 
 export const createStandardEditableTextCell =
-  <TItemValue, TItem>(): StandardTableCellRenderer<TItemValue, TItem> =>
+  <TItemValue, TItem>(
+    textSize?: TextSize
+  ): StandardTableCellRenderer<TItemValue, TItem> =>
   ({
     label,
     gridCell: {
@@ -29,6 +31,8 @@ export const createStandardEditableTextCell =
       />
     ) : (
       <Indent>
-        <Text color={"var(--swui-primary-action-color)"}>{label}</Text>
+        <Text color={"var(--swui-primary-action-color)"} size={textSize}>
+          {label}
+        </Text>
       </Indent>
     );

packages/grid/src/features/standard-table/stories/StandardTable.stories.tsx

@@ -50,6 +50,48 @@ export const Overview = () => {
   return <StandardTable items={items} config={config} />;
 };
 
+export const DefaultTextSize = () => {
+  const { items, onChangeNumPassengers } = useListState(mockedItems);
+
+  const config: StandardTableConfig<ListItem, keyof ListItem> = {
+    ...standardTableConfigForStories,
+    defaultTextSize: "smaller",
+    checkboxDisabledResolver: (item) => item.id === "125",
+    columns: {
+      ...standardTableConfigForStories.columns,
+      numPassengers: {
+        ...standardTableConfigForStories.columns.numPassengers,
+        onChange: onChangeNumPassengers,
+      },
+    },
+  };
+
+  return <StandardTable items={items} config={config} />;
+};
+
+export const DefaultCellRenderer = () => {
+  const { items, onChangeNumPassengers } = useListState(mockedItems);
+
+  const config: StandardTableConfig<ListItem, keyof ListItem> = {
+    ...standardTableConfigForStories,
+    defaultCellRenderer: ({ label }) => (
+      <Indent>
+        <Tag label={label} variant={"success"} />
+      </Indent>
+    ),
+    checkboxDisabledResolver: (item) => item.id === "125",
+    columns: {
+      ...standardTableConfigForStories.columns,
+      numPassengers: {
+        ...standardTableConfigForStories.columns.numPassengers,
+        onChange: onChangeNumPassengers,
+      },
+    },
+  };
+
+  return <StandardTable items={items} config={config} />;
+};
+
 export const Variants = () => {
   const { items } = useListState(mockedItems);