[Navigation] badge accepts react element

[CameronGorrie]

WHY are these changes introduced?

Minimizes impact of re-rendering navigation if the badge relies on a query to resolve. More detail here: https://github.com/Shopify/web/issues/10481

WHAT is this pull request doing?

Allows the nav items badge property to take a react node prop value.

How to 🎩

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

import * as React from 'react';
import {Page, Navigation, Badge} from '../src';

export default class Playground extends React.Component<{}, never> {
  render() {
    return (
      <Page title="Playground">
        <Navigation location="/">
          <Navigation.Section
            items={[
              {
                url: '/path/to/place',
                label: 'Orders',
                icon: 'orders',
                badge: <Badge>Hello world</Badge>,
              },
            ]}
          />
        </Navigation>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[ghost]

🎉 Thanks for your contribution to Polaris React!