diff --git a/.changeset/eleven-drinks-kiss.md b/.changeset/eleven-drinks-kiss.md new file mode 100644 index 00000000000..5ece52632de --- /dev/null +++ b/.changeset/eleven-drinks-kiss.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove the SSRProvider component and useSSRSafeId hook diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx index 06a35990b2c..a0a551b2ef0 100644 --- a/packages/react/src/ActionList/ActionList.test.tsx +++ b/packages/react/src/ActionList/ActionList.test.tsx @@ -6,26 +6,24 @@ import theme from '../theme' import {ActionList} from '.' import {BookIcon} from '@primer/octicons-react' import {behavesAsComponent, checkExports} from '../utils/testing' -import {BaseStyles, ThemeProvider, SSRProvider, ActionMenu} from '..' +import {BaseStyles, ThemeProvider, ActionMenu} from '..' import {FeatureFlags} from '../FeatureFlags' function SimpleActionList(): JSX.Element { return ( - - - - New file - - Copy link - Edit file - Delete file - - Link Item - - - - + + + New file + + Copy link + Edit file + Delete file + + Link Item + + + ) } @@ -266,19 +264,17 @@ describe('ActionList', () => { expect(() => HTMLRender( - - - - Trigger - - - Heading - Item - - - - - + + + Trigger + + + Heading + Item + + + + , ), ).toThrow( @@ -293,20 +289,18 @@ describe('ActionList', () => { expect(() => HTMLRender( - - - - Trigger - - - - Group Heading - - - - - - + + + Trigger + + + + Group Heading + + + + + , ), ).toThrow( diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx index f623b0d8708..32faa44d897 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx @@ -9,7 +9,6 @@ import Button from '../deprecated/Button/Button' import {ConfirmationDialog, useConfirm} from './ConfirmationDialog' import theme from '../theme' import {ThemeProvider} from '../ThemeProvider' -import {SSRProvider} from '../utils/ssr' import {behavesAsComponent, checkExports} from '../utils/testing' const Basic = ({confirmButtonType}: Pick, 'confirmButtonType'>) => { @@ -18,24 +17,22 @@ const Basic = ({confirmButtonType}: Pick setIsOpen(false), []) return ( - - - - {isOpen && ( - - Lorem ipsum dolor sit Pippin good dog. - - )} - - + + + {isOpen && ( + + Lorem ipsum dolor sit Pippin good dog. + + )} + ) } @@ -57,16 +54,14 @@ const ShorthandHookFromActionMenu = () => { }, [confirm]) return ( - - - - } - items={[{text: 'Show dialog', onAction: onButtonClick}]} - /> - - - + + + } + items={[{text: 'Show dialog', onAction: onButtonClick}]} + /> + + ) } diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index ffcca312d8a..b62bf6290c2 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -1,6 +1,6 @@ import {render, fireEvent} from '@testing-library/react' import React from 'react' -import {ThemeProvider, SSRProvider} from '..' +import {ThemeProvider} from '..' import {NavList} from './NavList' import {FeatureFlags} from '../FeatureFlags' @@ -33,15 +33,13 @@ describe('NavList', () => { it('renders a simple list', () => { const {container} = render( - - - - Home - - About - Contact - - + + + Home + + About + Contact + , ) expect(container).toMatchSnapshot() @@ -50,18 +48,16 @@ describe('NavList', () => { it('renders with groups', () => { const {container} = render( - - - - - Getting started - - - - Avatar - - - + + + + Getting started + + + + Avatar + + , ) expect(container).toMatchSnapshot() @@ -216,18 +212,16 @@ describe('NavList.Item with NavList.SubNav', () => { it('has active styles if SubNav contains the current item and is closed', () => { const {container, getByRole, queryByRole} = render( - - - - Item - - - Sub Item - - - - - + + + Item + + + Sub Item + + + + , ) @@ -247,18 +241,16 @@ describe('NavList.Item with NavList.SubNav', () => { it('does not have active styles if SubNav contains the current item and is open', () => { const {container, queryByRole} = render( - - - - Item - - - Sub Item - - - - - + + + Item + + + Sub Item + + + + , ) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx index ea95e54d70b..4636f1685fd 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx @@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event' import {behavesAsComponent, checkExports} from '../utils/testing' import {SegmentedControl} from '.' // TODO: update import when we move this to the global index import theme from '../theme' -import {BaseStyles, SSRProvider, ThemeProvider} from '..' +import {BaseStyles, ThemeProvider} from '..' import {act} from 'react-test-renderer' import {viewportRanges} from '../hooks/useResponsiveValue' @@ -234,17 +234,15 @@ describe('SegmentedControl', () => { const handleChange = jest.fn() const component = render( - - - - {segmentData.map(({label}, index) => ( - - {label} - - ))} - - - + + + {segmentData.map(({label}, index) => ( + + {label} + + ))} + + , ) const button = component.getByText(segmentData[0].label) @@ -264,17 +262,15 @@ describe('SegmentedControl', () => { const handleClick = jest.fn() const component = render( - - - - {segmentData.map(({label}, index) => ( - - {label} - - ))} - - - + + + {segmentData.map(({label}, index) => ( + + {label} + + ))} + + , ) const button = component.getByText(segmentData[0].label) diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx index 7654e6ac3aa..df52b73dcbd 100644 --- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx +++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx @@ -4,7 +4,7 @@ import {Tooltip} from '../Tooltip' import {checkStoriesForAxeViolations} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import theme from '../../theme' -import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../..' +import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, BaseStyles} from '../..' import {XIcon} from '@primer/octicons-react' const TooltipComponent = (props: Omit & {text?: string}) => ( @@ -16,18 +16,16 @@ const TooltipComponent = (props: Omit & {text?: string}) = function ExampleWithActionMenu(actionMenuTrigger: React.ReactElement): JSX.Element { return ( - - - - {actionMenuTrigger} - - - New file - - - - - + + + {actionMenuTrigger} + + + New file + + + + ) } diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx index 7028221595b..602f90866a8 100644 --- a/packages/react/src/__tests__/ActionMenu.test.tsx +++ b/packages/react/src/__tests__/ActionMenu.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event' import axe from 'axe-core' import React from 'react' import theme from '../theme' -import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, Tooltip, Button, IconButton} from '..' +import {ActionMenu, ActionList, BaseStyles, ThemeProvider, Tooltip, Button, IconButton} from '..' import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip' import {behavesAsComponent, checkExports} from '../utils/testing' import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories' @@ -13,48 +13,44 @@ import {SearchIcon, KebabHorizontalIcon} from '@primer/octicons-react' function Example(): JSX.Element { return ( - - + + + Toggle Menu + + + New file + + Copy link + Edit file + event.preventDefault()}> + Delete file + + + Github + + + + + + + ) +} + +function ExampleWithTooltip(): JSX.Element { + return ( + + + Toggle Menu New file - - Copy link - Edit file - event.preventDefault()}> - Delete file - - - Github - - - - - ) -} - -function ExampleWithTooltip(): JSX.Element { - return ( - - - - - - Toggle Menu - - - New file - - - - - - + + ) } @@ -62,18 +58,16 @@ function ExampleWithTooltip(): JSX.Element { function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Element { return ( - - - - {actionMenuTrigger} - - - New file - - - - - + + + {actionMenuTrigger} + + + New file + + + + ) } @@ -81,53 +75,51 @@ function ExampleWithTooltipV2(actionMenuTrigger: React.ReactElement): JSX.Elemen function ExampleWithSubmenus(): JSX.Element { return ( - - - - Toggle Menu - - - New file - - Copy link - Edit file - - Paste - - - Paste special - - - - Paste plain text - Paste formulas - Paste with formatting - - - Paste from - - - - { - /*noop*/ - }} - > - Current clipboard - - History - Another device - - - - - - - - - - - + + + Toggle Menu + + + New file + + Copy link + Edit file + + Paste + + + Paste special + + + + Paste plain text + Paste formulas + Paste with formatting + + + Paste from + + + + { + /*noop*/ + }} + > + Current clipboard + + History + Another device + + + + + + + + + + ) } @@ -429,27 +421,25 @@ describe('ActionMenu', () => { const buttonId = 'toggle-menu-custom-id' const component = HTMLRender( - - - - Toggle Menu - - - New file - - Copy link - Edit file - event.preventDefault()}> - Delete file - - - Github - - - - - - + + + Toggle Menu + + + New file + + Copy link + Edit file + event.preventDefault()}> + Delete file + + + Github + + + + + , ) const button = component.getByRole('button') @@ -460,29 +450,27 @@ describe('ActionMenu', () => { const buttonId = 'toggle-menu-custom-id' const component = HTMLRender( - - - - - - - - - New file - - Copy link - Edit file - event.preventDefault()}> - Delete file - - - Github - - - - - - + + + + + + + + New file + + Copy link + Edit file + event.preventDefault()}> + Delete file + + + Github + + + + + , ) const button = component.getByRole('button') @@ -493,24 +481,22 @@ describe('ActionMenu', () => { it('should use the tooltip id to name the menu when the anchor is icon button', async () => { const component = HTMLRender( - - - - - - - - - - alert('Copy link clicked')}> - Copy link - ⌘C - - - - - - + + + + + + + + + alert('Copy link clicked')}> + Copy link + ⌘C + + + + + , ) diff --git a/packages/react/src/__tests__/AnchoredOverlay.test.tsx b/packages/react/src/__tests__/AnchoredOverlay.test.tsx index e8e4e904640..db184d06654 100644 --- a/packages/react/src/__tests__/AnchoredOverlay.test.tsx +++ b/packages/react/src/__tests__/AnchoredOverlay.test.tsx @@ -3,7 +3,6 @@ import {AnchoredOverlay} from '../AnchoredOverlay' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, fireEvent} from '@testing-library/react' import axe from 'axe-core' -import {SSRProvider} from '../index' import {Button} from '../deprecated' import theme from '../theme' import BaseStyles from '../BaseStyles' @@ -37,18 +36,16 @@ const AnchoredOverlayTestComponent = ({ ) return ( - - - } - > - - - - + + } + > + + + ) } diff --git a/packages/react/src/__tests__/Autocomplete.test.tsx b/packages/react/src/__tests__/Autocomplete.test.tsx index 34542a4ba2e..b8778f6ae1d 100644 --- a/packages/react/src/__tests__/Autocomplete.test.tsx +++ b/packages/react/src/__tests__/Autocomplete.test.tsx @@ -7,7 +7,6 @@ import type {AutocompleteMenuInternalProps, AutocompleteMenuItem} from '../Autoc import BaseStyles from '../BaseStyles' import theme from '../theme' import {ThemeProvider} from '../ThemeProvider' -import {SSRProvider} from '../utils/ssr' import {render} from '../utils/testing' const mockItems = [ @@ -35,19 +34,17 @@ const LabelledAutocomplete = ({ const {id = 'autocompleteInput', ...inputPropsRest} = inputProps return ( - - - - - - - - - - - + + + + + + + + + ) } @@ -461,12 +458,10 @@ describe('snapshots', () => { it('renders a single select input', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -474,17 +469,15 @@ describe('snapshots', () => { it('renders a multiselect input', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -492,17 +485,15 @@ describe('snapshots', () => { it('renders a multiselect input with selected menu items', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -511,22 +502,20 @@ describe('snapshots', () => { const handleAddItemMock = jest.fn() expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -534,12 +523,10 @@ describe('snapshots', () => { it('renders a custom empty state message', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -547,12 +534,10 @@ describe('snapshots', () => { it('renders a loading state', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -564,12 +549,10 @@ describe('snapshots', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) @@ -577,12 +560,10 @@ describe('snapshots', () => { it('renders with an input value', () => { expect( render( - - - - - - , + + + + , ), ).toMatchSnapshot() }) diff --git a/packages/react/src/__tests__/CheckboxGroup.test.tsx b/packages/react/src/__tests__/CheckboxGroup.test.tsx index fd05e9e382d..9df21700b48 100644 --- a/packages/react/src/__tests__/CheckboxGroup.test.tsx +++ b/packages/react/src/__tests__/CheckboxGroup.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import {render} from '@testing-library/react' -import {Checkbox, CheckboxGroup, FormControl, SSRProvider} from '..' +import {Checkbox, CheckboxGroup, FormControl} from '..' import {behavesAsComponent, checkExports} from '../utils/testing' import userEvent from '@testing-library/user-event' import {CheckboxGroupContext} from '../CheckboxGroup' @@ -18,25 +18,23 @@ describe('CheckboxGroup', () => { behavesAsComponent({ Component: CheckboxGroup, - options: {skipAs: true, skipSx: true}, // skipping sx check because we have to render this in a to keep snapshots consistent + options: {skipAs: true, skipSx: true}, toRender: () => ( - - - Choices - - - Choice one - - - - Choice two - - - - Choice three - - - + + Choices + + + Choice one + + + + Choice two + + + + Choice three + + ), }) diff --git a/packages/react/src/__tests__/CheckboxOrRadioGroup.test.tsx b/packages/react/src/__tests__/CheckboxOrRadioGroup.test.tsx index b29320c43db..7f127c3f4a2 100644 --- a/packages/react/src/__tests__/CheckboxOrRadioGroup.test.tsx +++ b/packages/react/src/__tests__/CheckboxOrRadioGroup.test.tsx @@ -1,6 +1,6 @@ import React from 'react' import {render, within} from '@testing-library/react' -import {Checkbox, FormControl, Radio, SSRProvider, TextInput} from '..' +import {Checkbox, FormControl, Radio, TextInput} from '..' import {behavesAsComponent, checkExports} from '../utils/testing' import CheckboxOrRadioGroup, {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup' @@ -17,25 +17,23 @@ describe('CheckboxOrRadioGroup', () => { }) behavesAsComponent({ Component: CheckboxOrRadioGroup, - options: {skipAs: true, skipSx: true}, // skipping sx check because we have to render this in a to keep snapshots consistent + options: {skipAs: true, skipSx: true}, toRender: () => ( - - - {INPUT_GROUP_LABEL} - - - Choice one - - - - Choice two - - - - Choice three - - - + + {INPUT_GROUP_LABEL} + + + Choice one + + + + Choice two + + + + Choice three + + ), }) checkExports('internal/components/CheckboxOrRadioGroup', { diff --git a/packages/react/src/__tests__/FormControl.test.tsx b/packages/react/src/__tests__/FormControl.test.tsx index f178ef57e2e..e3d9e50b86e 100644 --- a/packages/react/src/__tests__/FormControl.test.tsx +++ b/packages/react/src/__tests__/FormControl.test.tsx @@ -7,7 +7,6 @@ import { Checkbox, FormControl, Select, - SSRProvider, Textarea, TextInput, TextInputWithTokens, @@ -24,12 +23,10 @@ describe('FormControl', () => { describe('rendering', () => { it('renders with a hidden label', () => { const {getByLabelText, getByText} = render( - - - {LABEL_TEXT} - - - , + + {LABEL_TEXT} + + , ) const input = getByLabelText(LABEL_TEXT) @@ -41,12 +38,10 @@ describe('FormControl', () => { it('renders with a custom ID', () => { const {getByLabelText} = render( - - - {LABEL_TEXT} - - - , + + {LABEL_TEXT} + + , ) const input = getByLabelText(LABEL_TEXT) @@ -56,12 +51,10 @@ describe('FormControl', () => { it('renders as disabled', () => { const {getByLabelText} = render( - - - {LABEL_TEXT} - - - , + + {LABEL_TEXT} + + , ) const input = getByLabelText(LABEL_TEXT) @@ -71,12 +64,10 @@ describe('FormControl', () => { it('renders as required', () => { const {getByRole} = render( - - - {LABEL_TEXT} - - - , + + {LABEL_TEXT} + + , ) const input = getByRole('textbox') @@ -86,13 +77,11 @@ describe('FormControl', () => { it('renders with a caption', () => { const {getByText} = render( - - - {LABEL_TEXT} - - {CAPTION_TEXT} - - , + + {LABEL_TEXT} + + {CAPTION_TEXT} + , ) const caption = getByText(CAPTION_TEXT) @@ -102,13 +91,11 @@ describe('FormControl', () => { it('renders with a successful validation message', () => { const {getByText} = render( - - - {LABEL_TEXT} - - {ERROR_TEXT} - - , + + {LABEL_TEXT} + + {ERROR_TEXT} + , ) const validationMessage = getByText(ERROR_TEXT) @@ -118,13 +105,11 @@ describe('FormControl', () => { it('renders with an error validation message', () => { const {getByText} = render( - - - {LABEL_TEXT} - - {ERROR_TEXT} - - , + + {LABEL_TEXT} + + {ERROR_TEXT} + , ) const validationMessage = getByText(ERROR_TEXT) @@ -135,19 +120,17 @@ describe('FormControl', () => { it('renders with the input as a TextInputWithTokens', () => { const onRemoveMock = jest.fn() const {getByLabelText} = render( - - - {LABEL_TEXT} - - - , + + {LABEL_TEXT} + + , ) const input = getByLabelText(LABEL_TEXT) @@ -157,14 +140,12 @@ describe('FormControl', () => { it('renders with the input as an Autocomplete', () => { const {getByLabelText} = render( - - - {LABEL_TEXT} - - - - - , + + {LABEL_TEXT} + + + + , ) const input = getByLabelText(LABEL_TEXT) @@ -174,16 +155,14 @@ describe('FormControl', () => { it('renders with the input as a Select', () => { const {getByLabelText, getByText} = render( - - - {LABEL_TEXT} - - - , + + {LABEL_TEXT} + + , ) const input = getByLabelText(LABEL_TEXT) @@ -195,12 +174,10 @@ describe('FormControl', () => { it('renders with the input as a Textarea', () => { const {getByLabelText, getByText} = render( - - - {LABEL_TEXT} -