Skip to content

1885 bug splitpagelayoutpane needs to be able to consume heading 1 #3143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TylerJDev merged 21 commits into from
Nov 13, 2023
Merged

1885 bug splitpagelayoutpane needs to be able to consume heading 1 #3143

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
4609667
fix(PageLayoutPane): heading is consumable
agreenberry Apr 10, 2023
68377a2
doce(SplitPageLayout): updated to reflect Pane heading
agreenberry Apr 10, 2023
ac0e806
docs(SplitPageLayout.Pane): demo Heading
agreenberry Apr 10, 2023
86db7cc
Merge branch 'main' into 1885-bug-splitpagelayoutpane-needs-to-be-abl…
agreenberry Apr 10, 2023
830f952
chore: added changeset
agreenberry Apr 10, 2023
297b9fe
Merge branch '1885-bug-splitpagelayoutpane-needs-to-be-able-to-consum…
agreenberry Apr 10, 2023
051719c
Merge remote-tracking branch 'origin/main' into 1885-bug-splitpagelay…
agreenberry May 2, 2023
a05f5cc
fix(SplitPageLayout): ability to consume custom level header
agreenberry May 2, 2023
6047711
docs(SplitPageLayout.Pane): updated with heading and headingLevel
agreenberry May 2, 2023
99431fa
Update generated/components.json
green6erry May 2, 2023
5cbaeb3
Merge remote-tracking branch 'origin/main' into 1885-bug-splitpagelay…
Aug 31, 2023
f963fe7
moved heading to around PageLayout.Pane
Sep 1, 2023
6b0123c
Merge branch 'main' into 1885-bug-splitpagelayoutpane-needs-to-be-abl…
TylerJDev Nov 7, 2023
2151877
Utilize `useSlots` to render heading
TylerJDev Nov 7, 2023
45b59f1
Update `SplitPageLayout`
TylerJDev Nov 8, 2023
eb26f54
Update name
TylerJDev Nov 8, 2023
8dabe2f
Adjust `SplitPageLayout` further
TylerJDev Nov 8, 2023
f87d940
Add snapshot test
TylerJDev Nov 8, 2023
8dbe325
Adjust paneheading usage
TylerJDev Nov 13, 2023
cda5fc7
Clean up further
TylerJDev Nov 13, 2023
7c2cf79
Remove unused heading import
TylerJDev Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lucky-gifts-rule.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

Adjusts position of children within `PageLayout.Pane` to live above adjustable resize form.
16 changes: 16 additions & 0 deletions docs/content/SplitPageLayout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,22 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
</Box>
```

### With heading

```jsx live drafts
<Box sx={{height: 320, overflowY: 'auto', border: '1px solid', borderColor: 'border.default'}}>
<SplitPageLayout>
<SplitPageLayout.Pane>
<Heading as="h2">Pane Heading</Heading>
<Placeholder label="Pane" height={120} />
</SplitPageLayout.Pane>
<SplitPageLayout.Content>
<Placeholder label="Content" height={480} />
</SplitPageLayout.Content>
</SplitPageLayout>
</Box>
```

### With non-sticky pane

```jsx live drafts
Expand Down
20 changes: 20 additions & 0 deletions src/PageLayout/PageLayout.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,3 +357,23 @@ export const CustomPaneWidths: Story = () => (
</PageLayout.Footer>
</PageLayout>
)

export const WithCustomPaneHeading: Story = () => (
<PageLayout containerWidth="full">
<PageLayout.Header>
<Placeholder height={64} label="Header" />
</PageLayout.Header>
<PageLayout.Pane resizable position="start">
<Heading as="h2" sx={{fontSize: 3}} id="pane-heading">
Pane Heading
</Heading>
<Placeholder height={320} label="Pane" />
</PageLayout.Pane>
<PageLayout.Content>
<Placeholder height={640} label="Content" />
</PageLayout.Content>
<PageLayout.Footer>
<Placeholder height={64} label="Footer" />
</PageLayout.Footer>
</PageLayout>
)
3 changes: 2 additions & 1 deletion src/PageLayout/PageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import {createGlobalStyle} from 'styled-components'
import Box from '../Box'
import Heading from '../Heading'
Copy link
Contributor

@kendallgassner kendallgassner Nov 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import Heading from '../Heading'

import {useId} from '../hooks/useId'
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
Expand Down Expand Up @@ -797,6 +798,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
{...labelProp}
{...(id && {id: paneId})}
>
{children}
{resizable && (
// eslint-disable-next-line github/a11y-no-visually-hidden-interactive-element
<VisuallyHidden>
Expand All @@ -823,7 +825,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
</form>
</VisuallyHidden>
)}
{children}
</Box>
</Box>
)
Expand Down
10 changes: 9 additions & 1 deletion src/SplitPageLayout/SplitPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,15 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
divider = 'line',
...props
}) => {
return <PageLayout.Pane position={position} sticky={sticky} padding={padding} divider={divider} {...props} />
return (
<PageLayout.Pane
position={position}
sticky={sticky}
padding={padding}
divider={divider}
{...props}
></PageLayout.Pane>
)
}
Pane.displayName = 'SplitPageLayout.Pane'

Expand Down