fix(ui): fix field title styling

invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx

@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from '@chakra-ui/react';
 import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup';
-import { memo, useContext } from 'react';
+import { memo, useContext, useMemo } from 'react';
 
 import { InvLabel } from './InvLabel';
 import type { InvControlProps } from './types';
@@ -18,9 +18,9 @@ export const InvControl = memo(
         children,
         helperText,
         feature,
-        orientation,
+        orientation: _orientation,
         renderInfoPopoverInPortal = true,
-        isDisabled,
+        isDisabled: _isDisabled,
         labelProps,
         label,
         error,
@@ -29,15 +29,24 @@ export const InvControl = memo(
 
       const ctx = useContext(InvControlGroupContext);
 
+      const orientation = useMemo(
+        () => _orientation ?? ctx.orientation,
+        [_orientation, ctx.orientation]
+      );
+
+      const isDisabled = useMemo(
+        () => _isDisabled ?? ctx.isDisabled,
+        [_isDisabled, ctx.isDisabled]
+      );
+
       return (
         <ChakraFormControl
           ref={ref}
-          variant="withHelperText"
-          orientation={orientation ?? ctx.orientation}
-          isDisabled={isDisabled ?? ctx.isDisabled}
+          orientation={orientation}
+          isDisabled={isDisabled}
           {...formControlProps}
         >
-          <Flex>
+          <Flex className="invcontrol-label-input-wrapper">
             {label && (
               <InvLabel
                 feature={feature}
@@ -55,26 +64,6 @@ export const InvControl = memo(
           {error && <ChakraFormErrorMessage>{error}</ChakraFormErrorMessage>}
         </ChakraFormControl>
       );
-
-      return (
-        <ChakraFormControl
-          ref={ref}
-          isDisabled={isDisabled ?? ctx.isDisabled}
-          orientation={orientation ?? ctx.orientation}
-          {...formControlProps}
-        >
-          {label && (
-            <InvLabel
-              feature={feature}
-              renderInfoPopoverInPortal={renderInfoPopoverInPortal}
-              {...labelProps}
-            >
-              {label}
-            </InvLabel>
-          )}
-          {children}
-        </ChakraFormControl>
-      );
     }
   )
 );

invokeai/frontend/web/src/common/components/InvControl/theme.ts

@@ -13,29 +13,22 @@ const {
   defineMultiStyleConfig: defineFormMultiStyleConfig,
 } = createMultiStyleConfigHelpers(formParts.keys);
 
-const formBaseStyle = defineFormPartsStyle((props) => {
-  return {
-    container: {
+const formBaseStyle = defineFormPartsStyle((props) => ({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 4,
+    h: 'unset',
+    '> .invcontrol-label-input-wrapper': {
       display: 'flex',
       flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
       alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
       gap: props.orientation === 'vertical' ? 2 : 4,
-    },
-  };
-});
-
-const withHelperText = defineFormPartsStyle(() => ({
-  container: {
-    flexDirection: 'column',
-    gap: 0,
-    h: 'unset',
-    '> div': {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 4,
-      h: 8,
+      minH: 8,
       w: 'full',
+      _invalid: {
+        color: 'error.300',
+      },
     },
   },
   helperText: {
@@ -48,9 +41,6 @@ const withHelperText = defineFormPartsStyle(() => ({
 
 export const formTheme = defineFormMultiStyleConfig({
   baseStyle: formBaseStyle,
-  variants: {
-    withHelperText,
-  },
 });
 
 const formLabelBaseStyle = defineStyle(() => {
@@ -65,6 +55,8 @@ const formLabelBaseStyle = defineStyle(() => {
     transitionDuration: 'normal',
     whiteSpace: 'nowrap',
     userSelect: 'none',
+    h: 'full',
+    alignItems: 'center',
     _disabled: {
       opacity: 0.4,
     },

invokeai/frontend/web/src/common/components/InvEditable/theme.ts

@@ -8,17 +8,20 @@ const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
 const baseStylePreview = defineStyle({
-  fontSize: 'md',
+  fontSize: 'sm',
   borderRadius: 'md',
   py: '1',
   transitionProperty: 'common',
   transitionDuration: 'normal',
   color: 'base.100',
+  _invalid: {
+    color: 'error.300'
+  }
 });
 
 const baseStyleInput = defineStyle(() => ({
   color: 'base.100',
-  fontSize: 'md',
+  fontSize: 'sm',
   borderRadius: 'md',
   py: '1',
   transitionProperty: 'common',

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx

@@ -77,7 +77,11 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
       }
       openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
     >
-      <Flex
+      <Editable
+        value={localTitle}
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+        as={Flex}
         ref={ref}
         position="relative"
         overflow="hidden"
@@ -86,24 +90,15 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
         gap={1}
         h="full"
       >
-        <Editable
-          value={localTitle}
-          onChange={handleChange}
-          onSubmit={handleSubmit}
-          as={Flex}
-          position="relative"
-          alignItems="center"
-          h="full"
-        >
-          <EditablePreview
-            fontWeight={isMissingInput ? 'bold' : 'normal'}
-            sx={editablePreviewStyles}
-            noOfLines={1}
-          />
-          <EditableInput className="nodrag" sx={editableInputStyles} />
-          <EditableControls />
-        </Editable>
-      </Flex>
+        <EditablePreview
+          fontWeight="semibold"
+          sx={editablePreviewStyles}
+          noOfLines={1}
+          color={isMissingInput ? 'error.300' : 'base.300'}
+        />
+        <EditableInput className="nodrag" sx={editableInputStyles} />
+        <EditableControls />
+      </Editable>
     </InvTooltip>
   );
 });

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx

@@ -79,38 +79,49 @@ const InputField = ({ nodeId, fieldName }: Props) => {
     );
   }
 
+  if (fieldTemplate.input === 'connection') {
+    return (
+      <InputFieldWrapper shouldDim={shouldDim}>
+        <InvControl isInvalid={isMissingInput} isDisabled={isConnected} px={2}>
+          <EditableFieldTitle
+            nodeId={nodeId}
+            fieldName={fieldName}
+            kind="input"
+            isMissingInput={isMissingInput}
+            withTooltip
+          />
+        </InvControl>
+
+        <FieldHandle
+          fieldTemplate={fieldTemplate}
+          handleType="target"
+          isConnectionInProgress={isConnectionInProgress}
+          isConnectionStartField={isConnectionStartField}
+          connectionError={connectionError}
+        />
+      </InputFieldWrapper>
+    );
+  }
+
   return (
     <InputFieldWrapper shouldDim={shouldDim}>
       <FieldContextMenu nodeId={nodeId} fieldName={fieldName} kind="input">
         {(ref) => (
           <InvControl
+            ref={ref}
             isInvalid={isMissingInput}
             isDisabled={isConnected}
+            orientation="vertical"
             ps={fieldTemplate.input === 'direct' ? 0 : 2}
-            alignItems="stretch"
-            justifyContent="space-between"
-            flexDir="column"
-            gap={2}
-            h="full"
-            w="full"
+            pe={2}
           >
-            <InvLabel
-              ref={ref}
-              display="flex"
-              alignItems="center"
-              mb={0}
-              px={1}
-              gap={2}
-              h="full"
-            >
-              <EditableFieldTitle
-                nodeId={nodeId}
-                fieldName={fieldName}
-                kind="input"
-                isMissingInput={isMissingInput}
-                withTooltip
-              />
-            </InvLabel>
+            <EditableFieldTitle
+              nodeId={nodeId}
+              fieldName={fieldName}
+              kind="input"
+              isMissingInput={isMissingInput}
+              withTooltip
+            />
             <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
           </InvControl>
         )}