[Banner] Fixes unexpected text wrap in Firefox on focus of secondary action button

[afairbrother]

WHY are these changes introduced?

Fixes unexpected text-wrap when focusing the secondaryAction in Firefox (referenced here: #4997 (review))

WHAT is this pull request doing?

Before:

152069988-cf302ba9-f7e8-4475-b97f-a483b17be159.mp4

After:

Screen.Recording.2022-02-02.at.10.22.47.mov

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';

import {Page, Banner} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <Banner
        title="Some of your product variants are missing weights"
        status="warning"
        action={{content: 'Edit variant weights', url: ''}}
        secondaryAction={{content: 'Learn more', url: ''}}
        onDismiss={() => {}}
      >
        <p>
          Add weights to show accurate rates at checkout and when buying shipping
          labels in Shopify.
        </p>
      </Banner>
    </Page>
  );
}

🎩 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.36 KB (0%)
esm	94.28 KB (0%)
esnext	141.38 KB (+0.01% 🔺)
css	34.68 KB (+0.01% 🔺)

[dleroux]

[lgriffee]

🚢✨🎉🔥 Thanks so much @afairbrother!

[chloerice]

Thanks again @afairbrother and nice catch @lgriffee!! 🚀

[afairbrother]

Updated, and moved display: block to only be on focus. Thoughts on this, @dleroux ?

Before:

After: