Add flex to ContentWrapper on Banner component

[tarynmusgrave]

Co-authored-by: Shannon Broekhoven shannon.broekhoven@shopify.com

WHY are these changes introduced?

This is required for https://github.com/Shopify/web/pull/28529

WHAT is this pull request doing?

Add flex to ContentWrapper on Banner component so that ContentWrapper fills width of Banner. This is required to allow for aligning elements on the right side of the Banner.

CURRENT

AFTER

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

import React from 'react';

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

export function Playground() {
  return (
    <Page title="Playground">
      <Card>
        <Banner status="warning" onDismiss={() => {}}>
          <Stack>
            <Stack.Item fill>Balance (Customer owes you)</Stack.Item>
            <Stack.Item>$10.11</Stack.Item>
          </Stack>
        </Banner>
      </Card>
    </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, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/Banner/Banner.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Banner/Banner.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/Banner/Banner.tsx

[dleroux]

Just a small suggestion for the change log but otherwise looks good 🎉