Adjust paneheading usage

primer · Nov 13, 2023 · 8dbe325 · 8dbe325
1 parent f87d940
commit 8dbe325
Show file tree

Hide file tree

Showing 6 changed files with 5 additions and 466 deletions.
diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx
@@ -363,11 +363,11 @@ export const WithCustomPaneHeading: Story = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable position="end">
-      <Placeholder height={320} label="Pane" />
-      <PageLayout.PaneHeading as="h2" sx={{fontSize: 3}} id="pane-heading">
+    <PageLayout.Pane resizable position="start">
+      <Heading as="h2" sx={{fontSize: 3}} id="pane-heading">
         Pane Heading
-      </PageLayout.PaneHeading>
+      </Heading>
+      <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
       <Placeholder height={640} label="Content" />

diff --git 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(
-      <ThemeProvider>
-        <PageLayout>
-          <PageLayout.Header>Header</PageLayout.Header>
-          <PageLayout.Content>Content</PageLayout.Content>
-          <PageLayout.Pane>
-            <span>Pane content</span>
-            <PageLayout.PaneHeading as="h2">Pane Heading</PageLayout.PaneHeading>
-          </PageLayout.Pane>
-          <PageLayout.Footer>Footer</PageLayout.Footer>
-        </PageLayout>
-      </ThemeProvider>,
-    )
-    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
@@ -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<HTMLDivElement, React.PropsWithChildren<PageLayout
       }
     }
 
-    const [slots, childrenWithoutSlots] = useSlots(children, {
-      paneHeading: PaneHeading,
-      splitPaneHeading: SplitPageLayout.PaneHeading,
-    })
-
     return (
       <Box
         ref={measuredRef}
@@ -806,7 +800,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {...labelProp}
           {...(id && {id: paneId})}
         >
-          {slots.paneHeading || slots.splitPaneHeading}
+          {children}
           {resizable && (
             // eslint-disable-next-line github/a11y-no-visually-hidden-interactive-element
             <VisuallyHidden>
@@ -833,7 +827,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
               </form>
             </VisuallyHidden>
           )}
-          {childrenWithoutSlots}
         </Box>
       </Box>
     )
@@ -917,26 +910,6 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
 
 Footer.displayName = 'PageLayout.Footer'
 
-// ----------------------------------------------------------------------------
-// PageLayout.PaneHeading
-
-type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-
-export type PageLayoutPaneHeadingProps = {
-  as: HeadingLevels
-} & SxProp &
-  React.HTMLAttributes<HTMLHeadingElement>
-
-const PaneHeading: React.FC<React.PropsWithChildren<PageLayoutPaneHeadingProps>> = ({as, children, ...props}) => {
-  return (
-    <Heading as={as} {...props}>
-      {children}
-    </Heading>
-  )
-}
-
-PaneHeading.displayName = 'PageLayout.PaneHeading'
-
 // ----------------------------------------------------------------------------
 // Export
 
@@ -945,5 +918,4 @@ export const PageLayout = Object.assign(Root, {
   Content,
   Pane,
   Footer,
-  PaneHeading,
 })