Expose disabled property in IColorCellProps (#28015)

* expose disabled property draft * added change file * resolved comments --------- Co-authored-by: Makoto Morimoto <[email protected]>
microsoft · Jun 5, 2023 · 713a02b · 713a02b
1 parent b8eb759
commit 713a02b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/change/@fluentui-react-f8187229-7071-4c6a-be6e-1ea511a021e2.json b/change/@fluentui-react-f8187229-7071-4c6a-be6e-1ea511a021e2.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Exposed disabled property in IColorCellProps to allow customers to disable color cells.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -3547,6 +3547,7 @@ export interface IColor extends IRGB, IHSV {
 // @public (undocumented)
 export interface IColorCellProps {
     color: string;
+    disabled?: boolean;
     id: string;
     index?: number;
     label?: string;

diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
@@ -138,6 +138,11 @@ export interface IColorCellProps {
    * Index for this option
    */
   index?: number;
+
+  /**
+   * Determines if this individual cell is disabled
+   */
+  disabled?: boolean;
 }
 
 /**

diff --git a/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
@@ -244,7 +244,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
    */
   const onCellClick = React.useCallback(
     (item: IColorCellProps, event?: React.MouseEvent<HTMLButtonElement>): void => {
-      if (disabled) {
+      if (disabled || item.disabled) {
         return;
       }
 
@@ -309,7 +309,7 @@ export const SwatchColorPickerBase: React.FunctionComponent<ISwatchColorPickerPr
         idPrefix={id}
         color={item.color}
         styles={getColorGridCellStyles}
-        disabled={disabled}
+        disabled={disabled || item.disabled}
         onClick={onCellClick}
         onHover={onGridCellHovered}
         onFocus={onGridCellFocused}