@primer/components 33.0.0-rc.b495ba4a → 33.1.0-rc.6856bcf5

package/src/Radio.tsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components'
+import React, {InputHTMLAttributes, ReactElement} from 'react'
+import sx, {SxProp} from './sx'
+
+export type RadioProps = {
+  /**
+   * A unique value that is never shown to the user.
+   * Used during form submission and to identify which radio button in a group is selected
+   */
+  value: string
+  /**
+   * Name attribute of the input element. Required for grouping radio inputs
+   */
+  name: string
+  /**
+   * Apply inactive visual appearance to the radio button
+   */
+  disabled?: boolean
+  /**
+   * Indicates whether the radio button is selected
+   */
+  checked?: boolean
+  /**
+   * Forward a ref to the underlying input element
+   */
+  ref?: React.RefObject<HTMLInputElement>
+  /**
+   * Indicates whether the radio button must be checked before the form can be submitted
+   */
+  required?: boolean
+  /**
+   * Indicates whether the radio button validation state is non-standard
+   */
+  validationStatus?: 'error' | 'success' // TODO: hoist to Validation typings
+} & InputHTMLAttributes<HTMLInputElement> &
+  SxProp
+
+const StyledRadio = styled.input`
+  cursor: pointer;
+
+  ${props => props.disabled && `cursor: not-allowed;`}
+
+  ${sx}
+`
+
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {checked, disabled, sx: sxProp, required, validationStatus, value, name, ...rest}: RadioProps,
+    ref
+  ): ReactElement => {
+    return (
+      <StyledRadio
+        type="radio"
+        value={value}
+        name={name}
+        ref={ref}
+        disabled={disabled}
+        aria-disabled={disabled ? 'true' : 'false'}
+        checked={checked}
+        aria-checked={checked ? 'true' : 'false'}
+        required={required}
+        aria-required={required ? 'true' : 'false'}
+        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
+        sx={sxProp}
+        {...rest}
+      />
+    )
+  }
+)
+
+Radio.displayName = 'Radio'
+
+export default Radio

package/src/ThemeProvider.tsx

@@ -24,6 +24,7 @@ const ThemeContext = React.createContext<{
   colorScheme?: string
   colorMode?: ColorModeWithAuto
   resolvedColorMode?: ColorMode
+  resolvedColorScheme?: string
   dayScheme?: string
   nightScheme?: string
   setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>
@@ -52,7 +53,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
   const systemColorMode = useSystemColorMode()
   const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
   const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
-  const resolvedTheme = React.useMemo(() => applyColorScheme(theme, colorScheme), [theme, colorScheme])
+  const {resolvedTheme, resolvedColorScheme} = React.useMemo(
+    () => applyColorScheme(theme, colorScheme),
+    [theme, colorScheme]
+  )
 
   // Update state if props change
   React.useEffect(() => {
@@ -74,6 +78,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
         colorScheme,
         colorMode,
         resolvedColorMode,
+        resolvedColorScheme,
         dayScheme,
         nightScheme,
         setColorMode,
@@ -156,9 +161,15 @@ function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme:
   }
 }
 
-function applyColorScheme(theme: Theme, colorScheme: string) {
+function applyColorScheme(
+  theme: Theme,
+  colorScheme: string
+): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
   if (!theme.colorSchemes) {
-    return theme
+    return {
+      resolvedTheme: theme,
+      resolvedColorScheme: undefined
+    }
   }
 
   if (!theme.colorSchemes[colorScheme]) {
@@ -167,10 +178,16 @@ function applyColorScheme(theme: Theme, colorScheme: string) {
 
     // Apply the first defined color scheme
     const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
-    return deepmerge(theme, theme.colorSchemes[defaultColorScheme])
+    return {
+      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
+      resolvedColorScheme: defaultColorScheme
+    }
   }
 
-  return deepmerge(theme, theme.colorSchemes[colorScheme])
+  return {
+    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
+    resolvedColorScheme: colorScheme
+  }
 }
 
 export default ThemeProvider

package/src/__tests__/Radio.test.tsx

@@ -0,0 +1,174 @@
+import React from 'react'
+import {Radio} from '..'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {render, cleanup, fireEvent} from '@testing-library/react'
+import {toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import '@testing-library/jest-dom'
+
+expect.extend(toHaveNoViolations)
+
+describe('Radio', () => {
+  const defaultProps = {
+    name: 'mock',
+    value: 'mock value'
+  }
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+    cleanup()
+  })
+
+  behavesAsComponent({Component: Radio})
+
+  checkExports('Radio', {
+    default: Radio
+  })
+
+  it('renders a valid radio input', () => {
+    const {getByRole} = render(<Radio {...defaultProps} />)
+
+    const radio = getByRole('radio')
+
+    expect(radio).toBeDefined()
+  })
+
+  it('renders an unchecked radio by default', () => {
+    const {getByRole} = render(<Radio {...defaultProps} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio.checked).toEqual(false)
+  })
+
+  it('accepts and applies value and name attributes', () => {
+    const {getByRole} = render(<Radio {...defaultProps} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio).toHaveAttribute('name', defaultProps.name)
+    expect(radio).toHaveAttribute('value', defaultProps.value)
+  })
+
+  it('renders an active radio when checked attribute is passed', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Radio {...defaultProps} checked onChange={handleChange} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio.checked).toEqual(true)
+  })
+
+  it('accepts a change handler that can alter a single radio state', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Radio {...defaultProps} onChange={handleChange} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio.checked).toEqual(false)
+
+    fireEvent.click(radio)
+    expect(handleChange).toHaveBeenCalled()
+    expect(radio.checked).toEqual(true)
+  })
+
+  it('renders correct behavior for multiple radio buttons in a group', () => {
+    const handleChange = jest.fn()
+    const RadioGroup = () => (
+      <form>
+        <Radio {...defaultProps} value="radio-one" onChange={handleChange} />
+        <Radio {...defaultProps} value="radio-two" onChange={handleChange} />
+      </form>
+    )
+    const {getByDisplayValue} = render(<RadioGroup />)
+
+    const radioOne = getByDisplayValue('radio-one') as HTMLInputElement
+    const radioTwo = getByDisplayValue('radio-two') as HTMLInputElement
+
+    expect(radioOne).not.toBeChecked()
+    expect(radioTwo).not.toBeChecked()
+
+    fireEvent.click(radioOne)
+
+    expect(radioOne).toBeChecked()
+    expect(radioTwo).not.toBeChecked()
+
+    fireEvent.click(radioTwo)
+
+    expect(radioOne).not.toBeChecked()
+    expect(radioTwo).toBeChecked()
+  })
+
+  it('renders an inactive radio state correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Radio {...defaultProps} disabled onChange={handleChange} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio.disabled).toEqual(true)
+    expect(radio).not.toBeChecked()
+    expect(radio).toHaveAttribute('aria-disabled', 'true')
+
+    fireEvent.change(radio)
+
+    expect(radio.disabled).toEqual(true)
+    expect(radio).not.toBeChecked()
+    expect(radio).toHaveAttribute('aria-disabled', 'true')
+
+    // remove disabled attribute and retest
+    rerender(<Radio {...defaultProps} onChange={handleChange} />)
+
+    expect(radio).toHaveAttribute('aria-disabled', 'false')
+  })
+
+  it('renders an uncontrolled component correctly', () => {
+    const {getByRole} = render(<Radio {...defaultProps} defaultChecked />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio.checked).toEqual(true)
+  })
+
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Radio {...defaultProps} checked={false} onChange={handleChange} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio).toHaveAttribute('aria-checked', 'false')
+
+    rerender(<Radio {...defaultProps} checked={true} onChange={handleChange} />)
+
+    expect(radio).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="success" />)
+
+    expect(radio).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Radio {...defaultProps} onChange={handleChange} validationStatus="error" />)
+
+    expect(radio).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Radio {...defaultProps} onChange={handleChange} />)
+
+    const radio = getByRole('radio') as HTMLInputElement
+
+    expect(radio).toHaveAttribute('aria-required', 'false')
+
+    rerender(<Radio {...defaultProps} onChange={handleChange} required />)
+
+    expect(radio).toHaveAttribute('aria-required', 'true')
+  })
+})

package/src/__tests__/ThemeProvider.test.tsx

@@ -439,3 +439,119 @@ describe('useColorSchemeVar', () => {
     expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue')
   })
 })
+
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    render(<Component />)
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    render(
+      <ThemeProvider theme={{color: 'red'}}>
+        <Component />
+      </ThemeProvider>
+    )
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    const schemeToApply = 'dark'
+
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <Component />
+      </ThemeProvider>
+    )
+
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+  })
+
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    const schemeToApply = 'totally-invalid-colorscheme'
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <Component />
+      </ThemeProvider>
+    )
+
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual('light')
+  })
+
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Text data-testid="text">{resolvedColorScheme}</Text>
+      }
+
+      const schemeToApply = 'dark'
+
+      render(
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <ThemeProvider>
+            <Component />
+          </ThemeProvider>
+        </ThemeProvider>
+      )
+
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+    })
+
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Text data-testid="text">{resolvedColorScheme}</Text>
+      }
+
+      const schemeToApply = 'totally-invalid-colorscheme'
+      render(
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <ThemeProvider>
+            <Component />
+          </ThemeProvider>
+        </ThemeProvider>
+      )
+
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual('light')
+    })
+  })
+})

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

@@ -6,9 +6,11 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: #57606a;
+  color: #0969da;
   background-color: #ddf4ff;
   border-radius: 6px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 <a

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

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

package/src/drafts.ts

@@ -8,3 +8,4 @@
 // Components
 export * from './ActionList2'
 export * from './NewButton'
+export * from './ActionMenu2'

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export {useAnchoredPosition} from './useAnchoredPosition'
 export {useOverlay} from './useOverlay'
 export type {UseOverlaySettings} from './useOverlay'
 export {useRenderForcingRef} from './useRenderForcingRef'
+export {useProvidedStateOrCreate} from './useProvidedStateOrCreate'

package/src/index.ts

@@ -27,6 +27,8 @@ export {useOverlay} from './hooks/useOverlay'
 export {useConfirm} from './Dialog/ConfirmationDialog'
 
 // Components
+export {default as Radio} from './Radio'
+export type {RadioProps} from './Radio'
 export {ActionList} from './ActionList'
 export {ActionMenu} from './ActionMenu'
 export type {ActionMenuProps} from './ActionMenu'