[EuiFormControlButton] Support isLoading state

packages/eui/changelogs/upcoming/9328.md

@@ -0,0 +1,2 @@
+- Added `isLoading` prop on `EuiFormControlButton`
+

packages/eui/src/components/form/form_control_button/form_control_button.stories.tsx

@@ -37,6 +37,7 @@ const meta: Meta<EuiFormControlButtonProps> = {
     value: '',
     isDisabled: false,
     isInvalid: false,
+    isLoading: false,
     compressed: false,
     fullWidth: true,
   },

packages/eui/src/components/form/form_control_button/form_control_button.styles.ts

@@ -9,11 +9,16 @@
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '@elastic/eui-theme-common';
 
-import { logicalCSS } from '../../../global_styling';
-import { euiFormControlStyles, euiFormPlaceholderStyles } from '../form.styles';
+import { euiDisabledSelector, logicalCSS } from '../../../global_styling';
+import {
+  euiFormControlStyles,
+  euiFormPlaceholderStyles,
+  euiFormVariables,
+} from '../form.styles';
 
 export const euiFormControlButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
+  const form = euiFormVariables(euiThemeContext);
   const formStyles = euiFormControlStyles(euiThemeContext);
 
   return {
@@ -50,6 +55,15 @@ export const euiFormControlButtonStyles = (euiThemeContext: UseEuiTheme) => {
     compressed: css`
       ${formStyles.compressed}
     `,
+    isLoading: css`
+      &:is(${euiDisabledSelector}) {
+        background-color: ${form.backgroundColor};
+      }
+
+      .euiLoadingSpinner {
+        color: ${euiTheme.colors.borderBasePlain};
+      }
+    `,
     formWidth: formStyles.formWidth,
     fullWidth: css(formStyles.fullWidth),
     euiFormControlButton__content: css`

packages/eui/src/components/form/form_control_button/form_control_button.test.tsx

@@ -127,6 +127,21 @@ describe('EuiButtonEmpty', () => {
       });
     });
 
+    describe('isLoading', () => {
+      it('is rendered', () => {
+        const { getByTestSubject } = render(
+          <EuiFormControlButton {...defaultProps} isLoading />
+        );
+
+        const classes = Object.values(
+          getByTestSubject('euiFormControlButton').classList
+        );
+
+        expect(getByTestSubject('euiFormControlButton')).toBeDisabled();
+        expect(classes.some((clx) => clx.includes('isLoading'))).toBe(true);
+      });
+    });
+
     describe('isInvalid', () => {
       it('is rendered', () => {
         const { getByTestSubject } = render(

packages/eui/src/components/form/form_control_button/form_control_button.tsx

@@ -48,7 +48,7 @@ export type EuiFormControlButtonInputProps = {
 export type EuiFormControlButtonProps = EuiFormControlButtonInputProps &
   Omit<
     EuiButtonEmptyProps,
-    'value' | 'color' | 'size' | 'flush' | 'isSelected' | 'isLoading'
+    'value' | 'color' | 'size' | 'flush' | 'isSelected'
   > & {
     /**
      * Defines the button label when used like an input in combination with `placeholder`
@@ -69,6 +69,8 @@ export const EuiFormControlButton: FunctionComponent<
   isDisabled: _isDisabled,
   isInvalid: _isInvalid,
   fullWidth = true,
+  iconSide,
+  isLoading: _isLoading,
   href,
   rel, // required by our local href-with-rel eslint rule
   ...rest
@@ -78,12 +80,14 @@ export const EuiFormControlButton: FunctionComponent<
   const {
     isDisabled: formLayoutIsDisabled,
     isInvalid: formLayoutIsInvalid,
+    isLoading: formLayoutIsLoading,
     readOnly: formLayoutReadOnly,
     compressed: formLayoutCompressed,
   } = useContext(EuiFormControlLayoutContext);
 
   const isDisabled = _isDisabled ?? formLayoutIsDisabled;
   const isInvalid = _isInvalid ?? formLayoutIsInvalid;
+  const isLoading = formLayoutIsLoading === true ? false : _isLoading;
   const compressed = _compressed ?? formLayoutCompressed;
 
   const styles = useEuiMemoizedStyles(euiFormControlButtonStyles);
@@ -92,6 +96,7 @@ export const EuiFormControlButton: FunctionComponent<
   const cssStyles = [
     styles.euiFormControlButton,
     isInvalid && styles.isInvalid,
+    isLoading && styles.isLoading,
     formLayoutReadOnly && styles.readOnly,
     compressed && styles.compressed,
     fullWidth ? styles.fullWidth : styles.formWidth,
@@ -145,6 +150,8 @@ export const EuiFormControlButton: FunctionComponent<
       textProps={false}
       color="text"
       isDisabled={isDisabled}
+      isLoading={isLoading}
+      iconSide={isLoading ? 'right' : iconSide}
       {...restProps}
     >
       {hasText && (

packages/eui/src/components/form/form_control_layout/form_control_layout.tsx

@@ -176,6 +176,7 @@ export const EuiFormControlLayout: FunctionComponent<
           isDisabled: isDisabled,
           isInvalid: isInvalid,
           readOnly: readOnly,
+          isLoading: isLoading,
         }}
       >
         <EuiFormControlLayoutSideNodes

packages/eui/src/components/form/form_control_layout/form_control_layout_context.tsx

@@ -11,7 +11,12 @@ import { EuiFormControlLayoutProps } from './form_control_layout';
 
 type FormControlLayoutContext = Pick<
   EuiFormControlLayoutProps,
-  'compressed' | 'inputId' | 'isDisabled' | 'isInvalid' | 'readOnly'
+  | 'compressed'
+  | 'inputId'
+  | 'isDisabled'
+  | 'isInvalid'
+  | 'readOnly'
+  | 'isLoading'
 >;
 
 /**
@@ -23,6 +28,7 @@ export const EuiFormControlLayoutContext =
     inputId: '',
     isDisabled: false,
     isInvalid: false,
+    isLoading: false,
     readOnly: false,
   });