Skip to content

Commit 67ab782

Browse files
keithamuskeithamus
committed
css refactor
1 parent 63643ef commit 67ab782

File tree

3 files changed

+61
-167
lines changed

3 files changed

+61
-167
lines changed

‎app/components/primer/alpha/dialog.pcss

Lines changed: 52 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,6 @@ dialog.Overlay:not([open]) {
44
display: none;
55
}
66

7-
/* override dialog user agent styles */
8-
dialog.Overlay {
9-
position: initial;
10-
display: initial;
11-
inset: initial;
12-
margin: initial;
13-
border: initial;
14-
padding: initial;
15-
color: initial;
16-
}
17-
18-
197
.Overlay--hidden {
208
display: none !important;
219
}
@@ -29,12 +17,18 @@ dialog.Overlay {
2917

3018
.Overlay {
3119
display: flex;
20+
inset: 0;
21+
position: static;
22+
margin: auto;
23+
padding: 0;
3224
width: min(var(--overlay-width), 100vw - 2rem);
3325
min-width: 192px;
3426
max-height: min(calc(100vh - 2rem), var(--overlay-height));
3527
white-space: normal;
3628
flex-direction: column;
3729
background-color: var(--overlay-bgColor);
30+
color: var(--fgColor-default);
31+
border: 0;
3832
border-radius: var(--borderRadius-large);
3933
box-shadow: var(--shadow-floating-small);
4034
opacity: 1;
@@ -90,6 +84,23 @@ dialog.Overlay {
9084
height: auto;
9185
}
9286

87+
&.Overlay--placement-left, &.Overlay--placement-right {
88+
height: 100%;
89+
max-height: unset;
90+
}
91+
92+
&.Overlay--placement-left {
93+
inset: 0 auto 0 0;
94+
border-top-left-radius: 0;
95+
border-bottom-left-radius: 0;
96+
}
97+
98+
&.Overlay--placement-right {
99+
inset: 0 0 0 auto;
100+
border-top-right-radius: 0;
101+
border-bottom-right-radius: 0;
102+
}
103+
93104
/* start deprecate in favor of Alpha::Dialog */
94105
&.Overlay--height-xsmall {
95106
height: min(192px, 100vh - 2rem);
@@ -311,121 +322,50 @@ dialog.Overlay {
311322
}
312323
}
313324

314-
@define-mixin Overlay-backdrop {
315-
position: fixed;
316-
top: 0;
317-
right: 0;
318-
bottom: 0;
319-
left: 0;
320-
z-index: 999;
321-
display: flex;
322-
background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
323-
}
324-
325-
@define-mixin Overlay-backdrop--transparent {
326-
position: absolute;
327-
z-index: 999;
328-
background-color: transparent;
329-
}
330-
331325
/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */
332326

333327
/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
334328

335-
/* center */
336-
@define-mixin Overlay-backdrop--center {
337-
@mixin Overlay-backdrop;
338-
339-
align-items: center;
340-
justify-content: center;
341-
}
342-
343-
/* anchor */
344-
@define-mixin Overlay-backdrop--anchor {
345-
@mixin Overlay-backdrop--transparent;
329+
/* full width */
330+
.Overlay--full {
331+
width: 100%;
332+
max-width: 100vw;
333+
height: 100%;
334+
max-height: 100vh;
335+
border-radius: unset !important;
336+
flex-grow: 1;
346337
}
347338

348-
/* anchor side(s) */
349-
@define-mixin Overlay-backdrop--side $responsiveVariant {
350-
@mixin Overlay-backdrop;
351-
352-
/* default left */
353-
align-items: center;
354-
justify-content: left;
355-
356-
&.Overlay-backdrop--placement-left$(responsiveVariant) {
357-
align-items: center;
358-
justify-content: left;
359-
360-
& > .Overlay$(responsiveVariant) {
361-
height: 100vh;
362-
max-height: unset;
363-
border-radius: var(--borderRadius-large);
364-
border-top-left-radius: 0;
365-
border-bottom-left-radius: 0;
339+
/* responsive variants */
366340

367-
@media screen and (prefers-reduced-motion: no-preference) {
368-
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
369-
}
370-
}
341+
/* --viewportRange-narrowLandscape */
342+
@media (max-width: 767px) {
343+
.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
344+
height: 100%;
345+
max-height: 100vh;
371346
}
372347

373-
&.Overlay-backdrop--placement-right$(responsiveVariant) {
374-
align-items: center;
375-
justify-content: right;
376-
377-
& > .Overlay$(responsiveVariant) {
378-
height: 100vh;
379-
max-height: unset;
380-
border-radius: var(--borderRadius-large);
381-
border-top-right-radius: 0;
382-
border-bottom-right-radius: 0;
383-
384-
@media screen and (prefers-reduced-motion: no-preference) {
385-
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
386-
}
387-
}
348+
.Overlay--placement-left-whenNarrow {
349+
inset: 0 auto 0 0;
350+
border-top-left-radius: 0;
351+
border-bottom-left-radius: 0;
388352
}
389353

390-
&.Overlay-backdrop--placement-bottom$(responsiveVariant) {
391-
align-items: end;
392-
justify-content: center;
393-
394-
& > .Overlay$(responsiveVariant) {
395-
width: 100vw;
396-
height: auto;
397-
max-height: calc(100vh - 2rem);
398-
border-radius: var(--borderRadius-large);
399-
border-bottom-right-radius: 0;
400-
border-bottom-left-radius: 0;
401-
402-
@media screen and (prefers-reduced-motion: no-preference) {
403-
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
404-
}
405-
}
354+
.Overlay--placement-right-whenNarrow {
355+
inset: 0 0 0 auto;
356+
border-top-right-radius: 0;
357+
border-bottom-right-radius: 0;
406358
}
407359

408-
&.Overlay-backdrop--placement-top$(responsiveVariant) {
409-
align-items: start;
410-
justify-content: center;
411-
412-
& > .Overlay$(responsiveVariant) {
413-
border-radius: var(--borderRadius-large);
414-
border-top-left-radius: 0;
415-
border-top-right-radius: 0;
416-
417-
@media screen and (prefers-reduced-motion: no-preference) {
418-
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
419-
}
420-
}
360+
.Overlay--placement-bottom-whenNarrow {
361+
width: 100%;
362+
max-width: 100vw;
363+
inset: auto 0 0 0;
364+
border-bottom-left-radius: 0;
365+
border-bottom-right-radius: 0;
421366
}
422-
}
423367

424-
/* full width */
425-
@define-mixin Overlay-backdrop--full {
426-
@mixin Overlay-backdrop;
427-
428-
& .Overlay {
368+
.Overlay--full-whenNarrow {
429369
width: 100%;
430370
max-width: 100vw;
431371
height: 100%;
@@ -435,44 +375,6 @@ dialog.Overlay {
435375
}
436376
}
437377

438-
/* Overlay variant classnames */
439-
.Overlay-backdrop--center {
440-
@mixin Overlay-backdrop--center;
441-
}
442-
443-
.Overlay-backdrop--anchor {
444-
@mixin Overlay-backdrop--anchor;
445-
}
446-
447-
.Overlay-backdrop--side {
448-
@mixin Overlay-backdrop--side;
449-
}
450-
451-
.Overlay-backdrop--full {
452-
@mixin Overlay-backdrop--full;
453-
}
454-
455-
/* responsive variants */
456-
457-
/* --viewportRange-narrowLandscape */
458-
@media (max-width: 767px) {
459-
.Overlay-backdrop--center-whenNarrow {
460-
@mixin Overlay-backdrop--center;
461-
}
462-
463-
.Overlay-backdrop--anchor-whenNarrow {
464-
@mixin Overlay-backdrop--anchor;
465-
}
466-
467-
.Overlay-backdrop--side-whenNarrow {
468-
@mixin Overlay-backdrop--side -whenNarrow;
469-
}
470-
471-
.Overlay-backdrop--full-whenNarrow {
472-
@mixin Overlay-backdrop--full;
473-
}
474-
}
475-
476378
@keyframes Overlay--motion-slideDown {
477379
from {
478380
transform: translateY(-100%);

‎app/components/primer/alpha/dialog.rb

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@ class Dialog < Primer::Component
3434

3535
DEFAULT_POSITION = :center
3636
POSITION_MAPPINGS = {
37-
DEFAULT_POSITION => "Overlay-backdrop--center",
38-
:left => "Overlay-backdrop--side Overlay-backdrop--placement-left",
39-
:right => "Overlay-backdrop--side Overlay-backdrop--placement-right"
37+
DEFAULT_POSITION => "",
38+
:left => "Overlay--placement-left",
39+
:right => "Overlay--placement-right"
4040
}.freeze
4141
POSITION_OPTIONS = POSITION_MAPPINGS.keys
4242

4343
DEFAULT_POSITION_NARROW = :inherit
4444
POSITION_NARROW_MAPPINGS = {
4545
DEFAULT_POSITION_NARROW => "",
46-
:bottom => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
47-
:fullscreen => "Overlay-backdrop--full-whenNarrow",
48-
:left => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
49-
:right => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
46+
:bottom => "Overlay--placement-bottom-whenNarrow",
47+
:fullscreen => "Overlay--full-whenNarrow",
48+
:left => "Overlay--placement-left-whenNarrow",
49+
:right => "Overlay--placement-right-whenNarrow"
5050
}.freeze
5151
POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys
5252

@@ -142,11 +142,9 @@ def initialize(
142142
"Overlay-whenNarrow",
143143
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
144144
"Overlay--motion-scaleFade",
145-
system_arguments[:classes]
146-
)
147-
@backdrop_classes = class_names(
148145
POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
149-
POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)]
146+
POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)],
147+
system_arguments[:classes]
150148
)
151149
end
152150

‎app/components/primer/alpha/overlay.pcss

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@ anchored-position[popover] {
66
overflow: visible;
77
}
88

9-
.Overlay {
10-
display: flex;
11-
border-width: 0;
12-
padding: 0;
13-
}
14-
159
anchored-position:not(.Overlay) {
1610
background: none;
1711
}

0 commit comments

Comments
 (0)