Added helpText to ActionList items

[blazingbbq]

WHY are these changes introduced?

Rails version of Polaris Action List had a helpText prop.

WHAT is this pull request doing?

These changes add the helpText prop to the ActionList.Item component.

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 {Button, ActionList, Popover} from '@shopify/polaris';

interface State {
  active: boolean;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    active: true,
  };

  togglePopover = () => {
    this.setState(({active}) => {
      return {active: !active};
    });
  };

  render() {
    const activator = (
      <Button onClick={this.togglePopover}>More actions</Button>
    );

    return (
      <div style={{height: '250px'}}>
        <Popover
          active={this.state.active}
          activator={activator}
          onClose={this.togglePopover}
        >
          <ActionList
            items={[
              {
                content: 'Blog posts',
                helpText: 'Manage your blog articles',
                icon: 'chevronRight',
                onAction: () => {
                  console.log('File imported');
                },
              },
              {
                content: 'Blogs',
                helpText: 'Manage blogs published to your Online Store',
                onAction: () => {
                  console.log('File exported');
                },
              },
            ]}
          />
        </Popover>
      </div>
    );
  }
}

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

[dfmcphee]

Could you also add an example to the ActionList README for this? That way we can show the example but we will also get visual regression testing on it as well.

I think something like what we have in the rails version would work.

## Action list with help text

Use help text when the normal Verb noun syntax for the actions does not provide sufficient context for the merchant.

```jsx
<Card>
  <ActionList
    items={[
      {
        content: 'Blog posts',
        onAction: () => {
           console.log('Blog posts clicked');
         },
         helpText: 'Manage your blog articles',
      },
       {
          content: 'Blogs',
          onAction: () => {
            console.log('Blogs clicked');
          },
          helpText: 'Manage blogs published to your Online Store',
        },
     ]}
  />
</Card>

[dfmcphee]

Great work. Thanks for adding this!

[tmlayton]

Nitpick on the changelog entry, otherwise code and 🎩 looks good – thanks for adding this!

[ghost]

🎉 Thanks for your contribution to Polaris React!