refactor: pass value prop for button variant

Author: mgadewoll

packages/eui/src/components/button/button_empty/button_empty.tsx

@@ -84,7 +84,8 @@ export interface CommonEuiButtonEmptyProps
   contentProps?: CommonProps & EuiButtonDisplayContentType;
 }
 
-type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;
+export type EuiButtonEmptyPropsForAnchor =
+  PropsForAnchor<CommonEuiButtonEmptyProps>;
 
 export type EuiButtonEmptyPropsForButton =
   PropsForButton<CommonEuiButtonEmptyProps>;

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

@@ -6,6 +6,7 @@ exports[`EuiButtonEmpty is rendered 1`] = `
   class="euiButtonEmpty euiFormControlButton testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiTestCss"
   data-test-subj="test subject string"
   type="button"
+  value="Button value"
 >
   <span
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"

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

@@ -13,6 +13,11 @@ import { useEuiMemoizedStyles } from '../../../services';
 import { EuiButtonEmpty, type EuiButtonEmptyProps } from '../../button';
 import { EuiFieldTextProps } from '../field_text';
 import { euiFormControlButtonStyles } from './form_control_button.styles';
+import { useInnerText } from '../../inner_text';
+import {
+  EuiButtonEmptyPropsForAnchor,
+  EuiButtonEmptyPropsForButton,
+} from '../../button/button_empty/button_empty';
 
 export type EuiFormControlButtonInputProps = {
   /**
@@ -50,10 +55,13 @@ export const EuiFormControlButton: FunctionComponent<
   textProps: _textProps,
   compressed,
   isInvalid = false,
+  href,
+  rel, // required by our local href-with-rel eslint rule
   ...rest
 }) => {
-  const styles = useEuiMemoizedStyles(euiFormControlButtonStyles);
+  const [buttonTextRef, innerText] = useInnerText();
 
+  const styles = useEuiMemoizedStyles(euiFormControlButtonStyles);
   const classes = classNames('euiFormControlButton', className);
 
   const cssStyles = [
@@ -83,16 +91,33 @@ export const EuiFormControlButton: FunctionComponent<
   const content = isValidElement(children) ? children : <span>{children}</span>;
   const hasText = value || placeholder;
 
+  const linkProps = {
+    href,
+    rel,
+    ...rest,
+  } as EuiButtonEmptyPropsForAnchor;
+
+  const buttonProps = {
+    value: value ? innerText ?? '' : undefined,
+    ...rest,
+  } as EuiButtonEmptyPropsForButton;
+
+  const restProps = href ? linkProps : buttonProps;
+
   return (
     <EuiButtonEmpty
       css={cssStyles}
       className={classes}
       contentProps={contentProps}
       textProps={false}
       color="text"
-      {...(rest as EuiButtonEmptyProps)}
+      {...restProps}
     >
-      {hasText && <span {...customTextProps}>{value || placeholder}</span>}
+      {hasText && (
+        <span {...customTextProps} ref={buttonTextRef}>
+          {value || placeholder}
+        </span>
+      )}
       {hasText && content && ' '}
       {content}
     </EuiButtonEmpty>