diff --git a/.changeset/yellow-windows-accept.md b/.changeset/yellow-windows-accept.md deleted file mode 100644 index 5390f04ebd0..00000000000 --- a/.changeset/yellow-windows-accept.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@primer/react": major ---- - -Removes PageLayout.Pane position prop. The layout is now decided by the order in which PageLayout.Pane and PageLayout.Content appear in the DOM. - - diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png index 34dd4ea43e1..bb85294eb08 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png index 9d1cc7aac4a..1f8a8ba8573 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png index 392654efdc2..0dd41bd0261 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png index f28ab150830..81bff546325 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png index 1f4333a902c..0aaba0effb4 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png index e39a3d0975f..31541b70283 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png index 88efe52928e..7c739735eb3 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png index be427ac2a61..6ea202b82cf 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png differ diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png index 5794c790025..af9b4208bb3 100644 Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png index c573736482e..5207b32b079 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png index af97f7bc9cd..668a6cc90ba 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png index e3184efba19..32364b59bb3 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png index a887b15dc89..4427de4169b 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png index c573736482e..5207b32b079 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png index 8845f33bfac..4adc2354afb 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png index 756d6896ea3..eb3a4b80d7f 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png index 226d259dbc6..21e890a560a 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png index 8845f33bfac..4adc2354afb 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png index aca9f5d3bfd..9c354e5c96a 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png index d6764c54ef8..cae14c595d0 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png index 93e291c3a09..4e3280c9fc9 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png index 2d1da2d2695..d669e2bec0f 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png index d01399f1a5e..1ab6c128162 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png index 607b13d1d8c..01c69bda291 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png index 08378e2ccef..4eca5fb6d58 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png index f65ff058f81..1c3155c0a12 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png index a1658d954d1..76274d6df00 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png index 02e37f2e574..e32bca6a587 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png index 758b153be92..8700158a2e7 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png index 7ecf00484fb..36cc6a8692a 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png index 8e05f772f07..9b52a6555cf 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png index 02e37f2e574..e32bca6a587 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png index 40b0a4fa278..c2725cbd0be 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png index 9fe38323bcd..c5585014a8b 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png index 9023125f7c0..21e00e98a3f 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png index 40b0a4fa278..c2725cbd0be 100644 Binary files a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png differ diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx index ac38d55b73f..3a7f51e8c51 100644 --- a/src/NavList/NavList.stories.tsx +++ b/src/NavList/NavList.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { export const Simple: Story = () => ( - + Item 1 @@ -28,7 +28,7 @@ export const Simple: Story = () => ( export const WithSubItems: Story = () => ( - + Item 1 @@ -49,7 +49,7 @@ export const WithSubItems: Story = () => ( export const WithNestedSubItems: Story = () => ( - + Item 1 @@ -104,7 +104,7 @@ const ReactRouterLikeLink = React.forwardRef ( - + Item 1 @@ -136,7 +136,7 @@ const NextJSLikeLink = React.forwardRef( export const WithNextJSLink = () => ( - + Item 1 @@ -164,7 +164,7 @@ export const WithReloads: Story = () => { return ( <> - + Item 1 diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx index 70bc71152bb..9f2ceebed5f 100644 --- a/src/PageLayout/PageLayout.features.stories.tsx +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -83,42 +83,49 @@ export const StickyPane: Story = args => ( - + - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { + const testId = `content${i}` return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. ) })} - - + + - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { - const testId = `content${i}` + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + massa purus. ) })} - + @@ -151,32 +158,32 @@ export const NestedScrollContainer: Story = args => ( - + - {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( + {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. ))} - - + + - {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( + {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + massa purus. ))} - + @@ -221,23 +228,6 @@ export const CustomStickyHeader: Story = args => ( Custom sticky header - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius - tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec - sit amet massa purus. - - - ) - })} - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { @@ -258,6 +248,30 @@ export const CustomStickyHeader: Story = args => ( })} + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius + tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec + sit amet massa purus. + + + ) + })} + + @@ -292,7 +306,7 @@ export const ResizablePane: Story = () => ( - + @@ -309,7 +323,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => ( - + diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index cd4d4f98b42..2ec2aaa0f56 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -34,6 +34,9 @@ const meta: Meta = { 'Content.hidden.regular': false, 'Content.hidden.narrow': false, 'Content.hidden.wide': false, + 'Pane.position.regular': 'end', + 'Pane.position.narrow': 'end', + 'Pane.position.wide': 'end', 'Pane.width': 'medium', 'Pane.sticky': false, 'Pane.resizable': false, @@ -203,6 +206,30 @@ const meta: Meta = { }, // Pane prop controls + 'Pane.position.regular': { + type: { + name: 'enum', + value: ['start', 'end'], + }, + control: {type: 'radio'}, + table: {category: 'Pane props'}, + }, + 'Pane.position.narrow': { + type: { + name: 'enum', + value: ['start', 'end'], + }, + control: {type: 'radio'}, + table: {category: 'Pane props'}, + }, + 'Pane.position.wide': { + type: { + name: 'enum', + value: ['start', 'end'], + }, + control: {type: 'radio'}, + table: {category: 'Pane props'}, + }, 'Pane.width': { type: { name: 'enum', @@ -342,8 +369,24 @@ const Template: Story = args => ( ) : null} + {args['Render pane?'] ? ( ( ) : null} - {args['Render footer?'] ? ( { Header - + Content + Pane - Content Footer , @@ -70,7 +70,7 @@ describe('PageLayout', () => { Header Content - Pane + Pane Footer , diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index e6de1a73259..8b5ce1a1f27 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -493,6 +493,22 @@ const isPaneWidth = (width: PaneWidth | CustomWidthOptions): width is PaneWidth } export type PageLayoutPaneProps = { + position?: keyof typeof panePositions | ResponsiveValue + /** + * @deprecated Use the `position` prop with a responsive value instead. + * + * Before: + * ``` + * position="start" + * positionWhenNarrow="end" + * ``` + * + * After: + * ``` + * position={{regular: 'start', narrow: 'end'}} + * ``` + */ + positionWhenNarrow?: 'inherit' | keyof typeof panePositions 'aria-labelledby'?: string 'aria-label'?: string width?: PaneWidth | CustomWidthOptions @@ -522,6 +538,11 @@ export type PageLayoutPaneProps = { id?: string } & SxProp +const panePositions = { + start: REGION_ORDER.paneStart, + end: REGION_ORDER.paneEnd, +} + const paneWidths = { small: ['100%', null, '240px', '256px'], medium: ['100%', null, '256px', '296px'], @@ -535,6 +556,8 @@ const Pane = React.forwardRef { + // Combine position and positionWhenNarrow for backwards compatibility + const positionProp = + !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit' + ? {regular: responsivePosition, narrow: positionWhenNarrow} + : responsivePosition + + const position = useResponsiveValue(positionProp, 'end') + // Combine divider and dividerWhenNarrow for backwards compatibility const dividerProp = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== 'inherit' @@ -682,11 +713,12 @@ const Pane = React.forwardRef {/* Show a horizontal divider when viewport is narrow. Otherwise, show a vertical divider. */} - + { // Get the number of pixels the divider was dragged - const deltaWithDirection = delta + const deltaWithDirection = position === 'end' ? -delta : delta updatePaneWidth(paneWidth + deltaWithDirection) }} // Ensure `paneWidth` state and actual pane width are in sync when the drag ends diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index e1fd29b99f4..ad552cc80d3 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -89,24 +89,33 @@ exports[`PageLayout renders condensed layout 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; width: 100%; margin-left: 0; margin-right: 0; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - margin-bottom: 16px; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; margin-top: 16px; } .c9 { + margin-left: -16px; + margin-right: -16px; + display: none; + margin-bottom: 16px; +} + +.c10 { height: 100%; position: relative; display: none; - margin-left: 16px; + margin-right: 16px; } -.c10 { +.c11 { --pane-min-width: 256px; --pane-max-width-diff: 511px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); @@ -114,7 +123,7 @@ exports[`PageLayout renders condensed layout 1`] = ` padding: 0; } -.c11 { +.c12 { -webkit-order: 4; -ms-flex-order: 4; order: 4; @@ -122,13 +131,6 @@ exports[`PageLayout renders condensed layout 1`] = ` margin-top: 16px; } -.c12 { - margin-left: -16px; - margin-right: -16px; - display: none; - margin-bottom: 16px; -} - @media screen and (min-width:768px) { .c4 { margin-left: 0 !important; @@ -141,9 +143,17 @@ exports[`PageLayout renders condensed layout 1`] = ` width: auto; margin-top: 0 !important; margin-bottom: 0 !important; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + margin-left: 16px; + } +} + +@media screen and (min-width:768px) { + .c9 { + margin-left: 0 !important; + margin-right: 0 !important; } } @@ -152,31 +162,24 @@ exports[`PageLayout renders condensed layout 1`] = ` } @media screen and (min-width:768px) { - .c10 { + .c11 { width: 256px; overflow: auto; } } @media screen and (min-width:1012px) { - .c10 { + .c11 { width: 296px; } } @media screen and (min-width:1280px) { - .c10 { + .c11 { --pane-max-width-diff: 959px; } } -@media screen and (min-width:768px) { - .c12 { - margin-left: 0 !important; - margin-right: 0 !important; - } -} -
-
+
Pane @@ -233,10 +236,10 @@ exports[`PageLayout renders condensed layout 1`] = `