pair with mike

primer · Jun 1, 2023 · 1a17796 · 1a17796
1 parent da177ce
commit 1a17796
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git a/src/PageHeader/PageHeader.examples.stories.tsx b/src/PageHeader/PageHeader.examples.stories.tsx
@@ -145,29 +145,19 @@ PullRequestPageOnNarrowViewport.parameters = setViewportParamToNarrow
 export const FilesPage = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
-      <PageHeader.ContextArea>
-        <PageHeader.ParentLink>Files</PageHeader.ParentLink>
-        <PageHeader.ContextAreaActions>
-          <ActionMenu>
-            <ActionMenu.Anchor>
-              <Button size="small" leadingIcon={GitBranchIcon} trailingIcon={TriangleDownIcon}>
-                Main
-              </Button>
-            </ActionMenu.Anchor>
-            <ActionMenu.Overlay width="medium">
-              <ActionList>
-                <ActionList.Item onSelect={() => alert('Main')}>
-                  <ActionList.LeadingVisual>
-                    <CheckIcon />
-                  </ActionList.LeadingVisual>
-                  main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
-                </ActionList.Item>
-                <ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
-                <ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
-              </ActionList>
-            </ActionMenu.Overlay>
-          </ActionMenu>
-
+      <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.Actions hidden={{narrow: true}}>
           <ActionMenu>
             <ActionMenu.Anchor>
               <IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
@@ -207,21 +197,31 @@ export const FilesPage = () => (
               </ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>
-        </PageHeader.ContextAreaActions>
-      </PageHeader.ContextArea>
-      <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.Actions hidden={{narrow: true}}>
+        </PageHeader.Actions>
+      </PageHeader.TitleArea>
+      <PageHeader.ContextArea>
+        <PageHeader.ParentLink>Files</PageHeader.ParentLink>
+        <PageHeader.ContextAreaActions>
+          <ActionMenu>
+            <ActionMenu.Anchor>
+              <Button size="small" leadingIcon={GitBranchIcon} trailingIcon={TriangleDownIcon}>
+                Main
+              </Button>
+            </ActionMenu.Anchor>
+            <ActionMenu.Overlay width="medium">
+              <ActionList>
+                <ActionList.Item onSelect={() => alert('Main')}>
+                  <ActionList.LeadingVisual>
+                    <CheckIcon />
+                  </ActionList.LeadingVisual>
+                  main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>
+                </ActionList.Item>
+                <ActionList.Item onSelect={() => alert('Branch 1')}>branch-1</ActionList.Item>
+                <ActionList.Item onSelect={() => alert('Branch 2')}>branch-2</ActionList.Item>
+              </ActionList>
+            </ActionMenu.Overlay>
+          </ActionMenu>
+
           <ActionMenu>
             <ActionMenu.Anchor>
               <IconButton size="small" aria-label="More file actions" icon={KebabHorizontalIcon} />
@@ -261,8 +261,8 @@ export const FilesPage = () => (
               </ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>
-        </PageHeader.Actions>
-      </PageHeader.TitleArea>
+        </PageHeader.ContextAreaActions>
+      </PageHeader.ContextArea>
     </PageHeader>
   </Box>
 )

diff --git a/src/PageHeader/PageHeader.features.stories.tsx b/src/PageHeader/PageHeader.features.stories.tsx
@@ -235,6 +235,9 @@ WithParentLinkAndActionsOfContextArea.parameters = {
 export const WithContextBarAndActionsOfContextArea = () => (
   <Box sx={{padding: 3}}>
     <PageHeader>
+      <PageHeader.TitleArea>
+        <PageHeader.Title>Title</PageHeader.Title>
+      </PageHeader.TitleArea>
       <PageHeader.ContextArea>
         <PageHeader.ContextBar>
           <Breadcrumbs>
@@ -255,9 +258,6 @@ export const WithContextBarAndActionsOfContextArea = () => (
           <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
         </PageHeader.ContextAreaActions>
       </PageHeader.ContextArea>
-      <PageHeader.TitleArea>
-        <PageHeader.Title>Title</PageHeader.Title>
-      </PageHeader.TitleArea>
     </PageHeader>
   </Box>
 )