@primer/components 32.1.1-rc.8eccc94b → 33.0.0-rc.af3001e7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "32.1.1-rc.8eccc94b",
+  "version": "33.0.0-rc.af3001e7",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -91,6 +91,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
+    "@types/node": "16.11.11",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
@@ -116,6 +117,7 @@
     "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "front-matter": "4.0.2",
     "jest": "27.0.4",
     "jest-axe": "5.0.1",
     "jest-styled-components": "6.3.4",

package/script/component-status-project/build.ts

@@ -0,0 +1,100 @@
+import fs from 'fs'
+import path from 'path'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fm = require('front-matter') // FIXME after this bugfix is merged https://github.com/jxson/front-matter/pull/77
+
+const sourceDirectory = path.resolve(__dirname, '../../docs/content/')
+const outputDir = path.resolve(__dirname, '../../dist/')
+
+type ComponentStatus = {
+  [component: string]: string
+}
+
+/**
+ * Extracts the component status for each file in the given directory.
+ *
+ * @param filenames Array of filenames to read front-matter from
+ * @param dir Absolute path to directory containing files
+ * @returns A promise that resolves to an array containing outcome of file front-matter extraction
+ */
+function getComponentStatuses(filenames: string[], dir: string) {
+  const promises: Promise<ComponentStatus | null>[] = []
+
+  const handleCallback = (
+    filename: string,
+    resolve: (value: ComponentStatus | null) => void,
+    reject: (value: unknown) => void
+  ) => {
+    fs.readFile(path.resolve(dir, filename), 'utf-8', (err, content) => {
+      if (err) return reject(err)
+
+      if (fm.test(content)) {
+        const {
+          attributes: {title, status}
+        } = fm(content)
+
+        if (status) {
+          return resolve({[title]: status})
+        }
+      }
+
+      resolve(null)
+    })
+  }
+
+  for (const filename of filenames) {
+    const promise: Promise<ComponentStatus | null> = new Promise((resolve, reject) => {
+      return handleCallback(filename, resolve, reject)
+    })
+    promises.push(promise)
+  }
+
+  return Promise.all(promises)
+}
+
+/**
+ * Orchestrates the process of reading component status for each file in the given directory.
+ *
+ * @param dir Directory to source files where status will be extracted from
+ * @returns A promise that resolves to an object containing component statuses
+ */
+async function readFiles(dir: string) {
+  try {
+    const dirContents = fs.readdirSync(dir, {withFileTypes: true})
+    const filenames = dirContents.filter(dirent => dirent.isFile()).map(dirent => dirent.name)
+    const componentStatuses = await getComponentStatuses(filenames, dir)
+
+    return componentStatuses
+      .filter(Boolean)
+      .reverse()
+      .reduce(
+        (acc, file) => ({
+          ...acc,
+          ...file
+        }),
+        {}
+      )
+  } catch (err) {
+    throw new Error(`error reading files: ${err}`)
+  }
+}
+
+/**
+ * Writes the component status to the given file.
+ */
+async function build() {
+  try {
+    const componentStatuses = await readFiles(sourceDirectory)
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFileSync(`${outputDir}/component-status.json`, JSON.stringify(componentStatuses))
+  } catch (error) {
+    throw new Error(`error building component status object: ${error}`)
+  }
+}
+
+build()

package/script/component-status-project/deploy.rb

@@ -0,0 +1,142 @@
+#!/usr/bin/env ruby
+# Adapted from https://github.com/primer/view_components/blob/main/script/update-statuses-project.rb
+# Usage: script/update-statuses-project
+# frozen_string_literal: true
+
+require "graphql/client"
+require "graphql/client/http"
+
+statuses = File.read(File.join(File.dirname(__FILE__), "../../dist/component-status.json"))
+statuses_json = JSON.parse(statuses)
+
+class QueryExecutionError < StandardError; end
+NOTE_SEPARATOR = " --- "
+
+module Github
+  GITHUB_ACCESS_TOKEN = ENV.fetch("GITHUB_TOKEN")
+  URL = "https://api.github.com/graphql"
+  HttpAdapter = GraphQL::Client::HTTP.new(URL) do
+    def headers(_)
+      {
+        "Authorization" => "Bearer #{GITHUB_ACCESS_TOKEN}",
+        "User-Agent" => "Ruby"
+      }
+    end
+  end
+  Schema = GraphQL::Client.load_schema(HttpAdapter)
+  Client = GraphQL::Client.new(schema: Schema, execute: HttpAdapter)
+end
+
+# Project is a GraphQL wrapper for interacting with GitHub projects
+class Project
+  ProjectQuery = Github::Client.parse <<-'GRAPHQL'
+    query {
+      repository(owner: "primer", name: "react") {
+        project(number: 5) {
+          columns(first: 100) {
+            nodes {
+              name
+              id
+              databaseId
+              cards {
+                nodes {
+                  id
+                  databaseId
+                  note
+                  column {
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  GRAPHQL
+
+  CreateCard = Github::Client.parse <<-'GRAPHQL'
+    mutation($note: String!, $projectColumnId: ID!) {
+      addProjectCard(input:{note: $note, projectColumnId: $projectColumnId, clientMutationId: "prc-actions"}) {
+        __typename
+      }
+    }
+  GRAPHQL
+
+  MoveCard = Github::Client.parse <<-'GRAPHQL'
+    mutation($cardId: ID!, $columnId: ID!) {
+      moveProjectCard(input:{cardId: $cardId, columnId: $columnId, clientMutationId: "prc-actions"}) {
+        __typename
+      }
+    }
+  GRAPHQL
+
+  def self.create_card(note:, column_id:)
+    response = Github::Client.query(CreateCard, variables: { note: note, projectColumnId: column_id })
+    return unless response.errors.any?
+
+    raise QueryExecutionError, response.errors[:data].join(", ")
+  end
+
+  def self.move_card(card_id:, column_id:)
+    response = Github::Client.query(MoveCard, variables: { cardId: card_id, columnId: column_id })
+    return unless response.errors.any?
+
+    raise(QueryExecutionError, response.errors[:data].join(", "))
+  end
+
+  def self.fetch_columns
+    response = Github::Client.query(ProjectQuery)
+    return response.data.repository.project.columns unless response.errors.any?
+
+    raise(QueryExecutionError, response.errors[:data].join(", "))
+  end
+end
+
+columns = Project.fetch_columns.nodes
+
+@column_mapping = {}
+columns.each do |column|
+  @column_mapping[column.name.downcase] = column.id
+end
+
+@cards = columns.map(&:cards).map(&:nodes).flatten
+
+def get_card(name_prefix:)
+  @cards.find { |card| card.note.start_with?(name_prefix) }
+end
+
+def on_correct_column?(card_id:, status:)
+  card = @cards.find { |c| c.id == card_id }
+  card.column.name.casecmp(status).zero?
+end
+
+def move_card(card_id:, status:)
+  column_id = @column_mapping[status.downcase]
+
+  puts "move card with #{card_id} to #{status} on column #{column_id}"
+
+  Project.move_card(card_id: card_id, column_id: column_id)
+end
+
+def create_card(component_name:, status:)
+  column_id = @column_mapping[status.downcase]
+
+  puts "create card with #{component_name} on #{status} on column #{column_id}"
+
+  Project.create_card(note: component_name, column_id: column_id)
+end
+
+statuses_json.each do |component_name, component_status|
+  card = get_card(name_prefix: component_name)
+
+  if card
+    if on_correct_column?(card_id: card.id, status: component_status)
+      puts "#{card.id} is on the right column. noop"
+    else
+      move_card(card_id: card.id, status: component_status)
+    end
+  else
+    create_card(component_name: component_name, status: component_status)
+  end
+end

package/src/ActionList2/Divider.tsx

@@ -2,22 +2,27 @@ import React from 'react'
 import Box from '../Box'
 import {get} from '../constants'
 import {Theme} from '../ThemeProvider'
+import {SxProp, merge} from '../sx'
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export function Divider(): JSX.Element {
+
+export const Divider: React.FC<SxProp> = ({sx = {}}) => {
   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
-      }}
+      sx={merge(
+        {
+          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
+        },
+        sx as SxProp
+      )}
       data-component="ActionList.Divider"
     />
   )

package/src/ActionList2/Item.tsx

@@ -8,6 +8,7 @@ import sx, {SxProp, merge} from '../sx'
 import createSlots from '../utils/create-slots'
 import {AriaRole} from '../utils/types'
 import {ListContext} from './List'
+import {MenuContext} from './MenuContext'
 import {Selection} from './Selection'
 
 export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
@@ -94,12 +95,14 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       onSelect,
       sx: sxProp = {},
       id,
+      role,
       _PrivateItemWrapper,
       ...props
     },
     forwardedRef
   ): JSX.Element => {
     const {variant: listVariant, showDividers} = React.useContext(ListContext)
+    const {itemRole, afterSelect} = React.useContext(MenuContext)
 
     const {theme} = useTheme()
 
@@ -170,9 +173,13 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       event => {
         if (typeof onSelect !== 'function') return
         if (disabled) return
-        if (!event.defaultPrevented) onSelect(event)
+        if (!event.defaultPrevented) {
+          onSelect(event)
+          // if this Item is inside a Menu, close the Menu
+          if (typeof afterSelect === 'function') afterSelect()
+        }
       },
-      [onSelect, disabled]
+      [onSelect, disabled, afterSelect]
     )
 
     const keyPressHandler = React.useCallback(
@@ -181,9 +188,11 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
         if (disabled) return
         if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
           onSelect(event)
+          // if this Item is inside a Menu, close the Menu
+          if (typeof afterSelect === 'function') afterSelect()
         }
       },
-      [onSelect, disabled]
+      [onSelect, disabled, afterSelect]
     )
 
     // use props.id if provided, otherwise generate one.
@@ -206,6 +215,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
             tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
             aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
             aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
+            role={role || itemRole}
             {...props}
           >
             <ItemWrapper>

package/src/ActionList2/List.tsx

@@ -3,6 +3,7 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/r
 import styled from 'styled-components'
 import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
+import {MenuContext} from './MenuContext'
 
 export type ListProps = {
   /**
@@ -30,7 +31,7 @@ const ListBox = styled.ul<SxProp>(sx)
 
 export const List = React.forwardRef<HTMLUListElement, ListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props},
+    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
     forwardedRef
   ): JSX.Element => {
     const styles = {
@@ -39,8 +40,11 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
       paddingY: variant === 'inset' ? 2 : 0
     }
 
+    /** if list is inside a Menu, it will get a role from the Menu */
+    const {listRole} = React.useContext(MenuContext)
+
     return (
-      <ListBox sx={merge(styles, sxProp as SxProp)} {...props} ref={forwardedRef}>
+      <ListBox sx={merge(styles, sxProp as SxProp)} role={role || listRole} {...props} ref={forwardedRef}>
         <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
       </ListBox>
     )

package/src/ActionList2/MenuContext.tsx

@@ -0,0 +1,6 @@
+/** This context can be used by components that compose ActionList inside a Menu */
+
+import React from 'react'
+
+type ContextProps = {parent?: string; listRole?: string; itemRole?: string; afterSelect?: () => void}
+export const MenuContext = React.createContext<ContextProps>({})

package/src/ActionList2/Selection.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
 import {ListContext} from './List'
 import {GroupContext} from './Group'
+import {MenuContext} from './MenuContext'
 import {ItemProps} from './Item'
 import {LeadingVisualContainer} from './Visuals'
 
@@ -9,6 +10,7 @@ type SelectionProps = Pick<ItemProps, 'selected'>
 export const Selection: React.FC<SelectionProps> = ({selected}) => {
   const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+  const {parent} = React.useContext(MenuContext)
 
   /** selectionVariant in Group can override the selectionVariant in List root */
   const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant
@@ -23,6 +25,13 @@ export const Selection: React.FC<SelectionProps> = ({selected}) => {
     return null
   }
 
+  if (parent === 'ActionMenu') {
+    throw new Error(
+      'ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application'
+    )
+    return null
+  }
+
   if (selectionVariant === 'single') {
     return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
   }

package/src/ActionMenu2.tsx

@@ -0,0 +1,94 @@
+import Button, {ButtonProps} from './Button'
+import React from 'react'
+import {AnchoredOverlay} from './AnchoredOverlay'
+import {useProvidedStateOrCreate} from './hooks/useProvidedStateOrCreate'
+import {OverlayProps} from './Overlay'
+import {useProvidedRefOrCreate} from './hooks'
+import {AnchoredOverlayWrapperAnchorProps} from './AnchoredOverlay/AnchoredOverlay'
+import {Divider} from './ActionList2/Divider'
+import {MenuContext as ActionListMenuContext} from './ActionList2/MenuContext'
+
+type ActionMenuBaseProps = {
+  /**
+   * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with ActionList`
+   */
+  children: React.ReactElement[] | React.ReactElement
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`.
+   */
+  open?: boolean
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+   */
+  onOpenChange?: (s: boolean) => void
+
+  /**
+   * Props to be spread on the internal `Overlay` component.
+   */
+  overlayProps?: Partial<OverlayProps>
+}
+
+export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
+
+const ActionMenuBase: React.FC<ActionMenuProps> = ({
+  anchorRef: externalAnchorRef,
+  open,
+  onOpenChange,
+  overlayProps,
+  children
+}: ActionMenuProps) => {
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
+  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
+
+  let renderAnchor: AnchoredOverlayWrapperAnchorProps['renderAnchor'] = null
+  const contents: React.ReactElement[] = []
+
+  React.Children.map(children, child => {
+    if (child.type === MenuButton || child.type === Anchor) {
+      renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
+    } else {
+      contents.push(child)
+    }
+  })
+
+  return (
+    <AnchoredOverlay
+      renderAnchor={renderAnchor}
+      anchorRef={anchorRef}
+      open={combinedOpenState}
+      onOpen={onOpen}
+      onClose={onClose}
+      overlayProps={overlayProps}
+    >
+      <ActionListMenuContext.Provider
+        value={{parent: 'ActionMenu', listRole: 'menu', itemRole: 'menuitem', afterSelect: onClose}}
+      >
+        {contents}
+      </ActionListMenuContext.Provider>
+    </AnchoredOverlay>
+  )
+}
+
+type AnchorRef = AnchoredOverlayWrapperAnchorProps['anchorRef']
+
+export type MenuAnchorProps = {children: React.ReactElement}
+const Anchor = React.forwardRef<AnchorRef, MenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
+  return React.cloneElement(children, {...anchorProps, ref: anchorRef})
+})
+
+/** this component is syntactical sugar 🍭 */
+export type MenuButtonProps = ButtonProps
+const MenuButton = React.forwardRef<AnchorRef, ButtonProps>((props, anchorRef) => {
+  return (
+    <Anchor ref={anchorRef}>
+      <Button {...props} />
+    </Anchor>
+  )
+})
+
+ActionMenuBase.displayName = 'ActionMenu'
+export const ActionMenu = Object.assign(ActionMenuBase, {Button: MenuButton, Anchor, Divider})

package/src/Avatar.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
@@ -12,8 +12,7 @@ type StyledAvatarProps = {
   src: string
   /** Provide alt text when the Avatar is used without the user's name next to it. */
   alt?: string
-} & SystemCommonProps &
-  SxProp
+} & SxProp
 
 function getBorderRadius({size, square}: StyledAvatarProps) {
   if (square) {
@@ -32,7 +31,6 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   line-height: ${get('lineHeights.condensedUltra')};
   vertical-align: middle;
   border-radius: ${props => getBorderRadius(props)};
-  ${COMMON};
   ${sx}
 `
 

package/src/BranchName.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const BranchName = styled.a<SystemCommonProps & SxProp>`
+const BranchName = styled.a<SxProp>`
   display: inline-block;
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
@@ -11,7 +11,7 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   color: ${get('colors.fg.muted')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
-  ${COMMON};
+
   ${sx};
 `
 

package/src/Details.tsx

@@ -1,11 +1,8 @@
 import styled from 'styled-components'
-import {COMMON, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-type StyledDetailsProps = SystemCommonProps & SxProp
-
-const Details = styled.details<StyledDetailsProps>`
+const Details = styled.details<SxProp>`
   & > summary {
     list-style: none;
   }
@@ -13,7 +10,6 @@ const Details = styled.details<StyledDetailsProps>`
     display: none;
   }
 
-  ${COMMON}
   ${sx};
 `
 

package/src/Heading.tsx

@@ -1,21 +1,14 @@
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
-import theme from './theme'
 import {ComponentProps} from './utils/types'
 
-const Heading = styled.h2<SystemTypographyProps & SystemCommonProps & SxProp>`
+const Heading = styled.h2<SxProp>`
   font-weight: ${get('fontWeights.bold')};
   font-size: ${get('fontSizes.5')};
   margin: 0;
-  ${TYPOGRAPHY};
-  ${COMMON};
   ${sx};
 `
 
-Heading.defaultProps = {
-  theme
-}
-
 export type HeadingProps = ComponentProps<typeof Heading>
 export default Heading

package/src/ProgressBar.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import styled from 'styled-components'
 import {width, WidthProps} from 'styled-system'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
 
-const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
+type ProgressProp = {progress?: string | number}
+
+const Bar = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
-  ${COMMON}
+
+  ${sx};
 `
 
 const sizeMap = {
@@ -20,7 +22,6 @@ type StyledProgressContainerProps = {
   inline?: boolean
   barSize?: keyof typeof sizeMap
 } & WidthProps &
-  SystemCommonProps &
   SxProp
 
 const ProgressContainer = styled.span<StyledProgressContainerProps>`
@@ -29,17 +30,17 @@ const ProgressContainer = styled.span<StyledProgressContainerProps>`
   background-color: ${get('colors.border.default')};
   border-radius: ${get('radii.1')};
   height: ${props => sizeMap[props.barSize || 'default']};
-  ${COMMON}
+
   ${width}
   ${sx};
 `
 
-export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
+export type ProgressBarProps = {bg: string} & StyledProgressContainerProps & ProgressProp
 
-function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
+function ProgressBar({progress, bg, ...rest}: ProgressBarProps) {
   return (
-    <ProgressContainer theme={theme} {...rest}>
-      <Bar progress={progress} bg={bg} theme={theme} />
+    <ProgressContainer {...rest}>
+      <Bar progress={progress} sx={{bg}} />
     </ProgressContainer>
   )
 }