[EuiFilePicker] Use alert icon when isInvalid (#6678)

* Change EuiFilePicker's icon to an alert icon if `isInvalid` * Tweak the border behavior of EuiFilePicker to match other form controls when disabled or focused * Fix casing of file picker docs section * changelog
elastic · Apr 5, 2023 · 34748f9 · 34748f9
1 parent 936b758
commit 34748f9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
@@ -367,7 +367,7 @@ export const FormControlsExample = {
       playground: TextAreaConfig,
     },
     {
-      title: 'File Picker',
+      title: 'File picker',
       source: [
         {
           type: GuideSectionTypes.JS,

diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -101,8 +101,9 @@
     height: $euiFilePickerTallHeight - $euiSizeL; /* 4 */
   }
 
-  .euiFilePicker-isInvalid & {
-    border: $euiBorderWidthThick dashed $euiColorDanger;
+  // To match other EUI form controls, do not color the border red if focused or disabled
+  .euiFilePicker-isInvalid:not(.euiFilePicker__showDrop) .euiFilePicker__input:not(:disabled):not(:focus) + & {
+    border-color: $euiColorDanger;
   }
 }
 

diff --git a/src/components/form/file_picker/file_picker.tsx b/src/components/form/file_picker/file_picker.tsx
@@ -244,8 +244,10 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
                 <div className="euiFilePicker__prompt" id={promptId}>
                   <EuiIcon
                     className="euiFilePicker__icon"
-                    color={disabled ? 'subdued' : 'primary'}
-                    type="importAction"
+                    color={
+                      isInvalid ? 'danger' : disabled ? 'subdued' : 'primary' // eslint-disable-line no-nested-ternary
+                    }
+                    type={isInvalid ? 'alert' : 'importAction'}
                     size={normalFormControl ? 'm' : 'l'}
                     aria-hidden="true"
                   />

diff --git a/upcoming_changelogs/6678.md b/upcoming_changelogs/6678.md
@@ -0,0 +1 @@
+- Updated `EuiFilePicker` to display an alert icon when `isInvalid`