@primer/components 33.0.0-rc.b495ba4a → 33.1.0-rc.6856bcf5

package/docs/content/drafts/ActionMenu2.mdx

@@ -0,0 +1,302 @@
+---
+title: ActionMenu v2
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/ActionMenu
+storybook: '/react/storybook?path=/story/composite-components-actionmenu2'
+description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
+---
+
+import {Box, Avatar} from '@primer/components'
+import {ActionMenu, ActionList} from '@primer/components/drafts'
+import {Props} from '../../src/props'
+
+<br />
+
+<Box sx={{border: '1px solid', borderColor: 'border.default', borderRadius: 2, padding: 6}}>
+  <ActionMenu>
+    <ActionMenu.Button>Menu</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.Divider />
+        <ActionList.Item variant="danger">
+          Delete file
+          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+        </ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+</Box>
+
+<br />
+
+```js
+import {ActionMenu} from '@primer/components/drafts'
+```
+
+<br />
+
+## Examples
+
+### Minimal example
+
+`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `ActionMenu.Overlay`
+
+&nbsp;
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Menu</ActionMenu.Button>
+
+    <ActionMenu.Overlay>
+      <ActionList>
+        <ActionList.Item onSelect={event => console.log('New file')}>New file</ActionList.Item>
+        <ActionList.Item>Copy link</ActionList.Item>
+        <ActionList.Item>Edit file</ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Item variant="danger">Delete file</ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+```
+
+### With a custom anchor
+
+You can choose to have a different _anchor_ for the Menu dependending on the application's context.
+
+&nbsp;
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Anchor>
+      <ButtonInvisible aria-label="Open column options">
+        <KebabHorizontalIcon />
+      </ButtonInvisible>
+    </ActionMenu.Anchor>
+
+    <ActionMenu.Overlay>
+      <ActionList>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <PencilIcon />
+          </ActionList.LeadingVisual>
+          Rename
+        </ActionList.Item>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <ArchiveIcon />
+          </ActionList.LeadingVisual>
+          Archive all cards
+        </ActionList.Item>
+        <ActionList.Item variant="danger">
+          <ActionList.LeadingVisual>
+            <TrashIcon />
+          </ActionList.LeadingVisual>
+          Delete
+        </ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+```
+
+### With Groups
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Open column menu</ActionMenu.Button>
+
+    <ActionMenu.Overlay>
+      <ActionList showDividers>
+        <ActionList.Group title="Live query">
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <SearchIcon />
+            </ActionList.LeadingVisual>
+            repo:github/memex,github/github
+          </ActionList.Item>
+        </ActionList.Group>
+        <ActionList.Divider />
+        <ActionList.Group title="Layout" variant="subtle">
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <NoteIcon />
+            </ActionList.LeadingVisual>
+            Table
+            <ActionList.Description variant="block">
+              Information-dense table optimized for operations across teams
+            </ActionList.Description>
+          </ActionList.Item>
+          <ActionList.Item role="listitem">
+            <ActionList.LeadingVisual>
+              <ProjectIcon />
+            </ActionList.LeadingVisual>
+            Board
+            <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
+          </ActionList.Item>
+        </ActionList.Group>
+        <ActionList.Divider />
+        <ActionList.Group>
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <FilterIcon />
+            </ActionList.LeadingVisual>
+            Save sort and filters to current view
+          </ActionList.Item>
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <FilterIcon />
+            </ActionList.LeadingVisual>
+            Save sort and filters to new view
+          </ActionList.Item>
+        </ActionList.Group>
+        <ActionList.Divider />
+        <ActionList.Group>
+          <ActionList.Item>
+            <ActionList.LeadingVisual>
+              <GearIcon />
+            </ActionList.LeadingVisual>
+            View settings
+          </ActionList.Item>
+        </ActionList.Group>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+```
+
+### With External Anchor
+
+To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`:
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+const Example = () => {
+  const [open, setOpen] = React.useState(false)
+  const anchorRef = React.createRef()
+
+  return (
+    <>
+      <Button ref={anchorRef} onClick={() => setOpen(!open)}>
+        {open ? 'Close Menu' : 'Open Menu'}
+      </Button>
+
+      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={anchorRef}>
+        <ActionMenu.Overlay>
+          <ActionList>
+            <ActionList.Item>Copy link</ActionList.Item>
+            <ActionList.Item>Quote reply</ActionList.Item>
+            <ActionList.Item>Edit comment</ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item variant="danger">Delete file</ActionList.Item>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </>
+  )
+}
+
+render(<Example />)
+```
+
+### With Overlay Props
+
+To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`:
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+const handleEscape = () => alert('you hit escape!')
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Open Actions Menu</ActionMenu.Button>
+    <ActionMenu.Overlay width="medium" onEscape={handleEscape}>
+      <ActionList>
+        <ActionList.Item>
+          Open current Codespace
+          <ActionList.Description variant="block">
+            Your existing Codespace will be opened to its previous state, and you&apos;ll be asked to manually switch to
+            new-branch.
+          </ActionList.Description>
+          <ActionList.TrailingVisual>⌘O</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item>
+          Create new Codespace
+          <ActionList.Description variant="block">
+            Create a brand new Codespace with a fresh image and checkout this branch.
+          </ActionList.Description>
+          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+        </ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+```
+
+## Props / API reference
+
+### ActionMenu
+
+| Name         | Type                           | Default | Description                                                                                                              |
+| :----------- | :----------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
+| children\*   | `React.ReactElement[]`         |    -    | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`                              |
+| open         | `boolean`                      |    -    | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. |
+| onOpenChange | `(open: boolean) => void`      |    -    | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.         |
+| anchorRef    | `React.RefObject<HTMLElement>` |    -    | Optional. Useful for defining an external anchor                                                                         |
+
+### ActionMenu.Button
+
+| Type                                    | Default | Description                                                                                                          |
+| :-------------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------- |
+| [ButtonProps](/Buttons#component-props) |    -    | Optional. You can pass all of the props that you would pass to a [`Button`](/Buttons) component like `variant`, `sx` |
+
+### ActionMenu.Anchor
+
+| Name       | Type                 | Default | Description                       |
+| :--------- | :------------------- | :-----: | :-------------------------------- |
+| children\* | `React.ReactElement` |    -    | Required. Accepts a single child. |
+
+### ActionMenu.Overlay
+
+| Name                                     | Type                  |       Default       | Description                                                                                   |
+| :--------------------------------------- | :-------------------- | :-----------------: | :-------------------------------------------------------------------------------------------- |
+| children\*                               | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/drafts/ActionList2)                                    |
+| [OverlayProps](/Overlay#component-props) | -                     |          -          | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. |
+
+## Further reading
+
+[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list)
+
+## Related components
+
+- [ActionList](/drafts/ActionList2)
+- [DropdownMenu](/DropdownMenu)
+- [SelectPanel](/SelectPanel)

package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -24,7 +24,11 @@ import {
   LawIcon,
   StarIcon,
   AlertIcon,
-  ArrowRightIcon
+  ArrowRightIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
@@ -65,6 +69,10 @@ export default {
   StarIcon,
   AlertIcon,
   ArrowRightIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon,
   Dialog2,
   ConfirmationDialog,
   useConfirm,

package/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js

@@ -1,9 +1,22 @@
-import {Box} from '@primer/components'
+import {Box, Link} from '@primer/components'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
 import {ComponentChecklist} from '../../component-checklist'
 import {Props} from '../../props'
+import {PropsTable} from '../../props-table'
 
 export default {
   Box,
+  Link,
+  InlineCode,
   ComponentChecklist,
-  Props
+  Props,
+  PropsTable,
+  // HACK: MDX doesn't support rendering subcomponents with dot notation
+  //       so we need to alias them
+  PropsTableRow: PropsTable.Row,
+  PropsTableBasePropRows: PropsTable.BasePropRows,
+  PropsTablePassthroughPropsRow: PropsTable.PassthroughPropsRow,
+  PropsTableAsRow: PropsTable.AsRow,
+  PropsTableRefRow: PropsTable.RefRow,
+  PropsTableSxRow: PropsTable.SxRow
 }

package/docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -39,6 +39,8 @@
       url: /Autocomplete
     - title: Avatar
       url: /Avatar
+    - title: AvatarPair
+      url: /AvatarPair
     - title: AvatarStack
       url: /AvatarStack
     - title: Box
@@ -95,6 +97,8 @@
     #   url: /Portal
     - title: ProgressBar
       url: /ProgressBar
+    - title: Radio
+      url: /Radio
     - title: SelectMenu
       url: /SelectMenu
     - title: SideNav

package/docs/src/component-checklist.js

@@ -9,7 +9,9 @@ export function ComponentChecklist({items}) {
     <>
       <H3>Alpha</H3>
       <Checklist aria-describedby="alpha">
-        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
+        <Checklist.Item checked={items.propsDocumented}>
+          Component props are documented on <Link href="https://primer.style/react/">primer.style/react</Link>.
+        </Checklist.Item>
         <Checklist.Item checked={items.noUnnecessaryDeps}>
           Component does not have any unnecessary third-party dependencies.
         </Checklist.Item>
@@ -22,7 +24,13 @@ export function ComponentChecklist({items}) {
       <H3>Beta</H3>
       <Checklist aria-describedby="beta">
         <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
-        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
+        <Checklist.Item checked={items.usageExamplesDocumented}>
+          Common usage examples are documented on <Link href="https://primer.style/react/">primer.style/react</Link>.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasStorybookStories}>
+          Common usage examples are documented in <Link href="https://primer.style/react/storybook">storybook</Link>{' '}
+          stories.
+        </Checklist.Item>
         <Checklist.Item checked={items.designReviewed}>
           Component has been reviewed by a systems designer and any resulting issues have been addressed.
         </Checklist.Item>

package/docs/src/props-table.js

@@ -0,0 +1,165 @@
+import React from 'react'
+import {Box, Link, Label} from '@primer/components'
+import Table from '@primer/gatsby-theme-doctocat/src/components/table'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+
+function PropsTable({children}) {
+  return (
+    <Table>
+      <colgroup>
+        <col style={{width: '20%'}} />
+        <col style={{width: '30%'}} />
+        <col style={{width: '10%'}} />
+        <col style={{width: '40%'}} />
+      </colgroup>
+      <thead>
+        <tr>
+          <Box as="th" textAlign="left">
+            Name
+          </Box>
+          <Box as="th" textAlign="left">
+            Type
+          </Box>
+          <Box as="th" textAlign="left">
+            Default
+          </Box>
+          <Box as="th" textAlign="left">
+            Description
+          </Box>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </Table>
+  )
+}
+
+function Row({name, type, defaultValue, description, required, deprecated}) {
+  return (
+    <tr>
+      <Box as="td" fontFamily="mono" fontSize={1} sx={{whiteSpace: 'nowrap'}} verticalAlign="top">
+        {name}
+        {required ? (
+          <>
+            {` `}
+            <Label outline sx={{verticalAlign: 'middle', fontFamily: 'normal'}}>
+              Required
+            </Label>
+          </>
+        ) : null}
+        {deprecated ? (
+          <>
+            {` `}
+            <Label
+              outline
+              sx={{verticalAlign: 'middle', fontFamily: 'normal', color: 'danger.fg', borderColor: 'danger.emphasis'}}
+            >
+              Deprecated
+            </Label>
+          </>
+        ) : null}
+      </Box>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
+        <Box as="pre" fontFamily="inherit" fontSize="inherit" margin={0} sx={{whiteSpace: 'pre-wrap'}}>
+          {type}
+        </Box>
+      </Box>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
+        {defaultValue}
+      </Box>
+      <Box as="td" verticalAlign="top">
+        {description}
+      </Box>
+    </tr>
+  )
+}
+
+function BasePropRows({passthroughPropsLink, elementType, isPolymorphic, refType}) {
+  return (
+    <>
+      <SxRow />
+      {isPolymorphic && <AsRow defaultElementType={elementType} />}
+      <RefRow refType={refType} isPolymorphic={isPolymorphic} />
+      <PassthroughPropsRow
+        passthroughPropsLink={passthroughPropsLink}
+        elementName={elementType}
+        isPolymorphic={isPolymorphic}
+      />
+    </>
+  )
+}
+
+function PassthroughPropsRow({elementName, isPolymorphic, passthroughPropsLink}) {
+  return (
+    <tr>
+      <Box as="td" colSpan={4} fontSize={1} verticalAlign="top">
+        Additional props are passed to the <InlineCode>&lt;{elementName}&gt;</InlineCode> element. See{' '}
+        {passthroughPropsLink} for a list of props accepted by the <InlineCode>&lt;{elementName}&gt;</InlineCode>{' '}
+        element.
+        {isPolymorphic && (
+          <>
+            {' '}
+            If an <InlineCode>as</InlineCode> prop is specified, the accepted props will change accordingly.
+          </>
+        )}
+      </Box>
+    </tr>
+  )
+}
+
+function AsRow({defaultElementType}) {
+  return (
+    <Row
+      name="as"
+      defaultValue={`"${defaultElementType}"`}
+      type={
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L73">
+          React.ElementType
+        </Link>
+      }
+      description="The underlying element to render — either a HTML element name or a React component."
+    />
+  )
+}
+
+function RefRow({refType, isPolymorphic}) {
+  return (
+    <Row
+      name="ref"
+      type={`React.RefObject<${refType}>`}
+      description={
+        <>
+          A ref to the element rendered by this component.
+          {isPolymorphic && (
+            <>
+              {' '}
+              Because this component is polymorphic, the type will vary based on the value of the{' '}
+              <InlineCode>as</InlineCode> prop.
+            </>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function SxRow() {
+  return (
+    <Row
+      name="sx"
+      type={
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-system__css/index.d.ts#L407">
+          SystemStyleObject
+        </Link>
+      }
+      description={
+        <>
+          Style overrides to apply to the component. See also <Link href="/overriding-styles">overriding styles</Link>.
+        </>
+      }
+    />
+  )
+}
+
+Object.assign(PropsTable, {Row, BasePropRows, AsRow, RefRow, PassthroughPropsRow, SxRow})
+
+export {PropsTable}

package/docs/src/props.js

@@ -1,10 +1,9 @@
-import {Flash, Label} from '@primer/components'
+import {Flash} from '@primer/components'
 import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
 import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
-import Table from '@primer/gatsby-theme-doctocat/src/components/table'
 import {graphql, useStaticQuery} from 'gatsby'
 import React from 'react'
+import {PropsTable} from './props-table'
 
 /** Render prop documentation for the given component */
 export function Props({of}) {
@@ -44,31 +43,18 @@ export function Props({of}) {
     <>
       <H3>{component.name}</H3>
       {component.props.length > 0 ? (
-        <Table>
-          <thead>
-            <tr>
-              <th align="left">Prop</th>
-              <th align="left">Type</th>
-              <th align="left">Default</th>
-              <th align="left">Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {component.props.map(prop => (
-              <tr key={prop.name}>
-                <td style={{whiteSpace: 'nowrap'}}>
-                  <InlineCode>{prop.name}</InlineCode>{' '}
-                  {prop.required ? <Label style={{verticalAlign: 'text-top'}}>Required</Label> : null}
-                </td>
-                <td>
-                  <InlineCode>{prop.type}</InlineCode>
-                </td>
-                <td>{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : '–'}</td>
-                <td>{prop.description}</td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
+        <PropsTable>
+          {component.props.map(prop => (
+            <PropsTable.Row
+              key={prop.name}
+              required={prop.required}
+              name={prop.name}
+              defaultValue={prop.defaultValue}
+              type={prop.type}
+              description={prop.description}
+            />
+          ))}
+        </PropsTable>
       ) : (
         <Paragraph>No props</Paragraph>
       )}

package/lib/ActionList/Header.js

@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const StyledHeader = _styledComponents.default.div.withConfig({
   displayName: "Header__StyledHeader",
-  componentId: "qmofje-0"
+  componentId: "sc-qmofje-0"
 })(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.fg.muted'), ({
   variant
 }) => variant === 'filled' && (0, _styledComponents.css)(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.muted')), _sx.default);