ActionList Composable API (#1517)

New ActionList component, bundled in @primer/components/unreleased

Co-authored-by: Jonathan Fuchs <jfuchs@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>

.changeset/tall-moles-smoke.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': minor
+---
+
+Add experimental `ActionList` with composable API

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

@@ -1,4 +1,6 @@
+import React from 'react'
 import * as primerComponents from '@primer/components'
+import * as unreleased from '@primer/components/unreleased'
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
 import {
   CheckIcon,
@@ -18,6 +20,10 @@ import {
   GearIcon,
   TypographyIcon,
   VersionsIcon,
+  LinkIcon,
+  LawIcon,
+  StarIcon,
+  AlertIcon,
   ArrowRightIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
@@ -26,9 +32,16 @@ import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
 import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
 import {SelectPanel} from '../../../../src/SelectPanel/SelectPanel'
 
+const ReactRouterLink = ({to, ...props}) => {
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  return <a href={to} {...props} />
+}
+
 export default {
   ...doctocatComponents,
   ...primerComponents,
+  unreleased,
+  ReactRouterLink,
   State,
   CheckIcon,
   SearchIcon,
@@ -47,6 +60,10 @@ export default {
   GearIcon,
   TypographyIcon,
   VersionsIcon,
+  LinkIcon,
+  LawIcon,
+  StarIcon,
+  AlertIcon,
   ArrowRightIcon,
   Dialog2,
   ConfirmationDialog,

package.json

@@ -44,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -124,6 +124,8 @@
     "lodash.isobject": "3.0.2",
     "prettier": "2.3.2",
     "react": "17.0.2",
+    "react-dnd": "14.0.4",
+    "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "rollup": "2.56.3",

src/ActionList2/Description.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp, merge} from '../sx'
+import Truncate from '../Truncate'
+import {Slot, ItemContext} from './Item'
+
+export type DescriptionProps = {
+  /**
+   * Secondary text style variations.
+   *
+   * - `"inline"` - Secondary text is positioned beside primary text.
+   * - `"block"` - Secondary text is positioned below primary text.
+   */
+  variant?: 'inline' | 'block'
+} & SxProp
+
+export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+  const styles = {
+    color: 'fg.muted',
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  }
+
+  return (
+    <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
+        variant === 'block' ? (
+          <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId}>
+            {props.children}
+          </Box>
+        ) : (
+          <Truncate
+            id={inlineDescriptionId}
+            sx={merge(styles, sx as SxProp)}
+            title={props.children as string}
+            inline={true}
+            maxWidth="100%"
+          >
+            {props.children}
+          </Truncate>
+        )
+      }
+    </Slot>
+  )
+}

src/ActionList2/Divider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Box from '../Box'
+import {get} from '../constants'
+import {Theme} from '../ThemeProvider'
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export function Divider(): JSX.Element {
+  return (
+    <Box
+      as="li"
+      role="separator"
+      sx={{
+        height: 1,
+        backgroundColor: 'actionListItem.inlineDivider',
+        marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
+        marginBottom: 2,
+        listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+      }}
+      data-component="ActionList.Divider"
+    />
+  )
+}