Skip to content

Commit

Permalink
use grid to to keep the element visually in the same order but update…
Browse files Browse the repository at this point in the history 
… dom order
  • Loading branch information
@broccolinisoup
broccolinisoup committed Oct 19, 2023
1 parent ef3fce1 commit 0a78cb3
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 142 deletions.
137 changes: 81 additions & 56 deletions src/PageHeader/PageHeader.examples.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import {
ArrowRightIcon,
TriangleDownIcon,
CheckIcon,
CopyIcon,
} from '@primer/octicons-react'

import {PageHeader} from './PageHeader'
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',
Expand All @@ -38,10 +38,28 @@ const setViewportParamToNarrow = {
export const Webhooks = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.Title as="h2">Webhooks</PageHeader.Title>
<PageHeader.TitleArea>
<PageHeader.LeadingVisual>
<GitBranchIcon />
</PageHeader.LeadingVisual>
<PageHeader.Title as="h2">Webhooks</PageHeader.Title>
<PageHeader.TrailingVisual>
<GitBranchIcon />
</PageHeader.TrailingVisual>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
<PageHeader.ContextBar>context bar</PageHeader.ContextBar>
<PageHeader.ContextAreaActions>
<Button>Context action</Button>
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.LeadingAction>
<IconButton aria-label="More webhooks actions" icon={KebabHorizontalIcon} />
</PageHeader.LeadingAction>
<PageHeader.TrailingAction>
<IconButton aria-label="More webhooks actions" icon={KebabHorizontalIcon} />
</PageHeader.TrailingAction>
<PageHeader.Actions>
<Hidden when={['narrow']}>
<Button variant="primary">New webhook</Button>
Expand All @@ -63,36 +81,37 @@ WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
export const PullRequestPage = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title as="h1" sx={{fontSize: 5}}>
PageHeader: Address dom order issues (screen reader experience feedback from sign-off) longer longer longer
longer
</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.Title as="h1">
PageHeader component initial layout explorations extra long pull request title
</PageHeader.Title>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>

<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
</PageHeader.TitleArea>
<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
<PageHeader.Description>
<StateLabel status="pullOpened">Open</StateLabel>
<Hidden when={['narrow']}>
Expand Down Expand Up @@ -142,7 +161,10 @@ export const FilesPage = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title as="h1">PageHeader.tsx</PageHeader.Title>
<Text sx={{color: 'rgb(101, 109, 118)'}}>/</Text>
<PageHeader.Title as="h1" sx={{fontSize: 1}}>
PageHeader.tsx
</PageHeader.Title>
</PageHeader.TitleArea>

<PageHeader.ContextArea>
Expand Down Expand Up @@ -218,8 +240,11 @@ export const FilesPage = () => (
</Breadcrumbs.Item>
</Breadcrumbs>
</PageHeader.LeadingAction>
<PageHeader.TrailingAction hidden={false}>
<IconButton size="small" variant="invisible" aria-label="Copy to clipboard" icon={CopyIcon} />
</PageHeader.TrailingAction>

<PageHeader.Actions hidden={{narrow: true}}>
<PageHeader.Actions hidden={false}>
<ActionMenu>
<ActionMenu.Anchor>
<IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
Expand Down Expand Up @@ -273,38 +298,38 @@ export const WithPageLayout = () => {
<PageLayout>
<PageLayout.Header>
<PageHeader>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.Title as="h1">
PageHeader component initial layout explorations extra long pull request title &nbsp;
<Text sx={{color: 'fg.muted', fontWeight: 'light'}}>#1831</Text>
</PageHeader.Title>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
{/* Pop up actions */}
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>

<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
</PageHeader.ContextArea>
<PageHeader.Actions>
<Hidden when={['regular', 'wide']}>
{/* Pop up actions */}
<ActionMenu>
<ActionMenu.Anchor>
<IconButton aria-label="More pull request actions" icon={KebabHorizontalIcon} />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={() => alert('Edit button action')}>Edit</ActionList.Item>
<ActionList.Item onSelect={() => alert('Code button action')}>Code</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</Hidden>

<Hidden when={['narrow']}>
<Box sx={{display: 'flex'}}>
<Button>Edit</Button>
<Button leadingIcon={CodeIcon}>Code</Button>
</Box>
</Hidden>
</PageHeader.Actions>
<PageHeader.Description>
<StateLabel status="pullOpened">Open</StateLabel>
<Hidden when={['narrow']}>
Expand Down
58 changes: 19 additions & 39 deletions src/PageHeader/PageHeader.features.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,26 +66,6 @@ export const WithLeadingAndTrailingVisuals = () => (
</Box>
)

export const WithComponentAsATitle = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea>
<Breadcrumbs>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main">react</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src">src</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/tree/main/src/PageHeader">
PageHeader
</Breadcrumbs.Item>
<Breadcrumbs.Item href="https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx">
PageHeader.tsx
</Breadcrumbs.Item>
</Breadcrumbs>
<VisuallyHidden as="h2">PageHeader.tsx</VisuallyHidden>
</PageHeader.TitleArea>
</PageHeader>
</Box>
)

export const WithLeadingVisualHiddenOnRegularViewport = () => (
<Box sx={{padding: 3}}>
<PageHeader>
Expand Down Expand Up @@ -113,15 +93,15 @@ export const WithActions = () => (
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title>Title</PageHeader.Title>
<PageHeader.Actions>
<IconButton aria-label="Workflows" icon={WorkflowIcon} />
<IconButton aria-label="Insights" icon={GraphIcon} />
<Button variant="primary" trailingIcon={TriangleDownIcon}>
Add Item
</Button>
<IconButton aria-label="Settings" icon={GearIcon} />
</PageHeader.Actions>
</PageHeader.TitleArea>
<PageHeader.Actions>
<IconButton aria-label="Workflows" icon={WorkflowIcon} />
<IconButton aria-label="Insights" icon={GraphIcon} />
<Button variant="primary" trailingIcon={TriangleDownIcon}>
Add Item
</Button>
<IconButton aria-label="Settings" icon={GearIcon} />
</PageHeader.Actions>
</PageHeader>
</Box>
)
Expand Down Expand Up @@ -209,6 +189,9 @@ export const WithLeadingAndTrailingActions = () => (
export const WithParentLinkAndActionsOfContextArea = () => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title>Title</PageHeader.Title>
</PageHeader.TitleArea>
<PageHeader.ContextArea>
<PageHeader.ParentLink href="http://github.com">Parent Link</PageHeader.ParentLink>

Expand All @@ -219,9 +202,6 @@ export const WithParentLinkAndActionsOfContextArea = () => (
<IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.TitleArea>
<PageHeader.Title>Title</PageHeader.Title>
</PageHeader.TitleArea>
</PageHeader>
</Box>
)
Expand Down Expand Up @@ -272,15 +252,15 @@ export const WithActionsThatHaveResponsiveContent = () => (
<PageHeader>
<PageHeader.TitleArea>
<PageHeader.Title as="h2">Webhooks</PageHeader.Title>
<PageHeader.Actions>
<Hidden when={['narrow']}>
<Button variant="primary">New webhook</Button>
</Hidden>
<Hidden when={['regular', 'wide']}>
<Button variant="primary">New</Button>
</Hidden>
</PageHeader.Actions>
</PageHeader.TitleArea>
<PageHeader.Actions>
<Hidden when={['narrow']}>
<Button variant="primary">New webhook</Button>
</Hidden>
<Hidden when={['regular', 'wide']}>
<Button variant="primary">New</Button>
</Hidden>
</PageHeader.Actions>
</PageHeader>
</Box>
)
Expand Down
60 changes: 30 additions & 30 deletions src/PageHeader/PageHeader.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,21 @@ export default {
export const Playground: Story = args => (
<Box sx={{padding: 3}}>
<PageHeader>
<PageHeader.TitleArea
variant={{
narrow: args['Title.variant'],
regular: args['Title.variant'],
wide: args['Title.variant'],
}}
>
<PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
<PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
{args.Title}
</PageHeader.Title>
<PageHeader.TrailingVisual hidden={!args.hasTrailingVisual}>
<Label>Beta</Label>
</PageHeader.TrailingVisual>
</PageHeader.TitleArea>
<PageHeader.ContextArea hidden={!args.hasContextArea}>
<PageHeader.ParentLink href="http://github.com" hidden={!args.hasParentLink}>
{args.ParentLink}
Expand All @@ -211,37 +226,22 @@ export const Playground: Story = args => (
<IconButton size="small" aria-label="More" icon={KebabHorizontalIcon} />
</PageHeader.ContextAreaActions>
</PageHeader.ContextArea>
<PageHeader.TitleArea
variant={{
narrow: args['Title.variant'],
regular: args['Title.variant'],
wide: args['Title.variant'],
}}
>
<PageHeader.LeadingAction hidden={!args.hasLeadingAction}>
<IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />{' '}
</PageHeader.LeadingAction>
<PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
<PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
{args.Title}
</PageHeader.Title>
<PageHeader.TrailingVisual hidden={!args.hasTrailingVisual}>
<Label>Beta</Label>
</PageHeader.TrailingVisual>
<PageHeader.TrailingAction hidden={!args.hasTrailingAction}>
<IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
</PageHeader.TrailingAction>
<PageHeader.Actions hidden={!args.hasActions}>
<Hidden when={['narrow']}>
<Button variant="primary">New Branch</Button>
</Hidden>
<PageHeader.LeadingAction hidden={!args.hasLeadingAction}>
<IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />{' '}
</PageHeader.LeadingAction>
<PageHeader.TrailingAction hidden={!args.hasTrailingAction}>
<IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
</PageHeader.TrailingAction>
<PageHeader.Actions hidden={!args.hasActions}>
<Hidden when={['narrow']}>
<Button variant="primary">New Branch</Button>
</Hidden>

<Hidden when={['regular', 'wide', 'narrow']}>
<Button variant="primary">New</Button>
</Hidden>
<IconButton aria-label="More" icon={KebabHorizontalIcon} />
</PageHeader.Actions>
</PageHeader.TitleArea>
<Hidden when={['regular', 'wide', 'narrow']}>
<Button variant="primary">New</Button>
</Hidden>
<IconButton aria-label="More" icon={KebabHorizontalIcon} />
</PageHeader.Actions>
<PageHeader.Description hidden={!args.hasDescription}>
<StateLabel status="pullOpened">Open</StateLabel>
<Hidden when={['narrow']}>
Expand Down
Loading

0 comments on commit 0a78cb3

Please sign in to comment.