From 4609667a5d68532bb83b28639e74eb94a62c1d5f Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Mon, 10 Apr 2023 11:29:10 -0400 Subject: [PATCH 01/16] fix(PageLayoutPane): heading is consumable --- src/PageLayout/PageLayout.tsx | 4 ++++ src/SplitPageLayout/SplitPageLayout.stories.tsx | 1 + src/SplitPageLayout/SplitPageLayout.test.tsx | 16 +++++++++++++++- src/SplitPageLayout/SplitPageLayout.tsx | 10 +++++++++- 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index b00ae151710..6d821dc0840 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,6 +1,7 @@ import React from 'react' import {createGlobalStyle} from 'styled-components' import Box from '../Box' +import Heading from '../Heading' import {useId} from '../hooks/useId' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' @@ -489,6 +490,7 @@ export type PageLayoutPaneProps = { resizable?: boolean widthStorageKey?: string padding?: keyof typeof SPACING_MAP + heading?: string divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'> /** * @deprecated Use the `divider` prop with a responsive value instead. @@ -540,6 +542,7 @@ const Pane = React.forwardRef + {heading && {heading}} {resizable && (
diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx index 8926c6e7a18..4f4e01c47f5 100644 --- a/src/SplitPageLayout/SplitPageLayout.stories.tsx +++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx @@ -337,6 +337,7 @@ const Template: Story = args => ( {args['Render pane?'] ? ( { expect(pane.getAttribute('id')).toBe('customId') }) + + it('renders Pane with a heading', () => { + const {getByText, container} = render( + + + + + , + ) + const heading = getByText('Custom heading') + console.log(prettyDOM(container)) + + expect(heading.tagName).toBe('H2') + }) }) diff --git a/src/SplitPageLayout/SplitPageLayout.tsx b/src/SplitPageLayout/SplitPageLayout.tsx index a5ce5f6dbd0..9be57f08acb 100644 --- a/src/SplitPageLayout/SplitPageLayout.tsx +++ b/src/SplitPageLayout/SplitPageLayout.tsx @@ -74,7 +74,15 @@ export const Pane: React.FC> = divider = 'line', ...props }) => { - return + return ( + + ) } Pane.displayName = 'SplitPageLayout.Pane' From 68377a205efc2c055bca5482390fd85f2b8ee841 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Mon, 10 Apr 2023 11:37:52 -0400 Subject: [PATCH 02/16] doce(SplitPageLayout): updated to reflect Pane heading --- src/SplitPageLayout/SplitPageLayout.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx index 4f4e01c47f5..d892824cf43 100644 --- a/src/SplitPageLayout/SplitPageLayout.stories.tsx +++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx @@ -164,6 +164,11 @@ const meta: Meta = { defaultValue: 'customId', table: {category: 'Pane props'}, }, + 'Pane.heading': { + type: 'string', + defaultValue: '', + table: {category: 'Pane props'}, + }, 'Pane.position.narrow': { type: { name: 'enum', @@ -337,7 +342,7 @@ const Template: Story = args => ( {args['Render pane?'] ? ( Date: Mon, 10 Apr 2023 11:54:40 -0400 Subject: [PATCH 03/16] docs(SplitPageLayout.Pane): demo Heading --- docs/content/SplitPageLayout.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index b6f82f4f7fc..5c84c5afda2 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -234,6 +234,21 @@ If you need a more flexible layout component, consider using the [PageLayout](/P ``` +### With pane heading + +```jsx live drafts + + + + + + + + + + +``` + ### With non-sticky pane ```jsx live drafts From 830f952f0c06db98590d0c479f664c48c3165847 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Mon, 10 Apr 2023 11:55:44 -0400 Subject: [PATCH 04/16] chore: added changeset --- .changeset/lucky-gifts-rule.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lucky-gifts-rule.md diff --git a/.changeset/lucky-gifts-rule.md b/.changeset/lucky-gifts-rule.md new file mode 100644 index 00000000000..fea8790858f --- /dev/null +++ b/.changeset/lucky-gifts-rule.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Added Heading to SplitPageLayout.Pane From a05f5ccffa0203ea4f3c06bf69cc479a4373233f Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Tue, 2 May 2023 14:30:13 -0400 Subject: [PATCH 05/16] fix(SplitPageLayout): ability to consume custom level header --- src/PageLayout/PageLayout.tsx | 4 +++- src/SplitPageLayout/SplitPageLayout.test.tsx | 18 +++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index ae715033932..08288c1403d 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -492,6 +492,7 @@ export type PageLayoutPaneProps = { widthStorageKey?: string padding?: keyof typeof SPACING_MAP heading?: string + headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'> /** * @deprecated Use the `divider` prop with a responsive value instead. @@ -545,6 +546,7 @@ const Pane = React.forwardRef - {heading && {heading}} + {heading && {heading}} {resizable && ( diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx index cd3e2678d46..8b0e60a2e99 100644 --- a/src/SplitPageLayout/SplitPageLayout.test.tsx +++ b/src/SplitPageLayout/SplitPageLayout.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {prettyDOM, render} from '@testing-library/react' +import {render} from '@testing-library/react' import MatchMediaMock from 'jest-matchmedia-mock' import 'react-intersection-observer/test-utils' import {ThemeProvider} from '..' @@ -46,7 +46,7 @@ describe('SplitPageLayout', () => { }) it('renders Pane with a heading', () => { - const {getByText, container} = render( + const {getByText} = render( @@ -54,8 +54,20 @@ describe('SplitPageLayout', () => { , ) const heading = getByText('Custom heading') - console.log(prettyDOM(container)) expect(heading.tagName).toBe('H2') }) + + it('renders Pane with a custom level heading', () => { + const {getByText} = render( + + + + + , + ) + const heading = getByText('Custom heading') + + expect(heading.tagName).toBe('H3') + }) }) From 6047711e2d2bbbeeeb6a00bf77f64e597e0d40c6 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Tue, 2 May 2023 14:39:49 -0400 Subject: [PATCH 06/16] docs(SplitPageLayout.Pane): updated with heading and headingLevel --- src/SplitPageLayout/SplitPageLayout.docs.json | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json index 9fb036a25d3..75ca27df3af 100644 --- a/src/SplitPageLayout/SplitPageLayout.docs.json +++ b/src/SplitPageLayout/SplitPageLayout.docs.json @@ -131,6 +131,17 @@ { "name": "sx", "type": "SystemStyleObject" + }, + { + "name": "heading", + "type": "string", + "description": "Provide a heading for the SplitPageLayout Pane." + }, + { + "name": "headingLevel", + "type": "| 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "defaultValue": "\"h2\"", + "description": "Which heading level is applied to SplitPageLayout Pane heading." } ] }, From 99431fa380417f40afc63afdd32132c7edc34a38 Mon Sep 17 00:00:00 2001 From: green6erry Date: Tue, 2 May 2023 18:42:19 +0000 Subject: [PATCH 07/16] Update generated/components.json --- generated/components.json | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/generated/components.json b/generated/components.json index 9cfa427c3d3..c647ee5218b 100644 --- a/generated/components.json +++ b/generated/components.json @@ -3777,6 +3777,17 @@ { "name": "sx", "type": "SystemStyleObject" + }, + { + "name": "heading", + "type": "string", + "description": "Provide a heading for the SplitPageLayout Pane." + }, + { + "name": "headingLevel", + "type": "| 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "defaultValue": "\"h2\"", + "description": "Which heading level is applied to SplitPageLayout Pane heading." } ] }, From f963fe780df2d8155d9abdaab6e6771fdbfe3ebc Mon Sep 17 00:00:00 2001 From: Amanda Brown Date: Thu, 31 Aug 2023 21:11:15 -0400 Subject: [PATCH 08/16] moved heading to around PageLayout.Pane --- src/PageLayout/PageLayout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index a1ae53170f3..db249762692 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -702,6 +702,7 @@ const Pane = React.forwardRef{heading && {heading}} - {heading && {heading}} + {resizable && ( @@ -823,6 +824,7 @@ const Pane = React.forwardRef + ) }, ) From 21518779e9059f72aad526a58a27da5e68896ee3 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 7 Nov 2023 22:22:38 +0000 Subject: [PATCH 09/16] Utilize `useSlots` to render heading --- .../PageLayout.features.stories.tsx | 20 +++++++++++ src/PageLayout/PageLayout.tsx | 33 +++++++++++++++---- 2 files changed, 47 insertions(+), 6 deletions(-) diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx index 9f2ceebed5f..50b8361218f 100644 --- a/src/PageLayout/PageLayout.features.stories.tsx +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -357,3 +357,23 @@ export const CustomPaneWidths: Story = () => ( ) + +export const WithCustomPaneHeading: Story = () => ( + + + + + + + + Pane Heading + + + + + + + + + +) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 1d40360fb58..cc4ca605717 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -571,8 +571,6 @@ const Pane = React.forwardRef{heading && {heading}} - + {slots.paneHeading} {resizable && ( // eslint-disable-next-line github/a11y-no-visually-hidden-interactive-element @@ -830,10 +831,9 @@ const Pane = React.forwardRef )} - {children} + {childrenWithoutSlots} - ) }, ) @@ -915,6 +915,26 @@ const Footer: React.FC> = ({ Footer.displayName = 'PageLayout.Footer' +// ---------------------------------------------------------------------------- +// PageLayout.Heading + +type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' + +export type PageLayoutPaneHeadingProps = { + as: HeadingLevels +} & SxProp & + React.HTMLAttributes + +const PaneHeading: React.FC> = ({as, children, ...props}) => { + return ( + + {children} + + ) +} + +PaneHeading.displayName = 'PageLayout.PaneHeading' + // ---------------------------------------------------------------------------- // Export @@ -923,4 +943,5 @@ export const PageLayout = Object.assign(Root, { Content, Pane, Footer, + PaneHeading, }) From 45b59f12b7b81ae5c2d41d0cadf1cfcab79f7562 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Wed, 8 Nov 2023 15:22:09 +0000 Subject: [PATCH 10/16] Update `SplitPageLayout` --- .changeset/lucky-gifts-rule.md | 2 +- docs/content/SplitPageLayout.mdx | 3 ++- src/SplitPageLayout/SplitPageLayout.docs.json | 26 +++++++++++-------- .../SplitPageLayout.stories.tsx | 5 ---- src/SplitPageLayout/SplitPageLayout.tsx | 13 ++++++++++ 5 files changed, 31 insertions(+), 18 deletions(-) diff --git a/.changeset/lucky-gifts-rule.md b/.changeset/lucky-gifts-rule.md index fea8790858f..c23de0149d5 100644 --- a/.changeset/lucky-gifts-rule.md +++ b/.changeset/lucky-gifts-rule.md @@ -2,4 +2,4 @@ '@primer/react': minor --- -Added Heading to SplitPageLayout.Pane +Added `PageLayout.PaneHeading` slot to `PageLayout` which utilizes `` as its base. diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index d9b7975c584..430926300ee 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -243,7 +243,8 @@ If you need a more flexible layout component, consider using the [PageLayout](/P - + Pane Heading + diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json index 2fb832fb03d..1399d255208 100644 --- a/src/SplitPageLayout/SplitPageLayout.docs.json +++ b/src/SplitPageLayout/SplitPageLayout.docs.json @@ -125,17 +125,6 @@ { "name": "sx", "type": "SystemStyleObject" - }, - { - "name": "heading", - "type": "string", - "description": "Provide a heading for the SplitPageLayout Pane." - }, - { - "name": "headingLevel", - "type": "| 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", - "defaultValue": "\"h2\"", - "description": "Which heading level is applied to SplitPageLayout Pane heading." } ] }, @@ -165,6 +154,21 @@ "type": "SystemStyleObject" } ] + }, + { + "name": "SplitPageLayout.PaneHeading", + "props": [ + { + "name": "as", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", + "required": true, + "defaultValue": "" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] } ] } diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx index 8392f681e85..2413105f2ae 100644 --- a/src/SplitPageLayout/SplitPageLayout.stories.tsx +++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx @@ -162,11 +162,6 @@ export default { defaultValue: 'customId', table: {category: 'Pane props'}, }, - 'Pane.heading': { - type: 'string', - defaultValue: '', - table: {category: 'Pane props'}, - }, 'Pane.position.narrow': { type: { name: 'enum', diff --git a/src/SplitPageLayout/SplitPageLayout.tsx b/src/SplitPageLayout/SplitPageLayout.tsx index 9be57f08acb..87f9e17c24a 100644 --- a/src/SplitPageLayout/SplitPageLayout.tsx +++ b/src/SplitPageLayout/SplitPageLayout.tsx @@ -6,6 +6,7 @@ import { PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneProps, + PageLayoutPaneHeadingProps, } from '../PageLayout' // ---------------------------------------------------------------------------- @@ -102,6 +103,17 @@ export const Footer: React.FC> = ({as, ...props}) => { + return +} + +PaneHeading.displayName = 'SplitPageLayout.PaneHeading' + // ---------------------------------------------------------------------------- // Export @@ -110,4 +122,5 @@ export const SplitPageLayout = Object.assign(Root, { Content, Pane, Footer, + PaneHeading, }) From eb26f5418f4d528e2a41e789b610e4c7dde757f3 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Wed, 8 Nov 2023 15:23:00 +0000 Subject: [PATCH 11/16] Update name --- src/PageLayout/PageLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index cc4ca605717..15bf7ef6510 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -916,7 +916,7 @@ const Footer: React.FC> = ({ Footer.displayName = 'PageLayout.Footer' // ---------------------------------------------------------------------------- -// PageLayout.Heading +// PageLayout.PaneHeading type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' From 8dabe2f9261c5bd80562420b77dee457e17cc91d Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Wed, 8 Nov 2023 17:17:24 +0000 Subject: [PATCH 12/16] Adjust `SplitPageLayout` further --- src/PageLayout/PageLayout.tsx | 4 ++- src/SplitPageLayout/SplitPageLayout.test.tsx | 31 +++++++++++++++++--- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 15bf7ef6510..95d21e7beef 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -13,6 +13,7 @@ import {useOverflow} from '../internal/hooks/useOverflow' import {warning} from '../utils/warning' import VisuallyHidden from '../_VisuallyHidden' import {useStickyPaneHeight} from './useStickyPaneHeight' +import {SplitPageLayout} from '../SplitPageLayout' const REGION_ORDER = { header: 0, @@ -709,6 +710,7 @@ const Pane = React.forwardRef - {slots.paneHeading} + {slots.paneHeading || slots.splitPaneHeading} {resizable && ( // eslint-disable-next-line github/a11y-no-visually-hidden-interactive-element diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx index 8b0e60a2e99..105d5709ba6 100644 --- a/src/SplitPageLayout/SplitPageLayout.test.tsx +++ b/src/SplitPageLayout/SplitPageLayout.test.tsx @@ -49,11 +49,13 @@ describe('SplitPageLayout', () => { const {getByText} = render( - + + Custom Heading + , ) - const heading = getByText('Custom heading') + const heading = getByText('Custom Heading') expect(heading.tagName).toBe('H2') }) @@ -62,12 +64,33 @@ describe('SplitPageLayout', () => { const {getByText} = render( - + + Custom Heading + , ) - const heading = getByText('Custom heading') + const heading = getByText('Custom Heading') expect(heading.tagName).toBe('H3') }) + + it('renders Pane with a heading in the correct spot', () => { + const {getByText, getAllByTestId} = render( + + + +
Some Content
+ + Custom Heading + + + + , + ) + const paneContents = getAllByTestId('content')[0] + const heading = getByText('Custom Heading') + + expect(paneContents).toBe(heading) + }) }) From f87d940404f39035271d9de29b4dd4d2cf6ba40b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Wed, 8 Nov 2023 20:39:47 +0000 Subject: [PATCH 13/16] Add snapshot test --- src/PageLayout/PageLayout.test.tsx | 17 + .../__snapshots__/PageLayout.test.tsx.snap | 355 ++++++++++++++++++ 2 files changed, 372 insertions(+) diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx index ab96d4beaed..8f8a0e24c91 100644 --- a/src/PageLayout/PageLayout.test.tsx +++ b/src/PageLayout/PageLayout.test.tsx @@ -78,6 +78,23 @@ describe('PageLayout', () => { expect(container).toMatchSnapshot() }) + it('renders paneheading in the correct position', () => { + const {container} = render( + + + Header + Content + + Pane content + Pane Heading + + Footer + + , + ) + expect(container).toMatchSnapshot() + }) + it('can hide pane when narrow', () => { // Set narrow viewport act(() => { diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index ad552cc80d3..21df066092f 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -936,6 +936,361 @@ exports[`PageLayout renders pane in different position when narrow 1`] = ` `; +exports[`PageLayout renders paneheading in correct position 1`] = ` +.c0 { + padding: 16px; +} + +.c1 { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.c2 { + width: 100%; + margin-bottom: 16px; +} + +.c3 { + padding: 0; +} + +.c4 { + margin-left: -16px; + margin-right: -16px; + display: none; + 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%; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -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; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + min-width: 1px; +} + +.c7 { + width: 100%; + max-width: 100%; + margin-left: auto; + margin-right: auto; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + padding: 0; +} + +.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; + 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; +} + +.c11 { + --pane-min-width: 256px; + --pane-max-width-diff: 511px; + --pane-max-width: calc(100vw - var(--pane-max-width-diff)); + width: 100%; + padding: 0; +} + +.c13 { + -webkit-order: 4; + -ms-flex-order: 4; + order: 4; + width: 100%; + margin-top: 16px; +} + +.c12 { + font-weight: 600; + font-size: 32px; + margin: 0; +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + +} + +@media screen and (min-width:1012px) { + .c0 { + padding: 24px; + } +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + +} + +@media screen and (min-width:1012px) { + .c2 { + margin-bottom: 24px; + } +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + .c4 { + margin-left: 0 !important; + margin-right: 0 !important; + } +} + +@media screen and (min-width:1012px) { + .c4 { + margin-left: -24px; + margin-right: -24px; + margin-top: 24px; + } +} + +@media screen and (min-width:544px) { + +} + +@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; + } +} + +@media screen and (min-width:1012px) { + .c8 { + margin-top: 24px; + } +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + .c9 { + margin-left: 0 !important; + margin-right: 0 !important; + } +} + +@media screen and (min-width:1012px) { + .c9 { + margin-left: -24px; + margin-right: -24px; + margin-bottom: 24px; + } +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + +} + +@media screen and (min-width:1012px) { + .c10 { + margin-right: 24px; + } +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + .c11 { + width: 256px; + overflow: auto; + } +} + +@media screen and (min-width:1012px) { + .c11 { + width: 296px; + } +} + +@media screen and (min-width:1280px) { + .c11 { + --pane-max-width-diff: 959px; + } +} + +@media screen and (min-width:544px) { + +} + +@media screen and (min-width:768px) { + +} + +@media screen and (min-width:1012px) { + .c13 { + margin-top: 24px; + } +} + +
+
+
+
+
+ Header +
+
+
+
+
+
+
+ Content +
+
+
+
+
+
+
+

+ Pane Heading +

+ + Pane content + +
+
+
+
+
+
+ Footer +
+
+
+
+
+`; + exports[`PageLayout renders with dividers 1`] = ` .c0 { padding: 16px; From 8dbe325bf900533b2067dad1a7c1c7e2caca509d Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 13 Nov 2023 19:47:23 +0000 Subject: [PATCH 14/16] Adjust paneheading usage --- .../PageLayout.features.stories.tsx | 8 +- src/PageLayout/PageLayout.test.tsx | 17 - src/PageLayout/PageLayout.tsx | 30 +- .../__snapshots__/PageLayout.test.tsx.snap | 355 ------------------ src/SplitPageLayout/SplitPageLayout.test.tsx | 49 --- src/SplitPageLayout/SplitPageLayout.tsx | 12 - 6 files changed, 5 insertions(+), 466 deletions(-) diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx index 50b8361218f..25c704eb2d8 100644 --- a/src/PageLayout/PageLayout.features.stories.tsx +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -363,11 +363,11 @@ export const WithCustomPaneHeading: Story = () => ( - - - + + Pane Heading - + + diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx index 8f8a0e24c91..ab96d4beaed 100644 --- a/src/PageLayout/PageLayout.test.tsx +++ b/src/PageLayout/PageLayout.test.tsx @@ -78,23 +78,6 @@ describe('PageLayout', () => { expect(container).toMatchSnapshot() }) - it('renders paneheading in the correct position', () => { - const {container} = render( - - - Header - Content - - Pane content - Pane Heading - - Footer - - , - ) - expect(container).toMatchSnapshot() - }) - it('can hide pane when narrow', () => { // Set narrow viewport act(() => { diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 95d21e7beef..9b582d62124 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -13,7 +13,6 @@ import {useOverflow} from '../internal/hooks/useOverflow' import {warning} from '../utils/warning' import VisuallyHidden from '../_VisuallyHidden' import {useStickyPaneHeight} from './useStickyPaneHeight' -import {SplitPageLayout} from '../SplitPageLayout' const REGION_ORDER = { header: 0, @@ -708,11 +707,6 @@ const Pane = React.forwardRef - {slots.paneHeading || slots.splitPaneHeading} + {children} {resizable && ( // eslint-disable-next-line github/a11y-no-visually-hidden-interactive-element @@ -833,7 +827,6 @@ const Pane = React.forwardRef )} - {childrenWithoutSlots} ) @@ -917,26 +910,6 @@ const Footer: React.FC> = ({ Footer.displayName = 'PageLayout.Footer' -// ---------------------------------------------------------------------------- -// PageLayout.PaneHeading - -type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' - -export type PageLayoutPaneHeadingProps = { - as: HeadingLevels -} & SxProp & - React.HTMLAttributes - -const PaneHeading: React.FC> = ({as, children, ...props}) => { - return ( - - {children} - - ) -} - -PaneHeading.displayName = 'PageLayout.PaneHeading' - // ---------------------------------------------------------------------------- // Export @@ -945,5 +918,4 @@ export const PageLayout = Object.assign(Root, { Content, Pane, Footer, - PaneHeading, }) diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index 21df066092f..ad552cc80d3 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -936,361 +936,6 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
`; -exports[`PageLayout renders paneheading in correct position 1`] = ` -.c0 { - padding: 16px; -} - -.c1 { - max-width: 1280px; - margin-left: auto; - margin-right: auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.c2 { - width: 100%; - margin-bottom: 16px; -} - -.c3 { - padding: 0; -} - -.c4 { - margin-left: -16px; - margin-right: -16px; - display: none; - 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%; -} - -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -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; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-flex-shrink: 1; - -ms-flex-negative: 1; - flex-shrink: 1; - min-width: 1px; -} - -.c7 { - width: 100%; - max-width: 100%; - margin-left: auto; - margin-right: auto; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - padding: 0; -} - -.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; - 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; -} - -.c11 { - --pane-min-width: 256px; - --pane-max-width-diff: 511px; - --pane-max-width: calc(100vw - var(--pane-max-width-diff)); - width: 100%; - padding: 0; -} - -.c13 { - -webkit-order: 4; - -ms-flex-order: 4; - order: 4; - width: 100%; - margin-top: 16px; -} - -.c12 { - font-weight: 600; - font-size: 32px; - margin: 0; -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - -} - -@media screen and (min-width:1012px) { - .c0 { - padding: 24px; - } -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - -} - -@media screen and (min-width:1012px) { - .c2 { - margin-bottom: 24px; - } -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - .c4 { - margin-left: 0 !important; - margin-right: 0 !important; - } -} - -@media screen and (min-width:1012px) { - .c4 { - margin-left: -24px; - margin-right: -24px; - margin-top: 24px; - } -} - -@media screen and (min-width:544px) { - -} - -@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; - } -} - -@media screen and (min-width:1012px) { - .c8 { - margin-top: 24px; - } -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - .c9 { - margin-left: 0 !important; - margin-right: 0 !important; - } -} - -@media screen and (min-width:1012px) { - .c9 { - margin-left: -24px; - margin-right: -24px; - margin-bottom: 24px; - } -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - -} - -@media screen and (min-width:1012px) { - .c10 { - margin-right: 24px; - } -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - .c11 { - width: 256px; - overflow: auto; - } -} - -@media screen and (min-width:1012px) { - .c11 { - width: 296px; - } -} - -@media screen and (min-width:1280px) { - .c11 { - --pane-max-width-diff: 959px; - } -} - -@media screen and (min-width:544px) { - -} - -@media screen and (min-width:768px) { - -} - -@media screen and (min-width:1012px) { - .c13 { - margin-top: 24px; - } -} - -
-
-
-
-
- Header -
-
-
-
-
-
-
- Content -
-
-
-
-
-
-
-

- Pane Heading -

- - Pane content - -
-
-
-
-
-
- Footer -
-
-
-
-
-`; - exports[`PageLayout renders with dividers 1`] = ` .c0 { padding: 16px; diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx index 105d5709ba6..3a711dfce86 100644 --- a/src/SplitPageLayout/SplitPageLayout.test.tsx +++ b/src/SplitPageLayout/SplitPageLayout.test.tsx @@ -44,53 +44,4 @@ describe('SplitPageLayout', () => { expect(pane.getAttribute('id')).toBe('customId') }) - - it('renders Pane with a heading', () => { - const {getByText} = render( - - - - Custom Heading - - - , - ) - const heading = getByText('Custom Heading') - - expect(heading.tagName).toBe('H2') - }) - - it('renders Pane with a custom level heading', () => { - const {getByText} = render( - - - - Custom Heading - - - , - ) - const heading = getByText('Custom Heading') - - expect(heading.tagName).toBe('H3') - }) - - it('renders Pane with a heading in the correct spot', () => { - const {getByText, getAllByTestId} = render( - - - -
Some Content
- - Custom Heading - - - - , - ) - const paneContents = getAllByTestId('content')[0] - const heading = getByText('Custom Heading') - - expect(paneContents).toBe(heading) - }) }) diff --git a/src/SplitPageLayout/SplitPageLayout.tsx b/src/SplitPageLayout/SplitPageLayout.tsx index 87f9e17c24a..6b9364fb895 100644 --- a/src/SplitPageLayout/SplitPageLayout.tsx +++ b/src/SplitPageLayout/SplitPageLayout.tsx @@ -103,17 +103,6 @@ export const Footer: React.FC> = ({as, ...props}) => { - return -} - -PaneHeading.displayName = 'SplitPageLayout.PaneHeading' - // ---------------------------------------------------------------------------- // Export @@ -122,5 +111,4 @@ export const SplitPageLayout = Object.assign(Root, { Content, Pane, Footer, - PaneHeading, }) From cda5fc7229ef294f2671804b05a8ab0edd99587b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 13 Nov 2023 19:55:27 +0000 Subject: [PATCH 15/16] Clean up further --- .changeset/lucky-gifts-rule.md | 2 +- docs/content/SplitPageLayout.mdx | 4 ++-- src/PageLayout/PageLayout.tsx | 2 -- src/SplitPageLayout/SplitPageLayout.docs.json | 15 --------------- src/SplitPageLayout/SplitPageLayout.stories.tsx | 1 - src/SplitPageLayout/SplitPageLayout.tsx | 1 - 6 files changed, 3 insertions(+), 22 deletions(-) diff --git a/.changeset/lucky-gifts-rule.md b/.changeset/lucky-gifts-rule.md index c23de0149d5..35852362cac 100644 --- a/.changeset/lucky-gifts-rule.md +++ b/.changeset/lucky-gifts-rule.md @@ -2,4 +2,4 @@ '@primer/react': minor --- -Added `PageLayout.PaneHeading` slot to `PageLayout` which utilizes `` as its base. +Adjusts position of children within `PageLayout.Pane` to live above adjustable resize form. diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index 430926300ee..d9b500ae643 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -237,13 +237,13 @@ If you need a more flexible layout component, consider using the [PageLayout](/P ``` -### With pane heading +### With heading ```jsx live drafts - Pane Heading + Pane Heading diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 9b582d62124..a739265a82d 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -517,8 +517,6 @@ export type PageLayoutPaneProps = { resizable?: boolean widthStorageKey?: string padding?: keyof typeof SPACING_MAP - heading?: string - headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'> /** * @deprecated Use the `divider` prop with a responsive value instead. diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json index 1399d255208..e6bfeda2865 100644 --- a/src/SplitPageLayout/SplitPageLayout.docs.json +++ b/src/SplitPageLayout/SplitPageLayout.docs.json @@ -154,21 +154,6 @@ "type": "SystemStyleObject" } ] - }, - { - "name": "SplitPageLayout.PaneHeading", - "props": [ - { - "name": "as", - "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'", - "required": true, - "defaultValue": "" - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ] } ] } diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx index 2413105f2ae..39f09809d15 100644 --- a/src/SplitPageLayout/SplitPageLayout.stories.tsx +++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx @@ -340,7 +340,6 @@ const Template: Story = args => ( {args['Render pane?'] ? ( Date: Mon, 13 Nov 2023 20:44:41 +0000 Subject: [PATCH 16/16] Remove unused heading import --- src/PageLayout/PageLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index a739265a82d..e516be2189f 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,7 +1,6 @@ import React from 'react' import {createGlobalStyle} from 'styled-components' import Box from '../Box' -import Heading from '../Heading' import {useId} from '../hooks/useId' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'