Misc secondaryInput enhancements

cee-chen · cee-chen · commit 55b78f4d069c · 2024-06-25T10:05:15.000-07:00
- show secondary input automatically if `mode` is set that way

- remove double form control layout wrapper
- fix clear icon not correctly stacking with invalid icon (needs to be passed to form control layout)

- allow compressed state of input to be controlled when `display` is inline, otherwise default to compressed
diff --git a/packages/eui/src/components/color_picker/color_picker.tsx b/packages/eui/src/components/color_picker/color_picker.tsx
@@ -452,7 +452,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     }
   };
 
-  const inlineInput = secondaryInputDisplay !== 'none' && (
+  const showSecondaryInput =
+    mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
+  const inlineInput = showSecondaryInput && (
     <EuiFormRow
       display="rowCompressed"
       isInvalid={isInvalid}
@@ -465,10 +467,13 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
             : undefined
         }
         readOnly={readOnly}
-        compressed={true}
+        isDisabled={disabled}
+        isInvalid={isInvalid}
+        compressed={display === 'inline' ? compressed : true}
       >
         <EuiFieldText
-          compressed={true}
+          controlOnly={true}
+          compressed={display === 'inline' ? compressed : true}
           value={color ? color.toUpperCase() : HEX_FALLBACK}
           placeholder={!color ? placeholder || transparent : undefined}
           onChange={handleColorInput}
