Add sizing to ScaleDropdown

packages/fluent/package.json

@@ -22,8 +22,10 @@
 		"lint": "essex lint --fix"
 	},
 	"dependencies": {
+		"@essex/components": "^3.2.0",
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^",
+		"@thematic/d3": "workspace:^",
 		"@thematic/react": "workspace:^",
 		"ahooks": "^3.7.2",
 		"d3-scale": "^4.0.2",

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

@@ -2,12 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import type {
-	IDropdownOption,
-	IDropdownStyleProps,
-	IDropdownStyles,
-	IStyleFunctionOrObject,
-} from '@fluentui/react'
+import { useDropdownProps } from '@essex/components'
+import type { IDropdownOption, IDropdownProps } from '@fluentui/react'
 import type {
 	ContinuousColorScaleFunction,
 	NominalColorScaleFunction,
@@ -34,20 +30,34 @@ const LABEL_HEIGHT = 29 // defined default in fluent dropdown
 // visually we'll keep it lowercase in this app for visual consistency
 const TITLE_CASE = false
 
-export function useDropdownStyles(
-	styles?: IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles>,
-): IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles> {
-	return useMemo(
+export function useStyledProps(
+	props: Partial<IDropdownProps>,
+	size: 'small' | 'medium' = 'medium',
+): Partial<IDropdownProps> {
+	const styledProps = useMemo(
 		() =>
 			merge(
 				{
-					root: {
-						textAlign: 'left',
+					styles: {
+						root: {
+							textAlign: 'left',
+						},
 					},
 				},
-				styles,
+				props,
 			),
-		[styles],
+		[props],
+	)
+	const _props = useDropdownProps(styledProps, size)
+	// FIXME: this is to correct a missing prop in the toolkit dropdown styles
+	return useMemo(
+		() =>
+			merge(_props, {
+				styles: {
+					dropdownItemSelected: (_props?.styles as any).dropdownItem,
+				},
+			}),
+		[_props],
 	)
 }
 

packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx

@@ -8,11 +8,11 @@ import type { FC } from 'react'
 import { useCallback, useRef } from 'react'
 
 import {
-	useDropdownStyles,
 	useItemStyle,
 	usePaletteHeight,
 	usePaletteWidth,
 	useSafeDimensions,
+	useStyledProps,
 	useThematicScaleOptions,
 } from './ScaleDropdown.hooks.js'
 import type { ScaleDropdownProps } from './ScaleDropdown.types.js'
@@ -23,10 +23,9 @@ import { ScaleDropdownOption } from './ScaleDropdownOption.js'
  * The scale names can be accompanied by a visual rendering of the scale colors.
  * This bascially extends Dropdown, overriding the options and item rendering.
  */
-export const ScaleDropdown: FC<ScaleDropdownProps> = ({ styles, ...props }) => {
+export const ScaleDropdown: FC<ScaleDropdownProps> = ({ size, ...props }) => {
 	const ref = useRef(null)
 	const { width, height } = useSafeDimensions(ref)
-	const _styles = useDropdownStyles(styles)
 	const paletteWidth = usePaletteWidth(width)
 	const paletteHeight = usePaletteHeight(height, props.label)
 	const itemStyle = useItemStyle(width)
@@ -60,13 +59,14 @@ export const ScaleDropdown: FC<ScaleDropdownProps> = ({ styles, ...props }) => {
 		[paletteWidth, paletteHeight, itemStyle],
 	)
 
+	const _props = useStyledProps(props, size)
+	console.log(_props)
 	return (
 		<Dropdown
 			onRenderTitle={handleRenderTitle}
 			onRenderOption={handleRenderOption}
-			{...props}
+			{..._props}
 			ref={ref}
-			styles={_styles}
 			options={options}
 		/>
 	)

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

@@ -8,7 +8,9 @@ import type {
 	NominalColorScaleFunction,
 } from '@thematic/core'
 
-export type ScaleDropdownProps = Omit<IDropdownProps, 'options'>
+export interface ScaleDropdownProps extends Omit<IDropdownProps, 'options'> {
+	size?: 'small' | 'medium'
+}
 
 export interface ScaleDropdownOptionProps {
 	option: IDropdownOption

packages/webapp/package.json

@@ -30,6 +30,7 @@
 		"d3-axis": "^3.0.0",
 		"d3-scale": "^4.0.2",
 		"d3-selection": "^3.0.0",
+		"lodash-es": "^4.17.21",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"recoil": "^0.7.6",
@@ -42,6 +43,7 @@
 		"@types/d3-axis": "^3.0.1",
 		"@types/d3-scale": "^4.0.2",
 		"@types/d3-selection": "^3.0.3",
+		"@types/lodash-es": "^4.17.6",
 		"@types/node": "^18.11.9",
 		"@types/react": "^18.0.25",
 		"@types/react-dom": "^18.0.9",

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

@@ -2,7 +2,9 @@
  * 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'
 import { ScaleType } from '@thematic/core'
 import {
@@ -25,6 +27,12 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 	themeLoaded,
 }) => {
 	const theme = useThematicFluent()
+	const [size, setSize] = useState<'small' | 'medium'>('medium')
+	const handleSizeChange = useCallback(
+		(_ev?: any, option?: IChoiceGroupOption) =>
+			setSize(option?.key as 'small' | 'medium'),
+		[],
+	)
 	const [scale, setScale] = useState<string>('<none>')
 	const handleScaleChange = useCallback(
 		(_e: any, option: IDropdownOption<any> | undefined) =>
@@ -56,6 +64,17 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 		}),
 		[theme],
 	)
+	const controlStyle = useMemo(
+		() => ({
+			width: size === 'medium' ? 320 : 240,
+			padding: 8,
+			margin: 8,
+		}),
+		[size],
+	)
+
+	const scaleChoiceSizedProps = useChoiceGroupProps({}, size)
+	console.log(scaleChoiceSizedProps)
 	return (
 		<div
 			style={{
@@ -66,7 +85,16 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 			<p>
 				The @thematic/fluent package contains a few custom Fluent controls you
 				can use in your applications to allow Thematic-specific interactions.
+				These components also support a <b>size</b> prop to align with Fluent 9
+				sizing, which you can preview here.
 			</p>
+			<ChoiceGroup
+				label="Controls size"
+				selectedKey={size}
+				options={sizeOptions}
+				styles={sizeStyles}
+				onChange={handleSizeChange}
+			/>
 			<div style={controlsStyle}>
 				<div style={controlStyle}>
 					<p>
@@ -74,6 +102,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 						pre-loads Thematic scale options.
 					</p>
 					<ScaleDropdown
+						size={size}
 						placeholder={'Choose scale'}
 						onChange={handleScaleChange}
 					/>
@@ -85,8 +114,8 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 						that pre-loads Thematic scale types.
 					</p>
 					<ScaleTypeChoiceGroup
-						label=""
-						selectedType={scaleType}
+						{...scaleChoiceSizedProps}
+						selectedKey={scaleType}
 						onChange={handleScaleTypeChange}
 					/>
 					<p style={actionStyle}> onChange: {scaleType}</p>
@@ -124,8 +153,15 @@ const controlsStyle = {
 	justifyContent: 'space-around' as const,
 }
 
-const controlStyle = {
-	width: 320,
-	padding: 8,
-	margin: 8,
+const sizeOptions = [
+	{ key: 'small', text: 'Small' },
+	{ key: 'medium', text: 'Medium' },
+]
+
+const sizeStyles = {
+	flexContainer: {
+		display: 'flex',
+		justifyContent: 'center',
+		gap: 12,
+	},
 }

yarn.lock

@@ -3863,12 +3863,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/fluent@workspace:packages/fluent"
   dependencies:
+    "@essex/components": ^3.2.0
     "@essex/jest-config": ^21.0.16
     "@essex/scripts": ^22.1.0
     "@essex/tsconfig-base": ^1.0.2
     "@fluentui/react": ^8.102.0
     "@thematic/color": "workspace:^"
     "@thematic/core": "workspace:^"
+    "@thematic/d3": "workspace:^"
     "@thematic/react": "workspace:^"
     "@types/chroma-js": ^2.1.4
     "@types/d3-scale": ^4.0.2
@@ -3987,12 +3989,14 @@ __metadata:
     "@types/d3-axis": ^3.0.1
     "@types/d3-scale": ^4.0.2
     "@types/d3-selection": ^3.0.3
+    "@types/lodash-es": ^4.17.6
     "@types/node": ^18.11.9
     "@types/react": ^18.0.25
     "@types/react-dom": ^18.0.9
     d3-axis: ^3.0.0
     d3-scale: ^4.0.2
     d3-selection: ^3.0.0
+    lodash-es: ^4.17.21
     react: ^18.2.0
     react-dom: ^18.2.0
     recoil: ^0.7.6