From 7821267f3b3856ed753f68cbf29b0e5a25edaac0 Mon Sep 17 00:00:00 2001 From: Jeremy Neal Date: Tue, 20 Jun 2023 11:49:47 -0400 Subject: [PATCH] Remove PageLayout.Pane position prop. (#3386) * Remove position prop and reorganize PageLayout stories to match previous layout. * Create yellow-windows-accept.md * Remove position references to fix type checks. * Update generated/components.json * Linting fixes. * Fix stories by moving panes around. * Remove position prop in NavList story. --------- Co-authored-by: radglob --- .changeset/yellow-windows-accept.md | 5 + generated/components.json | 2 +- src/NavList/NavList.stories.tsx | 10 +- .../PageLayout.features.stories.tsx | 96 ++-- src/PageLayout/PageLayout.stories.tsx | 34 -- src/PageLayout/PageLayout.test.tsx | 2 +- src/PageLayout/PageLayout.tsx | 80 ++-- .../__snapshots__/PageLayout.test.tsx.snap | 413 ++++++++++-------- .../SplitPageLayout.features.stories.tsx | 2 +- .../SplitPageLayout.stories.tsx | 35 +- src/SplitPageLayout/SplitPageLayout.tsx | 3 +- .../SplitPageLayout.test.tsx.snap | 23 +- 12 files changed, 338 insertions(+), 367 deletions(-) create mode 100644 .changeset/yellow-windows-accept.md diff --git a/.changeset/yellow-windows-accept.md b/.changeset/yellow-windows-accept.md new file mode 100644 index 00000000000..79b7a1079fb --- /dev/null +++ b/.changeset/yellow-windows-accept.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Removes PageLayout.Pane position prop. diff --git a/generated/components.json b/generated/components.json index 7e559bb58ac..5e62cd1b54b 100644 --- a/generated/components.json +++ b/generated/components.json @@ -3643,7 +3643,7 @@ "stories": [ { "id": "components-splitpagelayout--default", - "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" + "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" } ], "props": [ diff --git a/src/NavList/NavList.stories.tsx b/src/NavList/NavList.stories.tsx index 9af62a887ee..b39014b91d0 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 @@ -45,7 +45,7 @@ export const WithGroup: Story = () => ( export const WithSubItems: Story = () => ( - + Item 1 @@ -66,7 +66,7 @@ export const WithSubItems: Story = () => ( export const WithNestedSubItems: Story = () => ( - + Item 1 @@ -111,7 +111,7 @@ const ReactRouterLikeLink = React.forwardRef ( - + Item 1 @@ -143,7 +143,7 @@ const NextJSLikeLink = React.forwardRef( export const WithNextJSLink = () => ( - + Item 1 diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx index 9a168985c56..2713af247f4 100644 --- a/src/PageLayout/PageLayout.features.stories.tsx +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -83,49 +83,42 @@ export const StickyPane: Story = args => ( - + - {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. ) })} - - + + - {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. ) })} - + @@ -158,32 +151,32 @@ export const NestedScrollContainer: Story = args => ( - + - {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. ))} - - + + - {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. ))} - + @@ -228,6 +221,23 @@ 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) => { @@ -248,30 +258,6 @@ 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. - - - ) - })} - - @@ -306,7 +292,7 @@ export const ResizablePane: Story = () => ( - + @@ -323,7 +309,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => ( - + diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index 2ec2aaa0f56..7b8a5d7ffd0 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -34,9 +34,6 @@ 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, @@ -204,32 +201,6 @@ const meta: Meta = { type: 'boolean', table: {category: 'Content props'}, }, - - // 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', @@ -382,11 +353,6 @@ const Template: Story = args => ( {args['Render pane?'] ? ( { Header Content - + Pane Footer diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index b4c89fd7916..f1df93cd42f 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -107,7 +107,18 @@ const Root: React.FC> = ({ }} > {slots.header} - {rest} + ({ + display: 'flex', + flex: '1 1 100%', + flexWrap: 'wrap', + maxWidth: '100%', + [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {columnGap: SPACING_MAP[columnGap]}, + })} + > + {rest} + {slots.footer} @@ -423,21 +434,27 @@ const Content: React.FC> = ({ ( - { - display: isHidden ? 'none' : 'flex', - flexDirection: 'column', - order: REGION_ORDER.content, - // Set flex-basis to 0% to allow flex-grow to control the width of the content region. - // Without this, the content region could wrap onto a different line - // than the pane region on wide viewports if its contents are too wide. - flexBasis: 0, - flexGrow: 1, - flexShrink: 1, - minWidth: 1, // Hack to prevent overflowing content from pushing the pane region to the next line - }, - sx, - )} + // eslint-disable-next-line @typescript-eslint/no-explicit-any + sx={(theme: any) => + merge( + { + display: isHidden ? 'none' : 'flex', + flexDirection: 'column', + // Set flex-basis to 0% to allow flex-grow to control the width of the content region. + // Without this, the content region could wrap onto a different line + // than the pane region on wide viewports if its contents are too wide. + flexBasis: 0, + flexGrow: 1, + flexShrink: 1, + minWidth: 1, // Hack to prevent overflowing content from pushing the pane region to the next line + [`@media screen and (min-width: ${theme.breakpoints[1]})`]: { + width: 'auto', + marginY: '0 !important', + }, + }, + sx, + ) + } > {/* Track the top of the content region so we can calculate the height of the pane region */} @@ -466,7 +483,6 @@ Content.displayName = 'PageLayout.Content' // PageLayout.Pane export type PageLayoutPaneProps = { - position?: keyof typeof panePositions | ResponsiveValue /** * @deprecated Use the `position` prop with a responsive value instead. * @@ -529,8 +545,6 @@ 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' @@ -677,12 +683,11 @@ 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 = position === 'end' ? -delta : delta + const deltaWithDirection = 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 30144461b0c..3b714ba8748 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -18,20 +18,6 @@ exports[`PageLayout renders condensed layout 1`] = ` padding: 0; } -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1 1 100%; - -ms-flex: 1 1 100%; - flex: 1 1 100%; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - max-width: 100%; -} - .c6 { display: -webkit-box; display: -webkit-flex; @@ -40,9 +26,6 @@ exports[`PageLayout renders condensed layout 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-order: 2; - -ms-flex-order: 2; - order: 2; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; @@ -68,7 +51,7 @@ exports[`PageLayout renders condensed layout 1`] = ` padding: 0; } -.c11 { +.c10 { --pane-min-width: 256px; --pane-max-width-diff: 511px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); @@ -92,38 +75,43 @@ exports[`PageLayout renders condensed layout 1`] = ` margin-top: 16px; } +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + max-width: 100%; +} + .c8 { display: -webkit-box; 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; - -ms-flex-direction: column; - flex-direction: column; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + margin-bottom: 16px; margin-top: 16px; } .c9 { - margin-left: -16px; - margin-right: -16px; - display: none; - margin-bottom: 16px; -} - -.c10 { height: 100%; position: relative; display: none; - margin-right: 16px; + margin-left: 16px; } -.c12 { +.c11 { -webkit-order: 4; -ms-flex-order: 4; order: 4; @@ -131,21 +119,36 @@ 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) { - .c11 { + .c6 { + width: auto; + margin-top: 0 !important; + margin-bottom: 0 !important; + } +} + +@media screen and (min-width:768px) { + .c10 { width: 256px; overflow: auto; } } @media screen and (min-width:1012px) { - .c11 { + .c10 { width: 296px; } } @media screen and (min-width:1280px) { - .c11 { + .c10 { --pane-max-width-diff: 959px; } } @@ -157,20 +160,26 @@ exports[`PageLayout renders condensed layout 1`] = ` } } +@media screen and (min-width:768px) { + .c5 { + -webkit-column-gap: 16px; + column-gap: 16px; + } +} + @media screen and (min-width:768px) { .c8 { width: auto; margin-top: 0 !important; margin-bottom: 0 !important; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - margin-left: 16px; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } } @media screen and (min-width:768px) { - .c9 { + .c12 { margin-left: 0 !important; margin-right: 0 !important; } @@ -218,13 +227,13 @@ exports[`PageLayout renders condensed layout 1`] = ` class="c8" >
Pane @@ -232,10 +241,10 @@ exports[`PageLayout renders condensed layout 1`] = `