Merge branch 'main' into 3420-prcanchoredoverlay-example-overlay-has-…

…fixed-width

.changeset/odd-singers-hammer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update Blankslate description text to always be centered

.changeset/sixty-onions-share.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+fix: hover background in ActionList.Item

.changeset/tender-dodos-walk.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Treevieew):do not add aria-describedby attribute when empty leading/trailing visual

.changeset/thirty-worms-accept.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move ButtonGroup css module feature flag to staff

examples/app-router/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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.2.1",
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

examples/consumer-test/package.json

@@ -9,7 +9,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.11",
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "^5.3.11",

examples/theming/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.9.0",
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "clsx": "^1.2.1",
     "next": "^14.2.10",
     "react": "^18.3.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @primer/react
 
+## 37.2.0
+
+### Minor Changes
+
+- [#5168](https://github.com/primer/react/pull/5168) [`b9749d4`](https://github.com/primer/react/commit/b9749d4efccf17b4aa669231a57df55333497ca2) Thanks [@TylerJDev](https://github.com/TylerJDev)! - TreeView: Adds indication of no nodes in a tree item, allows for `aria-expanded even if the item is empty.
+
+- [#5202](https://github.com/primer/react/pull/5202) [`293c574`](https://github.com/primer/react/commit/293c574a25d49bb52a2f5c17e4c54b1b1b598ddc) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - Update `SubNav` component to use CSS modules behind the feature flag primer_react_css_modules_team
+
+### Patch Changes
+
+- [#5225](https://github.com/primer/react/pull/5225) [`e732591`](https://github.com/primer/react/commit/e732591e939e5a86dc5ce2ce2da25388177b6a54) Thanks [@jonrohan](https://github.com/jonrohan)! - chore(Banner): Move Banner CSS module flag from staff to ga
+
+- [#5177](https://github.com/primer/react/pull/5177) [`26b54d8`](https://github.com/primer/react/commit/26b54d8a58e83e50127b5c04ac26ec953a89c108) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Allow primitives dep to be if version 9 OR 10
+
 ## 37.1.0
 
 ### Minor Changes

packages/react/package.json

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

packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -43,6 +43,14 @@ export const Default = () => (
   </ActionBar>
 )
 
+export const TextLabels = () => (
+  <ActionBar aria-label="Toolbar">
+    <Button>Edit</Button>
+    <Button>Duplicate</Button>
+    <Button>Export to CSV</Button>
+  </ActionBar>
+)
+
 export const SmallActionBar = () => (
   <ActionBar size="small" aria-label="Toolbar">
     <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>

packages/react/src/ActionList/Item.tsx

@@ -147,7 +147,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     const hoverStyles = {
       '@media (hover: hover) and (pointer: fine)': {
-        ':hover:not([aria-disabled]):not([data-inactive])': {
+        '&:hover:not([aria-disabled]):not([data-inactive])': {
           backgroundColor: `actionListItem.${variant}.hoverBg`,
           color: getVariantStyles(variant, disabled, inactive).hoverColor,
           boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`,
@@ -157,7 +157,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
           border: `2 solid`,
           boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`,
         },
-        ':active:not([aria-disabled]):not([data-inactive])': {
+        '&:active:not([aria-disabled]):not([data-inactive])': {
           backgroundColor: `actionListItem.${variant}.activeBg`,
           color: getVariantStyles(variant, disabled, inactive).hoverColor,
         },

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

@@ -233,6 +233,64 @@ export const ShortcutMenu = () => {
   )
 }
 
+export const ContextMenu = () => {
+  const ListItemWithContextMenu = ({children}: {children: string}) => {
+    const handleContextMenu: React.MouseEventHandler<HTMLLIElement> = event => {
+      event.preventDefault()
+      setOpen(true)
+    }
+
+    const [open, setOpen] = React.useState(false)
+    const triggerRef = React.useRef<HTMLLIElement>(null)
+
+    return (
+      // We need to add an aria-label for improving support for more assistive technologies. For example: VoiceOver might not detect the `name` without `aria-label`
+      // Since this has a custom context menu, it's ok to add a tabIndex
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      <li ref={triggerRef} onContextMenu={handleContextMenu} tabIndex={0} aria-label={children}>
+        {children}
+        <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
+          <ActionMenu.Button sx={{visibility: 'hidden', height: 0}}>Anchor</ActionMenu.Button>
+          <ActionMenu.Overlay>
+            <ActionList>
+              <ActionList.Item>
+                Copy link
+                <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Item>
+                Quote reply
+                <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Item>
+                Edit comment
+                <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.LinkItem href="#">View file</ActionList.LinkItem>
+              <ActionList.Divider />
+              <ActionList.Item variant="danger">
+                Delete file
+                <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+              </ActionList.Item>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </li>
+    )
+  }
+
+  return (
+    <>
+      <div>Right click the list items below to see the context menu</div>
+
+      <ul>
+        <ListItemWithContextMenu>List item one</ListItemWithContextMenu>
+        <ListItemWithContextMenu>List item two</ListItemWithContextMenu>
+        <ListItemWithContextMenu>List item three</ListItemWithContextMenu>
+      </ul>
+    </>
+  )
+}
+
 export const CustomAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>

packages/react/src/Banner/Banner.tsx

@@ -88,7 +88,7 @@ const labels: Record<BannerVariant, string> = {
   warning: 'Warning',
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
 export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner(
   {

packages/react/src/Blankslate/Blankslate.module.css

@@ -31,6 +31,7 @@
 .Description {
   margin: 0;
   margin-bottom: var(--base-size-8);
+  text-align: center;
 }
 
 .Heading {

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -9,7 +9,7 @@ import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
 
 const StyledButtonGroup = toggleStyledComponent(
-  'primer_react_css_modules_team',
+  'primer_react_css_modules_staff',
   'div',
   styled.div`
     display: inline-flex;
@@ -78,7 +78,7 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
   {children, className, ...rest},
   forwardRef,
 ) {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
   return (
     <StyledButtonGroup
       ref={forwardRef}

packages/react/src/TreeView/TreeView.test.tsx

@@ -189,6 +189,19 @@ describe('Markup', () => {
     expect(noDescription).toHaveAccessibleDescription(' ')
   })
 
+  it('should not have aria-describedby when no leading or trailing visual', () => {
+    const {getByLabelText} = renderWithTheme(
+      <TreeView aria-label="Test tree">
+        <TreeView.Item id="item-1">Item 1</TreeView.Item>
+        <TreeView.Item id="item-2">Item 2</TreeView.Item>
+      </TreeView>,
+    )
+
+    const noDescription = getByLabelText(/Item 1/)
+    expect(noDescription).not.toHaveAccessibleDescription()
+    expect(noDescription).not.toHaveAttribute('aria-describedby')
+  })
+
   it('should include `aria-expanded` when a SubTree contains content', async () => {
     const user = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,

packages/react/src/TreeView/TreeView.tsx

@@ -458,6 +458,11 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
       [onSelect, setIsExpandedWithCache, toggle],
     )
 
+    const ariaDescribedByIds = [
+      slots.leadingVisual ? leadingVisualId : null,
+      slots.trailingVisual ? trailingVisualId : null,
+    ].filter(Boolean)
+
     return (
       <ItemContext.Provider
         value={{
@@ -480,7 +485,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           role="treeitem"
           aria-label={ariaLabel}
           aria-labelledby={ariaLabel ? undefined : ariaLabelledby || labelId}
-          aria-describedby={`${leadingVisualId} ${trailingVisualId}`}
+          aria-describedby={ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined}
           aria-level={level}
           aria-expanded={(isSubTreeEmpty && (!isExpanded || !hasSubTree)) || expanded === null ? undefined : isExpanded}
           aria-current={isCurrentItem ? 'true' : undefined}