@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

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), :not(\'[data-component="icon-only"]\')': {
+      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>
+      )}
+      {Icon && (
+        <Box data-component="icon-only" as="span" sx={{display: 'inline-block'}} aria-hidden={!iconOnly}>
+          <Icon />
+        </Box>
+      )}
+      <span data-component="text" hidden={Icon ? true : false}>
+        {children}
+      </span>
+      {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__/NewButton.test.tsx

@@ -0,0 +1,64 @@
+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'
+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')
+  })
+})

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

@@ -972,6 +972,7 @@ Array [
                 style={
                   Object {
                     "display": "inline-block",
+                    "overflow": "visible",
                     "userSelect": "none",
                     "verticalAlign": "text-bottom",
                   }

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

@@ -21,6 +21,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
   style={
     Object {
       "display": "inline-block",
+      "overflow": "visible",
       "userSelect": "none",
       "verticalAlign": "text-bottom",
     }

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

@@ -52,6 +52,7 @@ exports[`CircleOcticon renders consistently 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }

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

@@ -163,6 +163,7 @@ Array [
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }

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

@@ -95,6 +95,7 @@ exports[`DropdownMenu renders consistently 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }

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

@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders consistently 1`] = `
+.c0 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: rgba(27,31,36,0.15);
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0 > :not(:last-child),
+.c0:not('[data-component="icon-only"]') {
+  margin-right: 8px;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  color: #8c959f;
+  background-color: btn.disabledBg;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+}
+
+.c0 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
+}
+
+.c0 [data-component="ButtonCounter"] {
+  font-size: 14px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c0:focus:not([disabled]) {
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+>
+  <span
+    data-component="text"
+    hidden={false}
+  />
+</button>
+`;
+
+exports[`Button respects the "disabled" prop 1`] = `
+.c0 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: rgba(27,31,36,0.15);
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0 > :not(:last-child),
+.c0:not('[data-component="icon-only"]') {
+  margin-right: 8px;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  color: #8c959f;
+  background-color: btn.disabledBg;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+}
+
+.c0 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
+}
+
+.c0 [data-component="ButtonCounter"] {
+  font-size: 14px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c0:focus:not([disabled]) {
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+  disabled={true}
+>
+  <span
+    data-component="text"
+    hidden={false}
+  >
+     Disabled
+  </span>
+</button>
+`;

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

@@ -352,6 +352,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -383,6 +384,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -418,6 +420,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -448,6 +451,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }

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

@@ -108,6 +108,7 @@ exports[`SelectPanel renders consistently 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }