From 756188bcf4ee5b4d4aff510b3e1159c65481a86d Mon Sep 17 00:00:00 2001
From: Brittany Archibeque <brittanyarchibeque@Brittanys-MBP-2.home>
Date: Mon, 20 May 2024 13:36:47 -0600
Subject: [PATCH] fix busy button dots to be smaller when button is small

---
 src/js/components/Button/BusyAnimation.js | 13 +++++++------
 src/js/components/Button/Button.js        |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/js/components/Button/BusyAnimation.js b/src/js/components/Button/BusyAnimation.js
index 0068ede8b3f..4aadaf327ef 100644
--- a/src/js/components/Button/BusyAnimation.js
+++ b/src/js/components/Button/BusyAnimation.js
@@ -15,17 +15,18 @@ const bounceDelayRule = css`
   animation: ${bounceDelay} 1.4s infinite ease-in-out both;
 `;
 
+/* When button is small size we need half the dot size to fit properly */
 const Dot = styled(Box)`
   background-color: currentColor;
-  width: 8px;
-  height: 8px;
+  width: ${(props) => (props.size.size === 'small' ? '4px' : '8px')};
+  height: ${(props) => (props.size.size === 'small' ? '4px' : '8px')};
   border-radius: 100%;
   display: inline-block;
   ${bounceDelayRule}
   ${(props) => props.delay && `animation-delay: ${props.delay};`}
 `;
 
-export const EllipsisAnimation = () => (
+export const EllipsisAnimation = (size) => (
   <Box
     style={{ position: 'absolute' }}
     fill
@@ -35,9 +36,9 @@ export const EllipsisAnimation = () => (
     <Box alignSelf="center" direction="row" gap="small">
       {/* A negative delay starts the animation sooner. The first dot
       should begin animating before the second and so on. */}
-      <Dot delay="-0.32s" />
-      <Dot delay="-0.16s" />
-      <Dot />
+      <Dot size={size} delay="-0.32s" />
+      <Dot size={size} delay="-0.16s" />
+      <Dot size={size} />
     </Box>
   </Box>
 );
diff --git a/src/js/components/Button/Button.js b/src/js/components/Button/Button.js
index cede68f2765..78e1f24f936 100644
--- a/src/js/components/Button/Button.js
+++ b/src/js/components/Button/Button.js
@@ -461,7 +461,7 @@ const Button = forwardRef(
         // position relative is necessary to have the animation
         // display over the button content
         <RelativeBox flex={false}>
-          {busy && <EllipsisAnimation />}
+          {busy && <EllipsisAnimation size={sizeProp} />}
           {success && (
             <Box
               style={{ position: 'absolute' }}