@primer/components 32.0.1-rc.44e3df9b → 32.1.0-rc.6f5d2b00
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/browser.esm.js +7 -1
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +7 -1
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/Checkbox.md +118 -0
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +2 -0
- package/lib/Checkbox.d.ts +29 -0
- package/lib/Checkbox.js +64 -0
- package/lib/Overlay.d.ts +5 -3
- package/lib/__tests__/Checkbox.test.d.ts +2 -0
- package/lib/__tests__/Checkbox.test.js +189 -0
- package/lib/__tests__/Overlay.types.test.d.ts +3 -0
- package/lib/__tests__/Overlay.types.test.js +38 -0
- package/lib/__tests__/SelectPanel.types.test.d.ts +3 -0
- package/lib/__tests__/SelectPanel.types.test.js +44 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +8 -0
- package/lib/stories/Checkbox.stories.js +227 -0
- package/lib-esm/Checkbox.d.ts +29 -0
- package/lib-esm/Checkbox.js +44 -0
- package/lib-esm/Overlay.d.ts +5 -3
- package/lib-esm/__tests__/Checkbox.test.d.ts +2 -0
- package/lib-esm/__tests__/Checkbox.test.js +169 -0
- package/lib-esm/__tests__/Overlay.types.test.d.ts +3 -0
- package/lib-esm/__tests__/Overlay.types.test.js +29 -0
- package/lib-esm/__tests__/SelectPanel.types.test.d.ts +3 -0
- package/lib-esm/__tests__/SelectPanel.types.test.js +29 -0
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +1 -0
- package/lib-esm/stories/Checkbox.stories.js +197 -0
- package/package.json +1 -1
- package/src/Checkbox.tsx +75 -0
- package/src/Overlay.tsx +7 -4
- package/src/__tests__/Checkbox.test.tsx +155 -0
- package/src/__tests__/Overlay.types.test.tsx +15 -0
- package/src/__tests__/SelectPanel.types.test.tsx +31 -0
- package/src/__tests__/__snapshots__/Checkbox.test.tsx.snap +16 -0
- package/src/index.ts +3 -0
- package/src/stories/Checkbox.stories.tsx +164 -0
- package/stats.html +1 -1
@@ -0,0 +1,197 @@
|
|
1
|
+
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); }
|
2
|
+
|
3
|
+
import React, { useLayoutEffect, useRef, useState } from 'react';
|
4
|
+
import styled from 'styled-components';
|
5
|
+
import { BaseStyles, Box, Checkbox, Text, ThemeProvider } from '..';
|
6
|
+
import { action } from '@storybook/addon-actions';
|
7
|
+
import { COMMON, get } from '../constants';
|
8
|
+
export default {
|
9
|
+
title: 'Forms/Checkbox',
|
10
|
+
component: Checkbox,
|
11
|
+
decorators: [Story => {
|
12
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
|
13
|
+
paddingTop: 5
|
14
|
+
}, Story())));
|
15
|
+
}],
|
16
|
+
argTypes: {
|
17
|
+
sx: {
|
18
|
+
table: {
|
19
|
+
disable: true
|
20
|
+
}
|
21
|
+
},
|
22
|
+
disabled: {
|
23
|
+
name: 'Disabled',
|
24
|
+
defaultValue: false,
|
25
|
+
control: {
|
26
|
+
type: 'boolean'
|
27
|
+
}
|
28
|
+
}
|
29
|
+
}
|
30
|
+
};
|
31
|
+
const StyledLabel = styled.label.withConfig({
|
32
|
+
displayName: "Checkboxstories__StyledLabel",
|
33
|
+
componentId: "sdupvr-0"
|
34
|
+
})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], COMMON);
|
35
|
+
const StyledSubLabel = styled(Text).withConfig({
|
36
|
+
displayName: "Checkboxstories__StyledSubLabel",
|
37
|
+
componentId: "sdupvr-1"
|
38
|
+
})(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
|
39
|
+
export const Default = args => {
|
40
|
+
const [isChecked, setChecked] = useState(false);
|
41
|
+
|
42
|
+
const handleChange = event => {
|
43
|
+
setChecked(event.target.checked);
|
44
|
+
action('Change event triggered');
|
45
|
+
};
|
46
|
+
|
47
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
|
48
|
+
as: "form",
|
49
|
+
sx: {
|
50
|
+
p: 3,
|
51
|
+
display: 'flex',
|
52
|
+
alignItems: 'flex-start'
|
53
|
+
}
|
54
|
+
}, /*#__PURE__*/React.createElement(Checkbox, _extends({
|
55
|
+
id: "controlled-checkbox",
|
56
|
+
onChange: handleChange,
|
57
|
+
checked: isChecked
|
58
|
+
}, args)), /*#__PURE__*/React.createElement(StyledLabel, {
|
59
|
+
htmlFor: "controlled-checkbox"
|
60
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
61
|
+
sx: {
|
62
|
+
display: 'block'
|
63
|
+
}
|
64
|
+
}, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/React.createElement(Box, {
|
65
|
+
as: "form",
|
66
|
+
sx: {
|
67
|
+
p: 3,
|
68
|
+
display: 'flex',
|
69
|
+
alignItems: 'flex-start'
|
70
|
+
}
|
71
|
+
}, /*#__PURE__*/React.createElement(Checkbox, _extends({
|
72
|
+
id: "always-checked-checkbox",
|
73
|
+
checked: true
|
74
|
+
}, args)), /*#__PURE__*/React.createElement(StyledLabel, {
|
75
|
+
htmlFor: "always-checked-checkbox"
|
76
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
77
|
+
sx: {
|
78
|
+
display: 'block'
|
79
|
+
}
|
80
|
+
}, "Always checked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/React.createElement(Box, {
|
81
|
+
as: "form",
|
82
|
+
sx: {
|
83
|
+
p: 3,
|
84
|
+
display: 'flex',
|
85
|
+
alignItems: 'flex-start'
|
86
|
+
}
|
87
|
+
}, /*#__PURE__*/React.createElement(Checkbox, _extends({
|
88
|
+
id: "always-unchecked-checkbox",
|
89
|
+
checked: false
|
90
|
+
}, args)), /*#__PURE__*/React.createElement(StyledLabel, {
|
91
|
+
htmlFor: "always-unchecked-checkbox"
|
92
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
93
|
+
sx: {
|
94
|
+
display: 'block'
|
95
|
+
}
|
96
|
+
}, "Always unchecked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/React.createElement(Box, {
|
97
|
+
as: "form",
|
98
|
+
sx: {
|
99
|
+
p: 3,
|
100
|
+
display: 'flex',
|
101
|
+
alignItems: 'flex-start'
|
102
|
+
}
|
103
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
104
|
+
id: "disabled-checkbox",
|
105
|
+
disabled: true,
|
106
|
+
checked: false
|
107
|
+
}), /*#__PURE__*/React.createElement(StyledLabel, {
|
108
|
+
htmlFor: "disabled-checkbox"
|
109
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
110
|
+
sx: {
|
111
|
+
display: 'block'
|
112
|
+
}
|
113
|
+
}, "Inactive"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "disabled=\"true\""))));
|
114
|
+
};
|
115
|
+
export const Uncontrolled = args => {
|
116
|
+
const checkboxRef = useRef(null);
|
117
|
+
useLayoutEffect(() => {
|
118
|
+
if (checkboxRef.current) {
|
119
|
+
checkboxRef.current.checked = true;
|
120
|
+
}
|
121
|
+
}, []);
|
122
|
+
return /*#__PURE__*/React.createElement(Box, {
|
123
|
+
as: "form",
|
124
|
+
sx: {
|
125
|
+
p: 3,
|
126
|
+
display: 'flex',
|
127
|
+
alignItems: 'flex-start'
|
128
|
+
}
|
129
|
+
}, /*#__PURE__*/React.createElement(Checkbox, _extends({
|
130
|
+
id: "uncontrolled-checkbox",
|
131
|
+
ref: checkboxRef
|
132
|
+
}, args)), /*#__PURE__*/React.createElement(StyledLabel, {
|
133
|
+
htmlFor: "uncontrolled-checkbox"
|
134
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
135
|
+
sx: {
|
136
|
+
display: 'block'
|
137
|
+
}
|
138
|
+
}, "Uncontrolled checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "Checked by default")));
|
139
|
+
};
|
140
|
+
Uncontrolled.displayName = "Uncontrolled";
|
141
|
+
export const Indeterminate = args => {
|
142
|
+
const [checkboxes, setCheckboxes] = useState([false, false, false, false]);
|
143
|
+
|
144
|
+
const handleChange = (_, index) => {
|
145
|
+
const newCheckboxes = [...checkboxes];
|
146
|
+
newCheckboxes[index] = !checkboxes[index];
|
147
|
+
setCheckboxes(newCheckboxes);
|
148
|
+
};
|
149
|
+
|
150
|
+
const handleIndeterminateChange = () => {
|
151
|
+
if (checkboxes.every(checkbox => checkbox)) {
|
152
|
+
return setCheckboxes(checkboxes.map(() => false));
|
153
|
+
}
|
154
|
+
|
155
|
+
const newCheckboxes = checkboxes.map(() => true);
|
156
|
+
setCheckboxes(newCheckboxes);
|
157
|
+
};
|
158
|
+
|
159
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
|
160
|
+
as: "form",
|
161
|
+
sx: {
|
162
|
+
p: 3,
|
163
|
+
display: 'flex',
|
164
|
+
alignItems: 'flex-start'
|
165
|
+
}
|
166
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
167
|
+
id: "indeterminate-checkbox",
|
168
|
+
checked: checkboxes.every(Boolean),
|
169
|
+
onChange: handleIndeterminateChange,
|
170
|
+
indeterminate: !checkboxes.every(Boolean)
|
171
|
+
}), /*#__PURE__*/React.createElement(StyledLabel, {
|
172
|
+
htmlFor: "controlled-checkbox"
|
173
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
174
|
+
sx: {
|
175
|
+
display: 'block'
|
176
|
+
}
|
177
|
+
}, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/React.createElement(Box, {
|
178
|
+
key: `sub-checkbox-${index}`,
|
179
|
+
as: "form",
|
180
|
+
sx: {
|
181
|
+
p: 1,
|
182
|
+
pl: 7,
|
183
|
+
display: 'flex',
|
184
|
+
alignItems: 'flex-start'
|
185
|
+
}
|
186
|
+
}, /*#__PURE__*/React.createElement(Checkbox, _extends({
|
187
|
+
id: `sub-checkbox-${index}`,
|
188
|
+
checked: checkboxes[index],
|
189
|
+
onChange: event => handleChange(event, index)
|
190
|
+
}, args)), /*#__PURE__*/React.createElement(StyledLabel, {
|
191
|
+
htmlFor: `sub-checkbox-${index}`
|
192
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
193
|
+
sx: {
|
194
|
+
display: 'block'
|
195
|
+
}
|
196
|
+
}, "Checkbox ", index + 1)))));
|
197
|
+
};
|
package/package.json
CHANGED
package/src/Checkbox.tsx
ADDED
@@ -0,0 +1,75 @@
|
|
1
|
+
import styled from 'styled-components'
|
2
|
+
import {useProvidedRefOrCreate} from './hooks'
|
3
|
+
import React, {InputHTMLAttributes, ReactElement, useLayoutEffect} from 'react'
|
4
|
+
import sx, {SxProp} from './sx'
|
5
|
+
|
6
|
+
export type CheckboxProps = {
|
7
|
+
/**
|
8
|
+
* Apply indeterminate visual appearance to the checkbox
|
9
|
+
*/
|
10
|
+
indeterminate?: boolean
|
11
|
+
/**
|
12
|
+
* Apply inactive visual appearance to the checkbox
|
13
|
+
*/
|
14
|
+
disabled?: boolean
|
15
|
+
/**
|
16
|
+
* Forward a ref to the underlying input element
|
17
|
+
*/
|
18
|
+
ref?: React.RefObject<HTMLInputElement>
|
19
|
+
/**
|
20
|
+
* Indicates whether the checkbox must be checked
|
21
|
+
*/
|
22
|
+
required?: boolean
|
23
|
+
|
24
|
+
/**
|
25
|
+
* Indicates whether the checkbox validation state
|
26
|
+
*/
|
27
|
+
validationStatus?: 'error' | 'success' // TODO: hoist to Validation typings
|
28
|
+
} & InputHTMLAttributes<HTMLInputElement> &
|
29
|
+
SxProp
|
30
|
+
|
31
|
+
const StyledCheckbox = styled.input`
|
32
|
+
cursor: pointer;
|
33
|
+
|
34
|
+
${props => props.disabled && `cursor: not-allowed;`}
|
35
|
+
|
36
|
+
${sx}
|
37
|
+
`
|
38
|
+
|
39
|
+
/**
|
40
|
+
* An accessible, native checkbox component
|
41
|
+
*/
|
42
|
+
const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
43
|
+
(
|
44
|
+
{checked, indeterminate, disabled, sx: sxProp, required, validationStatus, ...rest}: CheckboxProps,
|
45
|
+
ref
|
46
|
+
): ReactElement => {
|
47
|
+
const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
|
48
|
+
|
49
|
+
useLayoutEffect(() => {
|
50
|
+
if (checkboxRef.current) {
|
51
|
+
checkboxRef.current.indeterminate = indeterminate || false
|
52
|
+
}
|
53
|
+
}, [indeterminate, checked, checkboxRef])
|
54
|
+
|
55
|
+
return (
|
56
|
+
<StyledCheckbox
|
57
|
+
type="checkbox"
|
58
|
+
disabled={disabled}
|
59
|
+
aria-disabled={disabled ? 'true' : 'false'}
|
60
|
+
ref={ref || checkboxRef}
|
61
|
+
checked={indeterminate ? false : checked}
|
62
|
+
aria-checked={indeterminate ? 'mixed' : checked ? 'true' : 'false'}
|
63
|
+
sx={sxProp}
|
64
|
+
required={required}
|
65
|
+
aria-required={required ? 'true' : 'false'}
|
66
|
+
aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
|
67
|
+
{...rest}
|
68
|
+
/>
|
69
|
+
)
|
70
|
+
}
|
71
|
+
)
|
72
|
+
|
73
|
+
Checkbox.displayName = 'Checkbox'
|
74
|
+
|
75
|
+
export default Checkbox
|
package/src/Overlay.tsx
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import styled from 'styled-components'
|
2
|
-
import React, {ReactElement, useEffect, useRef} from 'react'
|
2
|
+
import React, {ComponentPropsWithRef, ReactElement, useEffect, useRef} from 'react'
|
3
3
|
import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
|
4
4
|
import {get} from './constants'
|
5
5
|
import {AriaRole, Merge} from './utils/types'
|
@@ -9,6 +9,7 @@ import sx, {SxProp} from './sx'
|
|
9
9
|
import {useCombinedRefs} from './hooks/useCombinedRefs'
|
10
10
|
import {AnchorSide} from './behaviors/anchoredPosition'
|
11
11
|
import {useTheme} from './ThemeProvider'
|
12
|
+
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
|
12
13
|
|
13
14
|
type StyledOverlayProps = {
|
14
15
|
width?: keyof typeof widthMap
|
@@ -95,7 +96,7 @@ type BaseOverlayProps = {
|
|
95
96
|
children?: React.ReactNode
|
96
97
|
}
|
97
98
|
|
98
|
-
|
99
|
+
type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
|
99
100
|
|
100
101
|
/**
|
101
102
|
* 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>
|
|
114
115
|
* @param left Optional. Horizontal position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
|
115
116
|
* @param portalContainerName Optional. The name of the portal container to render the Overlay into.
|
116
117
|
*/
|
117
|
-
const Overlay = React.forwardRef<HTMLDivElement,
|
118
|
+
const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
|
118
119
|
(
|
119
120
|
{
|
120
121
|
onClickOutside,
|
@@ -190,7 +191,9 @@ const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
|
|
190
191
|
</Portal>
|
191
192
|
)
|
192
193
|
}
|
193
|
-
)
|
194
|
+
) as PolymorphicForwardRefComponent<'div', OwnOverlayProps>
|
195
|
+
|
196
|
+
export type OverlayProps = ComponentPropsWithRef<typeof Overlay>
|
194
197
|
|
195
198
|
Overlay.defaultProps = {
|
196
199
|
height: 'auto',
|
@@ -0,0 +1,155 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import {Checkbox} from '..'
|
3
|
+
import {behavesAsComponent, checkExports} from '../utils/testing'
|
4
|
+
import {render, cleanup} from '@testing-library/react'
|
5
|
+
import {toHaveNoViolations} from 'jest-axe'
|
6
|
+
import 'babel-polyfill'
|
7
|
+
import '@testing-library/jest-dom'
|
8
|
+
import userEvent from '@testing-library/user-event'
|
9
|
+
|
10
|
+
expect.extend(toHaveNoViolations)
|
11
|
+
|
12
|
+
describe('Checkbox', () => {
|
13
|
+
beforeEach(() => {
|
14
|
+
jest.resetAllMocks()
|
15
|
+
cleanup()
|
16
|
+
})
|
17
|
+
behavesAsComponent({Component: Checkbox})
|
18
|
+
|
19
|
+
checkExports('Checkbox', {
|
20
|
+
default: Checkbox
|
21
|
+
})
|
22
|
+
|
23
|
+
it('renders a valid checkbox input', () => {
|
24
|
+
const {getByRole} = render(<Checkbox />)
|
25
|
+
|
26
|
+
const checkbox = getByRole('checkbox')
|
27
|
+
|
28
|
+
expect(checkbox).toBeDefined()
|
29
|
+
})
|
30
|
+
|
31
|
+
it('renders an unchecked checkbox by default', () => {
|
32
|
+
const {getByRole} = render(<Checkbox />)
|
33
|
+
|
34
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
35
|
+
|
36
|
+
expect(checkbox.checked).toEqual(false)
|
37
|
+
})
|
38
|
+
|
39
|
+
it('renders an active checkbox when checked attribute is passed', () => {
|
40
|
+
const handleChange = jest.fn()
|
41
|
+
const {getByRole} = render(<Checkbox checked onChange={handleChange} />)
|
42
|
+
|
43
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
44
|
+
|
45
|
+
expect(checkbox.checked).toEqual(true)
|
46
|
+
})
|
47
|
+
|
48
|
+
it('accepts a change handler that can alter the checkbox state', () => {
|
49
|
+
const handleChange = jest.fn()
|
50
|
+
const {getByRole} = render(<Checkbox onChange={handleChange} />)
|
51
|
+
|
52
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
53
|
+
|
54
|
+
expect(checkbox.checked).toEqual(false)
|
55
|
+
|
56
|
+
userEvent.click(checkbox)
|
57
|
+
expect(handleChange).toHaveBeenCalled()
|
58
|
+
expect(checkbox.checked).toEqual(true)
|
59
|
+
|
60
|
+
userEvent.click(checkbox)
|
61
|
+
expect(handleChange).toHaveBeenCalled()
|
62
|
+
expect(checkbox.checked).toEqual(false)
|
63
|
+
})
|
64
|
+
|
65
|
+
it('renders an indeterminate prop correctly', () => {
|
66
|
+
const handleChange = jest.fn()
|
67
|
+
const {getByRole} = render(<Checkbox indeterminate checked onChange={handleChange} />)
|
68
|
+
|
69
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
70
|
+
|
71
|
+
expect(checkbox.indeterminate).toEqual(true)
|
72
|
+
expect(checkbox.checked).toEqual(false)
|
73
|
+
})
|
74
|
+
|
75
|
+
it('renders an inactive checkbox state correctly', () => {
|
76
|
+
const handleChange = jest.fn()
|
77
|
+
const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
|
78
|
+
|
79
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
80
|
+
|
81
|
+
expect(checkbox.disabled).toEqual(true)
|
82
|
+
expect(checkbox.checked).toEqual(false)
|
83
|
+
expect(checkbox).toHaveAttribute('aria-disabled', 'true')
|
84
|
+
|
85
|
+
userEvent.click(checkbox)
|
86
|
+
|
87
|
+
expect(checkbox.disabled).toEqual(true)
|
88
|
+
expect(checkbox.checked).toEqual(false)
|
89
|
+
expect(checkbox).toHaveAttribute('aria-disabled', 'true')
|
90
|
+
|
91
|
+
// remove disabled attribute and retest
|
92
|
+
rerender(<Checkbox onChange={handleChange} />)
|
93
|
+
|
94
|
+
expect(checkbox).toHaveAttribute('aria-disabled', 'false')
|
95
|
+
})
|
96
|
+
|
97
|
+
it('renders an uncontrolled component correctly', () => {
|
98
|
+
const {getByRole} = render(<Checkbox defaultChecked />)
|
99
|
+
|
100
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
101
|
+
|
102
|
+
expect(checkbox.checked).toEqual(true)
|
103
|
+
|
104
|
+
userEvent.click(checkbox)
|
105
|
+
|
106
|
+
expect(checkbox.checked).toEqual(false)
|
107
|
+
})
|
108
|
+
|
109
|
+
it('renders an aria-checked attribute correctly', () => {
|
110
|
+
const handleChange = jest.fn()
|
111
|
+
const {getByRole, rerender} = render(<Checkbox checked={false} onChange={handleChange} />)
|
112
|
+
|
113
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
114
|
+
|
115
|
+
expect(checkbox).toHaveAttribute('aria-checked', 'false')
|
116
|
+
|
117
|
+
rerender(<Checkbox checked={true} onChange={handleChange} />)
|
118
|
+
|
119
|
+
expect(checkbox).toHaveAttribute('aria-checked', 'true')
|
120
|
+
|
121
|
+
rerender(<Checkbox indeterminate checked onChange={handleChange} />)
|
122
|
+
|
123
|
+
expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
|
124
|
+
})
|
125
|
+
|
126
|
+
it('renders an invalid aria state when validation prop indicates an error', () => {
|
127
|
+
const handleChange = jest.fn()
|
128
|
+
const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
|
129
|
+
|
130
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
131
|
+
|
132
|
+
expect(checkbox).toHaveAttribute('aria-invalid', 'false')
|
133
|
+
|
134
|
+
rerender(<Checkbox onChange={handleChange} validationStatus="success" />)
|
135
|
+
|
136
|
+
expect(checkbox).toHaveAttribute('aria-invalid', 'false')
|
137
|
+
|
138
|
+
rerender(<Checkbox onChange={handleChange} validationStatus="error" />)
|
139
|
+
|
140
|
+
expect(checkbox).toHaveAttribute('aria-invalid', 'true')
|
141
|
+
})
|
142
|
+
|
143
|
+
it('renders an aria state indicating the field is required', () => {
|
144
|
+
const handleChange = jest.fn()
|
145
|
+
const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
|
146
|
+
|
147
|
+
const checkbox = getByRole('checkbox') as HTMLInputElement
|
148
|
+
|
149
|
+
expect(checkbox).toHaveAttribute('aria-required', 'false')
|
150
|
+
|
151
|
+
rerender(<Checkbox onChange={handleChange} required />)
|
152
|
+
|
153
|
+
expect(checkbox).toHaveAttribute('aria-required', 'true')
|
154
|
+
})
|
155
|
+
})
|
@@ -5,6 +5,21 @@ export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
|
|
5
5
|
return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
|
6
6
|
}
|
7
7
|
|
8
|
+
export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>) {
|
9
|
+
return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} onMouseDown={() => null} />
|
10
|
+
}
|
11
|
+
|
12
|
+
export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>) {
|
13
|
+
// @ts-expect-error href should not be allowed on a <div>
|
14
|
+
return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
|
15
|
+
}
|
16
|
+
|
17
|
+
export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>) {
|
18
|
+
return (
|
19
|
+
<Overlay as="a" returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
|
20
|
+
)
|
21
|
+
}
|
22
|
+
|
8
23
|
export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
|
9
24
|
return (
|
10
25
|
<Overlay
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import {SelectPanel} from '../SelectPanel'
|
3
|
+
|
4
|
+
export function shouldAcceptCallWithNoProps() {
|
5
|
+
return (
|
6
|
+
<SelectPanel
|
7
|
+
placeholderText=""
|
8
|
+
open={false}
|
9
|
+
onOpenChange={() => null}
|
10
|
+
items={[]}
|
11
|
+
selected={[]}
|
12
|
+
onSelectedChange={() => null}
|
13
|
+
onFilterChange={() => null}
|
14
|
+
/>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
|
18
|
+
export function shouldAcceptDOMPropsOnOverlay() {
|
19
|
+
return (
|
20
|
+
<SelectPanel
|
21
|
+
placeholderText=""
|
22
|
+
open={false}
|
23
|
+
onOpenChange={() => null}
|
24
|
+
items={[]}
|
25
|
+
selected={[]}
|
26
|
+
onSelectedChange={() => null}
|
27
|
+
onFilterChange={() => null}
|
28
|
+
overlayProps={{onMouseDown: () => null}}
|
29
|
+
/>
|
30
|
+
)
|
31
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
+
|
3
|
+
exports[`Checkbox renders consistently 1`] = `
|
4
|
+
.c0 {
|
5
|
+
cursor: pointer;
|
6
|
+
}
|
7
|
+
|
8
|
+
<input
|
9
|
+
aria-checked="false"
|
10
|
+
aria-disabled="false"
|
11
|
+
aria-invalid="false"
|
12
|
+
aria-required="false"
|
13
|
+
className="c0"
|
14
|
+
type="checkbox"
|
15
|
+
/>
|
16
|
+
`;
|
package/src/index.ts
CHANGED
@@ -169,4 +169,7 @@ export type {TruncateProps} from './Truncate'
|
|
169
169
|
export {default as UnderlineNav} from './UnderlineNav'
|
170
170
|
export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'
|
171
171
|
|
172
|
+
export {default as Checkbox} from './Checkbox'
|
173
|
+
export type {CheckboxProps} from './Checkbox'
|
174
|
+
|
172
175
|
export {SSRProvider, useSSRSafeId} from './utils/ssr'
|