From 2cfd0884672d72e646e2997126ca54b628f40e6d Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Mon, 31 Oct 2022 10:02:19 -0700
Subject: [PATCH] [EuiButton] Fix multiple issues around internal
 EuiButtonDisplay components (#6332)

* Fix text wrapper not being used for EuiI18n 'text' that pass textProps

* Fix unnecessary textProps spread causing false positive for undefined/empty objs

* Fix minWidth inline style not applying for 0px + use logical property

* [opinionated] iconSide change: prefer DOM order over CSS order

- more accessible to rtl

* [cleanup] remove unnecessary/unused CSS

- flex shrink is already set by EuiLoadingSpinner and EuiIcon respectively and does not need to be repeated

- size CSS isn't doing anything and isn't worth keeping

* Write more unit tests for EuiButtonDisplayContent

* Fix EuiLoadingSpinner to not pass wildcard color values into Emotion

- we should be using inline styles for non-enum props to avoid generating n/infinite Emotion classNames

+ add unit test for EuiButtonDisplayContent & remove unnecessary typing

* write more/missing unit tests for logic within internal EuiButtonDisplay

* changelog
---
 .../button/__snapshots__/button.test.tsx.snap |  21 ++-
 .../_button_display_content.test.tsx.snap     |  63 ++++++++
 .../button_display/_button_display.test.tsx   | 137 +++++++++++++++++-
 .../button/button_display/_button_display.tsx |   6 +-
 .../_button_display_content.styles.ts         |  14 --
 .../_button_display_content.test.tsx          |  83 ++++++++++-
 .../_button_display_content.tsx               |  32 +---
 .../__snapshots__/card_select.test.tsx.snap   |   1 -
 .../loading_spinner.test.tsx.snap             |  23 +++
 .../loading/loading_spinner.styles.ts         |  26 ++--
 .../loading/loading_spinner.test.tsx          |  15 ++
 src/components/loading/loading_spinner.tsx    |  12 +-
 upcoming_changelogs/6332.md                   |   4 +
 13 files changed, 366 insertions(+), 71 deletions(-)
 create mode 100644 upcoming_changelogs/6332.md

diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index c44f284ef09..cc0079dc8e6 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -156,10 +156,9 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
   type="button"
 >
   <span
-    class="emotion-euiButtonDisplayContent-left"
+    class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="emotion-euiButtonDisplayContent__icon-m"
       color="inherit"
       data-euiicon-type="user"
     />
@@ -178,18 +177,17 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
   type="button"
 >
   <span
-    class="emotion-euiButtonDisplayContent-right"
+    class="emotion-euiButtonDisplayContent"
   >
-    <span
-      class="emotion-euiButtonDisplayContent__icon-m"
-      color="inherit"
-      data-euiicon-type="user"
-    />
     <span
       class="eui-textTruncate"
     >
       Content
     </span>
+    <span
+      color="inherit"
+      data-euiicon-type="user"
+    />
   </span>
 </button>
 `;
@@ -203,7 +201,6 @@ exports[`EuiButton props iconSize m is rendered 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="emotion-euiButtonDisplayContent__icon-m"
       color="inherit"
       data-euiicon-type="user"
     />
@@ -225,7 +222,6 @@ exports[`EuiButton props iconSize s is rendered 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="emotion-euiButtonDisplayContent__icon-s"
       color="inherit"
       data-euiicon-type="user"
     />
@@ -247,7 +243,6 @@ exports[`EuiButton props iconType is rendered 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="emotion-euiButtonDisplayContent__icon-m"
       color="inherit"
       data-euiicon-type="user"
     />
@@ -302,8 +297,9 @@ exports[`EuiButton props isLoading is rendered 1`] = `
   >
     <span
       aria-label="Loading"
-      class="euiLoadingSpinner emotion-euiLoadingSpinner-m-euiButtonDisplayContent__spinner"
+      class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
       role="progressbar"
+      style="border-color:#07C currentcolor currentcolor currentcolor"
     />
   </span>
 </button>
@@ -336,6 +332,7 @@ exports[`EuiButton props isSelected is rendered as true 1`] = `
 exports[`EuiButton props minWidth is rendered 1`] = `
 <button
   class="euiButton emotion-euiButtonDisplay-m-m-base-primary"
+  style="min-inline-size:0"
   type="button"
 >
   <span
diff --git a/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap
index 6f150d105d1..8a4fc9a9a02 100644
--- a/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap
+++ b/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap
@@ -1,5 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loading spinners with custom border color 1`] = `
+<span
+  class="emotion-euiButtonDisplayContent"
+>
+  <span
+    aria-label="Loading"
+    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+    role="progressbar"
+    style="border-color: #07c currentcolor currentcolor currentcolor;"
+  />
+  <span
+    class="eui-textTruncate"
+  >
+    Loading
+  </span>
+</span>
+`;
+
+exports[`EuiButtonDisplayContent button icon loading icon replaces existing icons 1`] = `
+<span
+  class="emotion-euiButtonDisplayContent"
+>
+  <span
+    aria-label="Loading"
+    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+    role="progressbar"
+  />
+  <span
+    class="eui-textTruncate"
+  >
+    Loading
+  </span>
+</span>
+`;
+
+exports[`EuiButtonDisplayContent button icon renders icons on the left side by default 1`] = `
+<span
+  class="emotion-euiButtonDisplayContent"
+>
+  <span
+    color="inherit"
+    data-euiicon-type="user"
+  />
+  <span
+    data-test-subj="content"
+  />
+</span>
+`;
+
+exports[`EuiButtonDisplayContent button icon renders icons on the right side 1`] = `
+<span
+  class="emotion-euiButtonDisplayContent"
+>
+  <span
+    data-test-subj="content"
+  />
+  <span
+    color="inherit"
+    data-euiicon-type="user"
+  />
+</span>
+`;
+
 exports[`EuiButtonDisplayContent renders 1`] = `
 <span
   aria-label="aria-label"
diff --git a/src/components/button/button_display/_button_display.test.tsx b/src/components/button/button_display/_button_display.test.tsx
index eb144ab028a..d590c9d0018 100644
--- a/src/components/button/button_display/_button_display.test.tsx
+++ b/src/components/button/button_display/_button_display.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 
@@ -25,4 +25,139 @@ describe('EuiButtonDisplay', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  describe('props', () => {
+    test('minWidth', () => {
+      const { container } = render(<EuiButtonDisplay minWidth={0} />);
+
+      expect(container.innerHTML).toEqual(
+        expect.stringContaining('style="min-inline-size: 0;"')
+      );
+    });
+  });
+
+  describe('disabled behavior', () => {
+    it('disables hrefs with javascript in them and renders a button instead of a link', () => {
+      const { container } = render(
+        // eslint-disable-next-line no-script-url
+        <EuiButtonDisplay href="javascript:alert(0)" />
+      );
+      expect(container.querySelector('button[disabled]')).toBeTruthy();
+    });
+
+    it('disables buttons that are isLoading', () => {
+      const { container } = render(<EuiButtonDisplay isLoading />);
+      expect(container.querySelector('button[disabled]')).toBeTruthy();
+    });
+
+    it('disables buttons that are isDisabled', () => {
+      const { container } = render(<EuiButtonDisplay isDisabled />);
+      expect(container.querySelector('button[disabled]')).toBeTruthy();
+    });
+
+    it('disables buttons that pass the native disabled attr', () => {
+      const { container } = render(<EuiButtonDisplay disabled />);
+      expect(container.querySelector('button[disabled]')).toBeTruthy();
+    });
+  });
+
+  describe('link vs button behavior', () => {
+    describe('links', () => {
+      it('renders valid links as <a> tags', () => {
+        const { container } = render(<EuiButtonDisplay href="#" />);
+        expect(container.querySelector('a')).toBeTruthy();
+        expect(container.querySelector('button')).toBeFalsy();
+      });
+
+      it('removes the `type` prop from links', () => {
+        const { container } = render(
+          <EuiButtonDisplay href="#" type="button" />
+        );
+        expect(container.querySelector('a')?.getAttribute('type')).toBeNull();
+      });
+
+      it('inserts `rel=noreferrer` for non-Elastic urls ', () => {
+        const { queryByTestSubject } = render(
+          <>
+            <EuiButtonDisplay
+              href="https://elastic.co"
+              data-test-subj="norel"
+              rel="noreferrer" // Removes this
+            />
+            <EuiButtonDisplay
+              href="ftp://elastic.co"
+              data-test-subj="badprotocol"
+            />
+            <EuiButtonDisplay
+              href="https://hello.world"
+              data-test-subj="notelastic"
+            />
+          </>
+        );
+
+        expect(queryByTestSubject('norel')?.getAttribute('rel')).toEqual('');
+        expect(queryByTestSubject('badprotocol')?.getAttribute('rel')).toEqual(
+          'noreferrer'
+        );
+        expect(queryByTestSubject('notelastic')?.getAttribute('rel')).toEqual(
+          'noreferrer'
+        );
+      });
+
+      it('inserts `rel=noopener` for all target=_blank links', () => {
+        const { queryByTestSubject } = render(
+          <>
+            <EuiButtonDisplay
+              href="https://elastic.co"
+              target="_blank"
+              data-test-subj="elastic"
+            />
+            <EuiButtonDisplay
+              href="https://hello.world"
+              target="_blank"
+              data-test-subj="notelastic"
+            />
+          </>
+        );
+
+        expect(queryByTestSubject('elastic')?.getAttribute('rel')).toEqual(
+          'noopener'
+        );
+        expect(queryByTestSubject('notelastic')?.getAttribute('rel')).toEqual(
+          'noopener noreferrer'
+        );
+      });
+    });
+
+    describe('buttons', () => {
+      it('removes the `href`, `rel` and `target` props from buttons', () => {
+        const { container } = render(
+          <EuiButtonDisplay
+            isDisabled
+            href="#"
+            rel="noopener"
+            target="_blank"
+          />
+        );
+        expect(container.querySelector('a')).toBeFalsy();
+        const button = container.querySelector('button')!;
+
+        expect(button).toBeTruthy();
+        expect(button.getAttribute('href')).toBeNull();
+        expect(button.getAttribute('rel')).toBeNull();
+        expect(button.getAttribute('target')).toBeNull();
+      });
+
+      it('only sets [disabled] and [aria-pressed] on buttons', () => {
+        const { container } = render(
+          <>
+            <EuiButtonDisplay isDisabled isSelected />
+            <EuiButtonDisplay href="#" isSelected />
+          </>
+        );
+        expect(container.querySelectorAll('[disabled]')).toHaveLength(1);
+        expect(container.querySelectorAll('[aria-pressed]')).toHaveLength(1);
+      });
+    });
+  });
 });
diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx
index 163afaeab6f..d128aef860f 100644
--- a/src/components/button/button_display/_button_display.tsx
+++ b/src/components/button/button_display/_button_display.tsx
@@ -111,7 +111,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
     {
       children,
       iconType,
-      iconSide,
+      iconSide = 'left',
       iconSize,
       size = 'm',
       isDisabled,
@@ -156,7 +156,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
         iconType={iconType}
         iconSide={iconSide}
         iconSize={iconSize}
-        textProps={{ ...textProps }}
+        textProps={textProps}
         {...contentProps}
       >
         {children}
@@ -193,7 +193,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
       element,
       {
         css: cssStyles,
-        style: minWidth ? { ...style, minWidth } : style,
+        style: minWidth != null ? { ...style, minInlineSize: minWidth } : style,
         ref,
         ...elementProps,
         ...relObj,
diff --git a/src/components/button/button_display/_button_display_content.styles.ts b/src/components/button/button_display/_button_display_content.styles.ts
index 085a60b6fa2..b8c51744be6 100644
--- a/src/components/button/button_display/_button_display_content.styles.ts
+++ b/src/components/button/button_display/_button_display_content.styles.ts
@@ -20,18 +20,4 @@ export const euiButtonDisplayContentStyles = ({ euiTheme }: UseEuiTheme) => ({
     vertical-align: middle;
     gap: ${euiTheme.size.s};
   `,
-  // Icon side
-  left: css``,
-  right: css`
-    flex-direction: row-reverse;
-  `,
-  euiButtonDisplayContent__spinner: css`
-    flex-shrink: 0;
-  `,
-  euiButtonDisplayContent__icon: css`
-    flex-shrink: 0;
-  `,
-  // Icon size
-  s: css``,
-  m: css``,
 });
diff --git a/src/components/button/button_display/_button_display_content.test.tsx b/src/components/button/button_display/_button_display_content.test.tsx
index 33417c3c5e5..5f275e457c7 100644
--- a/src/components/button/button_display/_button_display_content.test.tsx
+++ b/src/components/button/button_display/_button_display_content.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 
@@ -28,4 +28,85 @@ describe('EuiButtonDisplayContent', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  describe('button icon', () => {
+    it('renders icons on the left side by default', () => {
+      const { container, queryByTestSubject } = render(
+        <EuiButtonDisplayContent iconType="user">
+          <span data-test-subj="content" />
+        </EuiButtonDisplayContent>
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(queryByTestSubject('content')?.previousSibling).toBeTruthy();
+      expect(queryByTestSubject('content')?.nextSibling).toBeFalsy();
+    });
+
+    it('renders icons on the right side', () => {
+      const { container, queryByTestSubject } = render(
+        <EuiButtonDisplayContent iconType="user" iconSide="right">
+          <span data-test-subj="content" />
+        </EuiButtonDisplayContent>
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(queryByTestSubject('content')?.previousSibling).toBeFalsy();
+      expect(queryByTestSubject('content')?.nextSibling).toBeTruthy();
+    });
+
+    describe('loading icon', () => {
+      it('replaces existing icons', () => {
+        const { container } = render(
+          <EuiButtonDisplayContent iconType="user" isLoading>
+            Loading
+          </EuiButtonDisplayContent>
+        );
+
+        expect(container.firstChild).toMatchSnapshot();
+        expect(container.querySelector('.euiLoadingSpinner')).toBeTruthy();
+      });
+
+      it('renders disabled & loading spinners with custom border color', () => {
+        const { container } = render(
+          <EuiButtonDisplayContent isLoading isDisabled>
+            Loading
+          </EuiButtonDisplayContent>
+        );
+
+        expect(container.firstChild).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('text span wrapper', () => {
+    it('renders a text span wrapper if the content is a string', () => {
+      const { container } = render(
+        <EuiButtonDisplayContent>Text</EuiButtonDisplayContent>
+      );
+
+      expect(container.querySelector('.eui-textTruncate')).toBeTruthy();
+    });
+
+    it('renders a text span wrapper if textProps is passed', () => {
+      const { getByTestSubject, container } = render(
+        <EuiButtonDisplayContent textProps={{ 'data-test-subj': 'testing' }}>
+          <>Text</>
+        </EuiButtonDisplayContent>
+      );
+
+      expect(getByTestSubject('testing')).toBeTruthy();
+      expect(container.querySelector('.eui-textTruncate')).toBeTruthy();
+    });
+
+    it('does not render a text span wrapper if custom child with no textProps are passed', () => {
+      const { getByTestSubject, container } = render(
+        <EuiButtonDisplayContent>
+          <span data-test-subj="custom">Text</span>
+        </EuiButtonDisplayContent>
+      );
+
+      expect(getByTestSubject('custom')).toBeTruthy();
+      expect(container.querySelector('.eui-textTruncate')).toBeFalsy();
+    });
+  });
 });
diff --git a/src/components/button/button_display/_button_display_content.tsx b/src/components/button/button_display/_button_display_content.tsx
index 6b153740932..77963013aa6 100644
--- a/src/components/button/button_display/_button_display_content.tsx
+++ b/src/components/button/button_display/_button_display_content.tsx
@@ -9,7 +9,7 @@
 import React, { HTMLAttributes, FunctionComponent, Ref } from 'react';
 import { useEuiTheme } from '../../../services';
 import { CommonProps } from '../../common';
-import { EuiLoadingSpinner, EuiLoadingSpinnerProps } from '../../loading';
+import { EuiLoadingSpinner } from '../../loading';
 import { EuiIcon, IconType } from '../../icon';
 import { euiButtonDisplayContentStyles } from './_button_display_content.styles';
 import classNames from 'classnames';
@@ -57,21 +57,13 @@ export const EuiButtonDisplayContent: FunctionComponent<
   isDisabled = false,
   iconType,
   iconSize = 'm',
-  iconSide,
+  iconSide = 'left',
   ...contentProps
 }) => {
   const theme = useEuiTheme();
   const styles = euiButtonDisplayContentStyles(theme);
 
-  const cssStyles = [
-    styles.euiButtonDisplayContent,
-    iconSide && styles[iconSide],
-  ];
-  const cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  const cssIconStyles = [
-    styles.euiButtonDisplayContent__icon,
-    iconSize && styles[iconSize],
-  ];
+  const cssStyles = [styles.euiButtonDisplayContent];
 
   // Add an icon to the button if one exists.
   let icon;
@@ -82,23 +74,14 @@ export const EuiButtonDisplayContent: FunctionComponent<
   // to have the same color of the text. This way we ensure the borders
   // are always visible. The default spinner color could be very light.
   const loadingSpinnerColor = isDisabled
-    ? ({
-        border: 'currentColor',
-      } as EuiLoadingSpinnerProps['color'])
+    ? { border: 'currentcolor' }
     : undefined;
 
   if (isLoading) {
-    icon = (
-      <EuiLoadingSpinner
-        css={cssSpinnerStyles}
-        size={iconSize}
-        color={loadingSpinnerColor}
-      />
-    );
+    icon = <EuiLoadingSpinner size={iconSize} color={loadingSpinnerColor} />;
   } else if (iconType) {
     icon = (
       <EuiIcon
-        css={cssIconStyles}
         type={iconType}
         size={iconSize}
         color="inherit" // forces the icon to inherit its parent color
@@ -110,8 +93,8 @@ export const EuiButtonDisplayContent: FunctionComponent<
 
   return (
     <span css={cssStyles} {...contentProps}>
-      {icon}
-      {isText ? (
+      {iconSide === 'left' && icon}
+      {isText || textProps ? (
         <span
           {...textProps}
           className={classNames('eui-textTruncate', textProps?.className)}
@@ -121,6 +104,7 @@ export const EuiButtonDisplayContent: FunctionComponent<
       ) : (
         children
       )}
+      {iconSide === 'right' && icon}
     </span>
   );
 };
diff --git a/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
index c6e9b1b4865..2f5b7719a50 100644
--- a/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
+++ b/src/components/card/card_select/__snapshots__/card_select.test.tsx.snap
@@ -78,7 +78,6 @@ exports[`EuiCardSelect props isSelected 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="emotion-euiButtonDisplayContent__icon-m"
       color="inherit"
       data-euiicon-type="check"
     />
diff --git a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
index 243c8c0c03e..707a5be5e88 100644
--- a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
@@ -1,5 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiLoadingSpinner custom colors 1`] = `
+Array [
+  <span
+    aria-label="Loading"
+    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+    role="progressbar"
+    style="border-color:#07C white white white"
+  />,
+  <span
+    aria-label="Loading"
+    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+    role="progressbar"
+    style="border-color:black #D3DAE6 #D3DAE6 #D3DAE6"
+  />,
+  <span
+    aria-label="Loading"
+    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+    role="progressbar"
+    style="color:red;border-color:black white white white"
+  />,
+]
+`;
+
 exports[`EuiLoadingSpinner is rendered 1`] = `
 <span
   aria-label="aria-label"
diff --git a/src/components/loading/loading_spinner.styles.ts b/src/components/loading/loading_spinner.styles.ts
index 94a4e20e353..951cdd65aab 100644
--- a/src/components/loading/loading_spinner.styles.ts
+++ b/src/components/loading/loading_spinner.styles.ts
@@ -14,7 +14,7 @@ import {
 import { UseEuiTheme } from '../../services';
 import {
   EuiLoadingSpinnerSize,
-  EuiLoadingSpinnerProps,
+  EuiLoadingSpinnerColor,
 } from './loading_spinner';
 
 const _loadingSpinner = keyframes`
@@ -37,26 +37,26 @@ const spinnerSizes: {
   xxl: 'xxl',
 };
 
-const spinnerColorsCSS = (border?: string, highlight?: string) => {
-  return `
-    border-color: ${highlight} ${border} ${border} ${border};
-  `;
+export const euiSpinnerBorderColorsCSS = (
+  { euiTheme }: UseEuiTheme,
+  colors: EuiLoadingSpinnerColor = {}
+): string => {
+  const {
+    border = euiTheme.colors.lightShade,
+    highlight = euiTheme.colors.primary,
+  } = colors;
+  return `${highlight} ${border} ${border} ${border}`;
 };
 
-export const euiLoadingSpinnerStyles = (
-  { euiTheme }: UseEuiTheme,
-  color?: EuiLoadingSpinnerProps['color']
-) => {
+export const euiLoadingSpinnerStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiLoadingSpinner: css`
       flex-shrink: 0; // Ensures it never scales down below its intended size
       display: inline-block;
       border-radius: 50%;
       border: ${euiTheme.border.thick};
-      ${spinnerColorsCSS(
-        color?.border || euiTheme.colors.lightShade,
-        color?.highlight || euiTheme.colors.primary
-      )};
+      border-color: ${euiSpinnerBorderColorsCSS(euiThemeContext)};
 
       ${euiCanAnimate} {
         animation: ${_loadingSpinner} 0.6s infinite linear;
diff --git a/src/components/loading/loading_spinner.test.tsx b/src/components/loading/loading_spinner.test.tsx
index f03ef48bb98..633cd4d23e3 100644
--- a/src/components/loading/loading_spinner.test.tsx
+++ b/src/components/loading/loading_spinner.test.tsx
@@ -28,4 +28,19 @@ describe('EuiLoadingSpinner', () => {
       });
     });
   });
+
+  test('custom colors', () => {
+    const component = render(
+      <>
+        <EuiLoadingSpinner color={{ border: 'white' }} />
+        <EuiLoadingSpinner color={{ highlight: 'black' }} />
+        <EuiLoadingSpinner
+          color={{ border: 'white', highlight: 'black' }}
+          style={{ color: 'red' }} // Should merge together
+        />
+      </>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx
index 44445370c47..968305b9a14 100644
--- a/src/components/loading/loading_spinner.tsx
+++ b/src/components/loading/loading_spinner.tsx
@@ -11,7 +11,10 @@ import { CommonProps } from '../common';
 import classNames from 'classnames';
 import { useEuiTheme } from '../..//services';
 import { useLoadingAriaLabel } from './_loading_strings';
-import { euiLoadingSpinnerStyles } from './loading_spinner.styles';
+import {
+  euiLoadingSpinnerStyles,
+  euiSpinnerBorderColorsCSS,
+} from './loading_spinner.styles';
 
 export const SIZES = ['s', 'm', 'l', 'xl', 'xxl'] as const;
 export type EuiLoadingSpinnerSize = typeof SIZES[number];
@@ -37,18 +40,23 @@ export const EuiLoadingSpinner: FunctionComponent<EuiLoadingSpinnerProps> = ({
   className,
   'aria-label': ariaLabel,
   color,
+  style,
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
-  const styles = euiLoadingSpinnerStyles(euiTheme, color);
+  const styles = euiLoadingSpinnerStyles(euiTheme);
   const cssStyles = [styles.euiLoadingSpinner, styles[size]];
   const classes = classNames('euiLoadingSpinner', className);
   const defaultLabel = useLoadingAriaLabel();
+  const customColorStyle = color
+    ? { ...style, borderColor: euiSpinnerBorderColorsCSS(euiTheme, color) }
+    : style;
 
   return (
     <span
       className={classes}
       css={cssStyles}
+      style={customColorStyle}
       role="progressbar"
       aria-label={ariaLabel || defaultLabel}
       {...rest}
diff --git a/upcoming_changelogs/6332.md b/upcoming_changelogs/6332.md
new file mode 100644
index 00000000000..7cc1cbf7f0f
--- /dev/null
+++ b/upcoming_changelogs/6332.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiButton` not correctly passing `textProps` for children inside fragments or i18n components
+- Fixed `EuiButton` not correctly respecting `minWidth={0}`