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