Merge branch 'main' into tylerjdev/replace-deprecated-buttons-dialog

Author: broccolinisoup

.changeset/empty-starfishes-relate.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Tooltip2: Do not wrap the tooltip span and its trigger in a div

.github/workflows/deploy_preview.yml

@@ -1,40 +1,61 @@
-name: Deploy
+name: Deploy Preview
 on:
   pull_request:
 
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-  deployments: write
-  statuses: write
-  checks: write
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
+  build:
+    if: ${{ github.repository == 'primer/react' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install docs dependencies
+        run: npm ci --legacy-peer-deps
+        working-directory: docs
+      - name: Build docs preview
+        run: npm run build:docs:preview
+      - uses: actions/upload-pages-artifact@v2
+        with:
+          name: github-pages
+          path: docs/public
+
   deploy-preview:
-    # if the source repository for pull request is a fork, we don't want to run this workflow,
-    # we run deploy_preview_forks.yml which uses pull_request_target instead.
-    # see https://github.com/primer/react/pull/2207 for details
-    if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }} # source repository for pull_request
-    name: Preview
-    uses: primer/.github/.github/workflows/deploy_preview.yml@0cec9b9914f358846163f2428663b58da41028c9
+    if: ${{ github.repository == 'primer/react' }}
+    needs: build
     permissions:
-      contents: read
       pages: write
       id-token: write
-    secrets:
-      gh_token: ${{ secrets.GITHUB_TOKEN }}
-    with:
-      node_version: 18
-      install: npm ci && cd docs && npm ci --legacy-peer-deps && cd ..
-      build: npm run build:docs:preview
-      output_dir: docs/public
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    outputs:
+      deployment_url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3
+        with:
+          preview: true
 
   deploy-storybook:
-    if: ${{ github.repository == 'primer/react' }}
     name: Preview Storybook
-    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'primer/react' }}
     needs: deploy-preview
+    permissions:
+      deployments: write
+    runs-on: ubuntu-latest
     steps:
       - uses: chrnorm/[email protected]
         name: Create GitHub deployment for storybook

src/ActionList/Item.tsx

@@ -34,6 +34,7 @@ const InactiveIndicator: React.FC<{
         padding: 0,
         font: 'inherit',
         cursor: 'pointer',
+        display: 'flex',
       }}
       aria-labelledby={labelId}
     >

src/drafts/Tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import React, {Children, useEffect, useRef, useState} from 'react'
-import Box from '../../Box'
 import sx, {SxProp} from '../../sx'
 import {useId, useProvidedRefOrCreate} from '../../hooks'
 import {invariant} from '../../utils/invariant'
@@ -139,6 +138,7 @@ export type TriggerPropsType = {
   onBlur?: React.FocusEventHandler
   onFocus?: React.FocusEventHandler
   onMouseEnter?: React.MouseEventHandler
+  onMouseLeave?: React.MouseEventHandler
   ref?: React.RefObject<HTMLElement>
 }
 
@@ -268,7 +268,7 @@ export const Tooltip = React.forwardRef(
 
     return (
       <TooltipContext.Provider value={{tooltipId}}>
-        <Box onMouseLeave={() => closeTooltip()}>
+        <>
           {React.isValidElement(child) &&
             React.cloneElement(child as React.ReactElement<TriggerPropsType>, {
               ref: triggerRef,
@@ -288,6 +288,10 @@ export const Tooltip = React.forwardRef(
                 openTooltip()
                 child.props.onMouseEnter?.(event)
               },
+              onMouseLeave: (event: React.MouseEvent) => {
+                closeTooltip()
+                child.props.onMouseLeave?.(event)
+              },
             })}
           <StyledTooltip
             ref={tooltipElRef}
@@ -298,10 +302,13 @@ export const Tooltip = React.forwardRef(
             // stop AT from announcing the tooltip twice when it is a label type because it will be announced with "aria-labelledby"
             aria-hidden={type === 'label' ? true : undefined}
             id={`tooltip-${tooltipId}`}
+            // mouse leave and enter on the tooltip itself is needed to keep the tooltip open when the mouse is over the tooltip
+            onMouseEnter={openTooltip}
+            onMouseLeave={closeTooltip}
           >
             {text}
           </StyledTooltip>
-        </Box>
+        </>
       </TooltipContext.Provider>
     )
   },