diff --git a/UNRELEASED.md b/UNRELEASED.md
index 14c0d8f2c93..64753e3a604 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -14,6 +14,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
### Documentation
+- Added all props example of `ResourceList` in the [style guide](https://polaris.shopify.com) ([#978](https://github.com/Shopify/polaris-react/pull/978))
+
### Development workflow
### Dependency upgrades
diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 0deccb2ffc2..feda15e799b 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -615,6 +615,153 @@ Use persistent shortcut actions in rare cases when the action cannot be made ava
```
+### Resource list with all of its elements
+
+Use as a broad example that includes most props available to resource list.
+
+```jsx
+class ResourceListExample extends React.Component {
+ state = {
+ selectedItems: [],
+ sortValue: 'DATE_MODIFIED_DESC',
+ searchValue: '',
+ appliedFilters: [
+ {
+ key: 'accountStatusFilter',
+ value: 'Account enabled',
+ },
+ ],
+ };
+ handleSearchChange = (searchValue) => {
+ this.setState({searchValue});
+ };
+ handleFiltersChange = (appliedFilters) => {
+ this.setState({appliedFilters});
+ };
+ handleSortChange = (sortValue) => {
+ this.setState({sortValue});
+ };
+ handleSelectionChange = (selectedItems) => {
+ this.setState({selectedItems});
+ };
+ renderItem = (item) => {
+ const {id, url, name, location, latestOrderUrl} = item;
+ const media = ;
+ const shortcutActions = latestOrderUrl
+ ? [{content: 'View latest order', url: latestOrderUrl}]
+ : null;
+ return (
+
+
+ {name}
+
+ {location}
+
+ );
+ };
+ render() {
+ const resourceName = {
+ singular: 'customer',
+ plural: 'customers',
+ };
+ const items = [
+ {
+ id: 341,
+ url: 'customers/341',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ latestOrderUrl: 'orders/1456',
+ },
+ {
+ id: 256,
+ url: 'customers/256',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ latestOrderUrl: 'orders/1457',
+ },
+ ];
+ const promotedBulkActions = [
+ {
+ content: 'Edit customers',
+ onAction: () => console.log('Todo: implement bulk edit'),
+ },
+ ];
+ const bulkActions = [
+ {
+ content: 'Add tags',
+ onAction: () => console.log('Todo: implement bulk add tags'),
+ },
+ {
+ content: 'Remove tags',
+ onAction: () => console.log('Todo: implement bulk remove tags'),
+ },
+ {
+ content: 'Delete customers',
+ onAction: () => console.log('Todo: implement bulk delete'),
+ },
+ ];
+ const filters = [
+ {
+ key: 'orderCountFilter',
+ label: 'Number of orders',
+ operatorText: 'is greater than',
+ type: FilterType.TextField,
+ },
+ {
+ key: 'accountStatusFilter',
+ label: 'Account status',
+ operatorText: 'is',
+ type: FilterType.Select,
+ options: ['Enabled', 'Invited', 'Not invited', 'Declined'],
+ },
+ ];
+ const filterControl = (
+ console.log('New filter saved'),
+ }}
+ />
+ );
+ return (
+
+ {
+ this.setState({sortValue: selected});
+ console.log(`Sort option changed to ${selected}.`);
+ }}
+ filterControl={filterControl}
+ />
+
+ );
+ }
+}
+```
+
---
## Build