Updates form controls to use the Amsterdam border radius.

CHANGELOG.md

@@ -4,6 +4,10 @@
 - Changed `value` prop in `EuiExpression` to not required ([#4014](https://github.com/elastic/eui/pull/4014))
 - Added `fold` and `unfold` glyphs to `EuiIcon` ([#3994](https://github.com/elastic/eui/pull/3994))
 
+**Theme: Amsterdam**
+
+- Updated `EuiFormControl` styles for Amsterdam. Elements now use a uniform border-radius. ([#3741](https://github.com/elastic/eui/pull/3741))
+
 **Bug fixes**
 
 - Fix incorrect `euiCodeBlockNameColor` variable usage for `.hljs-name` in SCSS ([#3991](https://github.com/elastic/eui/pull/3991))

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;
     }
   }
 }

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 & {

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>

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>

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
 }

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>
   );
 };

src/global_styling/mixins/_form.scss

@@ -216,7 +216,7 @@
   @include euiFormControlText;
 
   border: none;
-  border-radius: 0;
+  border-radius: $euiFormControlBorderRadius;
   padding: $euiFormControlPadding;
 
   @if ($includeStates) {
@@ -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,

src/global_styling/variables/_form.scss

@@ -4,10 +4,12 @@ $euiFormControlHeight: $euiSizeXXL !default;
 $euiFormControlCompressedHeight: $euiSizeXL !default;
 $euiFormControlPadding: $euiSizeM !default;
 $euiFormControlCompressedPadding: $euiSizeS !default;
+$euiFormControlBorderRadius: 0 !default;
 $euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default;
 
 $euiRadioSize: $euiSize !default;
 $euiCheckBoxSize: $euiSize !default;
+$euiCheckboxBorderRadius: $euiBorderRadius !default;
 
 // Switch
 $euiSwitchHeight: $euiSize * 1.25 !default;

src/themes/eui-amsterdam/global_styling/mixins/_form.scss

@@ -0,0 +1,34 @@
+// Removes some box-shadows
+@mixin euiFormControlFocusStyle($borderOnly: false) {
+  // sass-lint:disable-block indentation, empty-args
+  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+  background-image: euiFormControlGradient();
+  background-size: 100% 100%; // 1
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      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;
+}

src/themes/eui-amsterdam/global_styling/mixins/_index.scss

@@ -4,3 +4,4 @@
 @import 'button';
 @import 'panel';
 @import 'shadow';
+@import 'form';

src/themes/eui-amsterdam/global_styling/variables/_form.scss

@@ -0,0 +1,6 @@
+$euiFormControlBorderRadius: $euiBorderRadius;
+$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
+
+$euiFormControlBoxShadow: 0 0;
+
+$euiCheckboxBorderRadius: $euiBorderRadiusSmall;

src/themes/eui-amsterdam/global_styling/variables/_index.scss

@@ -4,6 +4,7 @@
 @import 'buttons';
 @import 'borders';
 @import 'flyout';
+@import 'form';
 @import 'header';
 @import 'typography';
-@import 'shadows';
+@import 'shadows';

src/themes/eui-amsterdam/overrides/_form_control_layout.scss

@@ -0,0 +1,78 @@
+.euiFormControlLayout--group {
+  $leftSideRadius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius;
+  $rightSideRadius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
+  $leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
+  $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
+
+  border-radius: $euiFormControlBorderRadius;
+
+  .euiFormControlLayout__prepend:first-child {
+    border-radius: $leftSideRadius;
+
+    [class*='euiButton'] {
+      border-radius: $leftSideRadius;
+    }
+  }
+
+  .euiFormControlLayout__append:last-child {
+    border-radius: $rightSideRadius;
+
+    [class*='euiButton'] {
+      border-radius: $rightSideRadius;
+    }
+  }
+
+  .euiToolTipAnchor:first-child [class*='euiButton'] {
+    border-radius: $leftSideRadius;
+  }
+
+  .euiToolTipAnchor:last-child [class*='euiButton'] {
+    border-radius: $rightSideRadius;
+  }
+
+  .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'],
+  .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] {
+    border-radius: 0;
+  }
+
+  .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] {
+    border-radius: $leftSideRadius;
+  }
+
+  .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] {
+    border-radius: $rightSideRadius;
+  }
+
+  &.euiFormControlLayout--compressed {
+    border-radius: $euiBorderRadiusSmall;
+
+    .euiFormControlLayout__prepend:first-child {
+      border-radius: $leftSideRadiusSmall;
+
+      [class*='euiButton'] {
+        border-radius: $leftSideRadiusSmall;
+      }
+    }
+
+    .euiFormControlLayout__append:last-child {
+      border-radius: $rightSideRadiusSmall;
+
+      [class*='euiButton'] {
+        border-radius: $rightSideRadiusSmall;
+      }
+    }
+
+    .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'],
+    .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] {
+      border-radius: 0;
+    }
+
+    .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] {
+      border-radius: $leftSideRadiusSmall;
+    }
+
+    .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] {
+      border-radius: $rightSideRadiusSmall;
+    }
+  }
+}