examples/codesandbox/package.json

@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "@primer/react": "37.13.0",
+    "@primer/react": "37.14.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.18",

examples/nextjs/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.13.0",
+    "@primer/react": "37.14.0",
     "next": "^15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

examples/theming/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.14.0",
-    "@primer/react": "37.13.0",
+    "@primer/react": "37.14.0",
     "clsx": "^1.2.1",
     "next": "^14.2.15",
     "react": "^18.3.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @primer/react
 
+## 37.14.0
+
+### Minor Changes
+
+- [#5687](https://github.com/primer/react/pull/5687) [`2bbc5a0`](https://github.com/primer/react/commit/2bbc5a036bc5e57d25aa559e88b16a6063e27646) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Blankslate: Add support for button in `Blankslate.PrimaryAction`
+
+- [#5510](https://github.com/primer/react/pull/5510) [`37a91b5`](https://github.com/primer/react/commit/37a91b51569bc4be92c6994ec6fe433584328911) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove CSS modules feature flag from Header
+
+### Patch Changes
+
+- [#5712](https://github.com/primer/react/pull/5712) [`22508b7`](https://github.com/primer/react/commit/22508b7ceb10638d983c68a800d691aed812d724) Thanks [@jonrohan](https://github.com/jonrohan)! - bugfix(SelectPanel): Set border-top-color on selectpanel footer
+
+- [#5686](https://github.com/primer/react/pull/5686) [`64f183b`](https://github.com/primer/react/commit/64f183bb028cd1072af2c7e2892ad21bdadf882c) Thanks [@jonrohan](https://github.com/jonrohan)! - The `UnderlinePanels` component wasn't supporting passing in `className`. Adding to the prop list
+
+- [#5661](https://github.com/primer/react/pull/5661) [`1262f5a`](https://github.com/primer/react/commit/1262f5affa84330c917b964fa0cd8d907b398afc) Thanks [@TylerJDev](https://github.com/TylerJDev)! - SubNav: Adds `aria-current` to selected links
+
+- [#5562](https://github.com/primer/react/pull/5562) [`947b59d`](https://github.com/primer/react/commit/947b59d43079003f5be6eea60b7dc2025fb21a4e) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(SelectPanel): Correctly recalculate position on overflow
+
+- [#5655](https://github.com/primer/react/pull/5655) [`56baa0a`](https://github.com/primer/react/commit/56baa0a791ba8a714fec28e3794e471358ddfde3) Thanks [@hectahertz](https://github.com/hectahertz)! - Fix LinkButton types and stories
+
 ## 37.13.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.13.0",
+  "version": "37.14.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -90,7 +90,7 @@ export const CustomOverlayProps = () => {
     <Box sx={{display: 'flex', justifyContent: 'center'}}>
       <ActionMenu open={open} onOpenChange={setOpen}>
         <ActionMenu.Button>Menu</ActionMenu.Button>
-        <ActionMenu.Overlay width="large" align="center">
+        <ActionMenu.Overlay width="large" align="center" preventOverflow={false}>
           <ActionList>
             <ActionList.Item>Option 1</ActionList.Item>
             <ActionList.Item>Option 2</ActionList.Item>

packages/react/src/AnchoredOverlay/AnchoredOverlay.dev.stories.tsx

@@ -0,0 +1,110 @@
+import type {Meta} from '@storybook/react'
+import React, {useState} from 'react'
+
+import {Button} from '../Button'
+import {AnchoredOverlay} from '.'
+import {Stack} from '../Stack'
+import {Dialog, Spinner} from '..'
+
+const meta = {
+  title: 'Components/AnchoredOverlay/Dev',
+  component: AnchoredOverlay,
+} satisfies Meta<typeof AnchoredOverlay>
+
+export default meta
+
+export const RepositionAfterContentGrows = () => {
+  const [open, setOpen] = useState(false)
+
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 200px)'}}>
+      <div>
+        What to expect:
+        <ul>
+          <li>The anchored overlay should open below the anchor (default position)</li>
+          <li>After 2000ms, the amount of content in the overlay grows</li>
+          <li>the overlay should reposition itself above the anchor so that it stays inside the window</li>
+        </ul>
+      </div>
+      <AnchoredOverlay
+        renderAnchor={props => (
+          <Button {...props} sx={{width: 'fit-content'}}>
+            Button
+          </Button>
+        )}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => {
+          setOpen(false)
+          setLoading(true)
+        }}
+      >
+        {loading ? (
+          <>
+            <Spinner />
+            loading for 2000ms
+          </>
+        ) : (
+          <div style={{height: '300px'}}>content with 300px height</div>
+        )}
+      </AnchoredOverlay>
+    </Stack>
+  )
+}
+
+export const RepositionAfterContentGrowsWithinDialog = () => {
+  const [open, setOpen] = useState(false)
+
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Dialog onClose={() => {}}>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 300px)'}}>
+        <div>
+          What to expect:
+          <ul>
+            <li>The anchored overlay should open below the anchor (default position)</li>
+            <li>After 2000ms, the amount of content in the overlay grows</li>
+            <li>the overlay should reposition itself above the anchor so that it stays inside the window</li>
+          </ul>
+        </div>
+        <AnchoredOverlay
+          renderAnchor={props => (
+            <Button {...props} sx={{width: 'fit-content'}}>
+              Button
+            </Button>
+          )}
+          open={open}
+          onOpen={() => setOpen(true)}
+          onClose={() => {
+            setOpen(false)
+            setLoading(true)
+          }}
+        >
+          {loading ? (
+            <>
+              <Spinner />
+              loading for 2000ms
+            </>
+          ) : (
+            <div style={{height: '300px'}}>content with 300px height</div>
+          )}
+        </AnchoredOverlay>
+      </Stack>
+    </Dialog>
+  )
+}

packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json

@@ -147,6 +147,12 @@
       "required": false,
       "description": "",
       "defaultValue": ""
+    },    {
+      "name": "pinPosition",
+      "type": "boolean",
+      "required": false,
+      "description": "If true, the overlay will attempt to prevent position shifting when sitting at the top of the anchor.",
+      "defaultValue": "false"
     }
   ]
 }

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -89,6 +89,10 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
    * If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
    */
   preventOverflow?: boolean
+  /**
+   * If true, the overlay will attempt to prevent position shifting when sitting at the top of the anchor.
+   */
+  pinPosition?: boolean
 }
 
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
@@ -112,11 +116,12 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   overlayProps,
   focusTrapSettings,
   focusZoneSettings,
-  side = 'outside-bottom',
+  side = overlayProps?.['anchorSide'] || 'outside-bottom',
   align = 'start',
   alignmentOffset,
   anchorOffset,
   className,
+  pinPosition,
   preventOverflow = true,
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
@@ -155,6 +160,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
     {
       anchorElementRef: anchorRef,
       floatingElementRef: overlayRef,
+      pinPosition,
       side,
       align,
       alignmentOffset,

packages/react/src/Blankslate/Blankslate.docs.json

@@ -11,7 +11,10 @@
       "id": "experimental-components-blankslate-features--with-visual"
     },
     {
-      "id": "experimental-components-blankslate-features--with-primary-action"
+      "id": "experimental-components-blankslate-features--with-primary-action-as-link"
+    },
+    {
+      "id": "experimental-components-blankslate-features--with-primary-action-as-button"
     },
     {
       "id": "experimental-components-blankslate-features--with-secondary-action"
@@ -74,7 +77,8 @@
         {
           "name": "href",
           "type": "string",
-          "description": "Link to complete primary action"
+          "required": false,
+          "description": "Link to complete primary action. If defined, will render as an anchor instead of a button."
         }
       ]
     },

packages/react/src/Blankslate/Blankslate.features.stories.tsx

@@ -1,6 +1,7 @@
 import {BookIcon} from '@primer/octicons-react'
 import React from 'react'
 import {Blankslate} from '../Blankslate'
+import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog'
 
 export default {
   title: 'Experimental/Components/Blankslate/Features',
@@ -24,7 +25,7 @@ export const WithVisual = () => (
   </Blankslate>
 )
 
-export const WithPrimaryAction = () => (
+export const WithPrimaryActionAsLink = () => (
   <Blankslate>
     <Blankslate.Visual>
       <BookIcon size="medium" />
@@ -35,6 +36,35 @@ export const WithPrimaryAction = () => (
   </Blankslate>
 )
 
+export const WithPrimaryActionAsButton = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const onDialogClose = React.useCallback(() => setIsOpen(false), [])
+
+  return (
+    <>
+      <Blankslate>
+        <Blankslate.Visual>
+          <BookIcon size="medium" />
+        </Blankslate.Visual>
+        <Blankslate.Heading>Blankslate heading</Blankslate.Heading>
+        <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
+        <Blankslate.PrimaryAction onClick={() => setIsOpen(true)}>Primary action</Blankslate.PrimaryAction>
+      </Blankslate>
+      {isOpen ? (
+        <ConfirmationDialog
+          title="Delete universe?"
+          onClose={onDialogClose}
+          confirmButtonContent="Delete it!"
+          confirmButtonType="danger"
+        >
+          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
+          Earth.
+        </ConfirmationDialog>
+      ) : null}
+    </>
+  )
+}
+
 export const WithSecondaryAction = () => (
   <Blankslate>
     <Blankslate.Visual>

packages/react/src/Blankslate/Blankslate.tsx

@@ -58,14 +58,19 @@ function Description({children}: DescriptionProps) {
   return <p className={clsx('Blankslate-Description', classes.Description)}>{children}</p>
 }
 
-export type PrimaryActionProps = React.PropsWithChildren<{
-  href: string
-}>
-
-function PrimaryAction({children, href}: PrimaryActionProps) {
+export type PrimaryActionProps =
+  | (React.PropsWithChildren<{
+      href?: never
+    }> &
+      React.ComponentPropsWithoutRef<'button'>)
+  | React.PropsWithChildren<{
+      href: string
+    }>
+
+function PrimaryAction({children, href, ...props}: PrimaryActionProps) {
   return (
     <div className={clsx('Blankslate-Action', classes.Action)}>
-      <Button as="a" href={href} variant="primary">
+      <Button {...props} as={href ? 'a' : 'button'} href={href} variant="primary">
         {children}
       </Button>
     </div>

packages/react/src/Button/ButtonBase.tsx

@@ -1,4 +1,3 @@
-import type {ComponentPropsWithRef} from 'react'
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Box from '../Box'
@@ -320,6 +319,4 @@ const ButtonBase = forwardRef(
   },
 ) as PolymorphicForwardRefComponent<'button' | 'a', ButtonProps>
 
-export type ButtonBaseProps = ComponentPropsWithRef<typeof ButtonBase>
-
 export {ButtonBase}