Skip to content

Commit e76835c

Browse files
jonrohanjonrohan
authored
chore(Popover): Remove the CSS modules feature flag for the Popover component (#5827)
1 parent 5e514f3 commit e76835c

File tree

4 files changed

+70
-2602
lines changed

4 files changed

+70
-2602
lines changed

‎.changeset/green-carpets-float.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
Remove the CSS modules feature flag for Popover

‎packages/react/src/Popover/Popover.test.tsx

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Popover from '../Popover'
44
import {render, behavesAsComponent, checkExports} from '../utils/testing'
55
import {render as HTMLRender} from '@testing-library/react'
66
import axe from 'axe-core'
7-
import {FeatureFlags} from '../FeatureFlags'
87

98
const comp = (
109
<Popover caret="top" open>
@@ -25,19 +24,7 @@ describe('Popover', () => {
2524

2625
it('should support `className` on the outermost element', () => {
2726
const Element = () => <Popover className={'test-class-name'}></Popover>
28-
const FeatureFlagElement = () => {
29-
return (
30-
<FeatureFlags
31-
flags={{
32-
primer_react_css_modules_ga: true,
33-
}}
34-
>
35-
<Element />
36-
</FeatureFlags>
37-
)
38-
}
3927
expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
40-
expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
4128
})
4229

4330
it('should have no axe violations', async () => {

‎packages/react/src/Popover/Popover.tsx

Lines changed: 17 additions & 225 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import {clsx} from 'clsx'
2-
import styled from 'styled-components'
3-
import {get} from '../constants'
42
import type {SxProp} from '../sx'
5-
import sx from '../sx'
6-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
7-
import {useFeatureFlag} from '../FeatureFlags'
83
import classes from './Popover.module.css'
94
import type {HTMLProps} from 'react'
105
import React from 'react'
6+
import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
117

128
type CaretPosition =
139
| 'top'
@@ -32,241 +28,37 @@ type StyledPopoverProps = {
3228
open?: boolean
3329
} & SxProp
3430

35-
const CSS_MODULES_FLAG = 'primer_react_css_modules_ga'
36-
37-
const StyledPopover = styled.div.attrs<StyledPopoverProps>(({className, caret = 'top'}) => {
38-
return {
39-
className: clsx(className, `caret-pos--${caret}`),
40-
}
41-
})<StyledPopoverProps>`
42-
position: ${props => (props.relative ? 'relative' : 'absolute')};
43-
z-index: 100;
44-
display: ${props => (props.open ? 'block' : 'none')};
45-
${sx};
46-
`
47-
48-
const BaseComponent = toggleStyledComponent(CSS_MODULES_FLAG, 'div', StyledPopover)
49-
5031
export type PopoverProps = {
5132
/** Class name for custom styling */
5233
className?: string
5334
} & StyledPopoverProps &
5435
HTMLProps<HTMLDivElement>
5536

56-
const Popover = React.forwardRef<HTMLElement, PopoverProps>(function Popover(
37+
const PopoverBaseComponent = toggleSxComponent('div') as React.ComponentType<
38+
PopoverProps & React.RefAttributes<HTMLDivElement>
39+
>
40+
const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function Popover(
5741
{className, caret = 'top', open, relative, ...props},
5842
forwardRef,
5943
) {
60-
const enabled = useFeatureFlag(CSS_MODULES_FLAG)
61-
if (enabled) {
62-
return (
63-
<BaseComponent
64-
{...props}
65-
ref={forwardRef}
66-
data-open={open ? '' : undefined}
67-
data-relative={relative ? '' : undefined}
68-
data-caret={caret}
69-
className={clsx(className, classes.Popover)}
70-
/>
71-
)
72-
}
73-
74-
return <BaseComponent {...props} className={className} caret={caret} open={open} relative={relative} />
44+
return (
45+
<PopoverBaseComponent
46+
{...props}
47+
ref={forwardRef}
48+
data-open={open ? '' : undefined}
49+
data-relative={relative ? '' : undefined}
50+
data-caret={caret}
51+
className={clsx(className, classes.Popover)}
52+
/>
53+
)
7554
})
7655
Popover.displayName = 'Popover'
7756

78-
const StyledPopoverContent = toggleStyledComponent(
79-
CSS_MODULES_FLAG,
80-
'div',
81-
styled.div<SxProp>`
82-
border: 1px solid ${get('colors.border.default')};
83-
border-radius: ${get('radii.2')};
84-
position: relative;
85-
width: 232px;
86-
margin-right: auto;
87-
margin-left: auto;
88-
padding: ${get('space.4')};
89-
background-color: ${get('colors.canvas.overlay')};
90-
91-
// Carets
92-
&::before,
93-
&::after {
94-
position: absolute;
95-
left: 50%;
96-
display: inline-block;
97-
content: '';
98-
}
99-
100-
&::before {
101-
top: -${get('space.3')};
102-
margin-left: -9px;
103-
border: ${get('space.2')} solid transparent; // TODO: solid?
104-
border-bottom-color: ${get('colors.border.default')};
105-
}
106-
107-
&::after {
108-
top: -14px;
109-
margin-left: -${get('space.2')};
110-
border: 7px solid transparent; // todo: solid
111-
border-bottom-color: ${get('colors.canvas.overlay')};
112-
}
113-
114-
// Bottom-oriented carets
115-
${StyledPopover}.caret-pos--bottom & ,
116-
${StyledPopover}.caret-pos--bottom-right & ,
117-
${StyledPopover}.caret-pos--bottom-left & {
118-
&::before,
119-
&::after {
120-
top: auto;
121-
border-bottom-color: transparent;
122-
}
123-
124-
&::before {
125-
bottom: -${get('space.3')};
126-
border-top-color: ${get('colors.border.default')};
127-
}
128-
129-
&::after {
130-
bottom: -14px;
131-
// stylelint-disable-next-line primer/borders
132-
border-top-color: ${get('colors.canvas.overlay')};
133-
}
134-
}
135-
136-
// Top & Bottom: Right-oriented carets
137-
${StyledPopover}.caret-pos--top-right & ,
138-
${StyledPopover}.caret-pos--bottom-right & {
139-
right: -9px;
140-
margin-right: 0;
141-
142-
&::before,
143-
&::after {
144-
left: auto;
145-
margin-left: 0;
146-
}
147-
148-
&::before {
149-
right: 20px;
150-
}
151-
152-
&::after {
153-
right: 21px;
154-
}
155-
}
156-
157-
// Top & Bottom: Left-oriented carets
158-
${StyledPopover}.caret-pos--top-left & ,
159-
${StyledPopover}.caret-pos--bottom-left & {
160-
left: -9px;
161-
margin-left: 0;
162-
163-
&::before,
164-
&::after {
165-
left: ${get('space.4')};
166-
margin-left: 0;
167-
}
168-
169-
&::after {
170-
left: calc(${get('space.4')} + 1px);
171-
}
172-
}
173-
174-
// Right- & Left-oriented carets
175-
${StyledPopover}.caret-pos--right & ,
176-
${StyledPopover}.caret-pos--right-top & ,
177-
${StyledPopover}.caret-pos--right-bottom & ,
178-
${StyledPopover}.caret-pos--left & ,
179-
${StyledPopover}.caret-pos--left-top & ,
180-
${StyledPopover}.caret-pos--left-bottom & {
181-
&::before,
182-
&::after {
183-
top: 50%;
184-
left: auto;
185-
margin-left: 0;
186-
border-bottom-color: transparent;
187-
}
188-
189-
&::before {
190-
// stylelint-disable-next-line primer/spacing
191-
margin-top: calc((${get('space.2')} + 1px) * -1);
192-
}
193-
194-
&::after {
195-
margin-top: -${get('space.2')};
196-
}
197-
}
198-
199-
// Right-oriented carets
200-
${StyledPopover}.caret-pos--right & ,
201-
${StyledPopover}.caret-pos--right-top & ,
202-
${StyledPopover}.caret-pos--right-bottom & {
203-
&::before {
204-
right: -${get('space.3')};
205-
border-left-color: ${get('colors.border.default')};
206-
}
207-
208-
&::after {
209-
right: -14px;
210-
// stylelint-disable-next-line primer/borders
211-
border-left-color: ${get('colors.canvas.overlay')};
212-
}
213-
}
214-
215-
// Left-oriented carets
216-
${StyledPopover}.caret-pos--left & ,
217-
${StyledPopover}.caret-pos--left-top & ,
218-
${StyledPopover}.caret-pos--left-bottom & {
219-
&::before {
220-
left: -${get('space.3')};
221-
border-right-color: ${get('colors.border.default')};
222-
}
223-
224-
&::after {
225-
left: -14px;
226-
// stylelint-disable-next-line primer/borders
227-
border-right-color: ${get('colors.canvas.overlay')};
228-
}
229-
}
230-
231-
// Right & Left: Top-oriented carets
232-
${StyledPopover}.caret-pos--right-top & ,
233-
${StyledPopover}.caret-pos--left-top & {
234-
&::before,
235-
&::after {
236-
top: ${get('space.4')};
237-
}
238-
}
239-
240-
// Right & Left: Bottom-oriented carets
241-
${StyledPopover}.caret-pos--right-bottom & ,
242-
${StyledPopover}.caret-pos--left-bottom & {
243-
&::before,
244-
&::after {
245-
top: auto;
246-
}
247-
248-
&::before {
249-
bottom: ${get('space.3')};
250-
}
251-
252-
&::after {
253-
bottom: calc(${get('space.3')} + 1px);
254-
}
255-
}
256-
257-
${sx};
258-
`,
259-
)
260-
26157
export type PopoverContentProps = {className?: string} & StyledPopoverProps & HTMLProps<HTMLDivElement>
26258

59+
const PopoverContentBaseComponent = toggleSxComponent('div') as React.ComponentType<PopoverContentProps>
26360
const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({className, ...props}) => {
264-
const enabled = useFeatureFlag(CSS_MODULES_FLAG)
265-
if (enabled) {
266-
return <StyledPopoverContent {...props} className={clsx(className, classes.PopoverContent)} />
267-
}
268-
269-
return <StyledPopoverContent {...props} className={className} />
61+
return <PopoverContentBaseComponent {...props} className={clsx(className, classes.PopoverContent)} />
27062
}
27163

27264
PopoverContent.displayName = 'Popover.Content'

0 commit comments

Comments
 (0)