Skip to content

Commit

Permalink
refactor: remove SSRProvider and useSSRSafeId (#4783)
Browse files Browse the repository at this point in the history 
* refactor: remove SSRProvider and useSSRSafeId

* chore: remove unused eslint disables

* chore: remove unused prop

---------

Co-authored-by: Josh Black <[email protected]>
  • Loading branch information
@joshblack
joshblack and joshblack authored Aug 14, 2024
1 parent 0e83bec commit 7c57f40
Show file tree
Hide file tree
Showing 17 changed files with 538 additions and 669 deletions.
5 changes: 5 additions & 0 deletions .changeset/eleven-drinks-kiss.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': major
---

Remove the SSRProvider component and useSSRSafeId hook
78 changes: 36 additions & 42 deletions packages/react/src/ActionList/ActionList.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<ActionList>
<ActionList.Item>New file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Item variant="danger">Delete file</ActionList.Item>
<ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="d">
Link Item
</ActionList.LinkItem>
</ActionList>
</BaseStyles>
</SSRProvider>
<BaseStyles>
<ActionList>
<ActionList.Item>New file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Item variant="danger">Delete file</ActionList.Item>
<ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="d">
Link Item
</ActionList.LinkItem>
</ActionList>
</BaseStyles>
</ThemeProvider>
)
}
Expand Down Expand Up @@ -266,19 +264,17 @@ describe('ActionList', () => {
expect(() =>
HTMLRender(
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Heading as="h1">Heading</ActionList.Heading>
<ActionList.Item>Item</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>
</SSRProvider>
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Heading as="h1">Heading</ActionList.Heading>
<ActionList.Item>Item</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>
</ThemeProvider>,
),
).toThrow(
Expand All @@ -293,20 +289,18 @@ describe('ActionList', () => {
expect(() =>
HTMLRender(
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Group>
<ActionList.GroupHeading as="h2">Group Heading</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>
</SSRProvider>
<BaseStyles>
<ActionMenu open={true}>
<ActionMenu.Button>Trigger</ActionMenu.Button>
<ActionMenu.Overlay>
<ActionList>
<ActionList.Group>
<ActionList.GroupHeading as="h2">Group Heading</ActionList.GroupHeading>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
</BaseStyles>
</ThemeProvider>,
),
).toThrow(
Expand Down
53 changes: 24 additions & 29 deletions packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<React.ComponentProps<typeof ConfirmationDialog>, 'confirmButtonType'>) => {
Expand All @@ -18,24 +17,22 @@ const Basic = ({confirmButtonType}: Pick<React.ComponentProps<typeof Confirmatio
const onDialogClose = useCallback(() => setIsOpen(false), [])
return (
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
Show dialog
</Button>
{isOpen && (
<ConfirmationDialog
title="Confirm"
onClose={onDialogClose}
cancelButtonContent="Secondary"
confirmButtonContent="Primary"
confirmButtonType={confirmButtonType}
>
Lorem ipsum dolor sit Pippin good dog.
</ConfirmationDialog>
)}
</BaseStyles>
</SSRProvider>
<BaseStyles>
<Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
Show dialog
</Button>
{isOpen && (
<ConfirmationDialog
title="Confirm"
onClose={onDialogClose}
cancelButtonContent="Secondary"
confirmButtonContent="Primary"
confirmButtonType={confirmButtonType}
>
Lorem ipsum dolor sit Pippin good dog.
</ConfirmationDialog>
)}
</BaseStyles>
</ThemeProvider>
)
}
Expand All @@ -57,16 +54,14 @@ const ShorthandHookFromActionMenu = () => {
}, [confirm])
return (
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<Box display="flex" flexDirection="column" alignItems="flex-start">
<ActionMenu
renderAnchor={props => <Button {...props}>{text}</Button>}
items={[{text: 'Show dialog', onAction: onButtonClick}]}
/>
</Box>
</BaseStyles>
</SSRProvider>
<BaseStyles>
<Box display="flex" flexDirection="column" alignItems="flex-start">
<ActionMenu
renderAnchor={props => <Button {...props}>{text}</Button>}
items={[{text: 'Show dialog', onAction: onButtonClick}]}
/>
</Box>
</BaseStyles>
</ThemeProvider>
)
}
Expand Down
84 changes: 38 additions & 46 deletions packages/react/src/NavList/NavList.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -33,15 +33,13 @@ describe('NavList', () => {
it('renders a simple list', () => {
const {container} = render(
<ThemeProvider>
<SSRProvider>
<NavList>
<NavList.Item href="/" aria-current="page">
Home
</NavList.Item>
<NavList.Item href="/about">About</NavList.Item>
<NavList.Item href="/contact">Contact</NavList.Item>
</NavList>
</SSRProvider>
<NavList>
<NavList.Item href="/" aria-current="page">
Home
</NavList.Item>
<NavList.Item href="/about">About</NavList.Item>
<NavList.Item href="/contact">Contact</NavList.Item>
</NavList>
</ThemeProvider>,
)
expect(container).toMatchSnapshot()
Expand All @@ -50,18 +48,16 @@ describe('NavList', () => {
it('renders with groups', () => {
const {container} = render(
<ThemeProvider>
<SSRProvider>
<NavList>
<NavList.Group title="Overview">
<NavList.Item href="/getting-started" aria-current="page">
Getting started
</NavList.Item>
</NavList.Group>
<NavList.Group title="Components">
<NavList.Item href="/Avatar">Avatar</NavList.Item>
</NavList.Group>
</NavList>
</SSRProvider>
<NavList>
<NavList.Group title="Overview">
<NavList.Item href="/getting-started" aria-current="page">
Getting started
</NavList.Item>
</NavList.Group>
<NavList.Group title="Components">
<NavList.Item href="/Avatar">Avatar</NavList.Item>
</NavList.Group>
</NavList>
</ThemeProvider>,
)
expect(container).toMatchSnapshot()
Expand Down Expand Up @@ -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(
<ThemeProvider>
<SSRProvider>
<NavList>
<NavList.Item>
Item
<NavList.SubNav>
<NavList.Item href="#" aria-current="page">
Sub Item
</NavList.Item>
</NavList.SubNav>
</NavList.Item>
</NavList>
</SSRProvider>
<NavList>
<NavList.Item>
Item
<NavList.SubNav>
<NavList.Item href="#" aria-current="page">
Sub Item
</NavList.Item>
</NavList.SubNav>
</NavList.Item>
</NavList>
</ThemeProvider>,
)

Expand All @@ -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(
<ThemeProvider>
<SSRProvider>
<NavList>
<NavList.Item>
Item
<NavList.SubNav>
<NavList.Item href="#" aria-current="page">
Sub Item
</NavList.Item>
</NavList.SubNav>
</NavList.Item>
</NavList>
</SSRProvider>
<NavList>
<NavList.Item>
Item
<NavList.SubNav>
<NavList.Item href="#" aria-current="page">
Sub Item
</NavList.Item>
</NavList.SubNav>
</NavList.Item>
</NavList>
</ThemeProvider>,
)

Expand Down
42 changes: 19 additions & 23 deletions packages/react/src/SegmentedControl/SegmentedControl.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -234,17 +234,15 @@ describe('SegmentedControl', () => {
const handleChange = jest.fn()
const component = render(
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<SegmentedControl aria-label="File view" onChange={handleChange} variant={{narrow: 'dropdown'}}>
{segmentData.map(({label}, index) => (
<SegmentedControl.Button selected={index === 0} key={label}>
{label}
</SegmentedControl.Button>
))}
</SegmentedControl>
</BaseStyles>
</SSRProvider>
<BaseStyles>
<SegmentedControl aria-label="File view" onChange={handleChange} variant={{narrow: 'dropdown'}}>
{segmentData.map(({label}, index) => (
<SegmentedControl.Button selected={index === 0} key={label}>
{label}
</SegmentedControl.Button>
))}
</SegmentedControl>
</BaseStyles>
</ThemeProvider>,
)
const button = component.getByText(segmentData[0].label)
Expand All @@ -264,17 +262,15 @@ describe('SegmentedControl', () => {
const handleClick = jest.fn()
const component = render(
<ThemeProvider theme={theme}>
<SSRProvider>
<BaseStyles>
<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown'}}>
{segmentData.map(({label}, index) => (
<SegmentedControl.Button selected={index === 0} key={label} onClick={handleClick}>
{label}
</SegmentedControl.Button>
))}
</SegmentedControl>
</BaseStyles>
</SSRProvider>
<BaseStyles>
<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown'}}>
{segmentData.map(({label}, index) => (
<SegmentedControl.Button selected={index === 0} key={label} onClick={handleClick}>
{label}
</SegmentedControl.Button>
))}
</SegmentedControl>
</BaseStyles>
</ThemeProvider>,
)
const button = component.getByText(segmentData[0].label)
Expand Down
Loading

0 comments on commit 7c57f40

Please sign in to comment.