Merge branch 'japf/resizable-pane' of github.com:primer/react into japf/resizable-pane

colebemis · colebemis · commit 925fa0edb19c · 2022-10-31T16:01:59.000-07:00
diff --git a/.changeset/angry-wombats-burn.md b/.changeset/angry-wombats-burn.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add maxWidth to container of PageLayout.{Pane, Content}
diff --git a/.changeset/gold-rabbits-allow.md b/.changeset/gold-rabbits-allow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ConfirmationDialog: Remove header landmark to improve accessibility 
diff --git a/.changeset/rude-bats-appear.md b/.changeset/rude-bats-appear.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+fixes colors for done and sponsors label
diff --git a/.changeset/silly-coins-doubt.md b/.changeset/silly-coins-doubt.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Address scenario in useLinkInterception where onLinkClick was not being called when the DOM was updated outside of React
diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx
@@ -21,7 +21,7 @@ source: https://github.com/primer/react/blob/main/src/CounterLabel.tsx
 <PropsTable>
   <PropsTableRow
     name="scheme"
-    type="''primary' | 'secondary'"
+    type="'primary' | 'secondary'"
     description="Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme"
   />
 </PropsTable>
diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
@@ -40,7 +40,7 @@ export interface ConfirmationDialogProps {
   confirmButtonType?: 'normal' | 'primary' | 'danger'
 }
 
-const StyledConfirmationHeader = styled.header`
+const StyledConfirmationHeader = styled.div`
   padding: ${get('space.2')};
   display: flex;
   flex-direction: row;
diff --git a/src/Label.tsx b/src/Label.tsx
@@ -56,12 +56,12 @@ export const variants: Record<LabelColorOptions, BetterSystemStyleObject> = {
     color: 'danger.fg'
   },
   done: {
-    borderColor: 'done.fg',
-    color: 'done.emphasis'
+    borderColor: 'done.emphasis',
+    color: 'done.fg'
   },
   sponsors: {
-    borderColor: 'sponsors.fg',
-    color: 'sponsors.emphasis'
+    borderColor: 'sponsors.emphasis',
+    color: 'sponsors.fg'
   }
 }
 
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
@@ -102,7 +102,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
               return (
                 <>
                   {slots.Header}
-                  <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap'}}>{children}</Box>
+                  <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap', maxWidth: '100%'}}>{children}</Box>
                   {slots.Footer}
                 </>
               )
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`PageLayout renders condensed layout 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
@@ -275,6 +276,7 @@ exports[`PageLayout renders default layout 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
@@ -567,6 +569,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
@@ -859,6 +862,7 @@ exports[`PageLayout renders with dividers 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
@@ -770,9 +770,14 @@ describe('MarkdownEditor', () => {
       it('forces links to open in a new tab', async () => {
         // eslint-disable-next-line github/unescaped-html-literal
         const html = '<a href="https://example.com">Link</a>'
+        const user = userEvent.setup()
+        const windowOpenSpy = jest.spyOn(window, 'open')
+        windowOpenSpy.mockImplementation(jest.fn())
         const {getPreview} = await render(<UncontrolledEditor onRenderPreview={async () => html} viewMode="preview" />)
         const link = await waitFor(() => within(getPreview()).getByText('Link'))
-        expect(link).toHaveAttribute('target', '_blank')
+
+        await user.click(link)
+        expect(windowOpenSpy).toHaveBeenCalledWith('https://example.com/', '_blank')
       })
     })
   })
diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.test.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.test.tsx
@@ -92,13 +92,18 @@ text after list`
   })
 
   describe('link interception', () => {
-    it('makes all links open in a new tab when enabled', () => {
+    it('makes all links open in a new tab when enabled', async () => {
+      const user = userEvent.setup()
+      const windowOpenSpy = jest.spyOn(window, 'open')
+      windowOpenSpy.mockImplementation(jest.fn())
+
       const {getByRole} = render(
         // eslint-disable-next-line github/unescaped-html-literal
         <MarkdownViewer dangerousRenderedHTML={{__html: '<a href="https://example.com">link</a>'}} openLinksInNewTab />
       )
       const link = getByRole('link') as HTMLAnchorElement
-      expect(link.target).toBe('_blank')
+      await user.click(link)
+      expect(windowOpenSpy).toHaveBeenCalledWith('https://example.com/', '_blank')
     })
 
     it('calls onLinkClick on link click', async () => {
diff --git a/src/drafts/MarkdownViewer/_useLinkInterception.ts b/src/drafts/MarkdownViewer/_useLinkInterception.ts
@@ -10,24 +10,22 @@ type UseLinkInterceptionSettings = {
  * Updates all links in the container to open a new tab and call `onLinkClick` on click.
  */
 export const useLinkInterception = ({htmlContainer, onLinkClick, openLinksInNewTab}: UseLinkInterceptionSettings) => {
-  useEffect(function transformLinks() {
-    const links = htmlContainer.querySelectorAll('a')
+  useEffect(() => {
+    const clickHandler = (event: MouseEvent) => {
+      const link = (event.target as Element).closest('a')
+      if (!link) return
 
-    const cleanupFns = Array.from(links).map(link => {
-      const clickHandler = onLinkClick
-      if (clickHandler) link.addEventListener('click', clickHandler)
+      onLinkClick?.(event)
 
-      const prevTarget = link.target
-      if (openLinksInNewTab) link.setAttribute('target', '_blank')
-
-      return () => {
-        if (clickHandler) link.removeEventListener('click', clickHandler)
-        link.setAttribute('target', prevTarget)
+      if (!event.defaultPrevented && openLinksInNewTab && link.href) {
+        window.open(link.href, '_blank')
       }
-    })
+    }
+
+    htmlContainer.addEventListener('click', clickHandler)
 
     return () => {
-      for (const fn of cleanupFns) fn()
+      htmlContainer.removeEventListener('click', clickHandler)
     }
-  })
+  }, [htmlContainer, onLinkClick, openLinksInNewTab])
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react': patch
 +---
++
 +Add maxWidth to container of PageLayout.{Pane, Content}
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export interface ConfirmationDialogProps {`
`40`	`40`	`confirmButtonType?: 'normal' \| 'primary' \| 'danger'`
`41`	`41`	`}`
`42`	`42`
`43`		-const StyledConfirmationHeader = styled.header`
	`43`	+const StyledConfirmationHeader = styled.div`
`44`	`44`	`padding: ${get('space.2')};`
`45`	`45`	`display: flex;`
`46`	`46`	`flex-direction: row;`
Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({`
`102`	`102`	`return (`
`103`	`103`	`<>`
`104`	`104`	`{slots.Header}`
`105`		`- <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap'}}>{children}</Box>`
	`105`	`+ <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap', maxWidth: '100%'}}>{children}</Box>`
`106`	`106`	`{slots.Footer}`
`107`	`107`	`</>`
`108`	`108`	`)`
Original file line number	Diff line number	Diff line change
@@ -29,6 +29,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
`29`	`29`	`-webkit-flex-wrap: wrap;`
`30`	`30`	`-ms-flex-wrap: wrap;`
`31`	`31`	`flex-wrap: wrap;`
	`32`	`+ max-width: 100%;`
`32`	`33`	`}`
`33`	`34`
`34`	`35`	`.c6 {`