[SwatchColorPicker] add a renderfunction as props to override cell content

[pKalaga]

Previous Behavior

SwatchColorPicker takes in a onRenderCell in props, which overrides the entire button/cell in the grid. This is not ideal if consuming code just needs to override svg or the cell content, and not the button. Passing in classes/styles also doesnot satisfy this requirement completely, if you need to provide custom styling for each button.

New Behavior

Proposal here is to expose a new property which just overrides the cell content and keeps the button behavior intact.
For example, if a GridPicker is needed for setting backgrounds or gradients, this can help customize button content, but retain onClick/onFocus/onHover behaviors.

Related Issue(s)

• Fixes # [Feature]: SwatchColorPicker should support overriding just the cell content in Fluent React v8 #28065

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against b8eb75993520ef05a8eba8cbb676251a95812285}

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	628	626	5000
Breadcrumb	mount	1715	1671	1000
Checkbox	mount	1692	1695	5000
CheckboxBase	mount	1486	1490	5000
ChoiceGroup	mount	2912	2916	5000
ComboBox	mount	655	660	1000
CommandBar	mount	6410	6397	1000
ContextualMenu	mount	15142	15661	1000
DefaultButton	mount	728	745	5000
DetailsRow	mount	2219	2222	5000
DetailsRowFast	mount	2207	2190	5000
DetailsRowNoStyles	mount	2049	2011	5000
Dialog	mount	2635	2793	1000
DocumentCardTitle	mount	226	230	1000
Dropdown	mount	2001	2009	5000
FocusTrapZone	mount	1144	1124	5000
FocusZone	mount	1082	1049	5000
GroupedList	mount	41605	41815	2
GroupedList	virtual-rerender	17776	20122	2
GroupedList	virtual-rerender-with-unmount	50267	50932	2
GroupedListV2	mount	220	228	2
GroupedListV2	virtual-rerender	216	206	2
GroupedListV2	virtual-rerender-with-unmount	243	244	2
IconButton	mount	1111	1096	5000
Label	mount	345	350	5000
Layer	mount	2725	2746	5000
Link	mount	396	391	5000
MenuButton	mount	987	919	5000
MessageBar	mount	21918	21836	5000
Nav	mount	1902	1936	1000
OverflowSet	mount	787	770	5000
Panel	mount	1781	1787	1000
Persona	mount	736	768	1000
Pivot	mount	877	893	1000
PrimaryButton	mount	868	832	5000
Rating	mount	4655	4551	5000
SearchBox	mount	904	937	5000
Shimmer	mount	1871	1919	5000
Slider	mount	1338	1319	5000
SpinButton	mount	2870	2908	5000
Spinner	mount	395	390	5000
SplitButton	mount	1847	1876	5000
Stack	mount	410	414	5000
StackWithIntrinsicChildren	mount	866	866	5000
StackWithTextChildren	mount	2653	2639	5000
SwatchColorPicker	mount	6201	6212	5000
TagPicker	mount	1445	1442	5000
Text	mount	390	386	5000
TextField	mount	929	938	5000
ThemeProvider	mount	823	865	5000
ThemeProvider	virtual-rerender	593	591	5000
ThemeProvider	virtual-rerender-with-unmount	1275	1252	5000
Toggle	mount	610	603	5000
buttonNative	mount	202	202	5000

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-SwatchColorPicker	182.919 kB	183.051 kB	132 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: b8eb75993520ef05a8eba8cbb676251a95812285 (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 00867fb:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[micahgodbolt]

2 asks:

1. Write an example of how these new props would be used to customize the control (either in PR description, or by creating a new website example). I'm curious if you need to use both onRenders or just one.
2. explain the reasoning for the two onRender names being different. and make it obvious to a user which onRender they should be worried about.

[pKalaga]

@microsoft/cxe-red , @micahgodbolt - have added sample code and updated api as per comments, need another review here

[pKalaga]

@micahgodbolt - can these changes be merged? is there anything else i am missing?

[micahgodbolt]

/azp run Fluent UI React - PR and CI

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[msft-fluent-ui-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release