From 6f883d156c705d74af4ad12fd651c39dcb3df372 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 7 Feb 2024 14:41:56 -0500 Subject: [PATCH 1/6] [IndexTable][ResourceList] Set SelectAllActions sticky bottom offset based on closest scrollable ancestor --- .../IndexTable/IndexTable.stories.tsx | 125 ++++++++++++++++++ .../src/components/IndexTable/IndexTable.tsx | 4 + .../IndexTable/tests/IndexTable.test.tsx | 2 + .../components/ResourceList/ResourceList.tsx | 4 + .../ResourceList/tests/ResourceList.test.tsx | 2 + .../use-is-select-all-actions-sticky.test.tsx | 28 +++- .../hooks/use-is-select-all-actions-sticky.ts | 57 +++++++- 7 files changed, 215 insertions(+), 7 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 7c49341a7c3..d0660c6241b 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -6,6 +6,10 @@ import type { IndexTableRowProps, } from '@shopify/polaris'; import { + Frame, + Button, + Modal, + Scrollable, useBreakpoints, InlineStack, LegacyCard, @@ -6776,3 +6780,124 @@ export function WithLongDataSetSelectable() { ); } + +export function WithinAModal() { + const [active, setActive] = useState(true); + const [checked, setChecked] = useState(false); + + const toggleActive = useCallback(() => setActive((active) => !active), []); + + const handleCheckbox = useCallback((value) => setChecked(value), []); + + const activator = ; + + const orders = Array.from(Array(100).keys()).map((i) => ({ + id: `${i}`, + order: i, + date: 'Jul 20 at 4:34pm', + customer: 'Jaydon Stanton', + total: `$969.44${i}`, + paymentStatus: Paid, + fulfillmentStatus: Unfulfilled, + })); + + const resourceName = { + singular: 'order', + plural: 'orders', + }; + + const {selectedResources, allResourcesSelected, handleSelectionChange} = + useIndexResourceState(orders); + + const rowMarkup = orders.map( + ( + {id, order, date, customer, total, paymentStatus, fulfillmentStatus}, + index, + ) => ( + + + + {order} + + + {date} + {customer} + {total} + {paymentStatus} + {fulfillmentStatus} + + ), + ); + + 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 table = ( + + {rowMarkup} + + ); + + return ( + +
+ + + {table} + + {/* {table} */} + +
+ + ); +} diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 7a318508c21..4b36c9e17fc 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -225,6 +225,7 @@ function IndexTableBase({ selectAllActionsAbsoluteOffset, selectAllActionsMaxWidth, selectAllActionsOffsetLeft, + selectAllActionsOffsetBottom, computeTableDimensions, isScrolledPastTop, selectAllActionsPastTopOffset, @@ -657,6 +658,9 @@ function IndexTableBase({
', () => { selectAllActionsAbsoluteOffset: 0, selectAllActionsMaxWidth: 0, selectAllActionsOffsetLeft: 0, + selectAllActionsOffsetBottom: 0, computeTableDimensions: jest.fn(), isScrolledPastTop: false, scrollbarPastTopOffset: 0, @@ -790,6 +791,7 @@ describe('', () => { selectAllActionsAbsoluteOffset: 0, selectAllActionsMaxWidth: 0, selectAllActionsOffsetLeft: 0, + selectAllActionsOffsetBottom: 0, computeTableDimensions, isScrolledPastTop: false, scrollbarPastTopOffset: 0, diff --git a/polaris-react/src/components/ResourceList/ResourceList.tsx b/polaris-react/src/components/ResourceList/ResourceList.tsx index e32b1c9f8bd..c9019a97f3b 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.tsx +++ b/polaris-react/src/components/ResourceList/ResourceList.tsx @@ -179,6 +179,7 @@ export function ResourceList({ selectAllActionsAbsoluteOffset, selectAllActionsMaxWidth, selectAllActionsOffsetLeft, + selectAllActionsOffsetBottom, computeTableDimensions, isScrolledPastTop, selectAllActionsPastTopOffset, @@ -582,6 +583,9 @@ export function ResourceList({ ? undefined : selectAllActionsAbsoluteOffset, width: selectAllActionsMaxWidth, + bottom: isSelectAllActionsSticky + ? selectAllActionsOffsetBottom + : undefined, left: isSelectAllActionsSticky ? selectAllActionsOffsetLeft : undefined, }} > diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx index ad4148b3d84..14ace66394e 100644 --- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx +++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx @@ -79,6 +79,7 @@ describe('', () => { selectAllActionsAbsoluteOffset: 0, selectAllActionsMaxWidth: 0, selectAllActionsOffsetLeft: 0, + selectAllActionsOffsetBottom: 0, computeTableDimensions: jest.fn(), scrollbarPastTopOffset: 0, selectAllActionsPastTopOffset: 0, @@ -1339,6 +1340,7 @@ describe('', () => { selectAllActionsAbsoluteOffset: 0, selectAllActionsMaxWidth: 0, selectAllActionsOffsetLeft: 0, + selectAllActionsOffsetBottom: 0, computeTableDimensions, scrollbarPastTopOffset: 0, selectAllActionsPastTopOffset: 0, diff --git a/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx b/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx index f37ba9085b5..00f84828ea3 100644 --- a/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx +++ b/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {intersectionObserver} from '@shopify/jest-dom-mocks'; import {mountWithApp} from 'tests/utilities'; +import {Scrollable} from '../../../Scrollable'; import {useIsSelectAllActionsSticky} from '../use-is-select-all-actions-sticky'; import type {UseIsSelectAllActionsStickyProps} from '../use-is-select-all-actions-sticky'; @@ -17,6 +18,7 @@ function Component({ selectAllActionsAbsoluteOffset, selectAllActionsMaxWidth, selectAllActionsOffsetLeft, + selectAllActionsOffsetBottom, } = useIsSelectAllActionsSticky({selectMode, hasPagination, tableType}); return ( @@ -25,6 +27,7 @@ function Component({ {selectAllActionsAbsoluteOffset} {selectAllActionsMaxWidth} {selectAllActionsOffsetLeft} + {selectAllActionsOffsetBottom}
@@ -43,6 +46,7 @@ describe('useIsSelectAllActionsSticky', () => { width: 600, height: 400, left: 20, + y: 18, }); intersectionObserver.mock(); @@ -83,10 +87,26 @@ describe('useIsSelectAllActionsSticky', () => { const result = component.findAll('span')[2]?.text(); expect(result).toBe('20'); }); + + it('returns the bottom value correctly', () => { + const component = mountWithApp(); + const result = component.findAll('span')[3]?.text(); + expect(result).toBe('0'); + }); + + it('returns the bottom value correctly when in a scroll container', () => { + const component = mountWithApp( + + + , + ); + const result = component.findAll('span')[3]?.text(); + expect(result).toBe('26'); + }); }); describe('when isIntersecting', () => { - it('sets the useIsSelectAllActionsSticky value to false', () => { + it('sets the isSelectAllActionsSticky value to false', () => { const component = mountWithApp(); const intersector = component.find('i'); @@ -104,7 +124,7 @@ describe('useIsSelectAllActionsSticky', () => { }); describe('when not isIntersecting', () => { - it('sets the useIsSelectAllActionsSticky value to true', () => { + it('sets the isSelectAllActionsSticky value to true', () => { const component = mountWithApp(); const intersector = component.find('i'); @@ -125,10 +145,12 @@ describe('useIsSelectAllActionsSticky', () => { width, height, left, + y, }: { width: number; height: number; left: number; + y: number; }) { getBoundingClientRectSpy.mockImplementation(() => { return { @@ -139,7 +161,7 @@ describe('useIsSelectAllActionsSticky', () => { bottom: 0, right: 0, x: 0, - y: 0, + y, toJSON() {}, }; }); diff --git a/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts b/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts index 79ac82e48a0..77dac719f05 100644 --- a/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts +++ b/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts @@ -6,7 +6,8 @@ const DEBOUNCE_PERIOD = 250; const SELECT_ALL_ACTIONS_HEIGHT = 41; const PAGINATION_WIDTH_OFFSET = 64; -const SCROLL_BAR_HEIGHT = 13; +const SCROLL_BAR_CONTAINER_HEIGHT = 13; +const SCROLL_BAR_HEIGHT = 8; const INDEX_TABLE_INITIAL_OFFSET = 32; const RESOURCE_LIST_INITIAL_OFFSET = 48; @@ -18,11 +19,32 @@ export interface UseIsSelectAllActionsStickyProps { tableType: TableType; } +export interface SelectAllActionsStickyCalculations { + selectAllActionsIntersectionRef: React.RefObject; + tableMeasurerRef: React.RefObject; + isSelectAllActionsSticky: boolean; + selectAllActionsAbsoluteOffset: number; + selectAllActionsMaxWidth: number; + selectAllActionsOffsetLeft: number; + selectAllActionsOffsetBottom: number; + computeTableDimensions(): + | { + maxWidth: number; + offsetHeight: number; + offsetLeft: number; + offsetBottom: number; + } + | undefined; + isScrolledPastTop: boolean; + selectAllActionsPastTopOffset: number; + scrollbarPastTopOffset: number; +} + export function useIsSelectAllActionsSticky({ selectMode, hasPagination, tableType, -}: UseIsSelectAllActionsStickyProps) { +}: UseIsSelectAllActionsStickyProps): SelectAllActionsStickyCalculations { const hasIOSupport = typeof window !== 'undefined' && Boolean(window.IntersectionObserver); const [isSelectAllActionsSticky, setIsSticky] = useState(false); @@ -32,6 +54,9 @@ export function useIsSelectAllActionsSticky({ const [selectAllActionsMaxWidth, setSelectAllActionsMaxWidth] = useState(0); const [selectAllActionsOffsetLeft, setSelectAllActionsOffsetLeft] = useState(0); + const [selectAllActionsOffsetBottom, setSelectAllActionsOffsetBottom] = + useState(0); + const selectAllActionsIntersectionRef = useRef(null); const tableMeasurerRef = useRef(null); @@ -39,7 +64,7 @@ export function useIsSelectAllActionsSticky({ const initialPostOffset = tableType === 'index-table' - ? INDEX_TABLE_INITIAL_OFFSET + SCROLL_BAR_HEIGHT + ? INDEX_TABLE_INITIAL_OFFSET + SCROLL_BAR_CONTAINER_HEIGHT : RESOURCE_LIST_INITIAL_OFFSET; const postScrollOffset = initialPostOffset + SELECT_ALL_ACTIONS_HEIGHT; @@ -86,6 +111,20 @@ export function useIsSelectAllActionsSticky({ : null, ); + const getClosestScrollContainer = (node: HTMLElement) => { + let container: HTMLElement | null = node; + + while (container && container !== document.body) { + const style = window.getComputedStyle(container); + if (style.overflow === 'scroll' || style.overflow === 'auto') { + return container; + } + container = container.parentElement; + } + + return null; + }; + const computeTableDimensions = useCallback(() => { const node = tableMeasurerRef.current; if (!node) { @@ -93,17 +132,26 @@ export function useIsSelectAllActionsSticky({ maxWidth: 0, offsetHeight: 0, offsetLeft: 0, + offsetBottom: 0, }; } + + const scrollContainer = getClosestScrollContainer(node); const box = node.getBoundingClientRect(); const paddingHeight = selectMode ? SELECT_ALL_ACTIONS_HEIGHT : 0; const offsetHeight = box.height - paddingHeight; const maxWidth = box.width - widthOffset; const offsetLeft = box.left; + const offsetBottomScrollable = scrollContainer + ? Math.round( + scrollContainer?.getBoundingClientRect().y + SCROLL_BAR_HEIGHT, + ) + : 0; setSelectAllActionsAbsoluteOffset(offsetHeight); setSelectAllActionsMaxWidth(maxWidth); setSelectAllActionsOffsetLeft(offsetLeft); + setSelectAllActionsOffsetBottom(offsetBottomScrollable); }, [selectMode, widthOffset]); const computeDimensionsPastScroll = useCallback(() => { @@ -162,9 +210,10 @@ export function useIsSelectAllActionsSticky({ selectAllActionsAbsoluteOffset, selectAllActionsMaxWidth, selectAllActionsOffsetLeft, + selectAllActionsOffsetBottom, computeTableDimensions, isScrolledPastTop, selectAllActionsPastTopOffset: initialPostOffset, - scrollbarPastTopOffset: initialPostOffset - SCROLL_BAR_HEIGHT, + scrollbarPastTopOffset: initialPostOffset - SCROLL_BAR_CONTAINER_HEIGHT, }; } From 6549a1bbef06ed78fa37db4a9f2dd57e7d891d76 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 7 Feb 2024 20:14:51 -0500 Subject: [PATCH 2/6] change log --- .changeset/smart-badgers-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smart-badgers-yawn.md diff --git a/.changeset/smart-badgers-yawn.md b/.changeset/smart-badgers-yawn.md new file mode 100644 index 00000000000..3ce3cc7b3bd --- /dev/null +++ b/.changeset/smart-badgers-yawn.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed the position of SelectAllActions when inside of an offset scrollable container From 8e166a788c27cf08d4e4a7952d5bf2664d57a8ca Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 7 Feb 2024 20:33:29 -0500 Subject: [PATCH 3/6] Add ResourceList WithinAModal story --- .../IndexTable/IndexTable.stories.tsx | 43 ++++--- .../ResourceList/ResourceList.stories.tsx | 110 +++++++++++++++++- 2 files changed, 129 insertions(+), 24 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index d0660c6241b..a7e56a23f4c 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -6874,30 +6874,27 @@ export function WithinAModal() { return ( -
- - - {table} - - {/* {table} */} - -
+ }, + ]} + > + + {table} + + ); } diff --git a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx index fd48cb2a1bc..e96df592682 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx +++ b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx @@ -15,6 +15,9 @@ import { BlockStack, Box, InlineStack, + Frame, + Modal, + Scrollable, } from '@shopify/polaris'; export default { @@ -1310,7 +1313,7 @@ export function WithPagination() { } export function WithBulkActionsAndPagination() { - const [selectedItems, setSelectedItems] = useState([]); + const [selectedItems, setSelectedItems] = useState([]); const resourceName = { singular: 'customer', @@ -1386,3 +1389,108 @@ export function WithBulkActionsAndPagination() { ); } + +export function WithinAModal() { + const [active, setActive] = useState(true); + const [checked, setChecked] = useState(false); + const [selectedItems, setSelectedItems] = useState([]); + + const toggleActive = () => setActive((active) => !active); + + const activator = ; + + const resourceName = { + singular: 'customer', + plural: 'customers', + }; + + const items = Array.from({length: 50}, (_, num) => { + return { + id: `${num}`, + url: '#', + name: `Mae Jemison ${num}`, + location: 'Decatur, USA', + orders: 20, + amountSpent: '$24,00', + }; + }); + + 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 listMarkup = ( + { + const {id, url, name, location} = item; + const media = ; + + return ( + +

+ + {name} + +

+
{location}
+ + ); + }} + /> + ); + + return ( + + + + {listMarkup} + + + + ); +} From dcd813fbf630a1ff9eb9b48801749720d991c215 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 7 Feb 2024 20:44:25 -0500 Subject: [PATCH 4/6] revert removal of height restricting div (for snapshot) --- .../IndexTable/IndexTable.stories.tsx | 42 ++++++++++--------- .../ResourceList/ResourceList.stories.tsx | 42 ++++++++++--------- 2 files changed, 44 insertions(+), 40 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index a7e56a23f4c..8b6b9aa8b2c 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -6874,27 +6874,29 @@ export function WithinAModal() { return ( - + - - {table} - - + }} + secondaryActions={[ + { + content: 'Cancel', + onAction: toggleActive, + }, + ]} + > + + {table} + + + ); } diff --git a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx index e96df592682..cb9d2e8a188 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx +++ b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx @@ -1470,27 +1470,29 @@ export function WithinAModal() { return ( - + - - {listMarkup} - - + }} + secondaryActions={[ + { + content: 'Cancel', + onAction: toggleActive, + }, + ]} + > + + {listMarkup} + + + ); } From 971ea0d2f1a2f4aae4417b1703130e4912525d40 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 7 Feb 2024 21:27:08 -0500 Subject: [PATCH 5/6] Add mock of getComputedStyle --- .../use-is-select-all-actions-sticky.test.tsx | 40 ++++++++++++++++++- .../hooks/use-is-select-all-actions-sticky.ts | 19 +++++---- 2 files changed, 50 insertions(+), 9 deletions(-) diff --git a/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx b/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx index 00f84828ea3..9705a5fbd1f 100644 --- a/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx +++ b/polaris-react/src/components/SelectAllActions/hooks/tests/use-is-select-all-actions-sticky.test.tsx @@ -36,12 +36,16 @@ function Component({ describe('useIsSelectAllActionsSticky', () => { let getBoundingClientRectSpy: jest.SpyInstance; + let getComputedStyleSpy: jest.SpyInstance; beforeEach(() => { + getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle'); + getBoundingClientRectSpy = jest.spyOn( Element.prototype, 'getBoundingClientRect', ); + setGetBoundingClientRect({ width: 600, height: 400, @@ -53,6 +57,7 @@ describe('useIsSelectAllActionsSticky', () => { }); afterEach(() => { + getComputedStyleSpy.mockRestore(); getBoundingClientRectSpy.mockRestore(); intersectionObserver.restore(); }); @@ -88,15 +93,27 @@ describe('useIsSelectAllActionsSticky', () => { expect(result).toBe('20'); }); - it('returns the bottom value correctly', () => { + it('returns the bottom value correctly when not in a scroll container', () => { + setGetComputedStyle({ + overflow: 'visible', + overflowX: 'visible', + overflowY: 'visible', + }); + const component = mountWithApp(); const result = component.findAll('span')[3]?.text(); expect(result).toBe('0'); }); it('returns the bottom value correctly when in a scroll container', () => { + setGetComputedStyle({ + overflow: 'auto', + overflowX: 'auto', + overflowY: 'auto', + }); + const component = mountWithApp( - + , ); @@ -141,6 +158,25 @@ describe('useIsSelectAllActionsSticky', () => { }); }); + function setGetComputedStyle({ + overflow, + overflowX, + overflowY, + }: { + overflow: string; + overflowX: string; + overflowY: string; + }) { + getComputedStyleSpy.mockImplementation(() => { + return { + overflow, + overflowX, + overflowY, + toJSON() {}, + }; + }); + } + function setGetBoundingClientRect({ width, height, diff --git a/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts b/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts index 77dac719f05..9b2cae81b0c 100644 --- a/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts +++ b/polaris-react/src/components/SelectAllActions/hooks/use-is-select-all-actions-sticky.ts @@ -116,9 +116,15 @@ export function useIsSelectAllActionsSticky({ while (container && container !== document.body) { const style = window.getComputedStyle(container); - if (style.overflow === 'scroll' || style.overflow === 'auto') { - return container; - } + const isScrollContainer = + style.overflow === 'auto' || + style.overflowX === 'auto' || + style.overflowY === 'auto' || + style.overflow === 'scroll' || + style.overflowX === 'scroll' || + style.overflowY === 'scroll'; + + if (isScrollContainer) return container; container = container.parentElement; } @@ -136,16 +142,15 @@ export function useIsSelectAllActionsSticky({ }; } - const scrollContainer = getClosestScrollContainer(node); + const scrollContainer = + getClosestScrollContainer(node)?.getBoundingClientRect(); const box = node.getBoundingClientRect(); const paddingHeight = selectMode ? SELECT_ALL_ACTIONS_HEIGHT : 0; const offsetHeight = box.height - paddingHeight; const maxWidth = box.width - widthOffset; const offsetLeft = box.left; const offsetBottomScrollable = scrollContainer - ? Math.round( - scrollContainer?.getBoundingClientRect().y + SCROLL_BAR_HEIGHT, - ) + ? Math.round(scrollContainer.y + SCROLL_BAR_HEIGHT) : 0; setSelectAllActionsAbsoluteOffset(offsetHeight); From 657ab9ea8af308b178b8323c0478f36cfba950c3 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 7 Feb 2024 21:29:09 -0500 Subject: [PATCH 6/6] typo --- .changeset/smart-badgers-yawn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/smart-badgers-yawn.md b/.changeset/smart-badgers-yawn.md index 3ce3cc7b3bd..20f343e39bb 100644 --- a/.changeset/smart-badgers-yawn.md +++ b/.changeset/smart-badgers-yawn.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Fixed the position of SelectAllActions when inside of an offset scrollable container +Fixed the position of `SelectAllActions` when inside of an offset scrollable container