Inspector Input Text Label Tweaks (#5991)

- Created a common value for the font weight of 600. - Updated `BorderSubsection` width label. - Updated `ShadowSubsection` labels and their styling. - Updated `TextShadowSubsection` labels and their styling. - Updated `TransformSubsection` labels and their styling. - Added `labelBelowStyle` property to `NumberInput`. - Added `labelBelowStyle` property to `NumberOrKeywordControl`.
concrete-utopia · Dec 13, 2024 · f8e6d66 · f8e6d66
1 parent 2e3f6c0
commit f8e6d66
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 20 deletions.
diff --git a/editor/src/components/inspector/common/control-styles.ts b/editor/src/components/inspector/common/control-styles.ts
@@ -215,3 +215,7 @@ const controlStylesByStatus: { [key: string]: ControlStyles } = mapArrayToDictio
 export function getControlStyles(controlStatus: ControlStatus): ControlStyles {
   return controlStylesByStatus[controlStatus]
 }
+
+export const LabelBelowNumberTextStyles: React.CSSProperties = {
+  fontWeight: 600,
+}
diff --git a/...r/src/components/inspector/sections/style-section/border-subsection/border-subsection.tsx b/...r/src/components/inspector/sections/style-section/border-subsection/border-subsection.tsx
@@ -30,6 +30,7 @@ import { useInspectorStyleInfo, useIsSubSectionVisible } from '../../../common/p
 import { ColorControl, StringColorControl } from '../../../controls/color-control'
 import { FakeUnknownArrayItem } from '../../../controls/unknown-array-item'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
+import { LabelBelowNumberTextStyles } from '../../../common/control-styles'
 
 export function updateBorderWidth(
   newWidth: CSSNumber | EmptyInputValue,
@@ -139,7 +140,8 @@ export const BorderSubsection: React.FunctionComponent<React.PropsWithChildren<u
           id='border-width'
           testId='border-width'
           value={borderWidth}
-          DEPRECATED_labelBelow='width'
+          DEPRECATED_labelBelow='W'
+          labelBelowStyle={LabelBelowNumberTextStyles}
           minimum={0}
           onSubmitValue={borderWidthSubmitValue}
           onTransientSubmitValue={borderWidthTransientSubmitValue}

diff --git a/...r/src/components/inspector/sections/style-section/shadow-subsection/shadow-subsection.tsx b/...r/src/components/inspector/sections/style-section/shadow-subsection/shadow-subsection.tsx
@@ -17,7 +17,7 @@ import type { ContextMenuItem } from '../../../../context-menu-items'
 import { InspectorContextMenuWrapper } from '../../../../context-menu-wrapper'
 import { addOnUnsetValues, removeRow } from '../../../common/context-menu-items'
 import type { ControlStatus } from '../../../common/control-status'
-import type { ControlStyles } from '../../../common/control-styles'
+import { LabelBelowNumberTextStyles, type ControlStyles } from '../../../common/control-styles'
 import type {
   CSSBoxShadow,
   CSSBoxShadows,
@@ -223,7 +223,8 @@ const ShadowItem = React.memo<ShadowItemProps>((props) => {
           propsArray={[
             {
               value: props.value.offsetX,
-              DEPRECATED_labelBelow: 'x',
+              DEPRECATED_labelBelow: 'X',
+              labelBelowStyle: LabelBelowNumberTextStyles,
               onSubmitValue: offsetXSubmitValue,
               onTransientSubmitValue: offsetXTransientSubmitValue,
               controlStatus: props.controlStatus,
@@ -233,7 +234,8 @@ const ShadowItem = React.memo<ShadowItemProps>((props) => {
             },
             {
               value: props.value.offsetY,
-              DEPRECATED_labelBelow: 'y',
+              DEPRECATED_labelBelow: 'Y',
+              labelBelowStyle: LabelBelowNumberTextStyles,
               onSubmitValue: offsetYSubmitValue,
               onTransientSubmitValue: offsetYTransientSubmitValue,
               controlStatus: props.controlStatus,
@@ -243,7 +245,8 @@ const ShadowItem = React.memo<ShadowItemProps>((props) => {
             },
             {
               value: props.value.blurRadius.value,
-              DEPRECATED_labelBelow: 'blur',
+              DEPRECATED_labelBelow: 'B',
+              labelBelowStyle: LabelBelowNumberTextStyles,
               onSubmitValue: blurRadiusSubmitValue,
               onTransientSubmitValue: blurRadiusTransientSubmitValue,
               controlStatus: props.controlStatus,
@@ -253,7 +256,8 @@ const ShadowItem = React.memo<ShadowItemProps>((props) => {
             },
             {
               value: props.value.spreadRadius.value,
-              DEPRECATED_labelBelow: 'spread',
+              DEPRECATED_labelBelow: 'S',
+              labelBelowStyle: LabelBelowNumberTextStyles,
               onSubmitValue: spreadRadiusSubmitValue,
               onTransientSubmitValue: spreadRadiusTransientSubmitValue,
               controlStatus: props.controlStatus,

diff --git a/...rc/components/inspector/sections/style-section/text-subsection/text-shadow-subsection.tsx b/...rc/components/inspector/sections/style-section/text-subsection/text-shadow-subsection.tsx
@@ -4,7 +4,7 @@ import { animated } from 'react-spring'
 import { BooleanControl } from '../../../controls/boolean-control'
 import { ColorControl } from '../../../controls/color-control'
 import type { ControlStatus } from '../../../common/control-status'
-import type { ControlStyles } from '../../../common/control-styles'
+import { LabelBelowNumberTextStyles, type ControlStyles } from '../../../common/control-styles'
 import { PropertyRow, PropertyRowHeightWithLabel } from '../../../widgets/property-row'
 import { useArraySuperControl } from '../../../controls/array-supercontrol'
 import type {
@@ -205,7 +205,8 @@ const TextShadowItem = React.memo<TextShadowItemProps>((props) => {
       <NumberInput
         style={{ gridColumn: '3 / span 1' }}
         value={props.value.offsetX}
-        DEPRECATED_labelBelow='x'
+        DEPRECATED_labelBelow='X'
+        labelBelowStyle={LabelBelowNumberTextStyles}
         id={`textShadow-offsetX-${props.index}`}
         testId={`textShadow-offsetX-${props.index}`}
         onSubmitValue={offsetXSubmitValue}
@@ -218,7 +219,8 @@ const TextShadowItem = React.memo<TextShadowItemProps>((props) => {
       <NumberInput
         style={{ gridColumn: '4 / span 1' }}
         value={props.value.offsetY}
-        DEPRECATED_labelBelow='y'
+        DEPRECATED_labelBelow='Y'
+        labelBelowStyle={LabelBelowNumberTextStyles}
         id={`textShadow-offsetY-${props.index}`}
         testId={`textShadow-offsetY-${props.index}`}
         onSubmitValue={offsetYSubmitValue}
@@ -231,7 +233,8 @@ const TextShadowItem = React.memo<TextShadowItemProps>((props) => {
       <NumberInput
         style={{ gridColumn: '5 / span 1' }}
         value={props.value.blurRadius == null ? zeroBlurRadius : props.value.blurRadius.value}
-        DEPRECATED_labelBelow='blur'
+        DEPRECATED_labelBelow='B'
+        labelBelowStyle={LabelBelowNumberTextStyles}
         id={`textShadow-blurRadius-${props.index}`}
         testId={`textShadow-blurRadius-${props.index}`}
         onSubmitValue={blurRadiusSubmitValue}

diff --git a/...components/inspector/sections/style-section/transform-subsection/transform-subsection.tsx b/...components/inspector/sections/style-section/transform-subsection/transform-subsection.tsx
@@ -18,7 +18,7 @@ import {
 import { InspectorContextMenuWrapper } from '../../../../context-menu-wrapper'
 import { addOnUnsetValues } from '../../../common/context-menu-items'
 import type { ControlStatus } from '../../../common/control-status'
-import type { ControlStyles } from '../../../common/control-styles'
+import { LabelBelowNumberTextStyles, type ControlStyles } from '../../../common/control-styles'
 import type {
   CSSDefault,
   CSSNumber,
@@ -137,7 +137,7 @@ const transformItemControlMetadatas: {
     prettyName: 'Scale',
     stepSize: 0.01,
     numberType: 'Unitless',
-    labelBelow: ['x', 'y'],
+    labelBelow: ['X', 'Y'],
     emptyValue: defaultTransformScale,
     defaultUnitToHide: null,
   },
@@ -164,7 +164,7 @@ const transformItemControlMetadatas: {
   },
   skew: {
     prettyName: 'Skew',
-    labelBelow: ['x', 'y'],
+    labelBelow: ['X', 'Y'],
     numberType: 'Angle',
     emptyValue: defaultTransformSkew,
     defaultUnitToHide: 'deg',
@@ -183,7 +183,7 @@ const transformItemControlMetadatas: {
   },
   translate: {
     prettyName: 'Translate',
-    labelBelow: ['x', 'y'],
+    labelBelow: ['X', 'Y'],
     numberType: 'LengthPercent',
     emptyValue: defaultTransformTranslate,
     defaultUnitToHide: 'px',
@@ -436,6 +436,9 @@ const DoubleLengthItem = React.memo<DoubleLengthItemProps>((props) => {
 
   const controlMetadata = transformItemControlMetadatas[props.value.type]
 
+  const firstLabel = controlMetadata.labelBelow?.at(0)
+  const secondLabel = controlMetadata.labelBelow?.at(1)
+
   return (
     <PropertyRow
       key={props.index}
@@ -480,9 +483,8 @@ const DoubleLengthItem = React.memo<DoubleLengthItemProps>((props) => {
         minimum={controlMetadata.minimum}
         maximum={controlMetadata.maximum}
         numberType={controlMetadata.numberType}
-        DEPRECATED_labelBelow={
-          controlMetadata.labelBelow != null ? controlMetadata.labelBelow[0] : undefined
-        }
+        DEPRECATED_labelBelow={firstLabel}
+        labelBelowStyle={firstLabel == null ? LabelBelowNumberTextStyles : undefined}
         onSubmitValue={doubleLengthZeroethItemSubmitValue}
         onTransientSubmitValue={doubleLengthZeroethItemTransientSubmitValue}
         controlStatus={props.controlStatus}
@@ -501,9 +503,8 @@ const DoubleLengthItem = React.memo<DoubleLengthItemProps>((props) => {
         minimum={controlMetadata.minimum}
         maximum={controlMetadata.maximum}
         numberType={controlMetadata.numberType}
-        DEPRECATED_labelBelow={
-          controlMetadata.labelBelow != null ? controlMetadata.labelBelow[1] : undefined
-        }
+        DEPRECATED_labelBelow={secondLabel}
+        labelBelowStyle={secondLabel == null ? LabelBelowNumberTextStyles : undefined}
         onSubmitValue={doubleLengthFirstItemSubmitValue}
         onTransientSubmitValue={doubleLengthFirstItemTransientSubmitValue}
         controlStatus={props.controlStatus}

diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
@@ -145,6 +145,7 @@ export interface AbstractNumberInputProps<T extends CSSNumber | number>
     InspectorControlProps {
   value: T | null | undefined
   DEPRECATED_labelBelow?: React.ReactChild
+  labelBelowStyle?: React.CSSProperties
   invalid?: boolean
 }
 
@@ -168,6 +169,7 @@ export const NumberInput = React.memo<NumberInputProps>(
     id,
     className,
     DEPRECATED_labelBelow,
+    labelBelowStyle = {},
     labelInner,
     minimum: unscaledMinimum = -Infinity,
     maximum: unscaledMaximum = Infinity,
@@ -824,6 +826,7 @@ export const NumberInput = React.memo<NumberInputProps>(
                   textAlign: 'center',
                   display: 'block',
                   color: controlStyles.secondaryColor,
+                  ...labelBelowStyle,
                 }}
               >
                 {DEPRECATED_labelBelow}

diff --git a/editor/src/uuiui/inputs/number-or-keyword-input.tsx b/editor/src/uuiui/inputs/number-or-keyword-input.tsx
@@ -53,6 +53,7 @@ interface NumberOrKeywordControlProps extends InspectorControlProps {
   onTransientSubmitValue: OnSubmitValueOrUnknownOrEmpty<CSSNumber>
   numberInputOptions: NumberInputOptions
   keywordControlOptions: KeywordControlOptions
+  labelBelowStyle?: React.CSSProperties
 }
 
 export const NumberOrKeywordControl = React.memo<NumberOrKeywordControlProps>(
@@ -68,6 +69,7 @@ export const NumberOrKeywordControl = React.memo<NumberOrKeywordControlProps>(
     className,
     controlStatus,
     DEPRECATED_labelBelow,
+    labelBelowStyle,
   }) => {
     const onSubmitValue: OnSubmitValue<UnknownOrEmptyInput<CSSNumber | CSSKeyword>> =
       React.useCallback(
@@ -92,6 +94,7 @@ export const NumberOrKeywordControl = React.memo<NumberOrKeywordControlProps>(
           onTransientSubmitValue={onTransientSubmitValue}
           controlStatus={controlStatus}
           DEPRECATED_labelBelow={DEPRECATED_labelBelow}
+          labelBelowStyle={labelBelowStyle}
           {...numberInputOptions}
         />
       )