EuiFilePicker dropzone style updates (#6479)

* WIP dropzone styles * WIP dropzone styles * Variable for border width * Changelog entry. * Update src/components/form/file_picker/_file_picker.scss Co-authored-by: Cee <[email protected]> * Update upcoming_changelogs/6479.md Co-authored-by: Cee <[email protected]>
elastic · Dec 14, 2022 · 8d79c7d · 8d79c7d
1 parent c506864
commit 8d79c7d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap b/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

diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -64,30 +64,28 @@
 /**
   * 1. Don't block the user from dropping files onto the filepicker.
   * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
-  * 3. Delay focus gradient or else it will only partially transition while file chooser opens
   * 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:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 3 */
+    border-color $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
 
   .euiFilePicker--compressed & {
     @include euiFormControlStyleCompressed($includeStates: false);
     @include euiFormControlWithIcon($compressed: true); /* 2 */
     height: $euiFormControlCompressedHeight;
     border-radius: $euiFormControlCompressedBorderRadius;
+    box-shadow: none;
   }
 
   .euiFilePicker--large & {
@@ -104,7 +102,7 @@
   }
 
   .euiFilePicker-isInvalid & {
-    @include euiFormControlInvalidStyle;
+    border: $euiBorderWidthThick dashed $euiColorDanger;
   }
 }
 
@@ -113,9 +111,14 @@
   @include euiTextTruncate;
   line-height: $euiSize;
 
-  // make normal sized prompt look like placeholder
+  // Make normal sized prompt stand out a bit more - on the large size we don't need this as it's already identifiable
   .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorMediumShade;
+    color: $euiColorPrimaryText;
+  }
+
+  // Offset/center prompt text for non-large file-pickers
+  .euiFilePicker:not(.euiFilePicker--large) & {
+    margin-top: $euiSizeXS / -2;
   }
 }
 
@@ -150,16 +153,13 @@
 // Focus
 .euiFilePicker__showDrop .euiFilePicker__prompt,
 .euiFilePicker__input:focus + .euiFilePicker__prompt {
-  @include euiFormControlFocusStyle;
-
-  .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

diff --git a/src/components/form/file_picker/file_picker.tsx b/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"

diff --git a/upcoming_changelogs/6479.md b/upcoming_changelogs/6479.md
@@ -0,0 +1 @@
+- `EuiFilePicker` styles have been updated to look more like an interactive element.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- `EuiFilePicker` styles have been updated to look more like an interactive element.