@primer/components 31.2.0-rc.5ccefd7d → 31.2.0-rc.6afeaa37

package/src/ActionList2/Item.tsx

@@ -0,0 +1,245 @@
+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,
+      ...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,
+      minHeight: 5,
+      marginX: listVariant === 'inset' ? 2 : 0,
+      borderRadius: listVariant === 'inset' ? 2 : 0,
+      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([data-focus-visible-added])': {
+          backgroundColor: `actionListItem.${variant}.selectedBg`,
+          color: getVariantStyles(variant, disabled).hoverColor,
+          outline: 'none'
+        },
+        '&[data-focus-visible-added]': {
+          // we don't use :focus-visible because not all browsers (safari) have it yet
+          outline: 'none',
+          border: `2 solid`,
+          boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
+        },
+        ':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)': {'--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]), &[data-focus-visible-added]:not([aria-disabled])': {
+        '--divider-color': 'transparent'
+      },
+      '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+        '--divider-color': 'transparent'
+      }
+    }
+
+    const clickHandler = React.useCallback(
+      event => {
+        if (disabled) return
+        if (!event.defaultPrevented) onSelect(event)
+      },
+      [onSelect, disabled]
+    )
+
+    const keyPressHandler = React.useCallback(
+      event => {
+        if (disabled) return
+
+        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+          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`)
+
+    const ItemWrapper = _PrivateItemWrapper || React.Fragment
+
+    return (
+      <Slots context={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
+        {slots => (
+          <LiBox
+            ref={forwardedRef}
+            sx={merge(styles, sxProp as SxProp)}
+            onClick={clickHandler}
+            onKeyPress={keyPressHandler}
+            aria-selected={selected}
+            aria-disabled={disabled ? true : undefined}
+            tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
+            aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
+            aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
+            {...props}
+          >
+            <ItemWrapper>
+              <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>
+            </ItemWrapper>
+          </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>
+  )
+}

package/src/ActionList2/index.ts

@@ -0,0 +1,39 @@
+import {List} from './List'
+import {Group} from './Group'
+import {Item} from './Item'
+import {LinkItem} from './LinkItem'
+import {Divider} from './Divider'
+import {Description} from './Description'
+import {LeadingVisual, TrailingVisual} from './Visuals'
+
+export type {ListProps as ActionListProps} from './List'
+export type {GroupProps} from './Group'
+export type {ItemProps} from './Item'
+export type {DescriptionProps} from './Description'
+export type {LeadingVisualProps, TrailingVisualProps} from './Visuals'
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` */
+  Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual
+})

package/src/Overlay.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useRef} from 'react'
 import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
+import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'

package/src/Portal/Portal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {createPortal} from 'react-dom'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
 const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
@@ -69,7 +70,7 @@ export const Portal: React.FC<PortalProps> = ({children, onMount, containerName:
   hostElement.style.zIndex = '1'
   const elementRef = React.useRef(hostElement)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     let containerName = _containerName
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME

package/src/_TextInputWrapper.tsx

@@ -91,6 +91,13 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       display: block;
       width: 100%;
     `}
+
+    ${props =>
+    props.block &&
+    props.hasIcon &&
+    css`
+      display: flex;
+    `}
   
     // Ensures inputs don't zoom on mobile but are body-font size on desktop
     @media (min-width: ${get('breakpoints.1')}) {

package/src/__tests__/ActionList2.test.tsx

@@ -0,0 +1,47 @@
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import 'babel-polyfill'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import React from 'react'
+import theme from '../theme'
+import {ActionList} from '../ActionList2'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {BaseStyles, ThemeProvider, SSRProvider} from '..'
+expect.extend(toHaveNoViolations)
+
+function SimpleActionList(): JSX.Element {
+  return (
+    <ThemeProvider theme={theme}>
+      <SSRProvider>
+        <BaseStyles>
+          <ActionList>
+            <ActionList.Item>New file</ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item>Copy link</ActionList.Item>
+            <ActionList.Item>Edit file</ActionList.Item>
+            <ActionList.Item variant="danger">Delete file</ActionList.Item>
+          </ActionList>
+        </BaseStyles>
+      </SSRProvider>
+    </ThemeProvider>
+  )
+}
+
+describe('ActionList', () => {
+  behavesAsComponent({
+    Component: ActionList,
+    options: {skipAs: true, skipSx: true},
+    toRender: () => <ActionList />
+  })
+
+  checkExports('ActionList2', {
+    default: undefined,
+    ActionList
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<SimpleActionList />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/AnchoredOverlay.test.tsx

@@ -144,7 +144,7 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should render consistently when open', () => {
-    const anchoredOverlay = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(anchoredOverlay).toMatchSnapshot()
+    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
+    expect(container).toMatchSnapshot()
   })
 })

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -29,16 +29,6 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
-// describe('axe test', () => {
-//   it('should have no axe violations', async () => {
-//     const onRemoveMock = jest.fn()
-//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-//     const results = await axe(container)
-//     expect(results).toHaveNoViolations()
-//     cleanup()
-//   })
-// })
-
 jest.useFakeTimers()
 
 describe('TextInputWithTokens', () => {

package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionList renders consistently 1`] = `
+.c0 {
+  margin: 0;
+  padding-inline-start: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+<ul
+  className="c0"
+/>
+`;