From 4df28620ac4f5289bcae3dbc3c003aa328d4bf92 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Sun, 6 Dec 2020 07:46:57 -0500
Subject: [PATCH 1/6] wip

---
 .../src/views/form_controls/form_control_layout.js   |  2 +-
 .../form/form_control_layout/form_control_layout.tsx |  3 ++-
 .../form_control_layout_custom_icon.tsx              |  4 ++++
 .../form_control_layout_icons.tsx                    | 12 +++++++++---
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js
index c58160571f0..a225a7b7037 100644
--- a/src-docs/src/views/form_controls/form_control_layout.js
+++ b/src-docs/src/views/form_controls/form_control_layout.js
@@ -10,7 +10,7 @@ import {
 
 export default () => (
   <Fragment>
-    <EuiFormControlLayout icon="search">
+    <EuiFormControlLayout compressed icon="search">
       <input
         type="text"
         className="euiFieldText"
diff --git a/src/components/form/form_control_layout/form_control_layout.tsx b/src/components/form/form_control_layout/form_control_layout.tsx
index 320123fb87c..f15196ed197 100644
--- a/src/components/form/form_control_layout/form_control_layout.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.tsx
@@ -74,7 +74,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
       fullWidth,
       isLoading,
       isDisabled,
-      compressed,
+      compressed = false,
       className,
       prepend,
       append,
@@ -107,6 +107,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
           <EuiFormControlLayoutIcons
             icon={icon}
             clear={clear}
+            compressed={compressed}
             isLoading={isLoading}
           />
         </div>
diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
index e3b6f5cd990..c7f6ac77fc9 100644
--- a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
@@ -33,6 +33,7 @@ export type EuiFormControlLayoutCustomIconProps = CommonProps &
     HTMLAttributes<HTMLSpanElement>
   > & {
     type: IconType;
+    compressed?: boolean;
     iconRef?:
       | string
       | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
@@ -43,6 +44,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
   onClick,
   type,
   iconRef,
+  compressed = false,
   ...rest
 }) => {
   const classes = classNames('euiFormControlLayoutCustomIcon', className, {
@@ -60,6 +62,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
         <EuiIcon
           className="euiFormControlLayoutCustomIcon__icon"
           aria-hidden="true"
+          size={compressed ? 's' : 'm'}
           type={type}
         />
       </button>
@@ -71,6 +74,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
       <EuiIcon
         className="euiFormControlLayoutCustomIcon__icon"
         aria-hidden="true"
+        size={compressed ? 's' : 'm'}
         type={type}
       />
     </span>
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx
index a4dcd5d7433..6f04e0d54b0 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_icons.tsx
@@ -52,6 +52,7 @@ export interface EuiFormControlLayoutIconsProps {
   icon?: IconType | IconShape;
   clear?: EuiFormControlLayoutClearButtonProps;
   isLoading?: boolean;
+  compressed?: boolean;
 }
 
 export class EuiFormControlLayoutIcons extends Component<
@@ -59,7 +60,6 @@ export class EuiFormControlLayoutIcons extends Component<
 > {
   render() {
     const { icon } = this.props;
-
     const iconSide = isIconShape(icon) && icon.side ? icon.side : 'left';
     const customIcon = this.renderCustomIcon();
     const loadingSpinner = this.renderLoadingSpinner();
@@ -94,6 +94,7 @@ export class EuiFormControlLayoutIcons extends Component<
 
   renderCustomIcon() {
     const { icon } = this.props;
+    const { compressed } = this.props;
 
     if (!icon) {
       return null;
@@ -105,10 +106,15 @@ export class EuiFormControlLayoutIcons extends Component<
       : {
           type: icon,
         };
-
     const { ref: iconRef, side, ...iconRest } = iconProps;
 
-    return <EuiFormControlLayoutCustomIcon iconRef={iconRef} {...iconRest} />;
+    return (
+      <EuiFormControlLayoutCustomIcon
+        compressed={compressed}
+        iconRef={iconRef}
+        {...iconRest}
+      />
+    );
   }
 
   renderLoadingSpinner() {

From 9d242e4d51905bdb7f1ed668447733d93703e4db Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 10 Dec 2020 14:35:11 -0500
Subject: [PATCH 2/6] adjust icons for compressed

---
 src-docs/src/views/form_controls/form_control_layout.js       | 2 +-
 .../date_picker/__snapshots__/date_picker.test.tsx.snap       | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js
index a225a7b7037..c58160571f0 100644
--- a/src-docs/src/views/form_controls/form_control_layout.js
+++ b/src-docs/src/views/form_controls/form_control_layout.js
@@ -10,7 +10,7 @@ import {
 
 export default () => (
   <Fragment>
-    <EuiFormControlLayout compressed icon="search">
+    <EuiFormControlLayout icon="search">
       <input
         type="text"
         className="euiFieldText"
diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 3100f370605..8222d12464e 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -941,6 +941,7 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
               </DatePicker>
             </EuiValidatableControl>
             <EuiFormControlLayoutIcons
+              compressed={false}
               icon="calendar"
               isLoading={false}
             >
@@ -948,6 +949,7 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
                 className="euiFormControlLayoutIcons"
               >
                 <EuiFormControlLayoutCustomIcon
+                  compressed={false}
                   type="calendar"
                 >
                   <span
@@ -956,12 +958,14 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
                     <EuiIcon
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
+                      size="m"
                       type="calendar"
                     >
                       <span
                         aria-hidden="true"
                         className="euiFormControlLayoutCustomIcon__icon"
                         data-euiicon-type="calendar"
+                        size="m"
                       />
                     </EuiIcon>
                   </span>

From 87051e650d5e5a1f2fa0f390c9e3c521ee20bcd3 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Thu, 10 Dec 2020 16:42:00 -0500
Subject: [PATCH 3/6] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04e1478dfad..08902662160 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added collapsble behavior to `EuiResizableContainer` panels ([#3978](https://github.com/elastic/eui/pull/3978))
 - Updated `EuiResizablePanel` to use `EuiPanel` ([#3978](https://github.com/elastic/eui/pull/3978))
+- Reduced size of `icon` for compressed `EuiFormControlLayout` ([#4374](https://github.com/elastic/eui/pull/4374))
 
 **Bug fixes**
 

From eb30c679e884d0191630ca1186d21d90c316eb6f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 16 Dec 2020 16:26:29 -0500
Subject: [PATCH 4/6] Changing some new props to `size` and reducing size of
 clear button too

---
 .../__snapshots__/date_picker.test.tsx.snap   |  2 +-
 ..._control_layout_clear_button.test.tsx.snap | 17 +++++++++--
 ...m_control_layout_custom_icon.test.tsx.snap | 22 +++++++++++---
 .../_form_control_layout_clear_button.scss    |  4 +++
 .../_form_control_layout_custom_icon.scss     |  5 +---
 .../form_control_layout_clear_button.test.tsx | 21 +++++++++----
 .../form_control_layout_clear_button.tsx      | 20 +++++++++++--
 .../form_control_layout_custom_icon.test.tsx  | 30 +++++++++++++------
 .../form_control_layout_custom_icon.tsx       | 10 +++----
 .../form_control_layout_icons.tsx             | 14 +++++----
 src/global_styling/mixins/_form.scss          | 15 +++++++---
 11 files changed, 117 insertions(+), 43 deletions(-)

diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 8222d12464e..bf8b34c9eb0 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -949,7 +949,7 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
                 className="euiFormControlLayoutIcons"
               >
                 <EuiFormControlLayoutCustomIcon
-                  compressed={false}
+                  size="m"
                   type="calendar"
                 >
                   <span
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
index 3f297b5086f..812ccfb892d 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
@@ -1,10 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiFormControlLayoutClearButton is rendered 1`] = `
+<button
+  aria-label="aria-label"
+  class="euiFormControlLayoutClearButton testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <span
+    class="euiFormControlLayoutClearButton__icon"
+    data-euiicon-type="cross"
+  />
+</button>
+`;
+
+exports[`EuiFormControlLayoutClearButton size is rendered 1`] = `
 <button
   aria-label="Clear input"
-  class="euiFormControlLayoutClearButton customClass"
-  data-test-subj="clearButton"
+  class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
   type="button"
 >
   <span
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
index af807acae14..1c087e9b7f4 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
@@ -2,8 +2,9 @@
 
 exports[`EuiFormControlLayoutCustomIcon is rendered as button 1`] = `
 <button
-  class="euiFormControlLayoutCustomIcon customClass euiFormControlLayoutCustomIcon--clickable"
-  data-test-subj="customIcon"
+  aria-label="aria-label"
+  class="euiFormControlLayoutCustomIcon testClass1 testClass2 euiFormControlLayoutCustomIcon--clickable"
+  data-test-subj="test subject string"
   type="button"
 >
   <span
@@ -16,8 +17,21 @@ exports[`EuiFormControlLayoutCustomIcon is rendered as button 1`] = `
 
 exports[`EuiFormControlLayoutCustomIcon is rendered as span 1`] = `
 <span
-  class="euiFormControlLayoutCustomIcon customClass"
-  data-test-subj="customIcon"
+  aria-label="aria-label"
+  class="euiFormControlLayoutCustomIcon testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span
+    aria-hidden="true"
+    class="euiFormControlLayoutCustomIcon__icon"
+    data-euiicon-type="alert"
+  />
+</span>
+`;
+
+exports[`EuiFormControlLayoutCustomIcon size is rendered 1`] = `
+<span
+  class="euiFormControlLayoutCustomIcon"
 >
   <span
     aria-hidden="true"
diff --git a/src/components/form/form_control_layout/_form_control_layout_clear_button.scss b/src/components/form/form_control_layout/_form_control_layout_clear_button.scss
index 0dc57d56668..8bfaf521cf5 100644
--- a/src/components/form/form_control_layout/_form_control_layout_clear_button.scss
+++ b/src/components/form/form_control_layout/_form_control_layout_clear_button.scss
@@ -1,3 +1,7 @@
 .euiFormControlLayoutClearButton {
   @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon');
 }
+
+.euiFormControlLayoutClearButton--small {
+  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon', $size: 's');
+}
diff --git a/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss b/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss
index d0ffb9d31af..4c1677c0de2 100644
--- a/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss
+++ b/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss
@@ -1,9 +1,6 @@
 .euiFormControlLayoutCustomIcon {
   pointer-events: none;
-
-  .euiFormControlLayoutCustomIcon__icon {
-    transform: translateY(-1px);
-  }
+  font-size: 0; // ensures the icon stays vertically centered
 }
 
 .euiFormControlLayoutCustomIcon--clickable {
diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx b/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
index 4c5d298948f..b3e56949685 100644
--- a/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
@@ -20,15 +20,24 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
+import { requiredProps } from '../../../test';
 
 describe('EuiFormControlLayoutClearButton', () => {
   test('is rendered', () => {
-    const clear = {
-      onClick: () => null,
-      className: 'customClass',
-      'data-test-subj': 'clearButton',
-    };
-    const component = render(<EuiFormControlLayoutClearButton {...clear} />);
+    const component = render(
+      <EuiFormControlLayoutClearButton
+        onClick={() => null}
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('size is rendered', () => {
+    const component = render(
+      <EuiFormControlLayoutClearButton onClick={() => null} size="s" />
+    );
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
index 3f74c5946b9..826f39d93df 100644
--- a/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
@@ -20,19 +20,33 @@
 import React, { FunctionComponent, ButtonHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
-import { CommonProps } from '../../common';
+import { CommonProps, keysOf } from '../../common';
 import { EuiIcon } from '../../icon';
 import { EuiI18n } from '../../i18n';
 
+const sizeToClassNameMap = {
+  s: 'euiFormControlLayoutClearButton--small',
+  m: null,
+};
+
+export const SIZES = keysOf(sizeToClassNameMap);
+
 export type EuiFormControlLayoutClearButtonProps = CommonProps &
-  ButtonHTMLAttributes<HTMLButtonElement>;
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: typeof SIZES[number];
+  };
 
 export const EuiFormControlLayoutClearButton: FunctionComponent<EuiFormControlLayoutClearButtonProps> = ({
   className,
   onClick,
+  size = 'm',
   ...rest
 }) => {
-  const classes = classNames('euiFormControlLayoutClearButton', className);
+  const classes = classNames(
+    'euiFormControlLayoutClearButton',
+    sizeToClassNameMap[size],
+    className
+  );
 
   return (
     <EuiI18n
diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx
index e0528493bb8..4fcb719e92c 100644
--- a/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx
@@ -19,30 +19,42 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import { EuiFormControlLayoutCustomIcon } from './form_control_layout_custom_icon';
+import {
+  EuiFormControlLayoutCustomIcon,
+  EuiFormControlLayoutCustomIconProps,
+} from './form_control_layout_custom_icon';
+import { requiredProps } from '../../../test';
 
 describe('EuiFormControlLayoutCustomIcon', () => {
   test('is rendered as button', () => {
-    const props = {
+    const props: EuiFormControlLayoutCustomIconProps = {
       onClick: () => null,
-      className: 'customClass',
-      'data-test-subj': 'customIcon',
       type: 'alert',
       iconRef: 'icon',
     };
-    const component = render(<EuiFormControlLayoutCustomIcon {...props} />);
+    const component = render(
+      <EuiFormControlLayoutCustomIcon {...props} {...requiredProps} />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   test('is rendered as span', () => {
-    const props = {
-      className: 'customClass',
-      'data-test-subj': 'customIcon',
+    const props: EuiFormControlLayoutCustomIconProps = {
       type: 'alert',
       iconRef: 'icon',
     };
-    const component = render(<EuiFormControlLayoutCustomIcon {...props} />);
+    const component = render(
+      <EuiFormControlLayoutCustomIcon {...props} {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('size is rendered', () => {
+    const component = render(
+      <EuiFormControlLayoutCustomIcon type="alert" size="s" />
+    );
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
index c7f6ac77fc9..304514773e2 100644
--- a/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
@@ -24,7 +24,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { EuiIcon, IconType } from '../../icon';
+import { EuiIcon, EuiIconProps, IconType } from '../../icon';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 export type EuiFormControlLayoutCustomIconProps = CommonProps &
@@ -33,7 +33,7 @@ export type EuiFormControlLayoutCustomIconProps = CommonProps &
     HTMLAttributes<HTMLSpanElement>
   > & {
     type: IconType;
-    compressed?: boolean;
+    size?: EuiIconProps['size'];
     iconRef?:
       | string
       | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
@@ -44,7 +44,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
   onClick,
   type,
   iconRef,
-  compressed = false,
+  size,
   ...rest
 }) => {
   const classes = classNames('euiFormControlLayoutCustomIcon', className, {
@@ -62,7 +62,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
         <EuiIcon
           className="euiFormControlLayoutCustomIcon__icon"
           aria-hidden="true"
-          size={compressed ? 's' : 'm'}
+          size={size}
           type={type}
         />
       </button>
@@ -74,7 +74,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
       <EuiIcon
         className="euiFormControlLayoutCustomIcon__icon"
         aria-hidden="true"
-        size={compressed ? 's' : 'm'}
+        size={size}
         type={type}
       />
     </span>
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx
index 6f04e0d54b0..405d42bc5ac 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_icons.tsx
@@ -93,8 +93,7 @@ export class EuiFormControlLayoutIcons extends Component<
   }
 
   renderCustomIcon() {
-    const { icon } = this.props;
-    const { compressed } = this.props;
+    const { icon, compressed } = this.props;
 
     if (!icon) {
       return null;
@@ -110,7 +109,7 @@ export class EuiFormControlLayoutIcons extends Component<
 
     return (
       <EuiFormControlLayoutCustomIcon
-        compressed={compressed}
+        size={compressed ? 's' : 'm'}
         iconRef={iconRef}
         {...iconRest}
       />
@@ -128,11 +127,16 @@ export class EuiFormControlLayoutIcons extends Component<
   }
 
   renderClearButton() {
-    const { clear } = this.props;
+    const { clear, compressed } = this.props;
     if (!clear) {
       return null;
     }
 
-    return <EuiFormControlLayoutClearButton {...clear} />;
+    return (
+      <EuiFormControlLayoutClearButton
+        size={compressed ? 's' : 'm'}
+        {...clear}
+      />
+    );
   }
 }
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index a4f6b926769..a217f6e5b68 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/src/global_styling/mixins/_form.scss
@@ -25,10 +25,16 @@
   }
 }
 
-@mixin euiFormControlLayoutClearIcon($iconClass) {
+@mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') {
   $clearSize: $euiSize;
-  @include size($clearSize);
+  $clearIconStroke: 2px;
+
+  @if ($size == 's') {
+    $clearSize: $euiSizeM;
+    $clearIconStroke: $euiSizeXS;
+  }
 
+  @include size($clearSize);
   pointer-events: all;
   background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
   border-radius: $clearSize;
@@ -39,10 +45,11 @@
   }
 
   #{$iconClass} {
-    @include size($euiSizeS);
+    @include size($clearSize / 2);
     fill: $euiColorEmptyShade;
+    // increase thickness of icon at such a small size
     stroke: $euiColorEmptyShade;
-    stroke-width: 2px; // increase thickness of icon at such a small size
+    stroke-width: $clearIconStroke;
   }
 }
 

From da6a782c536af8432e2080bd36e3c46e1a3cc01d Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 16 Dec 2020 16:32:54 -0500
Subject: [PATCH 5/6] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 286abf0ff31..9f1c474d5e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Reduced size of `icon` for compressed `EuiFormControlLayout` ([#4374](https://github.com/elastic/eui/pull/4374))
+- Reduced the size of the icons and clear button for compressed `EuiFormControlLayout` ([#4374](https://github.com/elastic/eui/pull/4374))
 
 ## [`31.0.0`](https://github.com/elastic/eui/tree/v31.0.0)
 

From 465a8314602a46f46dfd9e762f6997733d07a542 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 16 Dec 2020 16:37:09 -0500
Subject: [PATCH 6/6] Remove default

---
 .../date_picker/__snapshots__/date_picker.test.tsx.snap         | 1 -
 src/components/form/form_control_layout/form_control_layout.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index bf8b34c9eb0..3aa06328dd4 100644
--- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -941,7 +941,6 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
               </DatePicker>
             </EuiValidatableControl>
             <EuiFormControlLayoutIcons
-              compressed={false}
               icon="calendar"
               isLoading={false}
             >
diff --git a/src/components/form/form_control_layout/form_control_layout.tsx b/src/components/form/form_control_layout/form_control_layout.tsx
index f15196ed197..2fdafdbf241 100644
--- a/src/components/form/form_control_layout/form_control_layout.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.tsx
@@ -74,7 +74,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
       fullWidth,
       isLoading,
       isDisabled,
-      compressed = false,
+      compressed,
       className,
       prepend,
       append,