[Button] Prevent the loading spinner from overlapping a monochrome outline Button’s text

[Tom-Bonnike]

WHY are these changes introduced?

Fixes #5078.

WHAT is this pull request doing?

Before

Before.mov

After

After.mov

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useState} from 'react';

import {Button} from '../src';

export function Playground() {
  const [isLoading, setLoading] = useState(false)

  return (
    <Button
      outline
      monochrome
      loading={isLoading}
      onClick={() => setLoading(isLoading => !isLoading)}
    >
      Lorem ipsum
    </Button>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	164.57 KB (0%)
esm	94.31 KB (0%)
esnext	141.42 KB (+0.02% 🔺)
css	34.65 KB (+0.04% 🔺)

[Tom-Bonnike]

• Voiceover still properly announces it as loading once the state changes:
  

• If I refocus the button somehow VoiceOver still picks up the button’s text:
  
  Some screen-readers might ignore it though, but I think that’s okay because it will still say the button is busy/dimmed. Not sure why the “Loading” from the Spinner doesn’t also get announced in this case though, I need to manually get into the button to target it, which seems wrong. 😅 Either way it’s rare that people would focus back to a button that’s loading.

[chloerice]

Thanks for contributing @Tom-Bonnike!!! Couple of suggestions and this is ready to ship 🚀