feat(swatch-picker): Added ColorSwatch sub component and selection logic

change/@fluentui-react-shared-contexts-363c88cd-d979-4cea-a182-2792a0a16c31.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(swatch-picker): Added plain ColorSwatch sub component.",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md

@@ -156,6 +156,8 @@ export const CustomStyleHooksContext_unstable: React_2.Context<Partial<{
     useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
     useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
     useTimePickerCompatStyles_unstable: CustomStyleHook;
+    useSwatchPickerStyles_unstable: CustomStyleHook;
+    useColorSwatchStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @public (undocumented)
@@ -281,6 +283,8 @@ export type CustomStyleHooksContextValue_unstable = Partial<{
     useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
     useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
     useTimePickerCompatStyles_unstable: CustomStyleHook;
+    useSwatchPickerStyles_unstable: CustomStyleHook;
+    useColorSwatchStyles_unstable: CustomStyleHook;
 }>;
 
 // @internal (undocumented)
@@ -406,6 +410,8 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider<Partial<{
     useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
     useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
     useTimePickerCompatStyles_unstable: CustomStyleHook;
+    useSwatchPickerStyles_unstable: CustomStyleHook;
+    useColorSwatchStyles_unstable: CustomStyleHook;
 }> | undefined>;
 
 // @internal (undocumented)

packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

@@ -130,6 +130,8 @@ export type CustomStyleHooksContextValue = Partial<{
   useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook;
   useTeachingPopoverTitleStyles_unstable: CustomStyleHook;
   useTimePickerCompatStyles_unstable: CustomStyleHook;
+  useSwatchPickerStyles_unstable: CustomStyleHook;
+  useColorSwatchStyles_unstable: CustomStyleHook;
 }>;
 
 /**

packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md

@@ -12,27 +12,87 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-export const renderSwatchPicker_unstable: (state: SwatchPickerState) => JSX.Element;
+export const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
+
+// @public (undocumented)
+export const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
+
+// @public
+export type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & {
+    color: string;
+    size?: 'extraSmall' | 'small' | 'medium' | 'large';
+    shape?: 'rounded' | 'square' | 'circular';
+    value: string;
+};
+
+// @public (undocumented)
+export type ColorSwatchSlots = {
+    root: Slot<'button'>;
+};
+
+// @public
+export type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<ColorSwatchProps, 'color' | 'size' | 'shape' | 'value'> & SwatchContextValue;
+
+// @public
+export const renderColorSwatch_unstable: (state: ColorSwatchState, contextValues: SwatchContextValues) => JSX.Element;
+
+// @public
+export const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValue) => JSX.Element;
+
+// @public (undocumented)
+export const swatchCSSVars: {
+    swatchColor: string;
+};
 
 // @public
 export const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
 
 // @public (undocumented)
 export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
 
+// @public (undocumented)
+export const swatchPickerCSSVars: {
+    columnCountGrid: string;
+    cellSize: string;
+    gridGap: string;
+};
+
 // @public
-export type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {};
+export type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
+    defaultSelectedValue?: string;
+    onSelectionChange?: SwatchPickerSelectEventHandler;
+    selectedValue?: string;
+    size?: 'extraSmall' | 'small' | 'medium' | 'large';
+    shape?: 'rounded' | 'square' | 'circular';
+};
+
+// @public (undocumented)
+export type SwatchPickerSelectData = {
+    selectedValue: string;
+};
+
+// @public (undocumented)
+export type SwatchPickerSelectEvent = React_2.MouseEvent | React_2.KeyboardEvent | React_2.ChangeEvent;
+
+// @public (undocumented)
+export type SwatchPickerSelectEventHandler = (event: SwatchPickerSelectEvent, data: SwatchPickerSelectData) => void;
 
 // @public (undocumented)
 export type SwatchPickerSlots = {
     root: Slot<'div'>;
 };
 
 // @public
-export type SwatchPickerState = ComponentState<SwatchPickerSlots>;
+export type SwatchPickerState = ComponentState<SwatchPickerSlots> & SwatchPickerContextValue & Pick<SwatchPickerProps, 'size' | 'shape'>;
+
+// @public
+export const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
+
+// @public
+export const useColorSwatchStyles_unstable: (state: ColorSwatchState) => ColorSwatchState;
 
 // @public
-export const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
+export const useSwatchPicker_unstable: <T>(props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
 
 // @public
 export const useSwatchPickerStyles_unstable: (state: SwatchPickerState) => SwatchPickerState;

packages/react-components/react-swatch-picker-preview/package.json

@@ -32,6 +32,8 @@
   },
   "dependencies": {
     "@fluentui/react-jsx-runtime": "^9.0.29",
+    "@fluentui/react-shared-contexts": "^9.14.0",
+    "@fluentui/react-tabster": "^9.19.0",
     "@fluentui/react-theme": "^9.1.16",
     "@fluentui/react-utilities": "^9.18.0",
     "@griffel/react": "^1.5.14",

packages/react-components/react-swatch-picker-preview/src/ColorSwatch.ts

@@ -0,0 +1 @@
+export * from './components/ColorSwatch/index';

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { ColorSwatch } from './ColorSwatch';
+import { colorSwatchClassNames } from './useColorSwatchStyles.styles';
+
+describe('ColorSwatch', () => {
+  isConformant({
+    Component: ColorSwatch,
+    displayName: 'ColorSwatch',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {},
+          expectedClassNames: {
+            root: colorSwatchClassNames.root,
+          },
+        },
+      ],
+    },
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(
+      <ColorSwatch color="#f09" value="#f09">
+        Default ColorSwatch
+      </ColorSwatch>,
+    );
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <button
+          aria-selected="false"
+          class="fui-ColorSwatch"
+          role="radio"
+          style="--fui-SwatchPicker--color: #f09;"
+          tabindex="0"
+          value="#f09"
+        >
+          Default ColorSwatch
+        </button>
+      </div>
+    `);
+  });
+});

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useColorSwatch_unstable } from './useColorSwatch';
+import { renderColorSwatch_unstable } from './renderColorSwatch';
+import { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';
+import type { ColorSwatchProps } from './ColorSwatch.types';
+import { useSwatchContextValues_unstable } from '../../contexts/swatch';
+
+/**
+ * ColorSwatch component - TODO: add more docs
+ */
+export const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {
+  const state = useColorSwatch_unstable(props, ref);
+  const contextValues = useSwatchContextValues_unstable(state);
+
+  useColorSwatchStyles_unstable(state);
+  useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);
+
+  return renderColorSwatch_unstable(state, contextValues);
+});
+
+ColorSwatch.displayName = 'ColorSwatch';

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { SwatchContextValue } from '../../contexts/swatch';
+
+export type ColorSwatchSlots = {
+  root: Slot<'button'>;
+};
+
+/**
+ * ColorSwatch Props
+ */
+export type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & {
+  /**
+   * Swatch color
+   */
+  color: string;
+
+  /**
+   * Swatch size
+   * @defaultvalue 'medium'
+   */
+  size?: 'extraSmall' | 'small' | 'medium' | 'large';
+
+  /**
+   * Swatch shape
+   * @defaultvalue 'square'
+   */
+  shape?: 'rounded' | 'square' | 'circular';
+  /**
+   * Swatch value
+   */
+  value: string;
+};
+
+/**
+ * State used in rendering ColorSwatch
+ */
+export type ColorSwatchState = ComponentState<ColorSwatchSlots> &
+  Pick<ColorSwatchProps, 'color' | 'size' | 'shape' | 'value'> &
+  SwatchContextValue;

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/index.ts

@@ -0,0 +1,5 @@
+export * from './ColorSwatch';
+export * from './ColorSwatch.types';
+export * from './renderColorSwatch';
+export * from './useColorSwatch';
+export * from './useColorSwatchStyles.styles';

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/renderColorSwatch.tsx

@@ -0,0 +1,18 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import { assertSlots } from '@fluentui/react-utilities';
+import type { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';
+import { SwatchContextValues, SwatchProvider } from '../../contexts/swatch';
+
+/**
+ * Render the final JSX of ColorSwatch
+ */
+export const renderColorSwatch_unstable = (state: ColorSwatchState, contextValues: SwatchContextValues) => {
+  assertSlots<ColorSwatchSlots>(state);
+  return (
+    <SwatchProvider value={contextValues.swatch}>
+      <state.root />
+    </SwatchProvider>
+  );
+};

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
+import type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';
+import { SwatchPickerOnSelectionChangeEvent } from '../SwatchPicker/SwatchPicker.types';
+import { useColorSwatchState_unstable } from './useColorSwatchState';
+import { useFocusWithin } from '@fluentui/react-tabster';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+
+/**
+ * Create the state required to render ColorSwatch.
+ *
+ * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
+ * before being passed to renderColorSwatch_unstable.
+ *
+ * @param props - props from this instance of ColorSwatch
+ * @param ref - reference to root HTMLDivElement of ColorSwatch
+ */
+export const useColorSwatch_unstable = (
+  props: ColorSwatchProps,
+  ref: React.Ref<HTMLButtonElement>,
+): ColorSwatchState => {
+  const { color, value } = props;
+
+  const context = useSwatchPickerContextValue_unstable();
+  const requestSelectionChange = context.requestSelectionChange;
+  const selected = context.selectedValue === value;
+  const onClick = useEventCallback((event: SwatchPickerOnSelectionChangeEvent) =>
+    requestSelectionChange({ event, selectedValue: value }),
+  );
+
+  const _role = 'radio';
+
+  const state: ColorSwatchState = {
+    components: {
+      root: 'button',
+    },
+    root: slot.always(
+      getIntrinsicElementProps('button', {
+        ref,
+        ...props,
+        role: props.role ?? _role,
+        tabIndex: 0,
+        'aria-selected': selected,
+        onClick,
+      }),
+      { elementType: 'button' },
+    ),
+    size: context.size,
+    shape: context.shape,
+    selected,
+    color,
+    value,
+  };
+
+  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLButtonElement>());
+
+  useColorSwatchState_unstable(state, props);
+  return state;
+};

packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchState.tsx

@@ -0,0 +1,19 @@
+// import * as React from 'react';
+import { swatchCSSVars } from './useColorSwatchStyles.styles';
+import type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';
+
+const { swatchColor } = swatchCSSVars;
+
+export const useColorSwatchState_unstable = (state: ColorSwatchState, props: ColorSwatchProps) => {
+  const { color = '#000' } = props;
+
+  const rootVariables = {
+    [swatchColor]: color,
+  };
+
+  // Root props
+  state.root.style = {
+    ...rootVariables,
+    ...state.root.style,
+  };
+};