[EuiFormControlLayout] Use smaller icons when in compressed size

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.0.0`.
+- 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)
 

src/components/date_picker/__snapshots__/date_picker.test.tsx.snap

@@ -948,6 +948,7 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = `
                 className="euiFormControlLayoutIcons"
               >
                 <EuiFormControlLayoutCustomIcon
+                  size="m"
                   type="calendar"
                 >
                   <span
@@ -956,12 +957,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>

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

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"

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

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 {

src/components/form/form_control_layout/form_control_layout.tsx

@@ -107,6 +107,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
           <EuiFormControlLayoutIcons
             icon={icon}
             clear={clear}
+            compressed={compressed}
             isLoading={isLoading}
           />
         </div>

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

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

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

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,6 +33,7 @@ export type EuiFormControlLayoutCustomIconProps = CommonProps &
     HTMLAttributes<HTMLSpanElement>
   > & {
     type: IconType;
+    size?: EuiIconProps['size'];
     iconRef?:
       | string
       | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
@@ -43,6 +44,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
   onClick,
   type,
   iconRef,
+  size,
   ...rest
 }) => {
   const classes = classNames('euiFormControlLayoutCustomIcon', className, {
@@ -60,6 +62,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
         <EuiIcon
           className="euiFormControlLayoutCustomIcon__icon"
           aria-hidden="true"
+          size={size}
           type={type}
         />
       </button>
@@ -71,6 +74,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<EuiFormControlLay
       <EuiIcon
         className="euiFormControlLayoutCustomIcon__icon"
         aria-hidden="true"
+        size={size}
         type={type}
       />
     </span>

src/components/form/form_control_layout/form_control_layout_icons.tsx

@@ -52,14 +52,14 @@ export interface EuiFormControlLayoutIconsProps {
   icon?: IconType | IconShape;
   clear?: EuiFormControlLayoutClearButtonProps;
   isLoading?: boolean;
+  compressed?: boolean;
 }
 
 export class EuiFormControlLayoutIcons extends Component<
   EuiFormControlLayoutIconsProps
 > {
   render() {
     const { icon } = this.props;
-
     const iconSide = isIconShape(icon) && icon.side ? icon.side : 'left';
     const customIcon = this.renderCustomIcon();
     const loadingSpinner = this.renderLoadingSpinner();
@@ -93,7 +93,7 @@ export class EuiFormControlLayoutIcons extends Component<
   }
 
   renderCustomIcon() {
-    const { icon } = this.props;
+    const { icon, compressed } = this.props;
 
     if (!icon) {
       return null;
@@ -105,10 +105,15 @@ export class EuiFormControlLayoutIcons extends Component<
       : {
           type: icon,
         };
-
     const { ref: iconRef, side, ...iconRest } = iconProps;
 
-    return <EuiFormControlLayoutCustomIcon iconRef={iconRef} {...iconRest} />;
+    return (
+      <EuiFormControlLayoutCustomIcon
+        size={compressed ? 's' : 'm'}
+        iconRef={iconRef}
+        {...iconRest}
+      />
+    );
   }
 
   renderLoadingSpinner() {
@@ -122,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}
+      />
+    );
   }
 }

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