From 206ce7ffa52c7088c6d4108e240d71ef1c591b30 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Oct 2023 12:22:45 -0500 Subject: [PATCH 1/4] revert: restore original PageLayout behavior --- src/NavList/NavList.stories.tsx | 12 +- .../PageLayout.features.stories.tsx | 96 +++-- src/PageLayout/PageLayout.stories.tsx | 54 ++- src/PageLayout/PageLayout.test.tsx | 6 +- src/PageLayout/PageLayout.tsx | 51 ++- .../__snapshots__/PageLayout.test.tsx.snap | 361 +++++++++--------- .../SplitPageLayout.features.stories.tsx | 2 +- .../SplitPageLayout.stories.tsx | 39 +- src/SplitPageLayout/SplitPageLayout.tsx | 3 +- .../SplitPageLayout.test.tsx.snap | 5 +- 10 files changed, 381 insertions(+), 248 deletions(-) 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`] = `