Merge branch 'main' into francinelucca/select-panel-overflow

.changeset/fifty-deers-applaud.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+The `UnderlinePanels` component wasn't supporting passing in `className`. Adding to the prop list

.changeset/khaki-pillows-change.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SubNav: Adds `aria-current` to selected links

.changeset/plenty-dragons-argue.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Blankslate: Add support for button in `Blankslate.PrimaryAction`

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.12.0",
+    "@primer/react": "37.13.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.12.0",
+    "@primer/react": "37.13.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.12.0",
+    "@primer/react": "37.13.0",
     "clsx": "^1.2.1",
     "next": "^14.2.15",
     "react": "^18.3.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @primer/react
 
+## 37.13.0
+
+### Minor Changes
+
+- [#5679](https://github.com/primer/react/pull/5679) [`dbcb8f7`](https://github.com/primer/react/commit/dbcb8f7bba145e6463e14823a352e829ffcb4c9d) Thanks [@khiga8](https://github.com/khiga8)! - feat: Introduce Tooltip to SegmentedControlIconButton
+
+### Patch Changes
+
+- [#5636](https://github.com/primer/react/pull/5636) [`c2165af`](https://github.com/primer/react/commit/c2165af0786e416d0893482fa2ad2b4dbb0dce61) Thanks [@ktravers](https://github.com/ktravers)! - Update useOpenAndCloseFocus hook to apply return focus when preventFocusOnOpen prop is given
+
+- [#5662](https://github.com/primer/react/pull/5662) [`613cf0c`](https://github.com/primer/react/commit/613cf0cc81ee5d65a3045d04f197e2a1921a8745) Thanks [@kendallgassner](https://github.com/kendallgassner)! - Autocomplete: Use aria-live to announce "no selectable options".
+
+- [#5669](https://github.com/primer/react/pull/5669) [`b2bc006`](https://github.com/primer/react/commit/b2bc0069f4c25ca87ffa140ffbcc985c500129a0) Thanks [@jonrohan](https://github.com/jonrohan)! - Move FormControl css modules feature flag from team to staff
+
+- [#5628](https://github.com/primer/react/pull/5628) [`621c878`](https://github.com/primer/react/commit/621c878a3f4dd15e9336041c48be330e74738030) Thanks [@hectahertz](https://github.com/hectahertz)! - Update the Dialog stress test story to go fullscreen on narrow screens
+
+- [#5667](https://github.com/primer/react/pull/5667) [`10436f5`](https://github.com/primer/react/commit/10436f55cce2797c07b09ed6fe96845c6cb8eda5) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Replaced raw values for duration and easing with primitives
+
+- [#4481](https://github.com/primer/react/pull/4481) [`6e7da1e`](https://github.com/primer/react/commit/6e7da1eaa48420bdf32ed20eccda041991a533ea) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Allows `ActionMenu` and `SelectPanel` items to remain focusable when `disabled`
+
+- [#5683](https://github.com/primer/react/pull/5683) [`8bb78e1`](https://github.com/primer/react/commit/8bb78e18ce18badfe1c2e285b123dfbf96c8c5c3) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove the CSS modules feature flag from the Hidden component
+
 ## 37.12.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.12.0",
+  "version": "37.13.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/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/Overlay/Overlay.docs.json

@@ -124,7 +124,7 @@
       "name": "preventOverflow",
       "type": "boolean",
       "defaultValue": "true",
-      "description": "Determines if the Overlay width should be adjusted responsively if `width` is set to either `auto`, `medium` or lower and there is not enough space to display the Overlay. If `preventOverflow` is set to `false`, the Overlay will be displayed at the maximum width that fits within the viewport."
+      "description": "Determines if the Overlay width should be adjusted responsively if `width` is set to either `auto`, `medium` or lower and there is not enough space to display the Overlay. \nIf `preventOverflow` is set to `false`, the Overlay will be displayed at the maximum width that fits within the viewport."
     },
     {
       "name": "role",

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

@@ -2,13 +2,54 @@ import React from 'react'
 import RelativeTime from './RelativeTime'
 import Link from '../Link'
 import {Tooltip} from '../TooltipV2'
+import {Button} from '../Button'
+import {Stack} from '../Stack'
 
 export default {
   title: 'Components/RelativeTime/Examples',
   component: RelativeTime,
 }
 
-export const NoTitleAttribute = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+export const DynamicRelativeTime = () => {
+  const [time, setTime] = React.useState(false)
+  return (
+    <Stack>
+      <div>
+        <Button onClick={() => setTime(!time)} aria-describedby="relative-time">
+          Show {time ? 'short' : 'exact'} date
+        </Button>
+      </div>
+      <div>
+        <RelativeTime
+          id="relative-time"
+          date={new Date('2020-01-01T00:00:00Z')}
+          minute={time ? '2-digit' : undefined}
+          hour={time ? 'numeric' : undefined}
+          day={time ? '2-digit' : undefined}
+          month={time ? 'short' : undefined}
+          year={time ? 'numeric' : undefined}
+          timeZoneName={time ? 'short' : undefined}
+          prefix=""
+          noTitle
+        />
+      </div>
+    </Stack>
+  )
+}
+
+export const LongDate = () => (
+  <RelativeTime
+    date={new Date('2020-01-01T00:00:00Z')}
+    minute="2-digit"
+    hour="numeric"
+    day="2-digit"
+    month="short"
+    year="numeric"
+    timeZoneName="short"
+    prefix=""
+    noTitle
+  />
+)
 
 export const LinkWithTooltip = () => (
   <Tooltip text={new Date('2020-01-01T00:00:00Z').toString()}>

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

@@ -132,20 +132,20 @@ const meta: Meta = {
 
 export const MicroFormat: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} format="micro" />
+  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} format="micro" />
 }
 MicroFormat.args = {tense: 'past'}
 MicroFormat.argTypes = {format: {control: false}}
 
 export const RecentTime: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime {...rest} date={new Date()} />
+  return <RelativeTime noTitle={true} {...rest} date={new Date()} />
 }
 RecentTime.argTypes = {date: {control: false}}
 
 export const CountDownTimer: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime {...rest} />
+  return <RelativeTime noTitle={true} {...rest} />
 }
 CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
 CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}

packages/react/src/RelativeTime/RelativeTime.stories.tsx

@@ -19,7 +19,7 @@ export const Default: StoryFn = () => <RelativeTime date={new Date('2020-01-01T0
 
 export const Playground: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} />
+  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} />
 }
 
 Playground.args = {

packages/react/src/SubNav/SubNav.tsx

@@ -156,6 +156,7 @@ const SubNavLink = React.forwardRef<HTMLElement, StyledSubNavLinkProps>(function
       ref={forwardRef}
       className={clsx(className, enabled && styles.Link)}
       data-selected={rest.selected}
+      aria-current={rest.selected}
       {...rest}
     >
       {children}

packages/react/src/__tests__/SubNav.test.tsx

@@ -65,4 +65,20 @@ describe('SubNav', () => {
     expect(getByTestId('action')).toBeInTheDocument()
     expect(getByTestId('action').parentElement).toHaveClass('SubNav-actions')
   })
+
+  it('sets aria-current on the selected child', () => {
+    const {getByTestId} = HTMLRender(
+      <SubNav>
+        <SubNav.Link to="/foo" data-testid="foo" selected>
+          Foo
+        </SubNav.Link>
+        <SubNav.Link to="/bar" data-testid="bar">
+          Bar
+        </SubNav.Link>
+      </SubNav>,
+    )
+
+    expect(getByTestId('foo')).toHaveAttribute('aria-current', 'true')
+    expect(getByTestId('bar')).not.toHaveAttribute('aria-current')
+  })
 })

packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap

@@ -52,6 +52,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 }
 
 <a
+  aria-current={true}
   className="c0 SubNav-item selected"
   data-selected={true}
   selected={true}