[SwatchColorPicker] add a renderfunction as props to override cell co…

…ntent (#28064) * pass renderer as props for cell content * api.md file * add a sample usecase for onRenderContent --------- Co-authored-by: Micah Godbolt <[email protected]>
microsoft · Jun 6, 2023 · 90162ed · 90162ed
1 parent 1b46051
commit 90162ed
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 5 deletions.
diff --git a/change/@fluentui-react-56abc8fc-36e8-4557-8cd9-2793648f0cba.json b/change/@fluentui-react-56abc8fc-36e8-4557-8cd9-2793648f0cba.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add onRenderCellContent to override cell internals",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx b/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useId } from '@fluentui/react-hooks';
-import { SwatchColorPicker } from '@fluentui/react/lib/SwatchColorPicker';
+import { IColorCellProps, SwatchColorPicker } from '@fluentui/react/lib/SwatchColorPicker';
 
 const colorCellsExample1 = [
   { id: 'a', label: 'orange', color: '#ca5010' },
@@ -24,6 +24,17 @@ const colorCellsExample2 = [
   { id: 'l', label: 'gray20', color: '#69797e' },
 ];
 
+const colorCellsExample3 = [
+  { id: 'a', label: 'redBlueGradient', color: 'linear-gradient(0, red, blue)' },
+  { id: 'b', label: 'greenGradient', color: 'linear-gradient(0, grey, green)' },
+  { id: 'c', label: 'yellowGradient', color: 'linear-gradient(0, grey, yellow)' },
+  { id: 'd', label: 'magentaGradient', color: 'linear-gradient(0, grey, magenta)' },
+  { id: 'e', label: 'cyanGradient', color: 'linear-gradient(0, #038387, #ca5010)' },
+  { id: 'f', label: 'ygGradient', color: 'linear-gradient(0, #8cbd18, #69797e)' },
+  { id: 'g', label: 'grayGreen', color: 'linear-gradient(0, #0b6a0b, #69797e)' },
+  { id: 'h', label: 'gray', color: '#7a7574' },
+];
+
 export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
   const [previewColor, setPreviewColor] = React.useState<string>();
   const baseId = useId('colorpicker');
@@ -32,6 +43,19 @@ export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
     setPreviewColor(color!);
   };
 
+  const renderCustomCellContent = (cellProps: IColorCellProps) => {
+    return (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          borderRadius: '50%',
+          background: cellProps.color,
+        }}
+      />
+    );
+  };
+
   return (
     <div>
       <div id={`${baseId}-circle`}>Simple circle swatch color picker:</div>
@@ -82,6 +106,17 @@ export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
         colorCells={colorCellsExample2}
         aria-labelledby={`${baseId}-grid`}
       />
+      <div id={`${baseId}-custom-content`}>Swatch color picker with gradient colors:</div>
+      <SwatchColorPicker
+        columnCount={4}
+        cellHeight={40}
+        cellWidth={40}
+        cellShape={'circle'}
+        colorCells={colorCellsExample3}
+        aria-labelledby={`${baseId}-custom-content`}
+        // eslint-disable-next-line react/jsx-no-bind
+        onRenderColorCellContent={renderCustomCellContent}
+      />
       <div id={`${baseId}-disabled`}>Simple disabled circle swatch color picker:</div>
       <SwatchColorPicker
         disabled

diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -3583,6 +3583,7 @@ export interface IColorPickerGridCellProps {
     // (undocumented)
     onMouseLeave?: (ev: React_2.MouseEvent<HTMLButtonElement>) => void;
     onMouseMove?: (ev: React_2.MouseEvent<HTMLButtonElement>) => boolean;
+    onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
     // (undocumented)
     onWheel?: (ev: React_2.MouseEvent<HTMLButtonElement>) => void;
     selected: boolean;
@@ -9081,6 +9082,7 @@ export interface ISwatchColorPickerProps extends React_2.RefAttributes<HTMLEleme
     // @deprecated (undocumented)
     onColorChanged?: (id?: string, color?: string) => void;
     onRenderColorCell?: IRenderFunction<IColorCellProps>;
+    onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
     selectedId?: string;
     shouldFocusCircularNavigate?: boolean;
     styles?: IStyleFunctionOrObject<ISwatchColorPickerStyleProps, ISwatchColorPickerStyles>;

diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
@@ -100,7 +100,7 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
   });
 
   // Render the core of a color cell
-  const onRenderColorOption = (colorOption: IColorCellProps): JSX.Element => {
+  const renderColorOption = (colorOption: IColorCellProps): JSX.Element => {
     const svgClassName = classNames.svg;
 
     // Build an SVG for the cell with the given shape and color properties
@@ -119,6 +119,11 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
     );
   };
 
+  const onRenderItem = (option: IColorCellProps): JSX.Element => {
+    const { onRenderColorCellContent = renderColorOption } = props;
+    return onRenderColorCellContent(option, renderColorOption) as JSX.Element;
+  };
+
   const cellSemantics = isRadio
     ? {
         role: 'radio',
@@ -138,7 +143,7 @@ export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCe
       disabled={disabled}
       {...cellSemantics}
       // eslint-disable-next-line react/jsx-no-bind
-      onRenderItem={onRenderColorOption}
+      onRenderItem={onRenderItem}
       onClick={onClick}
       onHover={onHover}
       onFocus={onFocus}

diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { IStyle, ITheme } from '../../Styling';
-import type { IStyleFunctionOrObject } from '../../Utilities';
+import type { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
 
 /**
  * {@docCategory SwatchColorPicker}
@@ -113,6 +113,11 @@ export interface IColorPickerGridCellProps {
   onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 
   onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Custom render function for rendering internal content of the color cell.
+   */
+  onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
 }
 
 /**

diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
@@ -74,6 +74,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
     cellHeight,
     cellWidth,
     cellBorderWidth,
+    onRenderColorCellContent,
   } = props;
 
   /**
@@ -321,6 +322,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
         onMouseLeave={onMouseLeave}
         onWheel={setNavigationTimeout}
         onKeyDown={onKeyDown}
+        onRenderColorCellContent={onRenderColorCellContent}
         height={cellHeight}
         width={cellWidth}
         borderWidth={cellBorderWidth}

diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts
@@ -84,10 +84,17 @@ export interface ISwatchColorPickerProps extends React.RefAttributes<HTMLElement
   onCellFocused?: (id?: string, color?: string, event?: React.FormEvent<HTMLButtonElement>) => void;
 
   /**
-   * Custom render function for the color cell
+   * Custom render function for the color cell.
+   * This can replace the entire button element, including the default focus and hover states.
    */
   onRenderColorCell?: IRenderFunction<IColorCellProps>;
 
+  /**
+   * Custom render function for inner content of the color cell.
+   * This will retain the cell's default button behavior and overrides just the inner content.
+   */
+  onRenderColorCellContent?: IRenderFunction<IColorCellProps>;
+
   /**
    * Whether the control is disabled.
    */