Update Card.Section to accept ReactNode as title

[drose-shopify]

WHY are these changes introduced?

According to the Polaris Design Doc it allows titles to be React.ReactNode. This is already implemented within Card.Header, however for sections this is not the case and currently enforces the title to be a string.

WHAT is this pull request doing?

Updating the Card.Section to allow for React.ReactNode.

Note This breaks breaks the design slightly for existing items that use a React.ReactNode in the title. Previously it would render within a Subheading element, this change removes that.
I am happy to provide a form of backwards compatibility and am open to suggestions.

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import * as React from 'react';
import {Page, Card, Stack, TextStyle, Subheading} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page
        title="Playground"
        primaryAction={{content: 'View Examples', url: '/examples'}}
      >
        <Card title="Hello World Before">
          <Card.Section
            title={<Subheading>{this.renderTitleMarkup()}</Subheading>}
          />
        </Card>
        <Card title="Hello World After">
          <Card.Section title={this.renderTitleMarkup()} />
        </Card>
      </Page>
    );
  }

  private renderTitleMarkup(): JSX.Element | null {
    return (
      <Stack>
        <Stack.Item fill>
          <Stack alignment="center" spacing="tight">
            <h4>
              <TextStyle variation="strong">Sub Title</TextStyle>
            </h4>
          </Stack>
        </Stack.Item>
      </Stack>
    );
  }
}

🎩 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.

[danrosenthal]

This is looking good. Can you please also add a test that asserts that a Subheading is rendered when a string is passed, as well as an entry in UNRELEASED.md?

[drose-shopify]

Sorry I haven't checked this! Updating with changes now

[drose-shopify]

All changes should be resolved now.

[dpersing]

@tmlayton or @danrosenthal, have some time to take another look at this PR?

Stale, feedback addressed

[danrosenthal]

Looking at the Percy visual regression test failures, there are definitely some regressions caused by the removal of the .SectionHeader. That'll need to wrap both the string and React.ReactNode headers before this can ship

[drose-shopify]

@danrosenthal Should have addressed the percy issues

[danrosenthal]

A few changes still need to be made. I think this also warrants an additional example in the README illustrating passing a React.ReactNode as a title. This serves the purpose of documenting it, as allowing us to check for visual regressions.

[drose-shopify]

I'm not sure why Percy is showing a blank section for the addition I made in the README. It doe show up locally when I run yarn dev.

[drose-shopify]

Would anyone be able to verify the percy results for me? I am unable to approve them / I'm not sure I want to without a second pair of eyes.

Stale

[dpersing]

Updated UNRELEASED.md to fix the merge issue there. @drose-shopify, once tests run again this should be good to squash and merge!

[ghost]

🎉 Thanks for your contribution to Polaris React!