Fixing a few more inputs and creating a few more variables

elastic · Sep 5, 2020 · 3357e09 · 3357e09
1 parent d9a2483
commit 3357e09
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 113 deletions.
diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -26,6 +26,7 @@
     > .euiDatePickerRange {
       max-width: none;
       width: auto;
+      border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
     }
   }
 }

diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -7,8 +7,14 @@
   position: relative;
 
   &.euiFilePicker--large {
+    border-radius: $euiFormControlBorderRadius;
+    overflow: hidden;
     height: auto;
   }
+
+  &.euiFilePicker--large.euiFilePicker--compressed {
+    border-radius: $euiFormControlCompressedBorderRadius;
+  }
 }
 
 // The input is an invisiable dropzone / button
@@ -65,6 +71,7 @@
   padding-right: $euiFormControlPadding;
   padding-bottom: $euiFormControlPadding;
   pointer-events: none; /* 1 */
+  border-radius: $euiFormControlBorderRadius;
 
   // sass-lint:disable-block indentation
   transition:
@@ -77,6 +84,7 @@
     @include euiFormControlStyleCompressed($includeStates: false);
     @include euiFormControlWithIcon($compressed: true); /* 2 */
     height: $euiFormControlCompressedHeight;
+    border-radius: $euiFormControlCompressedBorderRadius;
   }
 
   .euiFilePicker--large & {

diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap
@@ -3,29 +3,25 @@
 exports[`EuiSuggest is rendered 1`] = `
 <div>
   <div
-    class="euiSuggestInput testClass1 testClass2"
+    class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiInputPopover--fullWidth euiSuggestInput testClass1 testClass2"
   >
     <div
-      class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiInputPopover--fullWidth"
+      class="euiPopover__anchor"
     >
-      <div
-        class="euiPopover__anchor"
-      >
-        <div>
+      <div>
+        <div
+          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+        >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <div
-              class="euiFormControlLayout__childrenWrapper"
-            >
-              <input
-                aria-label="aria-label"
-                class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                data-test-subj="test subject string"
-                type="text"
-                value=""
-              />
-            </div>
+            <input
+              aria-label="aria-label"
+              class="euiFieldText euiFieldText--fullWidth"
+              data-test-subj="test subject string"
+              type="text"
+              value=""
+            />
           </div>
         </div>
       </div>

diff --git a/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap
@@ -2,39 +2,35 @@
 
 exports[`EuiSuggestInput is rendered 1`] = `
 <div
-  class="euiSuggestInput testClass1 testClass2"
+  class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiInputPopover--fullWidth euiSuggestInput testClass1 testClass2"
 >
   <div
-    class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiInputPopover--fullWidth"
+    class="euiPopover__anchor"
   >
-    <div
-      class="euiPopover__anchor"
-    >
-      <div>
+    <div>
+      <div
+        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+      >
         <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+          class="euiFormControlLayout__childrenWrapper"
         >
-          <div
-            class="euiFormControlLayout__childrenWrapper"
-          >
-            <input
-              aria-label="aria-label"
-              class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-              data-test-subj="test subject string"
-              type="text"
-              value=""
-            />
-          </div>
-          <span
-            class="euiToolTipAnchor"
-          >
-            <div
-              class="euiSuggestInput__statusIcon"
-              color="accent"
-              data-euiicon-type="dot"
-            />
-          </span>
+          <input
+            aria-label="aria-label"
+            class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+            data-test-subj="test subject string"
+            type="text"
+            value=""
+          />
         </div>
+        <span
+          class="euiToolTipAnchor"
+        >
+          <div
+            class="euiSuggestInput__statusIcon"
+            color="accent"
+            data-euiicon-type="dot"
+          />
+        </span>
       </div>
     </div>
   </div>

diff --git a/src/components/suggest/_suggest_input.scss b/src/components/suggest/_suggest_input.scss
@@ -1,9 +1,4 @@
-.euiSuggestInput {
-  font-size: $euiFontSizeS;
-  color: $euiColorPrimary;
-
-  .euiSuggestInput__statusIcon {
-    // sass-lint:disable-block no-important
-    background-color: transparent !important; // Override typical append coloring
-  }
+.euiSuggestInput__statusIcon {
+  // sass-lint:disable-block no-important
+  background-color: transparent !important; // Override typical append coloring
 }
diff --git a/src/components/suggest/suggest_input.tsx b/src/components/suggest/suggest_input.tsx
@@ -137,23 +137,22 @@ export const EuiSuggestInput: FunctionComponent<EuiSuggestInputProps> = props =>
     <EuiFieldText
       value={value}
       fullWidth
-      append={appendArray}
+      append={appendArray.length ? appendArray : undefined}
       isLoading={status === 'loading' ? true : false}
       onChange={onFieldChange}
       {...rest}
     />
   );
 
   return (
-    <div className={classes}>
-      <EuiInputPopover
-        input={customInput}
-        isOpen={isPopoverOpen}
-        panelPaddingSize="none"
-        fullWidth
-        closePopover={closePopover}>
-        <div>{suggestions}</div>
-      </EuiInputPopover>
-    </div>
+    <EuiInputPopover
+      className={classes}
+      input={customInput}
+      isOpen={isPopoverOpen}
+      panelPaddingSize="none"
+      fullWidth
+      closePopover={closePopover}>
+      {suggestions}
+    </EuiInputPopover>
   );
 };
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
@@ -301,7 +301,7 @@
   @if $type == 'round' {
     border-radius: $size;
   } @else if $type == 'square' {
-    border-radius: $euiBorderRadius;
+    border-radius: $euiCheckboxBorderRadius;
   }
   // sass-lint:disable-block indentation
   transition: background-color $euiAnimSpeedFast ease-in,

diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
@@ -4,11 +4,12 @@ $euiFormControlHeight: $euiSizeXXL !default;
 $euiFormControlCompressedHeight: $euiSizeXL !default;
 $euiFormControlPadding: $euiSizeM !default;
 $euiFormControlCompressedPadding: $euiSizeS !default;
-$euiFormControlBorderRadius: 0;
+$euiFormControlBorderRadius: 0 !default;
 $euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default;
 
 $euiRadioSize: $euiSize !default;
 $euiCheckBoxSize: $euiSize !default;
+$euiCheckboxBorderRadius: $euiBorderRadius !default;
 
 // Switch
 $euiSwitchHeight: $euiSize * 1.25 !default;

diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
@@ -1,30 +1,4 @@
-@mixin euiFormControlDefaultShadow($borderOnly: false) {
-  // sass-lint:disable-block indentation
-  background-color: $euiFormBackgroundColor;
-  background-repeat: no-repeat;
-  background-size: 0% 100%; // 1
-
-  @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  } @else {
-    box-shadow:
-      inset 0 0 0 1px $euiFormBorderColor;
-  }
-
-  transition:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in;
-
-  // Fixes bug in Firefox where adding a transition to the background-color
-  // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
-    // List *must* be in the same order as the above.
-    transition-property: box-shadow, background-image, background-size;
-  }
-}
-
+// Removes some box-shadows
 @mixin euiFormControlFocusStyle($borderOnly: false) {
   // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
@@ -38,3 +12,23 @@
       inset 0 0 0 1px $euiFormBorderColor;
   }
 }
+
+// Removes euiSlightShadow
+@mixin euiCustomControl($type: null, $size: $euiSize) {
+  @if $size {
+    $size: $size - 2px; // subtract 2px from size to account for border size
+    padding: $size / 2;
+  }
+
+  border: 1px solid $euiFormCustomControlBorderColor;
+  background: $euiColorEmptyShade no-repeat center;
+
+  @if $type == 'round' {
+    border-radius: $size;
+  } @else if $type == 'square' {
+    border-radius: $euiCheckboxBorderRadius;
+  }
+  // sass-lint:disable-block indentation
+  transition: background-color $euiAnimSpeedFast ease-in,
+              border-color $euiAnimSpeedFast ease-in;
+}
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss
@@ -1,2 +1,6 @@
 $euiFormControlBorderRadius: $euiBorderRadius;
 $euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
+
+$euiFormControlBoxShadow: 0 0;
+
+$euiCheckboxBorderRadius: $euiBorderRadiusSmall;
diff --git a/src/themes/eui-amsterdam/overrides/_checkbox.scss b/src/themes/eui-amsterdam/overrides/_checkbox.scss
diff --git a/src/themes/eui-amsterdam/overrides/_file_picker.scss b/src/themes/eui-amsterdam/overrides/_file_picker.scss
diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
@@ -1,12 +1,10 @@
-.euiFormControlLayout {
-  $leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius;
-  $rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0;
+.euiFormControlLayout--group {
+  $leftSideRadius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius;
+  $rightSideRadius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
   $leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
   $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
-}
 
-.euiFormControlLayout--group {
-  border-radius: $euiBorderRadius;
+  border-radius: $euiFormControlBorderRadius;
 
   .euiFormControlLayout__prepend:first-child {
     border-radius: $leftSideRadius;

diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss
@@ -1,21 +1,21 @@
 .euiFormControlLayoutDelimited {
-  border-radius: $euiBorderRadius;
+  border-radius: $euiFormControlBorderRadius;
 
   &.euiFormControlLayout--group {
     .euiFormControlLayout__childrenWrapper:first-child {
-      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
+      border-radius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius;
     }
   }
 
   .euiFormControlLayout__childrenWrapper:only-child {
-    border-radius: $euiBorderRadius;
+    border-radius: $euiFormControlBorderRadius;
     overflow: hidden;
   }
 
   .euiFormControlLayout__prepend +
   .euiFormControlLayout__childrenWrapper {
     &:last-child {
-      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+      border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
     }
   }
 
@@ -38,4 +38,4 @@
       }
     }
   }
-}
+}
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
@@ -2,9 +2,7 @@
 @import 'button_empty';
 @import 'button_group';
 @import 'call_out';
-@import 'checkbox';
 @import 'code';
-@import 'file_picker';
 @import 'filter_group';
 @import 'header';
 @import 'image';
@@ -15,4 +13,4 @@
 @import 'progress';
 @import 'text';
 @import 'form_control_layout';
-@import 'form_control_layout_delimited';
+@import 'form_control_layout_delimited';