Skip to content

Commit 13ce9a3

Browse files
francineluccalangermank
francinelucca
and
langermank
authoredDec 11, 2024··
feat(Overlay): Convert Overlay to CSS modules behind team feature flag (#5310)
* feat(Overlay): Convert Overlay to CSS modules behind team feature flag * Create nice-boxes-sell.md * fix(Overlay): types and format * fix(Overlay): correct typos and add aria-label to dialog stories * fix(Overlay): use sentence-case for aria-label in stories * Update packages/react/src/Overlay/Overlay.module.css Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> * fix(Overlay): pull keyframes out of class definition * test(Overlay): skip story setup in e2e testing * test(Overlay): re-add empty line * test(vrt): update snapshots * fix(Overlay): separate concerns between BaseOverlay and Overlay * test(vrt): update snapshots * fix(Overlay): fix maxHeight maxWidth visual regression * test(vrt): update snapshots * Revert "test(vrt): update snapshots" This reverts commit 4950b60. * Revert "test(vrt): update snapshots" This reverts commit 5779a79. * Revert "test(vrt): update snapshots" This reverts commit 4f5237e. --------- Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: francinelucca <francinelucca@users.noreply.github.com>
·
@primer/react@37.17.0@primer/react@37.8.0
1 parent 1dcc534 commit 13ce9a3

File tree

4 files changed

+334
-88
lines changed

4 files changed

+334
-88
lines changed
 

‎.changeset/nice-boxes-sell.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
feat(Overlay): Convert Overlay to CSS modules behind team feature flag

‎packages/react/src/Overlay/Overlay.module.css

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@keyframes overlay-appear {
2+
0% {
3+
opacity: 0;
4+
}
5+
6+
100% {
7+
opacity: 1;
8+
}
9+
}
10+
11+
.Overlay {
12+
position: absolute;
13+
width: auto;
14+
min-width: 192px;
15+
height: auto;
16+
overflow: hidden;
17+
background-color: var(--overlay-bgColor);
18+
border-radius: var(--borderRadius-large);
19+
box-shadow: var(--shadow-floating-small);
20+
animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
21+
22+
&:focus {
23+
outline: none;
24+
}
25+
26+
@media (forced-colors: active) {
27+
/* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */
28+
outline: solid 1px transparent;
29+
}
30+
31+
&:where([data-reflow-container='true']) {
32+
max-width: calc(100vw - 2rem);
33+
}
34+
35+
&:where([data-overflow-auto]) {
36+
overflow: auto;
37+
}
38+
39+
&:where([data-overflow-hidden]) {
40+
overflow: hidden;
41+
}
42+
43+
&:where([data-overflow-scroll]) {
44+
overflow: scroll;
45+
}
46+
47+
&:where([data-overflow-visible]) {
48+
overflow: visible;
49+
}
50+
51+
&:where([data-height-xsmall]) {
52+
height: 192px;
53+
}
54+
55+
&:where([data-height-small]) {
56+
height: 256px;
57+
}
58+
59+
&:where([data-height-medium]) {
60+
height: 320px;
61+
}
62+
63+
&:where([data-height-large]) {
64+
height: 432px;
65+
}
66+
67+
&:where([data-height-xlarge]) {
68+
height: 600px;
69+
}
70+
71+
&:where([data-height-auto]),
72+
&:where([data-height-initial]) {
73+
height: auto;
74+
}
75+
76+
&:where([data-height-fit-content]) {
77+
height: fit-content;
78+
}
79+
80+
&:where([data-max-height-xsmall]) {
81+
max-height: 192px;
82+
}
83+
84+
&:where([data-max-height-small]) {
85+
max-height: 256px;
86+
}
87+
88+
&:where([data-max-height-medium]) {
89+
max-height: 320px;
90+
}
91+
92+
&:where([data-max-height-large]) {
93+
max-height: 432px;
94+
}
95+
96+
&:where([data-max-height-xlarge]) {
97+
max-height: 600px;
98+
}
99+
100+
&:where([data-max-height-fit-content]) {
101+
max-height: fit-content;
102+
}
103+
104+
&:where([data-width-small]) {
105+
width: 256px;
106+
}
107+
108+
&:where([data-width-medium]) {
109+
width: 320px;
110+
}
111+
112+
&:where([data-width-large]) {
113+
/* stylelint-disable-next-line primer/responsive-widths */
114+
width: 480px;
115+
}
116+
117+
&:where([data-width-xlarge]) {
118+
/* stylelint-disable-next-line primer/responsive-widths */
119+
width: 640px;
120+
}
121+
122+
&:where([data-width-xxlarge]) {
123+
/* stylelint-disable-next-line primer/responsive-widths */
124+
width: 960px;
125+
}
126+
127+
&:where([data-width-auto]) {
128+
width: auto;
129+
}
130+
131+
&:where([data-max-width-small]) {
132+
max-width: 256px;
133+
}
134+
135+
&:where([data-max-width-medium]) {
136+
max-width: 320px;
137+
}
138+
139+
&:where([data-max-width-large]) {
140+
max-width: 480px;
141+
}
142+
143+
&:where([data-max-width-xlarge]) {
144+
max-width: 640px;
145+
}
146+
147+
&:where([data-max-width-xxlarge]) {
148+
max-width: 960px;
149+
}
150+
151+
&:where([data-visibility-visible]) {
152+
visibility: visible;
153+
}
154+
155+
&:where([data-visibility-hidden]) {
156+
visibility: hidden;
157+
}
158+
}

0 commit comments

Comments
 (0)
Please sign in to comment.