fix(react-swatch-picker): fixes after bug bash

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" />

change/@fluentui-react-swatch-picker-preview-6246310c-e802-4b75-a4dd-6aa211c022b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: BREAKING CHANGE - api changes and fixes",
+  "packageName": "@fluentui/react-swatch-picker-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}

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 = {

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,

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"
         />

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' },

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',
   },

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,
   );

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"
           />

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

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' },
     ),

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;
 };

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>

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'>;

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,
   };
 };

packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts

@@ -1,32 +1,37 @@
-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',
 };
 
 /**
  * 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;
 };

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
    */

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,