From 867ba9a2b3079eda784df7292c8e84fc3f5e3f80 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Wed, 17 Apr 2024 10:48:00 +0200
Subject: [PATCH 1/5] fix(react-swatch-picker): fixes after bug bash

---
 .../SwatchPicker/SwatchPicker.stories.tsx     |  6 +--
 .../useColorSwatchStyles.styles.ts            |  8 ++--
 .../EmptySwatch/EmptySwatch.test.tsx          |  1 +
 .../components/EmptySwatch/useEmptySwatch.ts  |  2 +
 .../useEmptySwatchStyles.styles.ts            |  2 +-
 .../useImageSwatchStyles.styles.ts            |  8 ++--
 .../SwatchPicker/SwatchPicker.test.tsx        |  2 +-
 .../SwatchPicker/SwatchPicker.types.ts        |  2 +-
 .../SwatchPicker/useSwatchPicker.ts           | 12 ------
 .../useSwatchPickerStyles.styles.ts           | 24 +++++++----
 .../SwatchPickerRow/SwatchPickerRow.test.tsx  |  1 -
 .../SwatchPickerRow/SwatchPickerRow.types.ts  |  3 +-
 .../SwatchPickerRow/useSwatchPickerRow.ts     |  9 +---
 .../useSwatchPickerRowStyles.styles.ts        | 25 ++++++-----
 .../src/contexts/swatchPicker.ts              |  1 +
 .../react-swatch-picker-preview/src/index.ts  |  1 -
 .../__snapshots__/renderUtils.test.tsx.snap   | 11 -----
 .../SwatchPicker/EmptySwatch.stories.tsx      | 43 ++++++++++++++-----
 .../SwatchPicker/SwatchPickerBestPractices.md |  5 ---
 .../SwatchPickerDefault.stories.tsx           |  3 ++
 .../SwatchPickerLayout.stories.tsx            |  3 ++
 .../SwatchPickerPopup.stories.tsx             |  3 ++
 .../SwatchPicker/SwatchPickerSize.stories.tsx |  2 +-
 .../SwatchPickerWithTooltip.stories.tsx       |  3 ++
 .../stories/SwatchPicker/index.stories.tsx    |  3 +-
 25 files changed, 98 insertions(+), 85 deletions(-)
 delete mode 100644 packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md

diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
index 5fb6f3bf26bbb5..4bd6cc1d08ec93 100644
--- a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
@@ -29,17 +29,17 @@ export const DefaultRTL = getStoryVariant(Default, RTL);
 export const Size = () => (
   <>
     <h3>Colors</h3>
-    <SampleSwatchPickerColors size="extraSmall" />
+    <SampleSwatchPickerColors size="extra-small" />
     <SampleSwatchPickerColors size="small" />
     <SampleSwatchPickerColors size="medium" />
     <SampleSwatchPickerColors size="large" />
     <h3>Images</h3>
-    <SampleSwatchPickerImages size="extraSmall" />
+    <SampleSwatchPickerImages size="extra-small" />
     <SampleSwatchPickerImages size="small" />
     <SampleSwatchPickerImages size="medium" />
     <SampleSwatchPickerImages size="large" />
     <h3>Grid layout</h3>
-    <SampleSwatchPickerGrid size="extraSmall" />
+    <SampleSwatchPickerGrid size="extra-small" />
     <SampleSwatchPickerGrid size="small" />
     <SampleSwatchPickerGrid size="medium" />
     <SampleSwatchPickerGrid size="large" />
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
index 6865de83d5d48c..13aadd65a01c09 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts
@@ -89,7 +89,7 @@ const useStyles = makeStyles({
 });
 
 const useSizeStyles = makeStyles({
-  extraSmall: {
+  'extra-small': {
     width: '20px',
     height: '20px',
   },
@@ -136,7 +136,7 @@ const useIconStyles = makeStyles({
     display: 'flex',
     alignSelf: 'center',
   },
-  extraSmall: {
+  'extra-small': {
     fontSize: '16px',
   },
   small: {
@@ -160,13 +160,13 @@ export const useColorSwatchStyles_unstable = (state: ColorSwatchState): ColorSwa
   const shapeStyles = useShapeStyles();
   const iconStyles = useIconStyles();
 
-  const size = state.size ?? 'medium';
+  const { size = 'medium', shape = 'square' } = state;
 
   state.root.className = mergeClasses(
     colorSwatchClassNames.root,
     resetStyles,
     sizeStyles[size],
-    shapeStyles[state.shape ?? 'square'],
+    shapeStyles[shape],
     state.selected && styles.selected,
     state.disabled && styles.disabled,
     state.root.className,
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.test.tsx b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.test.tsx
index 18eca475904cab..d60a3fc49bfd53 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.test.tsx
+++ b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.test.tsx
@@ -14,6 +14,7 @@ describe('EmptySwatch', () => {
     expect(result.container).toMatchInlineSnapshot(`
       <div>
         <button
+          aria-checked="false"
           class="fui-EmptySwatch"
           role="radio"
         />
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatch.ts b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatch.ts
index 19c2a3c2da7791..09f309fa08a176 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatch.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatch.ts
@@ -22,6 +22,7 @@ export const useEmptySwatch_unstable = (
   const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);
 
   const role = isGrid ? 'gridcell' : 'radio';
+  const a11yProps = isGrid ? {} : { 'aria-checked': false };
   return {
     components: {
       root: 'button',
@@ -30,6 +31,7 @@ export const useEmptySwatch_unstable = (
       getIntrinsicElementProps('button', {
         ref,
         role,
+        ...a11yProps,
         ...rest,
       }),
       { elementType: 'button' },
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts
index 25efb667a1bd27..07c89979808816 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts
@@ -17,7 +17,7 @@ const useStyles = makeResetStyles({
 });
 
 const useSizeStyles = makeStyles({
-  extraSmall: {
+  'extra-small': {
     width: '20px',
     height: '20px',
   },
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts
index e8a2e242783918..15033463032a95 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts
@@ -72,7 +72,7 @@ const useStylesSelected = makeStyles({
 });
 
 const useSizeStyles = makeStyles({
-  extraSmall: {
+  'extra-small': {
     width: '20px',
     height: '20px',
   },
@@ -120,11 +120,13 @@ export const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwa
   const sizeStyles = useSizeStyles();
   const shapeStyles = useShapeStyles();
 
+  const { size = 'medium', shape = 'square' } = state;
+
   state.root.className = mergeClasses(
     imageSwatchClassNames.root,
     styles,
-    sizeStyles[state.size ?? 'medium'],
-    shapeStyles[state.shape ?? 'square'],
+    sizeStyles[size],
+    shapeStyles[shape],
     state.selected && selectedStyles.selected,
     state.root.className,
   );
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx
index 7613c85d17aee3..557b62bf57f39b 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx
@@ -27,7 +27,6 @@ describe('SwatchPicker', () => {
           class="fui-SwatchPicker"
           data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":0,\\"memorizeCurrent\\":true}}"
           role="radiogroup"
-          style="--fui-SwatchPicker--gridGap: 4px;"
         >
           <button
             aria-checked="false"
@@ -70,6 +69,7 @@ describe('SwatchPicker', () => {
             style="background-image: url(path/img.png);"
           />
           <button
+            aria-checked="false"
             class="fui-EmptySwatch"
             role="radio"
           />
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.types.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.types.ts
index 8410e46efe9b96..4a3b63a0824f74 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.types.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.types.ts
@@ -41,7 +41,7 @@ export type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
    * Swatch size
    * @defaultvalue 'medium'
    */
-  size?: 'extraSmall' | 'small' | 'medium' | 'large';
+  size?: 'extra-small' | 'small' | 'medium' | 'large';
 
   /**
    * Swatch shape
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPicker.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPicker.ts
index 92b8c34fb0fed2..33aa8d54858099 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPicker.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPicker.ts
@@ -2,14 +2,6 @@ import * as React from 'react';
 import { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { swatchPickerCSSVars } from './useSwatchPickerStyles.styles';
-
-const { gridGap } = swatchPickerCSSVars;
-
-export const spacingMap = {
-  small: '2px',
-  medium: '4px',
-};
 
 /**
  * Create the state required to render SwatchPicker.
@@ -61,10 +53,6 @@ export const useSwatchPicker_unstable = (
         role,
         ...focusAttributes,
         ...rest,
-        style: {
-          [gridGap]: spacingMap[spacing],
-          ...style,
-        },
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts
index 4e0408fc894ede..f4704b4ab25163 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts
@@ -6,12 +6,6 @@ export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {
   root: 'fui-SwatchPicker',
 };
 
-export const swatchPickerCSSVars = {
-  gridGap: `--fui-SwatchPicker--gridGap`,
-};
-
-const { gridGap } = swatchPickerCSSVars;
-
 /**
  * Styles for the root slot
  */
@@ -22,11 +16,15 @@ const useStyles = makeStyles({
   },
   row: {
     flexDirection: 'row',
-    columnGap: `var(${gridGap})`,
   },
   grid: {
     flexDirection: 'column',
-    rowGap: `var(${gridGap})`,
+  },
+  spacingSmall: {
+    ...shorthands.gap('2px'),
+  },
+  spacingMedium: {
+    ...shorthands.gap('4px'),
   },
 });
 
@@ -36,7 +34,15 @@ const useStyles = makeStyles({
 export const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {
   const styles = useStyles();
   const layoutStyle = state.isGrid ? styles.grid : styles.row;
-  state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, state.root.className);
+
+  const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+  state.root.className = mergeClasses(
+    swatchPickerClassNames.root,
+    styles.root,
+    layoutStyle,
+    spacingStyle,
+    state.root.className,
+  );
 
   return state;
 };
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx
index 8db2873bb92600..2f958eca5f8001 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx
@@ -16,7 +16,6 @@ describe('SwatchPickerRow', () => {
         <div
           class="fui-SwatchPickerRow"
           role="row"
-          style="--fui-SwatchPicker--rowGap: 4px;"
         >
           Default SwatchPickerRow
         </div>
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.types.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.types.ts
index d4d8faa7724bd9..c72bf702d2a075 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.types.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.types.ts
@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';
 
 export type SwatchPickerRowSlots = {
   root: Slot<'div'>;
@@ -12,4 +13,4 @@ export type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;
 /**
  * State used in rendering SwatchPickerRow
  */
-export type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots>;
+export type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRow.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRow.ts
index 45a763dba8fa29..206dc627899119 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRow.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRow.ts
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';
-import { swatchPickerCSSVars } from './useSwatchPickerRowStyles.styles';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
-import { spacingMap } from '../SwatchPicker/useSwatchPicker';
-
-const { rowGap } = swatchPickerCSSVars;
 
 /**
  * Create the state required to render SwatchPickerRow.
@@ -32,12 +28,9 @@ export const useSwatchPickerRow_unstable = (
         ref,
         role: 'row',
         ...rest,
-        style: {
-          [rowGap]: spacingMap[spacing ?? 'medium'],
-          ...style,
-        },
       }),
       { elementType: 'div' },
     ),
+    spacing,
   };
 };
diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts
index 46dc174466d4d1..dadd524eb7751b 100644
--- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts
@@ -1,13 +1,7 @@
-import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';
 
-export const swatchPickerCSSVars = {
-  rowGap: `--fui-SwatchPicker--rowGap`,
-};
-
-const { rowGap } = swatchPickerCSSVars;
-
 export const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {
   root: 'fui-SwatchPickerRow',
 };
@@ -15,18 +9,29 @@ export const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {
 /**
  * Styles for the root slot
  */
-const useStyles = makeResetStyles({
+const useResetStyles = makeResetStyles({
   display: 'flex',
   flexDirection: 'row',
-  columnGap: `var(${rowGap})`,
+});
+
+const useStyles = makeStyles({
+  spacingSmall: {
+    columnGap: '2px',
+  },
+  spacingMedium: {
+    columnGap: '4px',
+  },
 });
 
 /**
  * Apply styling to the SwatchPickerRow slots based on the state
  */
 export const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {
+  const resetStyles = useResetStyles();
   const styles = useStyles();
-  state.root.className = mergeClasses(swatchPickerRowClassNames.root, styles, state.root.className);
+  const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+
+  state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
 
   return state;
 };
diff --git a/packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts b/packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts
index 085336b97f19fa..13128f44eceabf 100644
--- a/packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts
@@ -12,6 +12,7 @@ export type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape'
   isGrid: boolean;
 
   /**
+   * @internal
    * Callback used by ColorSwatch to request a change on it's selected state
    * Should be used to select ColorSwatch
    */
diff --git a/packages/react-components/react-swatch-picker-preview/src/index.ts b/packages/react-components/react-swatch-picker-preview/src/index.ts
index 8e9424157f2003..417df711cb2b03 100644
--- a/packages/react-components/react-swatch-picker-preview/src/index.ts
+++ b/packages/react-components/react-swatch-picker-preview/src/index.ts
@@ -4,7 +4,6 @@ export {
   useSwatchPickerStyles_unstable,
   useSwatchPicker_unstable,
   swatchPickerClassNames,
-  swatchPickerCSSVars,
 } from './SwatchPicker';
 export type {
   SwatchPickerProps,
diff --git a/packages/react-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap b/packages/react-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap
index c858ec6fad0a3f..8ab629fed37d85 100644
--- a/packages/react-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap
+++ b/packages/react-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap
@@ -7,12 +7,10 @@ exports[`Render utils of SwatchPicker renders custom row 1`] = `
     class="fui-SwatchPicker"
     data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":4,\\"memorizeCurrent\\":true}}"
     role="grid"
-    style="--fui-SwatchPicker--gridGap: 4px;"
   >
     <div
       class="fui-SwatchPickerRow custom-row"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="red"
@@ -42,7 +40,6 @@ exports[`Render utils of SwatchPicker renders custom row 1`] = `
     <div
       class="fui-SwatchPickerRow custom-row"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="green"
@@ -72,7 +69,6 @@ exports[`Render utils of SwatchPicker renders custom row 1`] = `
     <div
       class="fui-SwatchPickerRow custom-row"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="sea"
@@ -107,12 +103,10 @@ exports[`Render utils of SwatchPicker renders custom swatch 1`] = `
     class="fui-SwatchPicker"
     data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":4,\\"memorizeCurrent\\":true}}"
     role="grid"
-    style="--fui-SwatchPicker--gridGap: 4px;"
   >
     <div
       class="fui-SwatchPickerRow"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="red"
@@ -142,7 +136,6 @@ exports[`Render utils of SwatchPicker renders custom swatch 1`] = `
     <div
       class="fui-SwatchPickerRow"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="green"
@@ -180,12 +173,10 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = `
     class="fui-SwatchPicker"
     data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":4,\\"memorizeCurrent\\":true}}"
     role="grid"
-    style="--fui-SwatchPicker--gridGap: 4px;"
   >
     <div
       class="fui-SwatchPickerRow"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="red"
@@ -215,7 +206,6 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = `
     <div
       class="fui-SwatchPickerRow"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="green"
@@ -245,7 +235,6 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = `
     <div
       class="fui-SwatchPickerRow"
       role="row"
-      style="--fui-SwatchPicker--rowGap: 4px;"
     >
       <button
         aria-label="sea"
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx
index c02e522a5507d1..ea69a5502bc90f 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, shorthands } from '@fluentui/react-components';
+import { makeStyles, shorthands, Button, Label } from '@fluentui/react-components';
 import {
   SwatchPicker,
   EmptySwatch,
@@ -13,11 +13,28 @@ const useStyles = makeStyles({
     height: '100px',
     ...shorthands.border('1px', 'solid', '#ccc'),
     ...shorthands.margin('20px', '0'),
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'none',
+    },
+  },
+  button: {
+    marginRight: '8px',
+  },
+  input: {
+    display: 'block',
+    ...shorthands.margin('10px', '0'),
   },
 });
 
 const ITEMS_LIMIT = 8;
 
+const defaultItems = [
+  { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
+  { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'dark orange' },
+  { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
+  { color: '#00B053', value: '00B053', 'aria-label': 'green' },
+];
+
 export const EmptySwatchExample = () => {
   const styles = useStyles();
 
@@ -25,12 +42,7 @@ export const EmptySwatchExample = () => {
   const [selectedColor, setSelectedColor] = React.useState('#00B053');
 
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const [items, setItems] = React.useState<Array<{ color: string; value: string; 'aria-label': string }>>([
-    { color: '#FF1921', value: 'FF1921', 'aria-label': 'red' },
-    { color: '#FF7A00', value: 'FF7A00', 'aria-label': 'dark orange' },
-    { color: '#90D057', value: '90D057', 'aria-label': 'light green' },
-    { color: '#00B053', value: '00B053', 'aria-label': 'green' },
-  ]);
+  const [items, setItems] = React.useState<Array<{ color: string; value: string; 'aria-label': string }>>(defaultItems);
   const emptyItems = new Array(ITEMS_LIMIT - items.length).fill(null);
 
   const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
@@ -56,15 +68,24 @@ export const EmptySwatchExample = () => {
           <ColorSwatch key={item.value} {...item} />
         ))}
         {emptyItems.map((_, index) => (
-          <EmptySwatch key={index} />
+          <EmptySwatch disabled key={index} aria-label={`empty-swatch-${index}`} />
         ))}
       </SwatchPicker>
 
       <div className={styles.example} style={{ backgroundColor: selectedColor }} />
-      <input ref={inputRef} type="color" id="color-select" name="color-select" />
-      <button disabled={items.length >= ITEMS_LIMIT} onClick={handleAddColor}>
+      <Label htmlFor="color-select">Add more colors:</Label>
+      <input className={styles.input} ref={inputRef} type="color" id="color-select" name="color-select" />
+      <Button
+        className={styles.button}
+        appearance="primary"
+        disabled={items.length >= ITEMS_LIMIT}
+        onClick={handleAddColor}
+      >
         Add new color
-      </button>
+      </Button>
+      <Button className={styles.button} onClick={() => setItems(defaultItems)}>
+        Reset example
+      </Button>
     </>
   );
 };
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md
deleted file mode 100644
index 08ff8ddeeb5f86..00000000000000
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md
+++ /dev/null
@@ -1,5 +0,0 @@
-## Best practices
-
-### Do
-
-### Don't
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx
index e5c803b837d57b..0e9821d5b357aa 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx
@@ -8,6 +8,9 @@ const useStyles = makeStyles({
     height: '100px',
     ...shorthands.border('1px', 'solid', '#ccc'),
     ...shorthands.margin('20px', '0'),
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'none',
+    },
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx
index 2715475e35fcad..4f7c3ee88b4ac5 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx
@@ -14,6 +14,9 @@ const useStyles = makeStyles({
     height: '100px',
     ...shorthands.border('1px', 'solid', '#ccc'),
     ...shorthands.margin('20px', '0'),
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'none',
+    },
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx
index d4680243bceb94..124716c25dda00 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx
@@ -8,6 +8,9 @@ const useStyles = makeStyles({
     height: '100px',
     ...shorthands.border('1px', 'solid', '#ccc'),
     ...shorthands.margin('20px', '0'),
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'none',
+    },
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx
index b6e0d73d1b9b85..c72924c17352c0 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx
@@ -44,7 +44,7 @@ export const SwatchPickerSize = () => {
         })}
       </SwatchPicker>
       <h3>Extra small</h3>
-      <SwatchPicker aria-label="SwatchPicker extra small size" size="extraSmall">
+      <SwatchPicker aria-label="SwatchPicker extra small size" size="extra-small">
         {colors.map(color => {
           return <ColorSwatch key={color.value} {...color} />;
         })}
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx
index 19bb7bded6add5..bdad1826398113 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx
@@ -13,6 +13,9 @@ const useStyles = makeStyles({
     height: '100px',
     ...shorthands.border('1px', 'solid', '#ccc'),
     ...shorthands.margin('20px', '0'),
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'none',
+    },
   },
 });
 
diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx
index e5b34e7d23f102..19297aaf1ce439 100644
--- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx
+++ b/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx
@@ -8,7 +8,6 @@ import {
 } from '@fluentui/react-swatch-picker-preview';
 
 import descriptionMd from './SwatchPickerDescription.md';
-import bestPracticesMd from './SwatchPickerBestPractices.md';
 
 export { Default } from './SwatchPickerDefault.stories';
 export { SwatchPickerImage } from './SwatchPickerImage.stories';
@@ -33,7 +32,7 @@ const metadata: ComponentMeta<typeof SwatchPicker> = {
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd, bestPracticesMd].join('\n'),
+        component: [descriptionMd].join('\n'),
       },
     },
   },

From 42f499361edd3465e9138c8092854b9af3332e91 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 18 Apr 2024 17:51:05 +0200
Subject: [PATCH 2/5] updated api

---
 .../etc/react-swatch-picker-preview.api.md               | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md b/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md
index b470ddd7514464..eb11c8742a68e7 100644
--- a/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md
+++ b/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md
@@ -108,11 +108,6 @@ export const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
 // @public (undocumented)
 export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
 
-// @public (undocumented)
-export const swatchPickerCSSVars: {
-    gridGap: string;
-};
-
 // @public (undocumented)
 export type SwatchPickerGridProps = {
     items: SwatchProps[];
@@ -139,7 +134,7 @@ export type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
     layout?: 'row' | 'grid';
     onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;
     selectedValue?: string;
-    size?: 'extraSmall' | 'small' | 'medium' | 'large';
+    size?: 'extra-small' | 'small' | 'medium' | 'large';
     shape?: 'rounded' | 'square' | 'circular';
     spacing?: 'small' | 'medium';
 };
@@ -159,7 +154,7 @@ export type SwatchPickerRowSlots = {
 };
 
 // @public
-export type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots>;
+export type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;
 
 // @public (undocumented)
 export type SwatchPickerSlots = {

From 012879e93cfbda39b52536d7bff84af973645e0d Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 18 Apr 2024 17:52:26 +0200
Subject: [PATCH 3/5] change files

---
 ...icker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json

diff --git a/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json b/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
new file mode 100644
index 00000000000000..031bd8b8fd47db
--- /dev/null
+++ b/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix(react-swatch-picker): api changes and fixes",
+  "packageName": "@fluentui/react-swatch-picker-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 5b86eadf1cd7d8da96827cb86116f047788505d2 Mon Sep 17 00:00:00 2001
From: Valentina <v.kozlova13@gmail.com>
Date: Fri, 19 Apr 2024 11:56:19 +0200
Subject: [PATCH 4/5] Update
 change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
---
 ...tch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json b/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
index 031bd8b8fd47db..ffbabf5b3ee5b2 100644
--- a/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
+++ b/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "fix(react-swatch-picker): api changes and fixes",
+  "comment": "fix: api changes and fixes",
   "packageName": "@fluentui/react-swatch-picker-preview",
   "email": "vkozlova@microsoft.com",
   "dependentChangeType": "patch"

From 72e6c1c9697958c14aeceda9fc44ad7b85915cc2 Mon Sep 17 00:00:00 2001
From: Valentina <v.kozlova13@gmail.com>
Date: Fri, 19 Apr 2024 14:53:47 +0200
Subject: [PATCH 5/5] Update
 change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
---
 ...tch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json b/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
index ffbabf5b3ee5b2..0df655e161f2eb 100644
--- a/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
+++ b/change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "fix: api changes and fixes",
+  "comment": "fix: BREAKING CHANGE - api changes and fixes",
   "packageName": "@fluentui/react-swatch-picker-preview",
   "email": "vkozlova@microsoft.com",
   "dependentChangeType": "patch"