Allow to configure Table header hint icon

Author: veej

packages/bento-design-system/src/Table/Config.ts

@@ -23,6 +23,7 @@ type CellPaddingConfig = {
 
 export type TableConfig = {
   headerInfoIcon: (props: IconProps) => JSX.Element;
+  headerHintIcon: (props: IconProps) => JSX.Element;
   emptyIcon: (props: IconProps) => JSX.Element;
   headerBackgroundColor: BentoSprinkles["background"];
   headerForegroundColor: BentoSprinkles["color"];

packages/bento-design-system/src/Table/Table.tsx

@@ -52,7 +52,6 @@ import {
   Row as RowType,
 } from "./types";
 import { useLayoutEffect, useMemo, useState, CSSProperties, useEffect, useRef } from "react";
-import { IconQuestionSolid, IconInfo } from "../Icons";
 import { match, __ } from "ts-pattern";
 import { useBentoConfig } from "../BentoConfigContext";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -562,7 +561,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
   const hint = column.hint ? (
     typeof column.hint === "object" ? (
       <IconButton
-        icon={IconQuestionSolid}
+        icon={config.headerHintIcon}
         onPress={column.hint.onPress}
         kind="transparent"
         hierarchy="primary"
@@ -573,7 +572,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
       <Tooltip
         trigger={(ref, props) => (
           <Box as="div" display="inline-block" ref={ref} {...props}>
-            <IconInfo size={12} color="currentColor" />
+            <config.headerInfoIcon size={12} color="currentColor" />
           </Box>
         )}
         content={column.hint}

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -23,6 +23,7 @@ import {
   IconPositiveCircle,
   IconQuestionCircle,
   IconNegative,
+  IconQuestionSolid,
 } from "../Icons";
 import type { ButtonConfig } from "../Button/Config";
 import type { CardConfig } from "../Card/Config";
@@ -504,6 +505,7 @@ export const dropdown: DropdownConfig = {
 
 export const table: TableConfig = {
   headerInfoIcon: IconInfo,
+  headerHintIcon: IconQuestionSolid,
   emptyIcon: IconSearch,
   headerBackgroundColor: "backgroundPrimary",
   headerForegroundColor: "foregroundPrimary",