@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

package/src/ActionList2/Item.tsx

@@ -0,0 +1,246 @@
+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: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
+    }
+  }
+
+  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,
+      cursor: 'pointer',
+      '&[aria-disabled]': {cursor: 'not-allowed'},
+
+      '@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} />
+              {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,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>
+  )
+}