Merge branch 'main' into add-aria-expanded-state-take-two

primer · May 7, 2024 · afab486 · afab486
2 parents 2c5ea1d + e39fcf8
commit afab486
Show file tree

Hide file tree

Showing 19 changed files with 419 additions and 68 deletions.
diff --git a/.changeset/tall-forks-bathe.md b/.changeset/tall-forks-bathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Dialog: Use dynamic view height/width. This allows available visible space to be properly computed on iOS devices.
diff --git a/.changeset/wild-students-bow.md b/.changeset/wild-students-bow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Adds support for nested submenus to `ActionMenu`
diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -14,7 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "5.x",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.1.0",

diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
@@ -25,7 +25,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "styled-components": "5.x",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
     "vite": "^5.2.6"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "prettier": "3.0.3",
     "rimraf": "5.0.5",
     "size-limit": "11.0.2",
-    "typescript": "5.3.3"
+    "typescript": "5.4.5"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.9.6"

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -1,3 +1,7 @@
+'use strict'
+
+const {DEPLOY_ENV = 'development'} = process.env
+
 /**
  * @type {import('@storybook/core-common').StorybookConfig}
  */
@@ -53,4 +57,16 @@ module.exports = {
   typescript: {
     reactDocgen: 'react-docgen',
   },
+  previewHead: head => {
+    if (DEPLOY_ENV === 'development') {
+      return head
+    }
+    return `${head}\n<meta name="ha-url" content="https://collector.githubapp.com/primer/collect">`
+  },
+  previewBody: body => {
+    if (DEPLOY_ENV === 'development') {
+      return body
+    }
+    return `${body}\n<script src="https://analytics.githubassets.com/hydro-marketing.min.js"></script>`
+  },
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -216,8 +216,8 @@
     "terser": "5.27.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.7.0",
-    "typescript": "5.3.3",
-    "typescript-plugin-css-modules": "5.0.2",
+    "typescript": "5.4.5",
+    "typescript-plugin-css-modules": "5.1.0",
     "unist-util-find": "3.0.0",
     "unist-util-find-before": "4.0.0",
     "unist-util-flat-filter": "2.0.0",

diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json
@@ -256,7 +256,8 @@
           "name": "title",
           "type": "string",
           "defaultValue": "",
-          "description": "Title of the group."
+          "description": "Please use `ActionList.GroupHeading` instead.",
+          "deprecated": true
         },
         {
           "name": "auxiliaryText",

diff --git a/packages/react/src/ActionList/ActionListContainerContext.tsx b/packages/react/src/ActionList/ActionListContainerContext.tsx
@@ -14,6 +14,7 @@ type ContextProps = {
   // eslint-disable-next-line @typescript-eslint/ban-types
   afterSelect?: Function
   enableFocusZone?: boolean
+  defaultTrailingVisual?: React.ReactElement
 }
 
 export const ActionListContainerContext = React.createContext<ContextProps>({})
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -74,14 +74,22 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       inlineDescription: [Description, props => props.variant !== 'block'],
     })
 
+    const {container, afterSelect, selectionAttribute, defaultTrailingVisual} =
+      React.useContext(ActionListContainerContext)
+
+    // Be sure to avoid rendering the container unless there is a default
+    const wrappedDefaultTrailingVisual = defaultTrailingVisual ? (
+      <TrailingVisual>{defaultTrailingVisual}</TrailingVisual>
+    ) : null
+    const trailingVisual = slots.trailingVisual ?? wrappedDefaultTrailingVisual
+
     const {
       variant: listVariant,
       role: listRole,
       showDividers,
       selectionVariant: listSelectionVariant,
     } = React.useContext(ListContext)
     const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
-    const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
     const inactive = Boolean(inactiveText)
     const showInactiveIndicator = inactive && container === undefined
 
@@ -308,7 +316,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
               sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
             >
               <ConditionalWrapper
-                if={Boolean(slots.trailingVisual) || (showInactiveIndicator && !slots.leadingVisual)}
+                if={Boolean(trailingVisual) || (showInactiveIndicator && !slots.leadingVisual)}
                 sx={{display: 'flex', flexGrow: 1}}
               >
                 <ConditionalWrapper
@@ -339,7 +347,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                   ) : (
                     // If it's not inactive, or it has a leading visual that can be replaced,
                     // just render the trailing visual slot.
-                    slots.trailingVisual
+                    trailingVisual
                   )
                 }
               </ConditionalWrapper>

diff --git a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx
@@ -1,6 +1,15 @@
 import React from 'react'
 import {ActionMenu, ActionList, Box} from '../'
-import {WorkflowIcon, ArchiveIcon, GearIcon, CopyIcon, RocketIcon, CommentIcon, BookIcon} from '@primer/octicons-react'
+import {
+  WorkflowIcon,
+  ArchiveIcon,
+  GearIcon,
+  CopyIcon,
+  RocketIcon,
+  CommentIcon,
+  BookIcon,
+  SparkleFillIcon,
+} from '@primer/octicons-react'
 
 export default {
   title: 'Components/ActionMenu/Features',
@@ -181,3 +190,45 @@ export const InactiveItems = () => (
     </ActionMenu.Overlay>
   </ActionMenu>
 )
+
+export const Submenus = () => (
+  <ActionMenu>
+    <ActionMenu.Button>Edit</ActionMenu.Button>
+    <ActionMenu.Overlay>
+      <ActionList>
+        <ActionList.Item>Cut</ActionList.Item>
+        <ActionList.Item>Copy</ActionList.Item>
+        <ActionList.Item>Paste</ActionList.Item>
+        <ActionMenu>
+          <ActionMenu.Anchor>
+            <ActionList.Item>
+              <ActionList.LeadingVisual>
+                <SparkleFillIcon />
+              </ActionList.LeadingVisual>
+              Paste special
+            </ActionList.Item>
+          </ActionMenu.Anchor>
+          <ActionMenu.Overlay>
+            <ActionList>
+              <ActionList.Item>Paste plain text</ActionList.Item>
+              <ActionList.Item>Paste formulas</ActionList.Item>
+              <ActionList.Item>Paste with formatting</ActionList.Item>
+              <ActionMenu>
+                <ActionMenu.Anchor>
+                  <ActionList.Item>Paste from</ActionList.Item>
+                </ActionMenu.Anchor>
+                <ActionMenu.Overlay>
+                  <ActionList>
+                    <ActionList.Item>Current clipboard</ActionList.Item>
+                    <ActionList.Item>History</ActionList.Item>
+                    <ActionList.Item>Another device</ActionList.Item>
+                  </ActionList>
+                </ActionMenu.Overlay>
+              </ActionMenu>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)