EuiFilePicker dropzone style updates

src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`EuiFilePicker is rendered 1`] = `
       <span
         aria-hidden="true"
         class="euiFilePicker__icon"
+        color="primary"
         data-euiicon-type="importAction"
       />
       <div

src/components/form/file_picker/_file_picker.scss

@@ -68,13 +68,13 @@
   * 4. Static height so that it doesn't shift its surrounding contents around
   */
 .euiFilePicker__prompt {
-  @include euiFormControlDefaultShadow;
   @include euiFormControlWithIcon; /* 2 */
   height: $euiFormControlHeight;
   padding-top: $euiFormControlPadding;
   padding-right: $euiFormControlPadding;
   padding-bottom: $euiFormControlPadding;
   pointer-events: none; /* 1 */
+  border: $euiBorderWidthThick dashed $euiColorLightShade;
   border-radius: $euiFormControlBorderRadius;
 
   transition:
@@ -88,6 +88,7 @@
     @include euiFormControlWithIcon($compressed: true); /* 2 */
     height: $euiFormControlCompressedHeight;
     border-radius: $euiFormControlCompressedBorderRadius;
+    box-shadow: none;
   }
 
   .euiFilePicker--large & {
@@ -104,7 +105,7 @@
   }
 
   .euiFilePicker-isInvalid & {
-    @include euiFormControlInvalidStyle;
+    border: $euiBorderWidthThick dashed $euiColorDanger;
   }
 }
 
@@ -115,7 +116,8 @@
 
   // make normal sized prompt look like placeholder
   .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorMediumShade;
+    color: $euiColorPrimaryText;
+    margin-top: $euiSizeXS / -2;
   }
 }
 
@@ -150,16 +152,17 @@
 // Focus
 .euiFilePicker__showDrop .euiFilePicker__prompt,
 .euiFilePicker__input:focus + .euiFilePicker__prompt {
-  @include euiFormControlFocusStyle;
+  border-color: $euiColorPrimary;
 
   .euiFilePicker--compressed & {
-    @include euiFormControlFocusStyle($borderOnly: true);
+    border-color: $euiColorPrimary;
   }
 }
 
 // Disabled
 .euiFilePicker__input:disabled + .euiFilePicker__prompt {
   @include euiFormControlDisabledStyle;
+  box-shadow: none;
 }
 
 // Make space for the icons on the right

src/components/form/file_picker/file_picker.tsx

@@ -244,6 +244,7 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
                 <div className="euiFilePicker__prompt" id={promptId}>
                   <EuiIcon
                     className="euiFilePicker__icon"
+                    color={disabled ? 'subdued' : 'primary'}
                     type="importAction"
                     size={normalFormControl ? 'm' : 'l'}
                     aria-hidden="true"

upcoming_changelogs/6479.md

@@ -0,0 +1 @@
+- `EuiFilePicker` styles have been updated to look more like an interactive element.