Skip to content

Commit fe39e21

Browse files
echarlesecharles
committed
overlay
1 parent 25e87fb commit fe39e21

File tree

3 files changed

+87
-291
lines changed

3 files changed

+87
-291
lines changed

‎src/components/overlay/Overlay.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const ThemedOverlay = (props: {colorMode?: ThemeProviderProps["colorMode"]} & Ov
4141
setIsOpen={setIsOpen}
4242
openButtonRef={openButtonRef}
4343
closeButtonRef={closeButtonRef}
44-
headingRef={props.direction === 'left' ? headingRef : undefined}
4544
/>
4645
</Box>
4746
</Box>

‎src/components/overlay/Overlay.tsx‎

Lines changed: 87 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useState } from 'react';
2-
import { Box, IconButton, Overlay as PrimerOverlay } from "@primer/react";
2+
import { IconButton, Overlay as PrimerOverlay } from "@primer/react";
33
import { XIcon } from "@primer/octicons-react";
4+
import { Box } from '../box/Box';
45

56
export interface OverlayProps {
67
closeButtonRef?: React.RefObject<HTMLButtonElement>;
@@ -11,6 +12,7 @@ export interface OverlayProps {
1112
openButtonRef?: React.RefObject<HTMLButtonElement>;
1213
setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
1314
width?: number | string;
15+
zIndex?: number;
1416
}
1517

1618
const PrimerAddonOverlay = (props: OverlayProps) => {
@@ -23,6 +25,7 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
2325
openButtonRef,
2426
setIsOpen,
2527
width,
28+
zIndex,
2629
} = props;
2730
const [direction, _] = useState(propsDirection);
2831
const [top, setTop] = useState(0);
@@ -34,84 +37,90 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
3437
closeButtonRef && openButtonRef ?
3538
<>
3639
{isOpen ?
37-
direction === 'left' ?
38-
<PrimerOverlay
39-
initialFocusRef={closeButtonRef}
40-
returnFocusRef={openButtonRef}
41-
ignoreClickRefs={[openButtonRef]}
42-
onEscape={closeOverlay}
43-
onClickOutside={closeOverlay}
44-
width="auto"
45-
anchorSide="inside-right"
46-
top={top}
47-
>
48-
<Box sx={{
49-
/* We need to remove the padding */
50-
height: `calc(100vh - ${top}px - 8px)`,
51-
width,
52-
display: 'flex',
53-
flexDirection: 'column',
54-
alignItems: 'center',
55-
padding: '4px'
56-
}}>
57-
<Box
58-
sx={{
59-
display: 'flex',
60-
justifyContent: 'right',
61-
width: '100%'
62-
}}
63-
>
64-
<IconButton
65-
variant='invisible'
66-
ref={closeButtonRef}
67-
onClick={closeOverlay}
68-
icon={XIcon}
69-
aria-labelledby="close"
70-
/>
40+
direction === 'left' ?
41+
<Box sx={{ zIndex }}>
42+
<PrimerOverlay
43+
initialFocusRef={closeButtonRef}
44+
returnFocusRef={openButtonRef}
45+
ignoreClickRefs={[openButtonRef]}
46+
onEscape={closeOverlay}
47+
onClickOutside={closeOverlay}
48+
width="auto"
49+
anchorSide="inside-right"
50+
left={0}
51+
position="fixed"
52+
top={top}
53+
>
54+
<Box sx={{
55+
/* We need to remove the padding */
56+
height: `calc(100vh - ${top}px - 8px)`,
57+
width,
58+
display: 'flex',
59+
flexDirection: 'column',
60+
alignItems: 'center',
61+
padding: '4px'
62+
}}>
63+
<Box
64+
sx={{
65+
display: 'flex',
66+
justifyContent: 'right',
67+
width: '100%'
68+
}}
69+
>
70+
<IconButton
71+
variant='invisible'
72+
ref={closeButtonRef}
73+
onClick={closeOverlay}
74+
icon={XIcon}
75+
aria-labelledby="close"
76+
/>
77+
</Box>
78+
{content}
7179
</Box>
72-
{content}
73-
</Box>
74-
</PrimerOverlay>
80+
</PrimerOverlay>
81+
</Box>
7582
:
76-
<PrimerOverlay
77-
initialFocusRef={closeButtonRef}
78-
returnFocusRef={openButtonRef}
79-
ignoreClickRefs={[openButtonRef]}
80-
onEscape={closeOverlay}
81-
onClickOutside={closeOverlay}
82-
width="auto"
83-
anchorSide={'inside-left'}
84-
right={0}
85-
position="fixed"
86-
top={top}
87-
>
88-
<Box sx={{
89-
/* We need to remove the padding */
90-
height: `calc(100vh - ${top}px - 8px)`,
91-
width,
92-
display: 'flex',
93-
flexDirection: 'column',
94-
alignItems: 'center',
95-
padding: '4px'
96-
}}>
97-
<Box
98-
sx={{
99-
display: 'flex',
100-
justifyContent: 'right',
101-
width: '100%'
102-
}}
103-
>
104-
<IconButton
105-
variant='invisible'
106-
ref={closeButtonRef}
107-
onClick={closeOverlay}
108-
icon={XIcon}
109-
aria-labelledby="close"
110-
/>
83+
<Box sx={{ zIndex }}>
84+
<PrimerOverlay
85+
initialFocusRef={closeButtonRef}
86+
returnFocusRef={openButtonRef}
87+
ignoreClickRefs={[openButtonRef]}
88+
onEscape={closeOverlay}
89+
onClickOutside={closeOverlay}
90+
width="auto"
91+
anchorSide={'inside-left'}
92+
right={0}
93+
position="fixed"
94+
top={top}
95+
>
96+
<Box sx={{
97+
/* We need to remove the padding */
98+
height: `calc(100vh - ${top}px - 8px)`,
99+
width,
100+
display: 'flex',
101+
flexDirection: 'column',
102+
alignItems: 'center',
103+
padding: '4px'
104+
}}>
105+
<Box
106+
sx={{
107+
display: 'flex',
108+
justifyContent: 'right',
109+
width: '100%'
110+
}}
111+
>
112+
<IconButton
113+
variant='invisible'
114+
ref={closeButtonRef}
115+
onClick={closeOverlay}
116+
icon={XIcon}
117+
aria-labelledby="close"
118+
/>
119+
</Box>
120+
{content}
111121
</Box>
112-
{content}
113-
</Box>
114-
</PrimerOverlay>
122+
</PrimerOverlay>
123+
</Box>
115124
: <></>}
116125
</>
117126
:
@@ -122,10 +131,11 @@ const PrimerAddonOverlay = (props: OverlayProps) => {
122131
export const Overlay = ({
123132
width = '500px',
124133
direction = 'left',
134+
zIndex = 100,
125135
...rest
126136
}: OverlayProps) => {
127137
return (
128-
<PrimerAddonOverlay width={width} direction={direction} {...rest}/>
138+
<PrimerAddonOverlay width={width} direction={direction} zIndex={zIndex} {...rest}/>
129139
)
130140
};
131141

0 commit comments

Comments
 (0)