Merge 0bd22ee into 4ecbe1a

Author: broccolinisoup

.changeset/clever-schools-shave.md

@@ -673,4 +673,38 @@ test.describe('PageHeader', () => {
       })
     }
   })
+
+  test.describe('Large Variant with Multiline Title', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Large Variant with Multiline Title.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Files-Page-dark-colorblind-linux.png

@@ -0,0 +1,45 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {Button, IconButton, Box} from '..'
+import Label from '../Label'
+import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'
+
+import {PageHeader} from './PageHeader'
+
+const meta: Meta<typeof PageHeader> = {
+  title: 'Drafts/Components/PageHeader/DevOnly',
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true},
+  },
+}
+
+export default meta
+
+export const LargeVariantWithMultilineTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.LeadingAction>
+        <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
+      </PageHeader.LeadingAction>
+      <PageHeader.TitleArea variant="large">
+        <PageHeader.LeadingVisual>
+          <GitBranchIcon />
+        </PageHeader.LeadingVisual>
+        <PageHeader.Title>
+          Title long title some extra loooong looong words here some extra loooong looong words here some extra loooong
+          looong words here some extra loooong looong words here some extra loooong looong words here
+        </PageHeader.Title>
+        <PageHeader.TrailingVisual>
+          <Label>Beta</Label>
+        </PageHeader.TrailingVisual>
+      </PageHeader.TitleArea>
+      <PageHeader.TrailingAction>
+        <IconButton aria-label="Expand sidebar" icon={SidebarExpandIcon} variant="invisible" />
+      </PageHeader.TrailingAction>
+      <PageHeader.Actions>
+        <Button variant="primary">Add Item</Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  </Box>
+)