@primer/components 31.2.0-rc.50908ce9 → 31.2.0-rc.6afeaa37

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"
+/>
+`;

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

@@ -94,9 +94,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 `;
 
 exports[`AnchoredOverlay should render consistently when open 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .c0 {
+.c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
   color: #24292f;
@@ -187,146 +185,48 @@ Object {
   outline: none;
 }
 
-<body>
-    <div>
-      <div
-        class="c0"
-        color="fg.default"
-        data-portal-root="true"
-        font-family="normal"
-      >
-        <button
-          aria-haspopup="true"
-          aria-labelledby="react-aria-1"
-          class="c1"
-          id="react-aria-1"
-          tabindex="0"
-        >
-          Anchor Button
-        </button>
-        <div
-          id="__primerPortalRoot__"
-          style="position: absolute; top: 0px; left: 0px;"
-        >
-          <div
-            style="position: relative; z-index: 1;"
-          >
-            <div
-              class="c2"
-              data-focus-trap="active"
-              height="auto"
-              role="none"
-              style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-              width="auto"
-            >
-              <button
-                class="focus-visible"
-                data-focus-visible-added=""
-                tabindex="0"
-                type="button"
-              >
-                Focusable Child
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
+<div>
+  <div
+    class="c0"
+    color="fg.default"
+    data-portal-root="true"
+    font-family="normal"
+  >
+    <button
+      aria-haspopup="true"
+      aria-labelledby="react-aria-1"
+      class="c1"
+      id="react-aria-1"
+      tabindex="0"
+    >
+      Anchor Button
+    </button>
     <div
-      class="BaseStyles__Base-qvuaww-0 ihFkAM"
-      color="fg.default"
-      data-portal-root="true"
-      font-family="normal"
+      id="__primerPortalRoot__"
+      style="position: absolute; top: 0px; left: 0px;"
     >
-      <button
-        aria-haspopup="true"
-        aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
-        id="react-aria-1"
-        tabindex="0"
-      >
-        Anchor Button
-      </button>
       <div
-        id="__primerPortalRoot__"
-        style="position: absolute; top: 0px; left: 0px;"
+        style="position: relative; z-index: 1;"
       >
         <div
-          style="position: relative; z-index: 1;"
+          class="c2"
+          data-focus-trap="active"
+          height="auto"
+          role="none"
+          style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
+          width="auto"
         >
-          <div
-            class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
-            data-focus-trap="active"
-            height="auto"
-            role="none"
-            style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-            width="auto"
+          <button
+            class="focus-visible"
+            data-focus-visible-added=""
+            tabindex="0"
+            type="button"
           >
-            <button
-              class="focus-visible"
-              data-focus-visible-added=""
-              tabindex="0"
-              type="button"
-            >
-              Focusable Child
-            </button>
-          </div>
+            Focusable Child
+          </button>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;

package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComponentWithSlots renders all slots 1`] = `
+<div>
+  <div>
+    first
+    <span>
+      free form
+       
+      second
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders with context passed to children 1`] = `
+<div>
+  <div>
+    <span>
+      free form
+       
+       
+      hi
+       
+      third
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders with just one slot 1`] = `
+<div>
+  <div>
+    first
+    <span>
+      free form
+       
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders without any slots 1`] = `
+<div>
+  <div>
+    <span>
+      free form
+       
+       
+    </span>
+  </div>
+</div>
+`;