Fix up dropdown option rendering

2022-11-22 13:52:58 -08:00 · 2022-11-22 13:52:58 -08:00 · 3681e74a1f
--- a/packages/fluent/package.json
+++ b/packages/fluent/package.json
@ -22,7 +22,7 @@
 		"lint": "essex lint --fix"
 	},
 	"dependencies": {
-		"@essex/components": "^3.2.0",
+		"@essex/components": "^3.2.1",
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^",
 		"@thematic/d3": "workspace:^",
@ -35,7 +35,7 @@
 		"@essex/jest-config": "^21.0.16",
 		"@essex/scripts": "^22.1.0",
 		"@essex/tsconfig-base": "^1.0.2",
-		"@fluentui/react": "^8.102.0",
+		"@fluentui/react": "^8.103.0",
 		"@types/chroma-js": "^2.1.4",
 		"@types/d3-scale": "^4.0.2",
 		"@types/lodash-es": "^4.17.6",
--- a/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.hooks.ts
+++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.hooks.ts
@ -23,9 +23,12 @@ const DEFAULT_WIDTH = 200
 const DEFAULT_HEIGHT = 32

 const ITEM_LEFT_PADDING = 8 // default right padding in fluent item
-const CARET_PADDING = 28 // defined default in fluent dropdown is 28 (this also aligns with item right padding)
-export const TEXT_WIDTH = 80 // TODO: adjust this based on font size/max measured
-const LABEL_HEIGHT = 29 // defined default in fluent dropdown
+const MEDIUM_CARET_PADDING = 28 // defined default in fluent dropdown is 28 (this also aligns with item right padding)
+const SMALL_CARET_PADDING = MEDIUM_CARET_PADDING - 4
+const MEDIUM_TEXT_WIDTH = 78
+const SMALL_TEXT_WIDTH = MEDIUM_TEXT_WIDTH - 10
+const MEDIUM_LABEL_HEIGHT = 29 // defined default in fluent dropdown
+const SMALL_LABEL_HEIGHT = MEDIUM_LABEL_HEIGHT - 3

 // we may want this to be an optional prop once extracted
 // visually we'll keep it lowercase in this app for visual consistency
@ -49,27 +52,36 @@ export function useStyledProps(
 			),
 		[props],
 	)
-	const _props = useDropdownProps(styledProps, size)
-	// FIXME: this is to correct a missing prop in the toolkit dropdown styles
+	return useDropdownProps(styledProps, size)
+}
+
+export function useLabelStyle(size: Size = 'medium') {
 	return useMemo(
-		() =>
-			merge(_props, {
-				styles: {
-					dropdownItemSelected: (_props?.styles as any).dropdownItem,
-				},
-			}),
-		[_props],
+		() => ({
+			width: size === 'medium' ? MEDIUM_TEXT_WIDTH : SMALL_TEXT_WIDTH,
+			minWidth: size === 'medium' ? MEDIUM_TEXT_WIDTH : SMALL_TEXT_WIDTH,
+		}),
+		[size],
 	)
 }

-export function usePaletteWidth(width: number): number {
+export function usePaletteWidth(width: number, size: Size = 'medium'): number {
 	// subtract space for the caret, pad, text, etc.
-	return width - ITEM_LEFT_PADDING - TEXT_WIDTH - CARET_PADDING
+	const caretPadding =
+		size === 'small' ? SMALL_CARET_PADDING : MEDIUM_CARET_PADDING
+	const textWidth = size === 'small' ? SMALL_TEXT_WIDTH : MEDIUM_TEXT_WIDTH
+	return width - ITEM_LEFT_PADDING - textWidth - caretPadding
 }

-export function usePaletteHeight(height: number, label?: string): number {
+export function usePaletteHeight(
+	height: number,
+	label?: string,
+	size: Size = 'medium',
+): number {
 	// the measured component dimensions will include the label if present
-	const root = label ? height - LABEL_HEIGHT : height
+	const labelHeight =
+		size === 'small' ? SMALL_LABEL_HEIGHT : MEDIUM_LABEL_HEIGHT
+	const root = label ? height - labelHeight : height
 	return root / 2
 }

@ -82,9 +94,9 @@ export function usePaletteHeight(height: number, label?: string): number {
 export function useItemStyle(width: number): React.CSSProperties {
 	return useMemo(
 		() => ({
-			width: width - CARET_PADDING,
+			width: width - MEDIUM_CARET_PADDING,
 			paddingLeft: 0,
-			paddingRight: CARET_PADDING,
+			paddingRight: MEDIUM_CARET_PADDING,
 		}),
 		[width],
 	)
--- a/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx
+++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx
@ -26,8 +26,8 @@ import { ScaleDropdownOption } from './ScaleDropdownOption.js'
 export const ScaleDropdown: FC<ScaleDropdownProps> = ({ size, ...props }) => {
 	const ref = useRef(null)
 	const { width, height } = useSafeDimensions(ref)
-	const paletteWidth = usePaletteWidth(width)
-	const paletteHeight = usePaletteHeight(height, props.label)
+	const paletteWidth = usePaletteWidth(width, size)
+	const paletteHeight = usePaletteHeight(height, props.label, size)
 	const itemStyle = useItemStyle(width)
 	const options = useThematicScaleOptions()
 	const handleRenderTitle = useCallback(
@ -38,10 +38,12 @@ export const ScaleDropdown: FC<ScaleDropdownProps> = ({ size, ...props }) => {
 					paletteWidth={paletteWidth}
 					paletteHeight={paletteHeight}
 					option={firstOption!}
+					style={itemStyle}
+					size={size}
 				/>
 			)
 		},
-		[paletteWidth, paletteHeight],
+		[paletteWidth, paletteHeight, itemStyle, size],
 	)

 	const handleRenderOption = useCallback(
@ -53,10 +55,11 @@ export const ScaleDropdown: FC<ScaleDropdownProps> = ({ size, ...props }) => {
 					paletteHeight={paletteHeight}
 					option={option}
 					style={itemStyle}
+					size={size}
 				/>
 			) : null
 		},
-		[paletteWidth, paletteHeight, itemStyle],
+		[paletteWidth, paletteHeight, itemStyle, size],
 	)

 	const _props = useStyledProps(props, size)
--- a/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.types.ts
+++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.types.ts
@ -18,6 +18,7 @@ export interface ScaleDropdownOptionProps {
 	paletteWidth: number
 	paletteHeight: number
 	style?: React.CSSProperties
+	size?: Size
 }

 export interface ChipsProps {
--- a/packages/fluent/src/components/ScaleDropdown/ScaleDropdownOption.tsx
+++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdownOption.tsx
@ -6,7 +6,7 @@ import type { FC } from 'react'
 import { useMemo } from 'react'

 import {
-	TEXT_WIDTH,
+	useLabelStyle,
 	usePaletteComponent,
 	useSafeCollapseDimensions,
 	useScale,
@ -18,6 +18,7 @@ export const ScaleDropdownOption: FC<ScaleDropdownOptionProps> = ({
 	paletteWidth,
 	paletteHeight,
 	style,
+	size,
 }) => {
 	const { key } = option
 	const Palette = usePaletteComponent(key as string)
@ -30,6 +31,7 @@ export const ScaleDropdownOption: FC<ScaleDropdownOptionProps> = ({
 		}),
 		[style],
 	)
+	const labelStyle = useLabelStyle(size)
 	return (
 		<div style={cStyle}>
 			<div style={labelStyle}>{option.text}</div>
@ -38,11 +40,6 @@ export const ScaleDropdownOption: FC<ScaleDropdownOptionProps> = ({
 	)
 }

-const labelStyle = {
-	width: TEXT_WIDTH,
-	minWidth: TEXT_WIDTH,
-}
-
 const containerStyle = {
 	cursor: 'pointer',
 	display: 'flex',
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@ -18,9 +18,9 @@
 		"directory": "packages/webapp"
 	},
 	"dependencies": {
-		"@essex/components": "^3.2.0",
+		"@essex/components": "^3.2.1",
 		"@fluentui/font-icons-mdl2": "^8.5.4",
-		"@fluentui/react": "^8.102.0",
+		"@fluentui/react": "^8.103.0",
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^",
 		"@thematic/d3": "workspace:^",
--- a/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
+++ b/packages/webapp/src/pages/MainPage/components/ThemeViewer/FluentControls/index.tsx
@ -65,7 +65,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 	)
 	const controlStyle = useMemo(
 		() => ({
-			width: size === 'medium' ? 320 : 200,
+			width: size === 'medium' ? 320 : 220,
 			padding: 8,
 			margin: 8,
 		}),
--- a/yarn.lock
+++ b/yarn.lock
@ -2305,9 +2305,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@essex/components@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "@essex/components@npm:3.2.0"
+"@essex/components@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "@essex/components@npm:3.2.1"
  dependencies:
    "@essex/hooks": ^4.0.13
    "@essex/react-animate-height": ^2.1.4
@ -2339,7 +2339,7 @@ __metadata:
    "@uifabric/icons": ">= 7.3.38"
    react: ">= 18"
    react-dom: ">= 18"
-  checksum: e8d8753f28b5141cfa3589f98ec2c72973b442d2e92f33253c3b6acdbd739167d796095daf34952d6eb619d3650d727912389890ebab2250f0a2e38665a46ce9
+  checksum: c9452fe9cd7e49b4f47ceb3d8321b9fb90d6070153f6d2cbb82c2b9697c999fbb64dac9ec10a4ee60118ee7c600093399588602f9464f687d4c19b479eca9f19
  languageName: node
  linkType: hard

@ -2735,9 +2735,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@fluentui/react@npm:^8.102.0":
-  version: 8.102.0
-  resolution: "@fluentui/react@npm:8.102.0"
+"@fluentui/react@npm:^8.103.0":
+  version: 8.103.0
+  resolution: "@fluentui/react@npm:8.103.0"
  dependencies:
    "@fluentui/date-time-utilities": ^8.5.3
    "@fluentui/font-icons-mdl2": ^8.5.4
@ -2758,7 +2758,7 @@ __metadata:
    "@types/react-dom": ">=16.8.0 <19.0.0"
    react: ">=16.8.0 <19.0.0"
    react-dom: ">=16.8.0 <19.0.0"
-  checksum: 4ef2885563c26f7a516b44d555e9c248acd790a70efb64ba2751ff72078d3bb54641c44f1b544fcec05d452c4f02940462283bc6bc7ccc457d9147ee54e3d499
+  checksum: 617ea9cf30c2d60932815ccc17f02cb3b7b62619bb14e2d3d595396f7c82cd39727468e2f08204109317193f58ac9ecfc623466fdb40c934d21e59ace07832bc
  languageName: node
  linkType: hard

@ -3863,11 +3863,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@thematic/fluent@workspace:packages/fluent"
  dependencies:
-    "@essex/components": ^3.2.0
+    "@essex/components": ^3.2.1
    "@essex/jest-config": ^21.0.16
    "@essex/scripts": ^22.1.0
    "@essex/tsconfig-base": ^1.0.2
-    "@fluentui/react": ^8.102.0
+    "@fluentui/react": ^8.103.0
    "@thematic/color": "workspace:^"
    "@thematic/core": "workspace:^"
    "@thematic/d3": "workspace:^"
@ -3974,12 +3974,12 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@thematic/webapp@workspace:packages/webapp"
  dependencies:
-    "@essex/components": ^3.2.0
+    "@essex/components": ^3.2.1
    "@essex/scripts": ^22.1.0
    "@essex/tsconfig-base": ^1.0.2
    "@essex/webpack-config": ^21.0.8
    "@fluentui/font-icons-mdl2": ^8.5.4
-    "@fluentui/react": ^8.102.0
+    "@fluentui/react": ^8.103.0
    "@thematic/color": "workspace:^"
    "@thematic/core": "workspace:^"
    "@thematic/d3": "workspace:^"