diff --git a/packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx b/packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx index 91e27b8197e..349472cb47a 100644 --- a/packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx +++ b/packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx @@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-spectrum/checkbox'; -import checkboxgroupUtil from 'docs:@react-aria/test-utils/src/checkboxgroup.ts'; import packageData from '@react-spectrum/checkbox/package.json'; import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs'; @@ -333,43 +332,3 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/ Basketball ``` - -## Testing - -### Test utils - -`@react-spectrum/test-utils` offers common checkbox group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities -in your tests. Below is the full definition of the checkbox group tester and a sample of how you could use it in your test suite. - -```ts -// CheckboxGroup.test.ts -import {render} from '@testing-library/react'; -import {theme} from '@react-spectrum/theme-default'; -import {User} from '@react-spectrum/test-utils'; - -let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime}); -// ... - -it('CheckboxGroup can select multiple checkboxes', async function () { - // Render your test component/app and initialize the checkbox group tester - let {getByTestId} = render( - - - ... - - - ); - let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')}); - expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0); - - await checkboxGroupTester.toggleCheckbox({checkbox: 0}); - expect(checkboxGroupTester.checkboxes[0]).toBeChecked(); - expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1); - - await checkboxGroupTester.toggleCheckbox({checkbox: 4}); - expect(checkboxGroupTester.checkboxes[4]).toBeChecked(); - expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2); -}); -``` - - diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 3353600dec6..293ccb43616 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -12,7 +12,6 @@ export default Layout; import DialogAnatomy from './images/DialogAnatomy.svg'; import docs from 'docs:@react-spectrum/dialog'; -import dialogUtil from 'docs:@react-aria/test-utils/src/dialog.ts'; import {Image, HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import packageData from '@react-spectrum/dialog/package.json'; import styles from '@react-spectrum/docs/src/docs.css'; @@ -399,43 +398,3 @@ respectively for container sizing considerations. Modal sizes on mobile devices )} ``` - -## Testing - -### Test utils - -`@react-spectrum/test-utils` offers common dialog interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities -in your tests. Below is the full definition of the dialog tester and a sample of how you could use it in your test suite. - -```ts -// Dialog.test.ts -import {render} from '@testing-library/react'; -import {theme} from '@react-spectrum/theme-default'; -import {User} from '@react-spectrum/test-utils'; - -let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime}); -// ... - -it('Dialog can be opened and closed', async function () { - // Render your test component/app and initialize the dialog tester - let {getByTestId, getByRole} = render( - - - Trigger - - ... - - - - ); - let button = getByRole('button'); - let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'}); - await dialogTester.open(); - let dialog = dialogTester.dialog; - expect(dialog).toBeVisible(); - await dialogTester.close(); - expect(dialog).not.toBeInTheDocument(); -}); -``` - - diff --git a/packages/@react-spectrum/radio/docs/RadioGroup.mdx b/packages/@react-spectrum/radio/docs/RadioGroup.mdx index e82b7c5d428..b0eea5c097d 100644 --- a/packages/@react-spectrum/radio/docs/RadioGroup.mdx +++ b/packages/@react-spectrum/radio/docs/RadioGroup.mdx @@ -11,7 +11,6 @@ import {Layout} from '@react-spectrum/docs'; export default Layout; import docs from 'docs:@react-spectrum/radio'; -import radiogroupUtil from 'docs:@react-aria/test-utils/src/radiogroup.ts'; import packageData from '@react-spectrum/radio/package.json'; import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs'; @@ -307,43 +306,3 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/ Dragon ``` - -## Testing - -### Test utils - -`@react-spectrum/test-utils` offers common radio group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities -in your tests. Below is the full definition of the radio group tester and a sample of how you could use it in your test suite. - -```ts -// RadioGroup.test.ts -import {render} from '@testing-library/react'; -import {theme} from '@react-spectrum/theme-default'; -import {User} from '@react-spectrum/test-utils'; - -let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime}); -// ... - -it('RadioGroup can switch the selected radio', async function () { - // Render your test component/app and initialize the radiogroup tester - let {getByRole} = render( - - - ... - - - ); - - let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')}); - let radios = radioGroupTester.radios; - expect(radioGroupTester.selectedRadio).toBeFalsy(); - - await radioGroupTester.triggerRadio({radio: radios[0]}); - expect(radioGroupTester.selectedRadio).toBe(radios[0]); - - await radioGroupTester.triggerRadio({radio: radios[1]}); - expect(radioGroupTester.selectedRadio).toBe(radios[1]); -}); -``` - - diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 50e29e67c5a..cf47ed4d6cf 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -953,7 +953,10 @@ const commonCellStyles = { const cell = style({ ...commonCellStyles, - color: baseColor('neutral'), + color: { + default: baseColor('neutral-subdued'), + isSelected: baseColor('neutral') + }, paddingY: centerPadding(), minHeight: { default: 40, diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx index b2801ba08c1..3b4320444d3 100644 --- a/packages/@react-spectrum/s2/src/TreeView.tsx +++ b/packages/@react-spectrum/s2/src/TreeView.tsx @@ -12,6 +12,7 @@ import {ActionButtonGroupContext} from './ActionButtonGroup'; import {ActionMenuContext} from './ActionMenu'; +import {baseColor, colorMix, focusRing, fontRelative, style} from '../style' with {type: 'macro'}; import { Button, ButtonContext, @@ -31,7 +32,6 @@ import { import {centerBaseline} from './CenterBaseline'; import {Checkbox} from './Checkbox'; import Chevron from '../ui-icons/Chevron'; -import {colorMix, focusRing, fontRelative, style} from '../style' with {type: 'macro'}; import {DOMRef, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; @@ -153,7 +153,10 @@ const treeRow = style({ width: 'full', boxSizing: 'border-box', font: 'ui', - color: 'body', + color: { + default: baseColor('neutral-subdued'), + isSelected: baseColor('neutral') + }, outlineStyle: 'none', cursor: { default: 'default', diff --git a/packages/dev/docs/pages/react-aria/testing.mdx b/packages/dev/docs/pages/react-aria/testing.mdx index c649d45ea4d..aab35a898ec 100644 --- a/packages/dev/docs/pages/react-aria/testing.mdx +++ b/packages/dev/docs/pages/react-aria/testing.mdx @@ -201,20 +201,14 @@ See below for the full definition of the `User` object. Below is a list of the ARIA patterns testers currently supported by `createTester`. See the accompanying component testing docs pages for a sample of how to use the testers in your test suite. -- [CheckboxGroup](CheckboxGroup.html#test-utils) - - [ComboBox](ComboBox.html#test-utils) -- [Dialog](Dialog.html#test-utils) - - [GridList](GridList.html#test-utils) - [ListBox](ListBox.html#test-utils) - [Menu](Menu.html#test-utils) -- [RadioGroup](RadioGroup.html#test-utils) - - [Select](Select.html#test-utils) - [Table](Table.html#test-utils) diff --git a/packages/dev/docs/pages/react-spectrum/testing.mdx b/packages/dev/docs/pages/react-spectrum/testing.mdx index 90dd1e8050d..99c179e3d61 100644 --- a/packages/dev/docs/pages/react-spectrum/testing.mdx +++ b/packages/dev/docs/pages/react-spectrum/testing.mdx @@ -395,20 +395,14 @@ See below for the full definition of the `User` object. Below is a list of the ARIA patterns testers currently supported by `createTester`. See the accompanying component testing docs pages for a sample of how to use the testers in your test suite. -- [CheckboxGroup](CheckboxGroup.html#test-utils) - - [ComboBox](ComboBox.html#test-utils) -- [Dialog](Dialog.html#test-utils) - - [ListView](ListView.html#test-utils) - [ListBox](ListBox.html#test-utils) - [MenuTrigger](MenuTrigger.html#test-utils) -- [RadioGroup](RadioGroup.html#test-utils) - - [Picker](Picker.html#test-utils) - [TableView](TableView.html#test-utils) diff --git a/packages/react-aria-components/docs/CheckboxGroup.mdx b/packages/react-aria-components/docs/CheckboxGroup.mdx index 1ecece634b0..188c967763e 100644 --- a/packages/react-aria-components/docs/CheckboxGroup.mdx +++ b/packages/react-aria-components/docs/CheckboxGroup.mdx @@ -13,7 +13,6 @@ export default Layout; import docs from 'docs:react-aria-components'; import statelyDocs from 'docs:@react-stately/checkbox'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import checkboxgroupUtil from 'docs:@react-aria/test-utils/src/checkboxgroup.ts'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; @@ -610,40 +609,3 @@ function SelectionCount() { ### Hooks If you need to customize things further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useCheckboxGroup](useCheckboxGroup.html) for more details. - -## Testing - -### Test utils - -`@react-aria/test-utils` offers common checkbox group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities -in your tests. Below is the full definition of the checkbox group tester and a sample of how you could use it in your test suite. - -```ts -// CheckboxGroup.test.ts -import {render} from '@testing-library/react'; -import {User} from '@react-aria/test-utils'; - -let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime}); -// ... - -it('CheckboxGroup can select multiple checkboxes', async function () { - // Render your test component/app and initialize the checkbox group tester - let {getByTestId} = render( - - ... - - ); - let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')}); - expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0); - - await checkboxGroupTester.toggleCheckbox({checkbox: 0}); - expect(checkboxGroupTester.checkboxes[0]).toBeChecked(); - expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1); - - await checkboxGroupTester.toggleCheckbox({checkbox: 4}); - expect(checkboxGroupTester.checkboxes[4]).toBeChecked(); - expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2); -}); -``` - - diff --git a/packages/react-aria-components/docs/Dialog.mdx b/packages/react-aria-components/docs/Dialog.mdx index 55768ae9f51..9d8e500b38b 100644 --- a/packages/react-aria-components/docs/Dialog.mdx +++ b/packages/react-aria-components/docs/Dialog.mdx @@ -12,7 +12,6 @@ export default Layout; import docs from 'docs:react-aria-components'; import typesDocs from 'docs:@react-types/overlays'; -import dialogUtil from 'docs:@react-aria/test-utils/src/dialog.ts'; import overlayStatelyDocs from 'docs:@react-stately/overlays'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; @@ -350,42 +349,3 @@ function CloseButton() { ### Hooks If you need to customize things further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useDialog](useDialog.html) for more details. - -## Testing - -### Test utils - -`@react-aria/test-utils` offers common dialog interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities -in your tests. Below is the full definition of the dialog tester and a sample of how you could use it in your test suite. - -```ts -// Dialog.test.ts -import {render} from '@testing-library/react'; -import {User} from '@react-aria/test-utils'; - -let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime}); -// ... - -it('Dialog can be opened and closed', async function () { - // Render your test component/app and initialize the dialog tester - let {getByTestId, getByRole} = render( - - - - - ... - - - - ); - let button = getByRole('button'); - let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'}); - await dialogTester.open(); - let dialog = dialogTester.dialog; - expect(dialog).toHaveAttribute('role', 'alertdialog'); - await dialogTester.close(); - expect(dialog).not.toBeInTheDocument(); -}); -``` - - diff --git a/packages/react-aria-components/docs/RadioGroup.mdx b/packages/react-aria-components/docs/RadioGroup.mdx index 3bafc1670e0..d922a56252b 100644 --- a/packages/react-aria-components/docs/RadioGroup.mdx +++ b/packages/react-aria-components/docs/RadioGroup.mdx @@ -13,7 +13,6 @@ export default Layout; import docs from 'docs:react-aria-components'; import statelyDocs from 'docs:@react-stately/radio'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -import radiogroupUtil from 'docs:@react-aria/test-utils/src/radiogroup.ts'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, VersionBadge, ClassAPI} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; @@ -631,40 +630,3 @@ RadioGroup provides a - -`@react-aria/test-utils` offers common radio group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities -in your tests. Below is the full definition of the radio group tester and a sample of how you could use it in your test suite. - -```ts -// RadioGroup.test.ts -import {render} from '@testing-library/react'; -import {User} from '@react-aria/test-utils'; - -let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime}); -// ... - -it('RadioGroup can switch the selected radio', async function () { - // Render your test component/app and initialize the radiogroup tester - let {getByRole} = render( - - ... - - ); - - let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')}); - let radios = radioGroupTester.radios; - expect(radioGroupTester.selectedRadio).toBeFalsy(); - - await radioGroupTester.triggerRadio({radio: radios[0]}); - expect(radioGroupTester.selectedRadio).toBe(radios[0]); - - await radioGroupTester.triggerRadio({radio: radios[1]}); - expect(radioGroupTester.selectedRadio).toBe(radios[1]); -}); -``` - - diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 090d188c849..96836b8f5e8 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -1313,6 +1313,11 @@ export interface CellRenderProps { * @selector [data-hovered] */ isHovered: boolean, + /** + * Whether the parent row is currently selected. + * @selector [data-selected] + */ + isSelected: boolean, /** * The unique id of the cell. **/ @@ -1363,6 +1368,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel }, state, ref); let {isFocused, isFocusVisible, focusProps} = useFocusRing(); let {hoverProps, isHovered} = useHover({}); + let isSelected = cell.parentKey != null ? state.selectionManager.isSelected(cell.parentKey) : false; let renderProps = useRenderProps({ ...props, @@ -1373,6 +1379,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel isFocusVisible, isPressed, isHovered, + isSelected, id: cell.key } }); @@ -1386,7 +1393,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel ref={ref as any} data-focused={isFocused || undefined} data-focus-visible={isFocusVisible || undefined} - data-pressed={isPressed || undefined}> + data-pressed={isPressed || undefined} + data-selected={isSelected || undefined}> {renderProps.children}