[EuiButtonEmpty] Allow disabling the text wrapper

cee-chen · cee-chen · commit bb8cca07db55 · 2023-11-21T11:59:14.000-08:00
(setup for datagrid button cleanup)

- `textProps &amp;&amp;` is required now for typing, to avoid `false` shenanigans
diff --git a/src/components/button/button_display/_button_display_content.test.tsx b/src/components/button/button_display/_button_display_content.test.tsx
@@ -98,6 +98,16 @@ describe('EuiButtonDisplayContent', () => {
       expect(container.querySelector('.eui-textTruncate')).toBeTruthy();
     });
 
+    it('does not render a text span wrapper if textProps is explicitly set to false', () => {
+      const { container } = render(
+        <EuiButtonDisplayContent textProps={false}>
+          Text
+        </EuiButtonDisplayContent>
+      );
+
+      expect(container.querySelector('.eui-textTruncate')).toBeFalsy();
+    });
+
     it('does not render a text span wrapper if custom child with no textProps are passed', () => {
       const { getByTestSubject, container } = render(
         <EuiButtonDisplayContent>
diff --git a/src/components/button/button_display/_button_display_content.tsx b/src/components/button/button_display/_button_display_content.tsx
@@ -37,13 +37,17 @@ export interface EuiButtonDisplayContentProps extends CommonProps {
   iconSide?: ButtonContentIconSide;
   isLoading?: boolean;
   /**
-   * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
+   * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
+   *
+   * This span wrapper can be removed by passing `textProps={false}`.
    */
-  textProps?: HTMLAttributes<HTMLSpanElement> &
-    CommonProps & {
-      ref?: Ref<HTMLSpanElement>;
-      'data-text'?: string;
-    };
+  textProps?:
+    | (HTMLAttributes<HTMLSpanElement> &
+        CommonProps & {
+          ref?: Ref<HTMLSpanElement>;
+          'data-text'?: string;
+        })
+    | false;
   iconSize?: ButtonContentIconSize;
   isDisabled?: boolean;
 }
@@ -90,11 +94,13 @@ export const EuiButtonDisplayContent: FunctionComponent<
   }
 
   const isText = typeof children === 'string';
+  const doNotRenderTextWrapper = textProps === false;
+  const renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper;
 
   return (
     <span css={cssStyles} {...contentProps}>
       {iconSide === 'left' && icon}
-      {isText || textProps ? (
+      {renderTextWrapper ? (
         <span
           {...textProps}
           className={classNames('eui-textTruncate', textProps?.className)}
diff --git a/src/components/button/button_empty/button_empty.test.tsx b/src/components/button/button_empty/button_empty.test.tsx
@@ -167,5 +167,15 @@ describe('EuiButtonEmpty', () => {
 
       expect(container.firstChild).toMatchSnapshot();
     });
+
+    it('does not render the text wrapper when textProps is set to false', () => {
+      const { container } = render(
+        <EuiButtonEmpty textProps={false}>Content</EuiButtonEmpty>
+      );
+
+      expect(
+        container.querySelector('.euiButtonEmpty__text')
+      ).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
@@ -72,7 +72,7 @@ export interface CommonEuiButtonEmptyProps
   type?: 'button' | 'submit';
   buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
   /**
-   * Object of props passed to the <span/> wrapping the button's content
+   * Object of props passed to the `<span>` wrapping the button's content
    */
   contentProps?: CommonProps & EuiButtonDisplayContentType;
 }
@@ -139,7 +139,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
 
   const textClassNames = classNames(
     'euiButtonEmpty__text',
-    textProps?.className
+    textProps && textProps.className
   );
 
   const innerNode = (
@@ -149,7 +149,11 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
       iconType={iconType}
       iconSide={iconSide}
       iconSize={size === 'xs' ? 's' : iconSize}
-      textProps={{ ...textProps, className: textClassNames }}
+      textProps={
+        textProps === false
+          ? false
+          : { ...textProps, className: textClassNames }
+      }
       {...{ ...contentProps, className: contentClassNames }}
     >
       {children}
diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -185,7 +185,7 @@ export class EuiSuperUpdateButton extends Component<
                 ...restTextProps,
                 className: classNames(
                   'euiScreenReaderOnly',
-                  restTextProps?.className
+                  restTextProps && restTextProps.className
                 ),
               }}
               {...rest}
diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
@@ -119,7 +119,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   const buttonTextClassNames = classNames(
     'euiFilterButton__text',
     { 'euiFilterButton__text-hasNotification': showBadge },
-    textProps?.className
+    textProps && textProps.className
   );
 
   const badgeContent = showBadge && (
@@ -171,7 +171,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
         css: [
           textStyles.euiFilterButton__text,
           showBadge && textStyles.hasNotification,
-          textProps?.css,
+          textProps && textProps.css,
         ],
       }}
       contentProps={{
