Support size in ScaleTypeChoiceGroup

packages/fluent/src/components/ScaleTypeChoiceGroup.hooks.ts

@@ -2,15 +2,10 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import type {
-	IChoiceGroupOption,
-	IChoiceGroupStyleProps,
-	IChoiceGroupStyles,
-	IStyleFunctionOrObject,
-} from '@fluentui/react'
+import { useChoiceGroupProps } from '@essex/components'
+import type { IChoiceGroupOption, IChoiceGroupProps } from '@fluentui/react'
 import { merge } from 'lodash-es'
 import { useMemo } from 'react'
-
 export function useTypeOptions(suppressQuantile = false): IChoiceGroupOption[] {
 	return useMemo(() => {
 		const options = [
@@ -33,18 +28,24 @@ export function useTypeOptions(suppressQuantile = false): IChoiceGroupOption[] {
 	}, [suppressQuantile])
 }
 
-export function useStyles(
-	styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>,
-): IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles> {
-	return useMemo(
+export function useStyledProps(
+	props: IChoiceGroupProps,
+	options: IChoiceGroupOption[],
+	size: 'small' | 'medium' = 'medium',
+) {
+	const base = useMemo(
 		() =>
 			merge(
 				{
-					// we have a small number of options, so we flex to horizontal layout by default
-					flexContainer: { display: 'flex', justifyContent: 'space-around' },
+					styles: {
+						// we have a small number of options, so we flex to horizontal layout by default
+						flexContainer: { display: 'flex', justifyContent: 'space-around' },
+					},
+					options,
 				},
-				styles,
+				props,
 			),
-		[styles],
+		[props, options],
 	)
+	return useChoiceGroupProps(base, size)
 }

packages/fluent/src/components/ScaleTypeChoiceGroup.tsx

@@ -6,18 +6,18 @@
 import { ChoiceGroup } from '@fluentui/react'
 import type { FC } from 'react'
 
-import { useStyles, useTypeOptions } from './ScaleTypeChoiceGroup.hooks.js'
+import { useStyledProps, useTypeOptions } from './ScaleTypeChoiceGroup.hooks.js'
 import type { ScaleTypeChoiceGroupProps } from './ScaleTypeChoiceGroup.types.js'
 
 /**
  * Represents a strongly typed ChoiceGroup for selecting thematic ScaleTypes.
  */
 export const ScaleTypeChoiceGroup: FC<ScaleTypeChoiceGroupProps> = ({
-	styles,
+	size,
 	suppressQuantile = false,
 	...props
 }) => {
-	const typeOptions = useTypeOptions(suppressQuantile)
-	const _styles = useStyles(styles)
-	return <ChoiceGroup {...props} styles={_styles} options={typeOptions} />
+	const options = useTypeOptions(suppressQuantile)
+	const _props = useStyledProps(props, options, size)
+	return <ChoiceGroup {..._props} />
 }

packages/fluent/src/components/ScaleTypeChoiceGroup.types.ts

@@ -4,6 +4,8 @@
  */
 import type { IChoiceGroupProps } from '@fluentui/react'
 
-export interface ScaleTypeChoiceGroupProps extends IChoiceGroupProps {
+export interface ScaleTypeChoiceGroupProps
+	extends Omit<IChoiceGroupProps, 'size'> {
+	size?: 'small' | 'medium'
 	suppressQuantile?: boolean
 }

packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useChoiceGroupProps } from '@essex/components'
 import type { IChoiceGroupOption, IDropdownOption } from '@fluentui/react'
 import { ChoiceGroup } from '@fluentui/react'
 import type { Theme } from '@thematic/core'
@@ -73,8 +72,6 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 		[size],
 	)
 
-	const scaleChoiceSizedProps = useChoiceGroupProps({}, size)
-	console.log(scaleChoiceSizedProps)
 	return (
 		<div
 			style={{
@@ -99,7 +96,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 				<div style={controlStyle}>
 					<p>
 						<span style={labelStyle}>ScaleDropdown:</span> a Dropdown that
-						pre-loads Thematic scale options.
+						pre-loads Thematic scale options including a visual rendering.
 					</p>
 					<ScaleDropdown
 						size={size}
@@ -114,7 +111,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 						that pre-loads Thematic scale types.
 					</p>
 					<ScaleTypeChoiceGroup
-						{...scaleChoiceSizedProps}
+						size={size}
 						selectedKey={scaleType}
 						onChange={handleScaleTypeChange}
 					/>