Skip to content

Commit d99f606

Browse files
keithamuskeithamus
committed
migrate DialogV1 to css modules
1 parent 307e706 commit d99f606

File tree

2 files changed

+153
-50
lines changed

2 files changed

+153
-50
lines changed

‎packages/react/src/DialogV1/Dialog.module.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.Overlay {
2+
&:before {
3+
position: fixed;
4+
top: 0;
5+
right: 0;
6+
bottom: 0;
7+
left: 0;
8+
display: block;
9+
cursor: default;
10+
content: ' ';
11+
z-index: 99;
12+
background: var(--overlay-backdrop-bgColor, var(--color-primer-fg-canvas-backdrop));
13+
}
14+
}
15+
16+
.CloseIcon {
17+
position: absolute;
18+
top: var(--base-size-8);
19+
right: var(--base-size-16);
20+
}
21+
22+
.Dialog {
23+
box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
24+
border-radius: var(--borderRadius-medium);
25+
position: fixed;
26+
top: 0;
27+
left: 50%;
28+
transform: translateX(-50%);
29+
max-height: 80vh;
30+
z-index: 999;
31+
margin: 10vh auto;
32+
background-color: var(--bgColor-default, var(--color-canvas-default));
33+
width: 440px;
34+
outline: none;
35+
36+
@media screen and (--viewportRange-narrow) {
37+
width: 320px;
38+
}
39+
40+
@media screen and (--viewportRange-wide) {
41+
width: 640px;
42+
}
43+
44+
@media screen and (max-width: 750px) {
45+
width: 100dvw;
46+
margin: 0;
47+
border-radius: 0;
48+
height: 100dvh;
49+
}
50+
}
51+
52+
.Header {
53+
border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
54+
border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
55+
display: flex;
56+
padding: var(--base-size-16);
57+
background: var(--bgColor-muted, var(--color-canvas-subtle));
58+
59+
@media screen and (max-width: 750px) {
60+
border-radius: 0px;
61+
}
62+
}

‎packages/react/src/DialogV1/Dialog.tsx‎

Lines changed: 91 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ import Text from '../Text'
1010
import type {ComponentProps} from '../utils/types'
1111
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
1212
import {XIcon} from '@primer/octicons-react'
13+
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
14+
import {useFeatureFlag} from '../FeatureFlags'
15+
import classes from './Dialog.module.css'
16+
17+
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
1318

1419
// Dialog v1
1520
const noop = () => null
@@ -19,41 +24,50 @@ type StyledDialogBaseProps = {
1924
wide?: boolean
2025
} & SxProp
2126

22-
const DialogBase = styled.div<StyledDialogBaseProps>`
23-
box-shadow: ${get('shadows.shadow.large')};
24-
border-radius: ${get('radii.2')};
25-
position: fixed;
26-
top: 0;
27-
left: 50%;
28-
transform: translateX(-50%);
29-
max-height: 80vh;
30-
z-index: 999;
31-
margin: 10vh auto;
32-
background-color: ${get('colors.canvas.default')};
33-
width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
34-
outline: none;
35-
36-
@media screen and (max-width: 750px) {
37-
width: 100dvw;
38-
margin: 0;
39-
border-radius: 0;
40-
height: 100dvh;
41-
}
27+
const DialogBase = toggleStyledComponent(
28+
CSS_MODULES_FEATURE_FLAG,
29+
'div',
30+
styled.div<StyledDialogBaseProps>`
31+
box-shadow: ${get('shadows.shadow.large')};
32+
border-radius: ${get('radii.2')};
33+
position: fixed;
34+
top: 0;
35+
left: 50%;
36+
transform: translateX(-50%);
37+
max-height: 80vh;
38+
z-index: 999;
39+
margin: 10vh auto;
40+
background-color: ${get('colors.canvas.default')};
41+
width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
42+
outline: none;
43+
44+
@media screen and (max-width: 750px) {
45+
width: 100dvw;
46+
margin: 0;
47+
border-radius: 0;
48+
height: 100dvh;
49+
}
4250
43-
${sx};
44-
`
51+
${sx};
52+
`,
53+
)
4554

46-
const DialogHeaderBase = styled(Box)<SxProp>`
47-
border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
48-
border-bottom: 1px solid ${get('colors.border.default')};
49-
display: flex;
55+
const DialogHeaderBase = toggleStyledComponent(
56+
CSS_MODULES_FEATURE_FLAG,
57+
'div',
58+
styled(Box)<SxProp>`
59+
border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
60+
border-bottom: 1px solid ${get('colors.border.default')};
61+
display: flex;
5062
51-
@media screen and (max-width: 750px) {
52-
border-radius: 0px;
53-
}
63+
@media screen and (max-width: 750px) {
64+
border-radius: 0px;
65+
}
66+
67+
${sx};
68+
`,
69+
)
5470

55-
${sx};
56-
`
5771
export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>
5872

5973
function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) {
@@ -65,28 +79,40 @@ function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...re
6579
)
6680
}
6781

82+
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
83+
6884
return (
69-
<DialogHeaderBase theme={theme} p={3} backgroundColor={backgroundColor} {...rest}>
85+
<DialogHeaderBase
86+
theme={theme}
87+
p={3}
88+
backgroundColor={backgroundColor}
89+
{...rest}
90+
className={enabled ? classes.Header : undefined}
91+
>
7092
{children}
7193
</DialogHeaderBase>
7294
)
7395
}
7496

75-
const Overlay = styled.span`
76-
&:before {
77-
position: fixed;
78-
top: 0;
79-
right: 0;
80-
bottom: 0;
81-
left: 0;
82-
display: block;
83-
cursor: default;
84-
content: ' ';
85-
background: transparent;
86-
z-index: 99;
87-
background: ${get('colors.primer.canvas.backdrop')};
88-
}
89-
`
97+
const Overlay = toggleStyledComponent(
98+
CSS_MODULES_FEATURE_FLAG,
99+
'span',
100+
styled.span`
101+
&:before {
102+
position: fixed;
103+
top: 0;
104+
right: 0;
105+
bottom: 0;
106+
left: 0;
107+
display: block;
108+
cursor: default;
109+
content: ' ';
110+
background: transparent;
111+
z-index: 99;
112+
background: ${get('colors.primer.canvas.backdrop')};
113+
}
114+
`,
115+
)
90116

91117
type InternalDialogProps = {
92118
isOpen?: boolean
@@ -118,17 +144,32 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
118144
returnFocusRef,
119145
overlayRef,
120146
})
147+
148+
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
149+
150+
const iconStyles = enabled
151+
? {className: classes.CloseIcon}
152+
: {sx: {position: 'absolute', top: '8px', right: '16px'}}
153+
121154
return isOpen ? (
122155
<>
123-
<Overlay ref={overlayRef} />
124-
<DialogBase tabIndex={-1} ref={modalRef} role="dialog" aria-modal="true" {...props} {...getDialogProps()}>
156+
<Overlay className={enabled ? classes.Overlay : undefined} ref={overlayRef} />
157+
<DialogBase
158+
tabIndex={-1}
159+
ref={modalRef}
160+
role="dialog"
161+
aria-modal="true"
162+
{...props}
163+
{...getDialogProps()}
164+
className={enabled ? classes.Dialog : undefined}
165+
>
125166
<IconButton
126167
icon={XIcon}
127168
ref={closeButtonRef}
128169
onClick={onCloseClick}
129-
sx={{position: 'absolute', top: '8px', right: '16px'}}
130170
aria-label="Close"
131171
variant="invisible"
172+
{...iconStyles}
132173
/>
133174
{children}
134175
</DialogBase>

0 commit comments

Comments
 (0)