diff --git a/src/PageHeader/PageHeader.examples.stories.tsx b/src/PageHeader/PageHeader.examples.stories.tsx
index ba986e5392e4..dd53e67badf0 100644
--- a/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/src/PageHeader/PageHeader.examples.stories.tsx
@@ -12,6 +12,7 @@ import {
ArrowRightIcon,
TriangleDownIcon,
CheckIcon,
+ CopyIcon,
} from '@primer/octicons-react'
import {PageHeader} from './PageHeader'
@@ -19,7 +20,6 @@ import {Hidden} from '../Hidden'
import {UnderlineNav} from '../UnderlineNav2'
import {ActionMenu} from '../ActionMenu'
import {ActionList} from '../ActionList'
-import VisuallyHidden from '../_VisuallyHidden'
const meta: Meta = {
title: 'Drafts/Components/PageHeader/Examples',
@@ -38,22 +38,36 @@ const setViewportParamToNarrow = {
export const Webhooks = () => (
-
- Repository settings
-
+
+
+
Webhooks
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Repository settings
+ context bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
@@ -67,36 +81,37 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
export const PullRequestPage = () => (
+
+
+ PageHeader: Address dom order issues (screen reader experience feedback from sign-off) longer longer longer
+ longer
+
+
Pull requests
-
-
- PageHeader component initial layout explorations extra long pull request title
-
-
-
-
-
-
-
-
-
- alert('Edit button action')}>Edit
- alert('Code button action')}>Code
-
-
-
-
+
+
+
+
+
+
+
+
+ alert('Edit button action')}>Edit
+ alert('Code button action')}>Code
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
Open
@@ -145,8 +160,15 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow
export const FilesPage = () => (
+
+ /
+
+ PageHeader.tsx
+
+
+
- Files
+ Files
@@ -209,60 +231,60 @@ export const FilesPage = () => (
-
+
react
src
PageHeader
-
- PageHeader.tsx
-
- PageHeader.tsx
-
-
-
-
-
-
-
-
- alert('Download')}>Download
-
-
- alert('Jump to line')}>
- Jump to line
- L
-
-
- alert('Copy path')}>
- Copy path
- ⌘⇧.
-
- alert('Copy permalink')}>
- Copy permalink
- ⌘⇧,
-
-
-
- alert('Show code folding buttons')}>
- Show code folding buttons
-
- alert('Wrap lines')}>Wrap lines
- alert('Center content')}>Center content
-
-
- alert('Delete file clicked')}>
- Delete file
- ⌘D
+
+
+
+
+
+
+
+
+
+
+
+
+
+ alert('Download')}>Download
+
+
+ alert('Jump to line')}>
+ Jump to line
+ L
+
+
+ alert('Copy path')}>
+ Copy path
+ ⌘⇧.
+
+ alert('Copy permalink')}>
+ Copy permalink
+ ⌘⇧,
+
+
+
+ alert('Show code folding buttons')}>
+ Show code folding buttons
-
-
-
-
-
+ alert('Wrap lines')}>Wrap lines
+ alert('Center content')}>Center content
+
+
+ alert('Delete file clicked')}>
+ Delete file
+ ⌘D
+
+
+
+
+
)
@@ -276,38 +298,38 @@ export const WithPageLayout = () => {
-
- Pull requests
-
PageHeader component initial layout explorations extra long pull request title
#1831
-
-
- {/* Pop up actions */}
-
-
-
-
-
-
- alert('Edit button action')}>Edit
- alert('Code button action')}>Code
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Pull requests
+
+
+
+ {/* Pop up actions */}
+
+
+
+
+
+
+ alert('Edit button action')}>Edit
+ alert('Code button action')}>Code
+
+
+
+
+
+
+
+
+
+
+
+
Open
@@ -354,6 +376,7 @@ export const WithPageLayout = () => {
Assignees
+
No one —
)
-export const WithComponentAsATitle = () => (
-
-
-
-
- react
- src
-
- PageHeader
-
-
- PageHeader.tsx
-
-
- PageHeader.tsx
-
-
-
-)
-
export const WithLeadingVisualHiddenOnRegularViewport = () => (
@@ -113,15 +93,15 @@ export const WithActions = () => (
Title
-
-
-
-
-
-
+
+
+
+
+
+
)
@@ -194,14 +174,14 @@ export const WithLeadingAndTrailingActions = () => (
-
-
-
Title
-
-
-
+
+
+
+
+
+
)
@@ -209,6 +189,9 @@ export const WithLeadingAndTrailingActions = () => (
export const WithParentLinkAndActionsOfContextArea = () => (
+
+ Title
+
Parent Link
@@ -219,9 +202,6 @@ export const WithParentLinkAndActionsOfContextArea = () => (
-
- Title
-
)
@@ -235,6 +215,9 @@ WithParentLinkAndActionsOfContextArea.parameters = {
export const WithContextBarAndActionsOfContextArea = () => (
+
+ Title
+
@@ -255,9 +238,6 @@ export const WithContextBarAndActionsOfContextArea = () => (
-
- Title
-
)
@@ -272,15 +252,15 @@ export const WithActionsThatHaveResponsiveContent = () => (
Webhooks
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
)
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index 794e30741d43..ab695e3bf85b 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -186,6 +186,21 @@ export default {
export const Playground: Story = args => (
+
+ {}
+
+ {args.Title}
+
+
+
+
+
{args.ParentLink}
@@ -211,37 +226,22 @@ export const Playground: Story = args => (
-
-
- {' '}
-
- {}
-
- {args.Title}
-
-
-
-
-
-
-
-
-
-
-
+
+ {' '}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
Open
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index 8fd6258c72d7..dfa069ae07b1 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -8,11 +8,20 @@ import Link, {LinkProps as BaseLinkProps} from '../Link'
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
-const REGION_ORDER = {
- ContextArea: 0,
- TitleArea: 1,
- Description: 2,
- Navigation: 3,
+const GRID_ROW_ORDER = {
+ ContextArea: 1,
+ LeadingAction: 2,
+ TitleArea: 2,
+ TrailingAction: 2,
+ Actions: 2,
+ Description: 3,
+ Navigation: 4,
+}
+
+const TITLE_AREA_REGION_ORDER = {
+ LeadingVisual: 0,
+ Title: 1,
+ TrailingVisual: 2,
}
const CONTEXT_AREA_REGION_ORDER = {
@@ -21,15 +30,6 @@ const CONTEXT_AREA_REGION_ORDER = {
ContextAreaActions: 2,
}
-const TITLE_AREA_REGION_ORDER = {
- LeadingAction: 0,
- LeadingVisual: 1,
- Title: 2,
- TrailingVisual: 3,
- TrailingAction: 4,
- Actions: 5,
-}
-
// Types that are shared between PageHeader children components
export type ChildrenPropTypes = {
hidden?: boolean | ResponsiveValue
@@ -58,13 +58,19 @@ export type PageHeaderProps = {
const Root: React.FC> = ({children, sx = {}, as = 'div'}) => {
const rootStyles = {
- display: 'flex',
- flexDirection: 'column',
+ display: 'grid',
+ gridTemplateRows: '1fr', // 4 rows
+
+ // gridAutoFlow: 'column',
+ // The current with the columsn now is taht it doesn't wrap the long pull request title.
+ gridTemplateColumns: 'max-content minmax(min-content, max-content) max-content 1fr', // 4 columns
+ // gridTemplateColumns: 'repeat(auto-fit, minmax(min-content, max-content))',
// TODO: We used hard-coded values for the spacing and font size in this component. Update them to use new design tokens when they are ready to use.
gap: '0.5rem',
+ alignItems: 'center',
}
return (
- (rootStyles, sx)}>
+ (rootStyles, sx)}>
{children}
)
@@ -80,17 +86,23 @@ const ContextArea: React.FC> = ({
sx = {},
}) => {
const contentNavStyles = {
+ gridRow: GRID_ROW_ORDER.ContextArea,
+ gridColumn: '1 / -1', // take the full row
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: '0.5rem',
- order: REGION_ORDER.ContextArea,
+
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'flex'
}),
}
- return (contentNavStyles, sx)}>{children}
+ return (
+ (contentNavStyles, sx)}>
+ {children}
+
+ )
}
type LinkProps = Pick<
React.AnchorHTMLAttributes & BaseLinkProps,
@@ -106,6 +118,7 @@ const ParentLink = React.forwardRef(
return (
<>
> = ({
}) => {
return (
(
{
display: 'flex',
@@ -168,6 +182,7 @@ const ContextAreaActions: React.FC> =
}) => {
return (
(
{
display: 'flex',
@@ -219,16 +234,20 @@ const TitleArea: React.FC> = ({
return (
(
{
+ gridRow: 2,
+ // gridAutoFlow: 'column',
+ // gridArea: 'titlearea',
display: 'flex',
gap: '0.5rem',
- order: REGION_ORDER.TitleArea,
+ // order: REGION_ORDER.TitleArea,
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'flex'
}),
flexDirection: 'row',
- alignItems: 'flex-start',
+ alignItems: 'center',
},
sx,
)}
@@ -250,10 +269,13 @@ const LeadingAction: React.FC> = ({
return (
(
{
+ gridRow: 2,
+ gridColumn: 1,
display: 'flex',
- order: TITLE_AREA_REGION_ORDER.LeadingAction,
+ // order: REGION_ORDER.LeadingAction,
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'flex'
}),
@@ -365,10 +387,12 @@ const TrailingAction: React.FC> = ({
return (
(
{
+ gridRow: 2,
display: 'flex',
- order: TITLE_AREA_REGION_ORDER.TrailingAction,
+ // order: REGION_ORDER.TrailingAction,
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'flex'
}),
@@ -387,10 +411,13 @@ const Actions: React.FC> = ({children
const {titleAreaHeight} = React.useContext(TitleAreaContext)
return (
(
{
+ gridRow: 2,
+ gridColumn: 4,
display: 'flex',
- order: TITLE_AREA_REGION_ORDER.Actions,
+ // order: REGION_ORDER.Actions,
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'flex'
}),
@@ -416,7 +443,8 @@ const Description: React.FC> = ({chil
sx={merge(
{
display: 'flex',
- order: REGION_ORDER.Description,
+ gridRow: 3,
+ // order: REGION_ORDER.Description,
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'flex'
}),
@@ -465,7 +493,8 @@ const Navigation: React.FC> = ({
sx={merge(
{
display: 'flex',
- order: REGION_ORDER.Navigation,
+ gridRow: 4,
+ // order: REGION_ORDER.Navigation,
...getBreakpointDeclarations(hidden, 'display', value => {
return value ? 'none' : 'block'
}),
@@ -483,11 +512,11 @@ export const PageHeader = Object.assign(Root, {
ParentLink,
ContextBar,
ContextAreaActions,
- TitleArea,
LeadingAction,
LeadingVisual,
Title,
TrailingVisual,
+ TitleArea,
TrailingAction,
Actions,
Description,