@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.32ed6e21

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 = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>
+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,60 @@
+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'>
+export const Selection: React.FC<SelectionProps> = ({selected}) => {
+  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
+   * we use a svg instead of an input because there should not
+   * be an interactive element inside an option
+   * svg copied from primer/css
+   */
+  return (
+    <LeadingVisualContainer
+      sx={{
+        rect: {
+          fill: selected ? 'accent.fg' : 'canvas.default',
+          stroke: selected ? 'accent.fg' : 'border.default'
+        },
+        path: {
+          fill: 'fg.onEmphasis',
+          boxShadow: 'shadow.small',
+          opacity: selected ? 1 : 0
+        }
+      }}
+    >
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <rect x="2" y="2" width="12" height="12" rx="4"></rect>
+        <path
+          fillRule="evenodd"
+          strokeWidth="0"
+          d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+        />
+      </svg>
+    </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/Dialog/Dialog.tsx

@@ -372,6 +372,7 @@ const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
           <ButtonElement
             key={index}
             {...buttonProps}
+            variant={buttonType}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
           >
             {content}

package/src/NewButton/button-counter.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {SxProp} from '../sx'
+import CounterLabel from '../CounterLabel'
+
+export type CounterProps = {
+  children: number
+} & SxProp
+
+export const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
+  return (
+    <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
+      {children}
+    </CounterLabel>
+  )
+}

package/src/NewButton/button.tsx

@@ -0,0 +1,283 @@
+import React, {forwardRef} from 'react'
+import Box from '../Box'
+import styled from 'styled-components'
+import sx, {merge, SxProp} from '../sx'
+import {useTheme, Theme} from '../ThemeProvider'
+import {VariantType, ButtonProps} from './types'
+
+const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
+const getVariantStyles = (variant: VariantType = 'default', theme?: Theme) => {
+  const style = {
+    default: {
+      color: 'btn.text',
+      backgroundColor: 'btn.bg',
+      boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`,
+      '&:hover:not([disabled])': {
+        backgroundColor: 'btn.hoverBg'
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        boxShadow: `${theme?.shadows.btn.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        backgroundColor: 'btn.selectedBg',
+        boxShadow: `${theme?.shadows.btn.shadowActive}`
+      },
+      '&:disabled': {
+        color: 'primer.fg.disabled',
+        backgroundColor: 'btn.disabledBg'
+      }
+    },
+    primary: {
+      color: 'btn.primary.text',
+      backgroundColor: 'btn.primary.bg',
+      borderColor: 'border.subtle',
+      boxShadow: `${theme?.shadows.btn.primary.shadow}`,
+      '&:hover:not([disabled])': {
+        color: 'btn.primary.hoverText',
+        backgroundColor: 'btn.primary.hoverBg'
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        boxShadow: `${theme?.shadows.btn.primary.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        backgroundColor: 'btn.primary.selectedBg',
+        boxShadow: `${theme?.shadows.btn.primary.selectedShadow}`
+      },
+      '&:disabled': {
+        color: 'btn.primary.disabledText',
+        backgroundColor: 'btn.primary.disabledBg'
+      },
+      '[data-component="ButtonCounter"]': {
+        backgroundColor: 'btn.primary.counterBg',
+        color: 'btn.primary.text'
+      }
+    },
+    danger: {
+      color: 'btn.danger.text',
+      backgroundColor: 'btn.bg',
+      boxShadow: `${theme?.shadows.btn.shadow}`,
+      '&:hover:not([disabled])': {
+        color: 'btn.danger.hoverText',
+        backgroundColor: 'btn.danger.hoverBg',
+        borderColor: 'btn.danger.hoverBorder',
+        boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.danger.hoverCounterBg',
+          color: 'btn.danger.hoverText'
+        }
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        borderColor: 'btn.danger.focusBorder',
+        boxShadow: `${theme?.shadows.btn.danger.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        color: 'btn.danger.selectedText',
+        backgroundColor: 'btn.danger.selectedBg',
+        boxShadow: `${theme?.shadows.btn.danger.selectedShadow}`,
+        borderColor: 'btn.danger.selectedBorder'
+      },
+      '&:disabled': {
+        color: 'btn.danger.disabledText',
+        backgroundColor: 'btn.danger.disabledBg',
+        borderColor: 'btn.danger.disabledBorder',
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.danger.disabledCounterBg'
+        }
+      },
+      '[data-component="ButtonCounter"]': {
+        color: 'btn.danger.text',
+        backgroundColor: 'btn.danger.counterBg'
+      }
+    },
+    invisible: {
+      color: 'accent.fg',
+      backgroundColor: 'transparent',
+      border: '0',
+      boxShadow: 'none',
+      '&:hover:not([disabled])': {
+        backgroundColor: 'btn.hoverBg'
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus:not([disabled])': {
+        boxShadow: `${theme?.shadows.btn.focusShadow}`
+      },
+      '&:active:not([disabled])': {
+        backgroundColor: 'btn.selectedBg'
+      },
+      '&:disabled': {
+        color: 'primer.fg.disabled'
+      }
+    },
+    outline: {
+      color: 'btn.outline.text',
+      boxShadow: `${theme?.shadows.btn.shadow}`,
+
+      '&:hover': {
+        color: 'btn.outline.hoverText',
+        backgroundColor: 'btn.outline.hoverBg',
+        borderColor: 'outline.hoverBorder',
+        boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.outline.hoverCounterBg',
+          color: 'btn.outline.hoverText'
+        }
+      },
+      // focus must come before :active so that the active box shadow overrides
+      '&:focus': {
+        borderColor: 'btn.outline.focusBorder',
+        boxShadow: `${theme?.shadows.btn.outline.focusShadow}`
+      },
+
+      '&:active:not([disabled])': {
+        color: 'btn.outline.selectedText',
+        backgroundColor: 'btn.outline.selectedBg',
+        boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`,
+        borderColor: 'btn.outline.selectedBorder'
+      },
+
+      '&:disabled': {
+        color: 'btn.outline.disabledText',
+        backgroundColor: 'btn.outline.disabledBg',
+        borderColor: 'btn.border',
+        '[data-component="ButtonCounter"]': {
+          backgroundColor: 'btn.outline.disabledCounterBg'
+        }
+      },
+      '[data-component="ButtonCounter"]': {
+        backgroundColor: 'btn.outline.counterBg',
+        color: 'btn.outline.text'
+      }
+    }
+  }
+  return style[variant]
+}
+
+const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => {
+  let paddingY, paddingX, fontSize
+  switch (size) {
+    case 'small':
+      paddingY = 3
+      paddingX = 12
+      fontSize = 0
+      break
+    case 'large':
+      paddingY = 9
+      paddingX = 20
+      fontSize = 2
+      break
+    case 'medium':
+    default:
+      paddingY = 5
+      paddingX = 16
+      fontSize = 1
+  }
+  if (iconOnly) {
+    paddingX = paddingY + 2
+  }
+  if (variant === 'invisible') {
+    paddingY = paddingY + 1
+  }
+  return {
+    paddingY: `${paddingY}px`,
+    paddingX: `${paddingX}px`,
+    fontSize,
+    '[data-component="ButtonCounter"]': {
+      fontSize
+    }
+  }
+}
+
+const ButtonBase = styled.button<SxProp>(sx)
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({children, sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => {
+    const {
+      icon: Icon,
+      leadingIcon: LeadingIcon,
+      trailingIcon: TrailingIcon,
+      variant = 'default',
+      size = 'medium'
+    } = props
+    const iconOnly = !!Icon
+    const {theme} = useTheme()
+
+    const styles = {
+      borderRadius: '2',
+      border: '1px solid',
+      borderColor: theme?.colors.btn.border,
+      display: 'grid',
+      gridTemplateAreas: '"leadingIcon text trailingIcon"',
+      fontWeight: 'bold',
+      lineHeight: TEXT_ROW_HEIGHT,
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+      appearance: 'none',
+      userSelect: 'none',
+      textDecoration: 'none',
+      textAlign: 'center',
+      '& > :not(:last-child)': {
+        mr: '2'
+      },
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:disabled': {
+        cursor: 'default'
+      },
+      '&:disabled svg': {
+        opacity: '0.6'
+      },
+      '[data-component="leadingIcon"]': {
+        gridArea: 'leadingIcon'
+      },
+      '[data-component="text"]': {
+        gridArea: 'text'
+      },
+      '[data-component="trailingIcon"]': {
+        gridArea: 'trailingIcon'
+      }
+    }
+    const iconWrapStyles = {
+      display: 'inline-block'
+    }
+    const sxStyles = merge.all([
+      styles,
+      getSizeStyles(size, variant, iconOnly),
+      getVariantStyles(variant, theme),
+      sxProp as SxProp
+    ])
+    return (
+      <ButtonBase sx={sxStyles} ref={forwardedRef} {...props}>
+        {LeadingIcon && (
+          <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
+            <LeadingIcon />
+          </Box>
+        )}
+        <span data-component="text" hidden={Icon ? true : false}>
+          {children}
+        </span>
+        {Icon && (
+          <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
+            <Icon />
+          </Box>
+        )}
+        {TrailingIcon && (
+          <Box as="span" data-component="trailingIcon" sx={{...iconWrapStyles, ml: 2}} aria-hidden={!iconOnly}>
+            <TrailingIcon />
+          </Box>
+        )}
+      </ButtonBase>
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+Object.assign(Button, {})
+
+export {Button}

package/src/NewButton/index.ts

@@ -0,0 +1,10 @@
+import {Button} from './button'
+import {Counter} from './button-counter'
+import {ButtonProps} from './types'
+// change this when moving to released state
+
+export type {ButtonProps as NewButtonProps}
+
+export const NewButton = Object.assign(Button, {
+  Counter
+})

package/src/NewButton/types.ts

@@ -0,0 +1,36 @@
+import React, {HTMLAttributes} from 'react'
+import {IconProps} from '@primer/octicons-react'
+import {SxProp} from '../sx'
+
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
+
+export type Size = 'small' | 'medium' | 'large'
+
+export type ButtonProps = {
+  /**
+   * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
+   */
+  variant?: VariantType
+  /**
+   * Size of button and fontSize of text in button
+   */
+  size?: Size
+  /**
+   * This is to be used if it is an icon-only button. Will make text visually hidden
+   */
+  icon?: React.FunctionComponent<IconProps>
+  /**
+   * The leading icon comes before button content
+   */
+  leadingIcon?: React.FunctionComponent<IconProps>
+  /**
+   * The trailing icon comes after button content
+   */
+  trailingIcon?: React.FunctionComponent<IconProps>
+  /**
+   * Items that are disabled can not be clicked, selected, or navigated through.
+   */
+  disabled?: boolean
+  children: React.ReactNode
+} & SxProp &
+  HTMLAttributes<HTMLButtonElement>

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