fix(ui): add custom label to IAIMantineSelects

needed to have their label styles match chakras

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

@@ -1,17 +1,25 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { MultiSelect, MultiSelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
 import { useMantineMultiSelectStyles } from 'mantine-theme/hooks/useMantineMultiSelectStyles';
 import { KeyboardEvent, RefObject, memo, useCallback } from 'react';
 
-type IAIMultiSelectProps = MultiSelectProps & {
+type IAIMultiSelectProps = Omit<MultiSelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
+  label?: string;
 };
 
 const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
-  const { searchable = true, tooltip, inputRef, ...rest } = props;
+  const {
+    searchable = true,
+    tooltip,
+    inputRef,
+    label,
+    disabled,
+    ...rest
+  } = props;
   const dispatch = useAppDispatch();
 
   const handleKeyDown = useCallback(
@@ -37,7 +45,15 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
   return (
     <Tooltip label={tooltip} placement="top" hasArrow isOpen={true}>
       <MultiSelect
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
         ref={inputRef}
+        disabled={disabled}
         onKeyDown={handleKeyDown}
         onKeyUp={handleKeyUp}
         searchable={searchable}

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

@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
@@ -11,13 +11,22 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = SelectProps & {
+type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
+  label?: string;
   inputRef?: RefObject<HTMLInputElement>;
 };
 
 const IAIMantineSearchableSelect = (props: IAISelectProps) => {
-  const { searchable = true, tooltip, inputRef, onChange, ...rest } = props;
+  const {
+    searchable = true,
+    tooltip,
+    inputRef,
+    onChange,
+    label,
+    disabled,
+    ...rest
+  } = props;
   const dispatch = useAppDispatch();
 
   const [searchValue, setSearchValue] = useState('');
@@ -61,6 +70,14 @@ const IAIMantineSearchableSelect = (props: IAISelectProps) => {
     <Tooltip label={tooltip} placement="top" hasArrow>
       <Select
         ref={inputRef}
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
+        disabled={disabled}
         searchValue={searchValue}
         onSearchChange={setSearchValue}
         onChange={handleChange}

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

@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
 import { RefObject, memo } from 'react';
@@ -9,19 +9,32 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = SelectProps & {
+type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
+  label?: string;
 };
 
 const IAIMantineSelect = (props: IAISelectProps) => {
-  const { tooltip, inputRef, ...rest } = props;
+  const { tooltip, inputRef, label, disabled, ...rest } = props;
 
   const styles = useMantineSelectStyles();
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
-      <Select ref={inputRef} styles={styles} {...rest} />
+      <Select
+        label={
+          label ? (
+            <FormControl isDisabled={disabled}>
+              <FormLabel>{label}</FormLabel>
+            </FormControl>
+          ) : undefined
+        }
+        disabled={disabled}
+        ref={inputRef}
+        styles={styles}
+        {...rest}
+      />
     </Tooltip>
   );
 };

invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx

@@ -187,15 +187,14 @@ const ControlNet = (props: ControlNetProps) => {
       {isExpanded && (
         <>
           <ParamControlNetControlMode controlNetId={controlNetId} />
-          <ParamControlNetProcessorSelect controlNetId={controlNetId} />
-          <ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
-
           <Box mt={2}>
             <ControlNetImagePreview
               controlNetId={controlNetId}
               height="392px"
             />
           </Box>
+          <ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
+          <ParamControlNetProcessorSelect controlNetId={controlNetId} />
           <ControlNetProcessorComponent controlNetId={controlNetId} />
         </>
       )}

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx

@@ -54,7 +54,7 @@ export default function ParamControlNetControlMode(
   return (
     <IAIMantineSelect
       disabled={!isEnabled}
-      label={t('parameters.controlNetControlMode')}
+      label="Control Mode"
       data={CONTROL_MODE_DATA}
       value={String(controlMode)}
       onChange={handleControlModeChange}

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -13,6 +13,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
 import { ControlNetProcessorType } from '../../store/types';
+import { FormControl, FormLabel } from '@chakra-ui/react';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;