Merge remote-tracking branch 'origin/main' into pagelayout-padding-prop

primer · Aug 2, 2022 · 1add45a · 1add45a
2 parents 16e6249 + 3756a1e
commit 1add45a
Show file tree

Hide file tree

Showing 17 changed files with 772 additions and 314 deletions.
diff --git a/.changeset/actionmenu-remove-focus-trap.md b/.changeset/actionmenu-remove-focus-trap.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu: Remove focus trap to enable Tab and Shift+Tab behavior and fix initial focus on click
diff --git a/.changeset/fair-tips-travel.md b/.changeset/fair-tips-travel.md
@@ -0,0 +1,19 @@
+---
+"@primer/react": minor
+---
+
+* Updated the `position` prop in `PageLayout.Pane` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174.
+* Deprecated the `positionWhenNarrow` prop in favor of the new responsive prop API
+
+**Before**
+
+```
+position="start"
+positionWhenNarrow="end"
+```
+
+**After**
+
+```
+position={{regular: 'start', narrow: 'end'}}
+```
diff --git a/.changeset/lucky-pianos-yell.md b/.changeset/lucky-pianos-yell.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Set ConfirmationDialog initial focus based on the confirmationButtonVariant. When `danger` autoFocus the cancel button, otherwise autoFocus the confirmation button
diff --git a/.changeset/spotty-parents-cheat.md b/.changeset/spotty-parents-cheat.md
@@ -0,0 +1,19 @@
+---
+"@primer/react": minor
+---
+
+* Updated the `divider` prop in `PageLayout.Header`, `PageLayout.Pane`, and `PageLayout.Footer` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174.
+* Deprecated the `dividerWhenNarrow` prop in favor of the new responsive prop API
+
+**Before**
+
+```
+divider="line"
+dividerWhenNarrow="filled"
+```
+
+**After**
+
+```
+divider={{regular: 'line', narrow: 'filled'}}
+```
diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx
@@ -210,7 +210,10 @@ import {NavList} from '@primer/react'
 
 function NavItem({href, children}) {
   const router = useRouter()
-  const isCurrent = router.asPath === href
+  const isCurrent =
+    typeof href === 'string'
+      ? router.asPath === href
+      : router.pathname === href.pathname;
   return (
     <Link href={href} passHref>
       <NavList.Item aria-current={isCurrent ? 'page' : false}>{children}</NavList.Item>
@@ -224,6 +227,14 @@ function App() {
       <NavItem href="/">Dashboard</NavItem>
       <NavItem href="/pulls">Pull requests</NavItem>
       <NavItem href="/issues">Issues</NavItem>
+      <NavItem
+        href={{
+          pathname: '/[owner]/[repo]',
+          query: { owner, repo },
+        }}
+      >
+        Summary
+      </NavItem>
     </NavList>
   )
 }

diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
@@ -48,7 +48,8 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
-  <PageLayout.Pane divider="line">
+  {/* You can change the divider based on the viewport width */}
+  <PageLayout.Pane divider={{narrow: 'line'}}>
     <Placeholder label="Pane" height={120} />
   </PageLayout.Pane>
   <PageLayout.Footer divider="line">
@@ -199,25 +200,39 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
   <PropsTableRow
     name="divider"
     type={`| 'none'
-| 'line'`}
+| 'line'
+| {
+    narrow?:
+      | 'none'
+      | 'line' 
+      | 'filled'
+    regular?:
+      | 'none'
+      | 'line'
+    wide?:
+      | 'none'
+      | 'line'
+  }`}
     defaultValue="'none'"
   />
   <PropsTableRow
     name="dividerWhenNarrow"
+    deprecated
     type={`| 'inherit'
 | 'none'
 | 'line'
 | 'filled'`}
     defaultValue="'inherit'"
+    description="Use the divider prop with a responsive value instead."
   />
   <PropsTableRow
     name="hidden"
     type={`| boolean
 | {
-  narrow?: boolean
-  regular?: boolean
-  wide?: boolean
-}`}
+    narrow?: boolean
+    regular?: boolean
+    wide?: boolean
+  }`}
     defaultValue="false"
     description="Whether the header is hidden."
   />
@@ -248,10 +263,10 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     name="hidden"
     type={`| boolean
 | {
-  narrow?: boolean
-  regular?: boolean
-  wide?: boolean
-}`}
+    narrow?: boolean
+    regular?: boolean
+    wide?: boolean
+  }`}
     defaultValue="false"
     description="Whether the content is hidden."
   />
@@ -264,15 +279,28 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
   <PropsTableRow
     name="position"
     type={`| 'start'
-| 'end'`}
+| 'end'
+| {
+    narrow?:
+      | 'start'
+      | 'end'
+    regular?:
+      | 'start'
+      | 'end'
+    wide?:
+      | 'start'
+      | 'end'
+  }`}
     defaultValue="'start'"
   />
   <PropsTableRow
     name="positionWhenNarrow"
+    deprecated
     type={`| 'inherit'
 | 'start'
 | 'end'`}
     defaultValue="'inherit'"
+    description="Use the position prop with a responsive value instead."
   />
   <PropsTableRow
     name="width"
@@ -293,25 +321,39 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
   <PropsTableRow
     name="divider"
     type={`| 'none'
-| 'line'`}
+| 'line'
+| {
+    narrow?:
+      | 'none'
+      | 'line' 
+      | 'filled'
+    regular?:
+      | 'none'
+      | 'line'
+    wide?:
+      | 'none'
+      | 'line'
+  }`}
     defaultValue="'none'"
   />
   <PropsTableRow
     name="dividerWhenNarrow"
+    deprecated
     type={`| 'inherit'
 | 'none'
 | 'line'
 | 'filled'`}
     defaultValue="'inherit'"
+    description="Use the divider prop with a responsive value instead."
   />
   <PropsTableRow
     name="hidden"
     type={`| boolean
 | {
-  narrow?: boolean
-  regular?: boolean
-  wide?: boolean
-}`}
+    narrow?: boolean
+    regular?: boolean
+    wide?: boolean
+  }`}
     defaultValue="false"
     description="Whether the pane is hidden."
   />
@@ -332,25 +374,39 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
   <PropsTableRow
     name="divider"
     type={`| 'none'
-| 'line'`}
+| 'line'
+| {
+    narrow?:
+      | 'none'
+      | 'line' 
+      | 'filled'
+    regular?:
+      | 'none'
+      | 'line'
+    wide?:
+      | 'none'
+      | 'line'
+  }`}
     defaultValue="'none'"
   />
   <PropsTableRow
     name="dividerWhenNarrow"
+    deprecated
     type={`| 'inherit'
 | 'none'
 | 'line'
 | 'filled'`}
     defaultValue="'inherit'"
+    description="Use the divider prop with a responsive value instead."
   />
   <PropsTableRow
     name="hidden"
     type={`| boolean
 | {
-  narrow?: boolean
-  regular?: boolean
-  wide?: boolean
-}`}
+    narrow?: boolean
+    regular?: boolean
+    wide?: boolean
+  }`}
     defaultValue="false"
     description="Whether the footer is hidden."
   />

diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
@@ -3,17 +3,19 @@ import {useSSRSafeId} from '@react-aria/ssr'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import {AnchoredOverlay, AnchoredOverlayProps} from './AnchoredOverlay'
 import {OverlayProps} from './Overlay'
-import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuInitialFocus, useMnemonics} from './hooks'
+import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from './hooks'
 import {Divider} from './ActionList/Divider'
 import {ActionListContainerContext} from './ActionList/ActionListContainerContext'
 import {Button, ButtonProps} from './Button'
 import {MandateProps} from './utils/types'
 import {SxProp, merge} from './sx'
 
-type MenuContextProps = Pick<
+export type MenuContextProps = Pick<
   AnchoredOverlayProps,
-  'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose' | 'anchorId'
->
+  'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'anchorId'
+> & {
+  onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
+}
 const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
 
 export type ActionMenuProps = {
@@ -111,20 +113,20 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children,
   >
 
   const containerRef = React.createRef<HTMLDivElement>()
-  const {openWithFocus} = useMenuInitialFocus(open, onOpen, containerRef)
-  useMnemonics(open, containerRef)
+  useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
 
   return (
     <AnchoredOverlay
       anchorRef={anchorRef}
       renderAnchor={renderAnchor}
       anchorId={anchorId}
       open={open}
-      onOpen={openWithFocus}
+      onOpen={onOpen}
       onClose={onClose}
       align={align}
       overlayProps={overlayProps}
       focusZoneSettings={{focusOutBehavior: 'wrap'}}
+      focusTrapSettings={{disabled: true}}
     >
       <div ref={containerRef}>
         <ActionListContainerContext.Provider

diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
@@ -116,15 +116,17 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
   const onConfirmButtonClick = useCallback(() => {
     onClose('confirm')
   }, [onClose])
+  const isConfirmationDangerous = confirmButtonType === 'danger'
   const cancelButton: DialogButtonProps = {
     content: cancelButtonContent,
-    onClick: onCancelButtonClick
+    onClick: onCancelButtonClick,
+    autoFocus: isConfirmationDangerous
   }
   const confirmButton: DialogButtonProps = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
     onClick: onConfirmButtonClick,
-    autoFocus: true
+    autoFocus: !isConfirmationDangerous
   }
   const footerButtons = [cancelButton, confirmButton]
   return (