[ResourceList] Add external prop to ResourceList

[stephbaker]

WHY are these changes introduced?

This change was introduced since when it comes to launching an app in the app list, certain apps should be opened in the embedded setting (i.e. same tab) or externally (i.e. another tab). The external prop identifies which apps should be opened externally.

WHAT is this pull request doing?

This PR doesn't make any design changes.

When external is true:

When external is false/undefined:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

In playground copy and paste:

import React from 'react';
import {Page, ResourceList, ResourceItem, Avatar, TextStyle} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <ResourceList
        resourceName={{singular: 'customer', plural: 'customers'}}
        items={[
          {
            id: 145,
            url: 'customers/145',
            avatarSource:
              'https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746',
            name: 'Yi So-Yeon',
            location: 'Gwangju, South Korea',
            latestOrderUrl: 'orders/1456',
          },
        ]}
        renderItem={(item) => {
          const {id, url, avatarSource, name, location, latestOrderUrl} = item;
          const shortcutActions = latestOrderUrl
        ? [{content: 'View latest order', url: latestOrderUrl}]
        : null;

          return (
            <ResourceItem
              id={id}
              url={url}
              media={
                <Avatar
                  customer
                  size="medium"
                  name={name}
                  source={avatarSource}
                />
              }
              shortcutActions={shortcutActions}
              accessibilityLabel={`View details for ${name}`}
              name={name}
              external
            >
              <h3>
                <TextStyle variation="strong">{name}</TextStyle>
              </h3>
              <div>{location}</div>
            </ResourceItem>
          );
        }}
      />
    </Page>
  );
}

• vist Shopify/polaris-react/src/components/ResourceItem/README.md
• on line 158 add external (in resourceList props)
• Run playground
• click on ResourceList example
• url should now open in a new tab

🎩 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

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

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified	3
Files potentially affected	1

Details

All files potentially affected (total: 1)

• /src/components/ResourceList/ResourceList.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/ResourceItem/ResourceItem.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/ResourceList/ResourceList.tsx

🧩 src/components/ResourceItem/tests/ResourceItem.test.tsx (total: 0)

Files potentially affected (total: 0)

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[djirdehh]

Looking good, thank you @stephbaker. Minor comments.

[LauraAubin]

🎩and code LGTM. One thing I noticed is that it might be weird if the resource item goes to a new tab, but the shortcut action button does not. The shortcut actions can take their own external prop since the button is just generated from the properties provided. This might be something to look out for.

polaris-react/src/types.ts

Lines 66 to 79 in c6f5b8f

	export interface BaseAction {
	/** A unique identifier for the action */
	id?: string;
	/** Content the action displays */
	content?: string;
	/** Visually hidden text for screen readers */
	accessibilityLabel?: string;
	/** A destination to link to, rendered in the action */
	url?: string;
	/** Forces url to open in a new tab */
	external?: boolean;
	/** Callback when an action takes place */
	onAction?(): void;
	}

[djirdehh]

🚀

[ghost]

🎉 Thanks for your contribution to Polaris React!