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

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/_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__/KeyPaths.types.test.ts

@@ -1,3 +1,4 @@
+import {Union} from 'ts-toolbelt'
 import {KeyPaths} from '../utils/types/KeyPaths'
 
 type NestedObject = {
@@ -8,6 +9,6 @@ type NestedObject = {
   }
 }
 
-export function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2' {
+export function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never {
   return x
 }

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

@@ -178,25 +178,25 @@ exports[`ActionList.Item renders consistently 1`] = `
 }
 
 .c1[data-is-active-descendant='activated-directly'] {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 .c1[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
+  background: rgba(208,215,222,0.32);
 }
 
 .c1:focus {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
   outline: none;
 }
 
 .c1:active {
-  background: rgba(54,77,100,0.16);
+  background: rgba(208,215,222,0.48);
 }
 
 @media (hover:hover) and (pointer:fine) {
   .c1:hover {
-    background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
+    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
     cursor: pointer;
   }
 }

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>
 `;