@primer/components 32.0.1-rc.44e3df9b → 32.1.0-rc.6f5d2b00

package/lib-esm/stories/Checkbox.stories.js

@@ -0,0 +1,197 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { BaseStyles, Box, Checkbox, Text, ThemeProvider } from '..';
+import { action } from '@storybook/addon-actions';
+import { COMMON, get } from '../constants';
+export default {
+  title: 'Forms/Checkbox',
+  component: Checkbox,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      paddingTop: 5
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const StyledLabel = styled.label.withConfig({
+  displayName: "Checkboxstories__StyledLabel",
+  componentId: "sdupvr-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], COMMON);
+const StyledSubLabel = styled(Text).withConfig({
+  displayName: "Checkboxstories__StyledSubLabel",
+  componentId: "sdupvr-1"
+})(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
+export const Default = args => {
+  const [isChecked, setChecked] = useState(false);
+
+  const handleChange = event => {
+    setChecked(event.target.checked);
+    action('Change event triggered');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "controlled-checkbox",
+    onChange: handleChange,
+    checked: isChecked
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "always-checked-checkbox",
+    checked: true
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "always-checked-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always checked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "always-unchecked-checkbox",
+    checked: false
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "always-unchecked-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always unchecked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "disabled-checkbox",
+    disabled: true,
+    checked: false
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "disabled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Inactive"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "disabled=\"true\""))));
+};
+export const Uncontrolled = args => {
+  const checkboxRef = useRef(null);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = true;
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "uncontrolled-checkbox",
+    ref: checkboxRef
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "uncontrolled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Uncontrolled checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "Checked by default")));
+};
+Uncontrolled.displayName = "Uncontrolled";
+export const Indeterminate = args => {
+  const [checkboxes, setCheckboxes] = useState([false, false, false, false]);
+
+  const handleChange = (_, index) => {
+    const newCheckboxes = [...checkboxes];
+    newCheckboxes[index] = !checkboxes[index];
+    setCheckboxes(newCheckboxes);
+  };
+
+  const handleIndeterminateChange = () => {
+    if (checkboxes.every(checkbox => checkbox)) {
+      return setCheckboxes(checkboxes.map(() => false));
+    }
+
+    const newCheckboxes = checkboxes.map(() => true);
+    setCheckboxes(newCheckboxes);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "indeterminate-checkbox",
+    checked: checkboxes.every(Boolean),
+    onChange: handleIndeterminateChange,
+    indeterminate: !checkboxes.every(Boolean)
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/React.createElement(Box, {
+    key: `sub-checkbox-${index}`,
+    as: "form",
+    sx: {
+      p: 1,
+      pl: 7,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: `sub-checkbox-${index}`,
+    checked: checkboxes[index],
+    onChange: event => handleChange(event, index)
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: `sub-checkbox-${index}`
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Checkbox ", index + 1)))));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "32.0.1-rc.44e3df9b",
+  "version": "32.1.0-rc.6f5d2b00",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/src/Checkbox.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components'
+import {useProvidedRefOrCreate} from './hooks'
+import React, {InputHTMLAttributes, ReactElement, useLayoutEffect} from 'react'
+import sx, {SxProp} from './sx'
+
+export type CheckboxProps = {
+  /**
+   * Apply indeterminate visual appearance to the checkbox
+   */
+  indeterminate?: boolean
+  /**
+   * Apply inactive visual appearance to the checkbox
+   */
+  disabled?: boolean
+  /**
+   * Forward a ref to the underlying input element
+   */
+  ref?: React.RefObject<HTMLInputElement>
+  /**
+   * Indicates whether the checkbox must be checked
+   */
+  required?: boolean
+
+  /**
+   * Indicates whether the checkbox validation state
+   */
+  validationStatus?: 'error' | 'success' // TODO: hoist to Validation typings
+} & InputHTMLAttributes<HTMLInputElement> &
+  SxProp
+
+const StyledCheckbox = styled.input`
+  cursor: pointer;
+
+  ${props => props.disabled && `cursor: not-allowed;`}
+
+  ${sx}
+`
+
+/**
+ * An accessible, native checkbox component
+ */
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {checked, indeterminate, disabled, sx: sxProp, required, validationStatus, ...rest}: CheckboxProps,
+    ref
+  ): ReactElement => {
+    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+
+    useLayoutEffect(() => {
+      if (checkboxRef.current) {
+        checkboxRef.current.indeterminate = indeterminate || false
+      }
+    }, [indeterminate, checked, checkboxRef])
+
+    return (
+      <StyledCheckbox
+        type="checkbox"
+        disabled={disabled}
+        aria-disabled={disabled ? 'true' : 'false'}
+        ref={ref || checkboxRef}
+        checked={indeterminate ? false : checked}
+        aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'}
+        sx={sxProp}
+        required={required}
+        aria-required={required ? 'true' : 'false'}
+        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
+        {...rest}
+      />
+    )
+  }
+)
+
+Checkbox.displayName = 'Checkbox'
+
+export default Checkbox

package/src/Overlay.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useRef} from 'react'
+import React, {ComponentPropsWithRef, ReactElement, useEffect, useRef} from 'react'
 import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {get} from './constants'
 import {AriaRole, Merge} from './utils/types'
@@ -9,6 +9,7 @@ import sx, {SxProp} from './sx'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
 import {AnchorSide} from './behaviors/anchoredPosition'
 import {useTheme} from './ThemeProvider'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
@@ -95,7 +96,7 @@ type BaseOverlayProps = {
   children?: React.ReactNode
 }
 
-export type OverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
+type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
 
 /**
  * An `Overlay` is a flexible floating surface, used to display transient content such as menus,
@@ -114,7 +115,7 @@ export type OverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
  * @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
  */
-const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
+const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
   (
     {
       onClickOutside,
@@ -190,7 +191,9 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
       </Portal>
     )
   }
-)
+) as PolymorphicForwardRefComponent<'div', OwnOverlayProps>
+
+export type OverlayProps = ComponentPropsWithRef<typeof Overlay>
 
 Overlay.defaultProps = {
   height: 'auto',

package/src/__tests__/Checkbox.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import {Checkbox} from '..'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {render, cleanup} from '@testing-library/react'
+import {toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+expect.extend(toHaveNoViolations)
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    cleanup()
+  })
+  behavesAsComponent({Component: Checkbox})
+
+  checkExports('Checkbox', {
+    default: Checkbox
+  })
+
+  it('renders a valid checkbox input', () => {
+    const {getByRole} = render(<Checkbox />)
+
+    const checkbox = getByRole('checkbox')
+
+    expect(checkbox).toBeDefined()
+  })
+
+  it('renders an unchecked checkbox by default', () => {
+    const {getByRole} = render(<Checkbox />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an active checkbox when checked attribute is passed', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox checked onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(true)
+  })
+
+  it('accepts a change handler that can alter the checkbox state', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(false)
+
+    userEvent.click(checkbox)
+    expect(handleChange).toHaveBeenCalled()
+    expect(checkbox.checked).toEqual(true)
+
+    userEvent.click(checkbox)
+    expect(handleChange).toHaveBeenCalled()
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an indeterminate prop correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox indeterminate checked onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.indeterminate).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an inactive checkbox state correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.disabled).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
+
+    userEvent.click(checkbox)
+
+    expect(checkbox.disabled).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
+
+    // remove disabled attribute and retest
+    rerender(<Checkbox onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-disabled', 'false')
+  })
+
+  it('renders an uncontrolled component correctly', () => {
+    const {getByRole} = render(<Checkbox defaultChecked />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(true)
+
+    userEvent.click(checkbox)
+
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox checked={false} onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'false')
+
+    rerender(<Checkbox checked={true} onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'true')
+
+    rerender(<Checkbox indeterminate checked onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
+  })
+
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Checkbox onChange={handleChange} validationStatus="success" />)
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Checkbox onChange={handleChange} validationStatus="error" />)
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-required', 'false')
+
+    rerender(<Checkbox onChange={handleChange} required />)
+
+    expect(checkbox).toHaveAttribute('aria-required', 'true')
+  })
+})

package/src/__tests__/Overlay.types.test.tsx

@@ -5,6 +5,21 @@ export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
 }
 
+export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>) {
+  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} onMouseDown={() => null} />
+}
+
+export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>) {
+  // @ts-expect-error href should not be allowed on a <div>
+  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
+}
+
+export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>) {
+  return (
+    <Overlay as="a" returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
+  )
+}
+
 export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
   return (
     <Overlay

package/src/__tests__/SelectPanel.types.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {SelectPanel} from '../SelectPanel'
+
+export function shouldAcceptCallWithNoProps() {
+  return (
+    <SelectPanel
+      placeholderText=""
+      open={false}
+      onOpenChange={() => null}
+      items={[]}
+      selected={[]}
+      onSelectedChange={() => null}
+      onFilterChange={() => null}
+    />
+  )
+}
+
+export function shouldAcceptDOMPropsOnOverlay() {
+  return (
+    <SelectPanel
+      placeholderText=""
+      open={false}
+      onOpenChange={() => null}
+      items={[]}
+      selected={[]}
+      onSelectedChange={() => null}
+      onFilterChange={() => null}
+      overlayProps={{onMouseDown: () => null}}
+    />
+  )
+}

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders consistently 1`] = `
+.c0 {
+  cursor: pointer;
+}
+
+<input
+  aria-checked="false"
+  aria-disabled="false"
+  aria-invalid="false"
+  aria-required="false"
+  className="c0"
+  type="checkbox"
+/>
+`;

package/src/index.ts

@@ -169,4 +169,7 @@ export type {TruncateProps} from './Truncate'
 export {default as UnderlineNav} from './UnderlineNav'
 export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'
 
+export {default as Checkbox} from './Checkbox'
+export type {CheckboxProps} from './Checkbox'
+
 export {SSRProvider, useSSRSafeId} from './utils/ssr'