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

package/src/NewButton/button.tsx

@@ -0,0 +1,279 @@
+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 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': {
+        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, ...props}, forwardedRef): JSX.Element => {
+  const {
+    icon: Icon,
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    variant = 'default',
+    size = 'medium',
+    sx: sxProp = {}
+  } = props
+  const iconOnly = !!Icon
+  const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+  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 variableStyles = {...getSizeStyles(size, variant, iconOnly), ...getVariantStyles(variant, theme)}
+  const componentStyles = {...styles, ...variableStyles}
+  const iconWrapStyles = {
+    display: 'inline-block'
+  }
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore Why wont it accept the sx prop?
+    <ButtonBase sx={merge(componentStyles, sxProp as SxProp)} ref={forwardedRef} {...props}>
+      {LeadingIcon && (
+        <Box as="span" data-component="leadingIcon" sx={iconWrapStyles} aria-hidden={!iconOnly}>
+          <LeadingIcon />
+        </Box>
+      )}
+      <span data-component="text" hidden={Icon ? true : undefined}>
+        {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/StateLabel.tsx

@@ -1,4 +1,11 @@
-import {GitMergeIcon, GitPullRequestIcon, IssueClosedIcon, IssueOpenedIcon, QuestionIcon} from '@primer/octicons-react'
+import {
+  GitMergeIcon,
+  GitPullRequestIcon,
+  IssueClosedIcon,
+  IssueDraftIcon,
+  IssueOpenedIcon,
+  QuestionIcon
+} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
@@ -13,7 +20,8 @@ const octiconMap = {
   issueClosed: IssueClosedIcon,
   pullClosed: GitPullRequestIcon,
   pullMerged: GitMergeIcon,
-  draft: GitPullRequestIcon
+  draft: GitPullRequestIcon,
+  issueDraft: IssueDraftIcon
 }
 
 const colorVariants = variant({
@@ -42,6 +50,10 @@ const colorVariants = variant({
     draft: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis'
+    },
+    issueDraft: {
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 })

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__/NewButton.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import {NewButton as Button} from '../NewButton'
+import {render, behavesAsComponent} from '../utils/testing'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import {SearchIcon} from '@primer/octicons-react'
+expect.extend(toHaveNoViolations)
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}
+
+describe('Button', () => {
+  behavesAsComponent({Component: Button})
+
+  it('renders a <button>', () => {
+    expect(render(<Button>Default</Button>).type).toEqual('button')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Button>Click here</Button>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('preserves "onClick" prop', () => {
+    expect(render(<Button onClick={noop}>Noop</Button>).props.onClick).toEqual(noop)
+  })
+
+  it('respects width props', () => {
+    expect(render(<Button sx={{width: 200}}>Block</Button>)).toHaveStyleRule('width', '200px')
+  })
+
+  it('respects the "disabled" prop', () => {
+    const item = render(<Button disabled> Disabled</Button>)
+    expect(item.props.disabled).toEqual(true)
+    expect(item).toMatchSnapshot()
+  })
+
+  it('respects the "variant" prop', () => {
+    expect(render(<Button size="small">Smol</Button>)).toHaveStyleRule('font-size', '12px')
+    expect(render(<Button size="large">Large</Button>)).toHaveStyleRule('font-size', '16px')
+  })
+
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect(
+      render(
+        <Button size="small" sx={{fontSize: 20}}>
+          Big Smol
+        </Button>
+      )
+    ).toHaveStyleRule('font-size', '20px')
+  })
+
+  it('styles primary button appropriately', () => {
+    expect(render(<Button variant="primary">Primary</Button>)).toHaveStyleRule('background-color', '#2da44e')
+  })
+  it('styles invisible button appropriately', () => {
+    expect(render(<Button variant="invisible">Invisible</Button>)).toHaveStyleRule('background-color', 'transparent')
+  })
+  it('styles danger button appropriately', () => {
+    expect(render(<Button variant="danger">Danger</Button>)).toHaveStyleRule('background-color', '#f6f8fa')
+  })
+  it('styles icon only button to make it a square', () => {
+    const IconOnlyButton = render(<Button icon={SearchIcon}>Search icon only button</Button>)
+    expect(IconOnlyButton).toHaveStyleRule('padding-right', '7px')
+    expect(IconOnlyButton).toMatchSnapshot()
+  })
+})

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