@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.2a086bac

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.c7dafefb",
+  "version": "31.2.0-rc.2a086bac",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
@@ -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",
@@ -132,7 +134,9 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
+    "ts-toolbelt": "9.6.0",
     "typescript": "4.2.2"
   },
   "peerDependencies": {

package/script/build

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+set -e
+
 # Clean up
 rm -rf dist
 rm -rf lib

package/src/ActionList/Header.tsx

@@ -68,7 +68,7 @@ export function Header({
   return (
     <StyledHeader role="heading" variant={variant} {...props}>
       {title}
-      {auxiliaryText && <span>auxiliaryText</span>}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
     </StyledHeader>
   )
 }

package/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>
+  )
+}

package/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"
+    />
+  )
+}

package/src/ActionList2/Group.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {Header, HeaderProps} from './Header'
+import {ListProps} from './List'
+
+export type GroupProps = HeaderProps &
+  SxProp & {
+    selectionVariant?: ListProps['selectionVariant'] | false
+  }
+
+type ContextProps = Pick<GroupProps, 'selectionVariant'>
+export const GroupContext = React.createContext<ContextProps>({})
+
+export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
+  return (
+    <Box
+      as="li"
+      sx={{
+        '&:not(:first-child)': {marginTop: 2},
+        listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
+        ...sx
+      }}
+      {...props}
+    >
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      <GroupContext.Provider value={{selectionVariant}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {props.children}
+        </Box>
+      </GroupContext.Provider>
+    </Box>
+  )
+}

package/src/ActionList2/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {ListContext} from './List'
+
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export type HeaderProps = {
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"filled"` - Superimposed on a background, offset from nearby content
+   * - `"subtle"` - Relatively less offset from nearby content
+   */
+  variant?: 'subtle' | 'filled'
+
+  /**
+   * Primary text which names a `Group`.
+   */
+  title?: string
+
+  /**
+   * Secondary text which provides additional information about a `Group`.
+   */
+  auxiliaryText?: string
+} & SxProp
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({variant = 'subtle', title, auxiliaryText, sx = {}, ...props}: HeaderProps): JSX.Element => {
+  const {variant: listVariant} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  }
+
+  return (
+    <Box sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}

package/src/ActionList2/Item.tsx

@@ -0,0 +1,228 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import {useSSRSafeId} from '@react-aria/ssr'
+import styled from 'styled-components'
+import {useTheme} from '../ThemeProvider'
+import Box, {BoxProps} from '../Box'
+import sx, {SxProp, merge} from '../sx'
+import createSlots from '../utils/create-slots'
+import {AriaRole} from '../utils/types'
+import {ListContext} from './List'
+import {Selection} from './Selection'
+
+export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
+  if (disabled) {
+    return {
+      color: 'fg.muted',
+      iconColor: 'fg.muted',
+      annotationColor: 'fg.muted'
+    }
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: 'danger.fg',
+        iconColor: 'danger.fg',
+        annotationColor: 'fg.muted',
+        hoverColor: 'actionListItem.danger.hoverText'
+      }
+    default:
+      return {
+        color: 'fg.default',
+        iconColor: 'fg.muted',
+        annotationColor: 'fg.muted',
+        hoverColor: 'fg.default'
+      }
+  }
+}
+
+export type ItemProps = {
+  /**
+   * Primary content for an Item
+   */
+  children?: React.ReactNode
+  /**
+   * Callback that will trigger both on click selection and keyboard selection.
+   */
+  onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
+  /**
+   * Is the `Item` is currently selected?
+   */
+  selected?: boolean
+  /**
+   * Style variations associated with various `Item` types.
+   *
+   * - `"default"` - An action `Item`.
+   * - `"danger"` - A destructive action `Item`.
+   */
+  variant?: 'default' | 'danger'
+  /**
+   * Items that are disabled can not be clicked, selected, or navigated through.
+   */
+  disabled?: boolean
+  /**
+   * The ARIA role describing the function of `Item` component. `option` is a common value.
+   */
+  role?: AriaRole
+  /**
+   * id to attach to the root element of the Item
+   */
+  id?: string
+  /**
+   * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
+   */
+  _PrivateItemWrapper?: React.FC
+} & SxProp
+
+const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
+export {Slot}
+export type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
+  inlineDescriptionId: string
+  blockDescriptionId: string
+}
+
+const LiBox = styled.li<SxProp>(sx)
+export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
+export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
+  (
+    {
+      variant = 'default',
+      disabled = false,
+      selected = undefined,
+      onSelect = () => null,
+      sx: sxProp = {},
+      id,
+      _PrivateItemWrapper = ({children}) => <>{children}</>,
+      ...props
+    },
+    forwardedRef
+  ): JSX.Element => {
+    const {variant: listVariant, showDividers} = React.useContext(ListContext)
+
+    const {theme} = useTheme()
+
+    const styles = {
+      display: 'flex',
+      paddingX: 2,
+      fontSize: 1,
+      paddingY: '6px', // custom value off the scale
+      lineHeight: TEXT_ROW_HEIGHT,
+      marginX: listVariant === 'inset' ? 2 : 0,
+      minHeight: 5,
+      borderRadius: 2,
+      transition: 'background 33.333ms linear',
+      color: getVariantStyles(variant, disabled).color,
+      textDecoration: 'none', // for as="a"
+      ':not([aria-disabled])': {cursor: 'pointer'},
+      '@media (hover: hover) and (pointer: fine)': {
+        ':hover:not([aria-disabled])': {
+          backgroundColor: `actionListItem.${variant}.hoverBg`,
+          color: getVariantStyles(variant, disabled).hoverColor
+        },
+        ':focus:not([aria-disabled])': {
+          backgroundColor: `actionListItem.${variant}.selectedBg`,
+          color: getVariantStyles(variant, disabled).hoverColor,
+          outline: 'none'
+        },
+        ':active:not([aria-disabled])': {
+          backgroundColor: `actionListItem.${variant}.activeBg`,
+          color: getVariantStyles(variant, disabled).hoverColor
+        }
+      },
+
+      /** Divider styles */
+      '[data-component="ActionList.Item--DividerContainer"]': {
+        position: 'relative'
+      },
+      '[data-component="ActionList.Item--DividerContainer"]::before': {
+        content: '" "',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        top: '-7px',
+        border: '0 solid',
+        borderTopWidth: showDividers ? `1px` : '0',
+        borderColor: 'var(--divider-color, transparent)'
+      },
+      // show between 2 items
+      ':not(:first-of-type):not([aria-selected=true])': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
+      // hide divider after dividers & group header, with higher importance!
+      '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'},
+      // hide border on current and previous item
+      '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {'--divider-color': 'transparent'},
+      '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {'--divider-color': 'transparent'},
+      // hide border around selected item
+      '&[aria-selected=true] + &': {'--divider-color': 'transparent'}
+    }
+
+    const clickHandler = React.useCallback(
+      event => {
+        if (disabled) return
+        if (!event.defaultPrevented) onSelect(event)
+      },
+      [onSelect, disabled]
+    )
+
+    // use props.id if provided, otherwise generate one.
+    const labelId = useSSRSafeId(id)
+    const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`)
+    const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`)
+
+    return (
+      <Slots context={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
+        {slots => (
+          <LiBox
+            ref={forwardedRef}
+            sx={merge(styles, sxProp as SxProp)}
+            onClick={clickHandler}
+            aria-selected={selected}
+            aria-disabled={disabled ? true : undefined}
+            tabIndex={disabled ? undefined : -1}
+            aria-labelledby={labelId}
+            aria-describedby={[
+              slots.InlineDescription && inlineDescriptionId,
+              slots.BlockDescription && blockDescriptionId
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            {...props}
+          >
+            <_PrivateItemWrapper>
+              <Selection selected={selected} disabled={disabled} />
+              {slots.LeadingVisual}
+              <Box
+                data-component="ActionList.Item--DividerContainer"
+                sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
+              >
+                <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
+                  <ConditionalBox
+                    if={Boolean(slots.InlineDescription)}
+                    sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
+                  >
+                    <Box as="span" id={labelId} sx={{flexGrow: slots.InlineDescription ? 0 : 1}}>
+                      {props.children}
+                    </Box>
+                    {slots.InlineDescription}
+                  </ConditionalBox>
+                  {slots.TrailingVisual}
+                </ConditionalBox>
+                {slots.BlockDescription}
+              </Box>
+            </_PrivateItemWrapper>
+          </LiBox>
+        )}
+      </Slots>
+    )
+  }
+) as PolymorphicForwardRefComponent<'li', ItemProps>
+
+Item.displayName = 'ActionList.Item'
+
+const ConditionalBox: React.FC<{if: boolean} & BoxProps> = props => {
+  const {if: condition, ...rest} = props
+
+  if (condition) return <Box {...rest}>{props.children}</Box>
+  else return <>{props.children}</>
+}

package/src/ActionList2/LinkItem.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import Link from '../Link'
+import {SxProp, merge} from '../sx'
+import {Item, ItemProps} from './Item'
+
+// adopted from React.AnchorHTMLAttributes
+type LinkProps = {
+  download?: string
+  href?: string
+  hrefLang?: string
+  media?: string
+  ping?: string
+  rel?: string
+  target?: string
+  type?: string
+  referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy']
+}
+
+// LinkItem does not support selected, variants, etc.
+type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps
+
+export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, forwardedRef) => {
+  const styles = {
+    // occupy full size of Item
+    paddingX: 2,
+    paddingY: '6px', // custom value off the scale
+    display: 'flex',
+    flexGrow: 1, // full width
+    borderRadius: 2,
+
+    // inherit Item styles
+    color: 'inherit',
+    '&:hover': {color: 'inherit', textDecoration: 'none'}
+  }
+
+  return (
+    <Item
+      sx={{paddingY: 0, paddingX: 0}}
+      _PrivateItemWrapper={({children}) => (
+        <Link as={Component} sx={merge(styles, sx as SxProp)} {...props} ref={forwardedRef}>
+          {children}
+        </Link>
+      )}
+    >
+      {props.children}
+    </Item>
+  )
+}) as PolymorphicForwardRefComponent<'a', LinkItemProps>

package/src/ActionList2/List.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import styled from 'styled-components'
+import sx, {SxProp, merge} from '../sx'
+import {AriaRole} from '../utils/types'
+
+export type ListProps = {
+  /**
+   * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
+   */
+  variant?: 'inset' | 'full'
+  /**
+   * Whether multiple Items or a single Item can be selected.
+   */
+  selectionVariant?: 'single' | 'multiple'
+  /**
+   * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+   */
+  showDividers?: boolean
+  /**
+   * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
+   */
+  role?: AriaRole
+} & SxProp
+
+type ContextProps = Omit<ListProps, 'sx'>
+export const ListContext = React.createContext<ContextProps>({})
+
+const ListBox = styled.ul<SxProp>(sx)
+
+export const List = React.forwardRef<HTMLUListElement, ListProps>(
+  (
+    {variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props},
+    forwardedRef
+  ): JSX.Element => {
+    const styles = {
+      margin: 0,
+      paddingInlineStart: 0, // reset ul styles
+      paddingY: variant === 'inset' ? 2 : 0
+    }
+
+    return (
+      <ListBox
+        sx={merge(styles, sxProp as SxProp)}
+        aria-multiselectable={selectionVariant === 'multiple' ? true : undefined}
+        {...props}
+        ref={forwardedRef}
+      >
+        <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
+      </ListBox>
+    )
+  }
+) as PolymorphicForwardRefComponent<'ul', ListProps>
+
+List.displayName = 'ActionList'

package/src/ActionList2/Selection.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {CheckIcon} from '@primer/octicons-react'
+import {ListContext} from './List'
+import {GroupContext} from './Group'
+import {ItemProps} from './Item'
+import {LeadingVisualContainer} from './Visuals'
+
+type SelectionProps = Pick<ItemProps, 'selected' | 'disabled'>
+export const Selection: React.FC<SelectionProps> = ({selected, disabled}) => {
+  const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
+  const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+
+  /** selectionVariant in Group can override the selectionVariant in List root */
+  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant
+
+  // if selectionVariant is not set on List, don't show selection
+  if (!selectionVariant) {
+    // to avoid confusion, fail loudly instead of silently ignoring
+    if (selected)
+      throw new Error(
+        'For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined'
+      )
+    return null
+  }
+
+  if (selectionVariant === 'single') {
+    return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
+  }
+
+  /**
+   * selectionVariant is multiple
+   * readOnly is required because we are doing a one-way bind to `checked`
+   * aria-readonly="false" tells screen that they can still interact with the checkbox
+   */
+  return (
+    <LeadingVisualContainer sx={{input: {margin: 0, pointerEvents: 'none'}}}>
+      <input type="checkbox" checked={selected} disabled={disabled} tabIndex={-1} readOnly aria-readonly="false" />
+    </LeadingVisualContainer>
+  )
+}

package/src/ActionList2/Visuals.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp, merge} from '../sx'
+import {get} from '../constants'
+import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item'
+
+type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
+
+export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+  return (
+    <Box
+      as="span"
+      sx={merge(
+        {
+          height: TEXT_ROW_HEIGHT, // match height of text row
+          minWidth: get('space.3'),
+          maxWidth: TEXT_ROW_HEIGHT, // square (same as height)
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexShrink: 0,
+          marginRight: 2
+        },
+        sx as SxProp
+      )}
+      {...props}
+    />
+  )
+}
+
+export type LeadingVisualProps = VisualProps
+export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+  return (
+    <Slot name="LeadingVisual">
+      {({variant, disabled}: ItemContext) => (
+        <LeadingVisualContainer
+          sx={merge(
+            {
+              color: getVariantStyles(variant, disabled).iconColor,
+              svg: {fontSize: 0}
+            },
+            sx as SxProp
+          )}
+          {...props}
+        >
+          {props.children}
+        </LeadingVisualContainer>
+      )}
+    </Slot>
+  )
+}
+
+export type TrailingVisualProps = VisualProps
+export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+  return (
+    <Slot name="TrailingVisual">
+      {({variant, disabled}: ItemContext) => (
+        <Box
+          as="span"
+          sx={merge(
+            {
+              height: '20px', // match height of text row
+              flexShrink: 0,
+              color: getVariantStyles(variant, disabled).annotationColor,
+              marginLeft: 2
+            },
+            sx as SxProp
+          )}
+          {...props}
+        >
+          {props.children}
+        </Box>
+      )}
+    </Slot>
+  )
+}