diff --git a/.changeset/hip-cameras-greet.md b/.changeset/hip-cameras-greet.md new file mode 100644 index 00000000000..c5f4f0f595c --- /dev/null +++ b/.changeset/hip-cameras-greet.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +[ResourceList] Remove layout jank when bulk actions enabled and item selected diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss index 8dbc7155047..e1279697129 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.scss +++ b/polaris-react/src/components/ResourceList/ResourceList.scss @@ -48,7 +48,12 @@ $item-wrapper-loading-height: 64px; border-top-left-radius: var(--p-border-radius-2); border-top-right-radius: var(--p-border-radius-2); - + .ResourceList { + // stylelint-disable-next-line selector-max-class, selector-max-combinators -- Ssshhhhh + + .ResourceList, + // Bulk actions get injected into the DOM between the wrapper and resource + // list dynamically when an item is checked, so we have to handle that case + // here. + + .BulkActionsWrapper + .ResourceList { border-top: var(--p-border-width-1) solid var(--p-color-border-subdued); #{$se23} & {