diff --git a/UNRELEASED.md b/UNRELEASED.md index ad0869453df..46ca8d6647f 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -13,6 +13,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Fixed `Action`s selector in `Page`'s `Header` component ([#2487](https://github.com/Shopify/polaris-react/pull/2487)) - Fixed `Card` spacing in small devices ([#608](https://github.com/shopify/polaris-react/pull/608)) +- Fixed `ResourceList` `BulkActions` that were remaining in fixed position outside the `boundingElement` ([#627](https://github.com/Shopify/polaris-react/pull/627)) - Improved readability of `Badge` with `size` small and `status` new for navigation ([#633](https://github.com/shopify/polaris-react/pull/633)) ### Documentation diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx index 11c3167040d..aff089ba133 100644 --- a/src/components/ResourceList/ResourceList.tsx +++ b/src/components/ResourceList/ResourceList.tsx @@ -441,38 +441,39 @@ export class ResourceList extends React.Component {
) : null; - const headerMarkup = (showHeader || needsHeader) && ( -
- - {(isSticky: boolean) => { - const headerClassName = classNames( - styles.HeaderWrapper, - sortOptions && - sortOptions.length > 0 && - styles['HeaderWrapper-hasSort'], - this.selectable && styles['HeaderWrapper-hasSelect'], - loading && styles['HeaderWrapper-disabled'], - this.selectable && - selectMode && - styles['HeaderWrapper-inSelectMode'], - isSticky && styles['HeaderWrapper-isSticky'], - ); - return ( -
- {headerWrapperOverlay} -
- {headerTitleMarkup} - {checkableButtonMarkup} - {sortingSelectMarkup} - {selectButtonMarkup} + const headerMarkup = (showHeader || needsHeader) && + listNode && ( +
+ + {(isSticky: boolean) => { + const headerClassName = classNames( + styles.HeaderWrapper, + sortOptions && + sortOptions.length > 0 && + styles['HeaderWrapper-hasSort'], + this.selectable && styles['HeaderWrapper-hasSelect'], + loading && styles['HeaderWrapper-disabled'], + this.selectable && + selectMode && + styles['HeaderWrapper-inSelectMode'], + isSticky && styles['HeaderWrapper-isSticky'], + ); + return ( +
+ {headerWrapperOverlay} +
+ {headerTitleMarkup} + {checkableButtonMarkup} + {sortingSelectMarkup} + {selectButtonMarkup} +
+ {bulkActionsMarkup}
- {bulkActionsMarkup} -
- ); - }} - -
- ); + ); + }} + +
+ ); const emptyStateMarkup = filterControl && !itemsExist && !loading ? (