diff --git a/UNRELEASED.md b/UNRELEASED.md index 046ab72a948..8714b094dac 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -8,8 +8,9 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Moved icons to a separate npm package ([#686](https://github.com/Shopify/polaris-react/pull/686)) - Added `oneHalf` and `oneThird` props to `Layout` component ([#724](https://github.com/Shopify/polaris-react/pull/724)) -- Added `helpText` prop to ActionList items ([#777](https://github.com/Shopify/polaris-react/pull/777)) +- Added `helpText` prop to `ActionList` items ([#777](https://github.com/Shopify/polaris-react/pull/777)) - Updated `Page` header layout so actions take up less room on small screens ([#707](https://github.com/Shopify/polaris-react/pull/707)) +- Added `alternateTool` prop to `ResourceList` component ([#812](https://github.com/Shopify/polaris-react/pull/812)) ### Bug fixes diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md index 8fe04b7d7fe..7442a5fdeba 100644 --- a/src/components/ResourceList/README.md +++ b/src/components/ResourceList/README.md @@ -351,6 +351,66 @@ class ResourceListExample extends React.Component { } ``` +### Resource list with alternate tool + +Allows merchants to add an alternate tool in the current sort option location when sort may not be the most relevant action for the current list. + +```jsx +class ResourceListExample extends React.Component { + renderItem = (item) => { + const {id, url, name, location} = item; + const media = ; + + return ( + +

+ {name} +

+
{location}
+
+ ); + }; + + render() { + const resourceName = { + singular: 'Customer', + plural: 'Customers', + }; + + const items = [ + { + id: 341, + url: 'customers/341', + name: 'Mae Jemison', + location: 'Decatur, USA', + }, + { + id: 256, + url: 'customers/256', + name: 'Ellen Ochoa', + location: 'Los Angeles, USA', + }, + ]; + + return ( + + Email customers} + /> + + ); + } +} +``` + ### Resource list with filtering Allows merchants to narrow the resource list to a subset of the original items. See the [filter control subcomponent](#subcomponent-filter-control) and the [filtering section of the case study](#study-filtering) for implementation details. diff --git a/src/components/ResourceList/ResourceList.scss b/src/components/ResourceList/ResourceList.scss index 359f746d92f..c42a1c64b9e 100644 --- a/src/components/ResourceList/ResourceList.scss +++ b/src/components/ResourceList/ResourceList.scss @@ -92,7 +92,8 @@ $item-wrapper-loading-height: rem(64px); } } -.SortWrapper { +.SortWrapper, +.AlternateToolWrapper { position: relative; display: flex; flex: 1; @@ -109,6 +110,7 @@ $item-wrapper-loading-height: rem(64px); margin-left: spacing(); // stylelint-disable-next-line selector-max-class + .HeaderWrapper-hasAlternateTool.HeaderWrapper-hasSelect &, .HeaderWrapper-hasSort.HeaderWrapper-hasSelect & { padding-right: 0; } @@ -131,6 +133,7 @@ $item-wrapper-loading-height: rem(64px); padding-left: spacing(extra-tight); align-self: center; + .HeaderWrapper-hasAlternateTool &, .HeaderWrapper-hasSort & { display: none; } @@ -138,10 +141,11 @@ $item-wrapper-loading-height: rem(64px); @include breakpoint-after(resource-list(breakpoint-small)) { // stylelint-disable-next-line selector-max-class .HeaderWrapper-hasSelect &, + .HeaderWrapper-hasAlternateTool.HeaderWrapper-hasSelect &, .HeaderWrapper-hasSort.HeaderWrapper-hasSelect & { display: none; } - + .HeaderWrapper-hasAlternateTool &, .HeaderWrapper-hasSort & { display: block; } diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx index 800cde3028b..48e9743523f 100644 --- a/src/components/ResourceList/ResourceList.tsx +++ b/src/components/ResourceList/ResourceList.tsx @@ -61,6 +61,8 @@ export interface Props { sortValue?: string; /** Collection of sort options to choose from */ sortOptions?: Option[]; + /** ReactNode to display instead of the sort control */ + alternateTool?: React.ReactNode; /** Callback when sort option is changed */ onSortChange?(selected: string, id: string): void; /** Callback when selection is changed */ @@ -342,6 +344,7 @@ export class ResourceList extends React.Component { showHeader = false, sortOptions, sortValue, + alternateTool, onSortChange, polaris: {intl}, } = this.props; @@ -379,7 +382,7 @@ export class ResourceList extends React.Component { ); const sortingSelectMarkup = - sortOptions && sortOptions.length > 0 ? ( + sortOptions && sortOptions.length > 0 && !alternateTool ? (
{sortingLabelMarkup}