Skip to content

Commit

Permalink
css refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@keithamus
keithamus committed Jan 12, 2024
1 parent 557a00c commit ffea5f9
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 167 deletions.
202 changes: 52 additions & 150 deletions app/components/primer/alpha/dialog.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,6 @@ dialog.Overlay:not([open]) {
display: none;
}

/* override dialog user agent styles */
dialog.Overlay {
position: initial;
display: initial;
inset: initial;
margin: initial;
border: initial;
padding: initial;
color: initial;
}


.Overlay--hidden {
display: none !important;
}
Expand All @@ -29,12 +17,18 @@ dialog.Overlay {

.Overlay {
display: flex;
inset: 0;
position: static;
margin: auto;
padding: 0;
width: min(var(--overlay-width), 100vw - 2rem);
min-width: 192px;
max-height: min(calc(100vh - 2rem), var(--overlay-height));
white-space: normal;
flex-direction: column;
background-color: var(--overlay-bgColor);
color: var(--fgColor-default);
border: 0;
border-radius: var(--borderRadius-large);
box-shadow: var(--shadow-floating-small);
opacity: 1;
Expand Down Expand Up @@ -90,6 +84,23 @@ dialog.Overlay {
height: auto;
}

&.Overlay--placement-left, &.Overlay--placement-right {
height: 100%;
max-height: unset;
}

&.Overlay--placement-left {
inset: 0 auto 0 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

&.Overlay--placement-right {
inset: 0 0 0 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

/* start deprecate in favor of Alpha::Dialog */
&.Overlay--height-xsmall {
height: min(192px, 100vh - 2rem);
Expand Down Expand Up @@ -311,121 +322,50 @@ dialog.Overlay {
}
}

@define-mixin Overlay-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: flex;
background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
}

@define-mixin Overlay-backdrop--transparent {
position: absolute;
z-index: 999;
background-color: transparent;
}

/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */

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

/* center */
@define-mixin Overlay-backdrop--center {
@mixin Overlay-backdrop;

align-items: center;
justify-content: center;
}

/* anchor */
@define-mixin Overlay-backdrop--anchor {
@mixin Overlay-backdrop--transparent;
/* full width */
.Overlay--full {
width: 100%;
max-width: 100vw;
height: 100%;
max-height: 100vh;
border-radius: unset !important;
flex-grow: 1;
}

/* anchor side(s) */
@define-mixin Overlay-backdrop--side $responsiveVariant {
@mixin Overlay-backdrop;

/* default left */
align-items: center;
justify-content: left;

&.Overlay-backdrop--placement-left$(responsiveVariant) {
align-items: center;
justify-content: left;

& > .Overlay$(responsiveVariant) {
height: 100vh;
max-height: unset;
border-radius: var(--borderRadius-large);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
/* responsive variants */

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

&.Overlay-backdrop--placement-right$(responsiveVariant) {
align-items: center;
justify-content: right;

& > .Overlay$(responsiveVariant) {
height: 100vh;
max-height: unset;
border-radius: var(--borderRadius-large);
border-top-right-radius: 0;
border-bottom-right-radius: 0;

@media screen and (prefers-reduced-motion: no-preference) {
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
}
}
.Overlay--placement-left-whenNarrow {
inset: 0 auto 0 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

&.Overlay-backdrop--placement-bottom$(responsiveVariant) {
align-items: end;
justify-content: center;

& > .Overlay$(responsiveVariant) {
width: 100vw;
height: auto;
max-height: calc(100vh - 2rem);
border-radius: var(--borderRadius-large);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

@media screen and (prefers-reduced-motion: no-preference) {
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
}
}
.Overlay--placement-right-whenNarrow {
inset: 0 0 0 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

&.Overlay-backdrop--placement-top$(responsiveVariant) {
align-items: start;
justify-content: center;

& > .Overlay$(responsiveVariant) {
border-radius: var(--borderRadius-large);
border-top-left-radius: 0;
border-top-right-radius: 0;

@media screen and (prefers-reduced-motion: no-preference) {
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
}
}
.Overlay--placement-bottom-whenNarrow {
width: 100%;
max-width: 100vw;
inset: auto 0 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}

/* full width */
@define-mixin Overlay-backdrop--full {
@mixin Overlay-backdrop;

& .Overlay {
.Overlay--full-whenNarrow {
width: 100%;
max-width: 100vw;
height: 100%;
Expand All @@ -435,44 +375,6 @@ dialog.Overlay {
}
}

/* Overlay variant classnames */
.Overlay-backdrop--center {
@mixin Overlay-backdrop--center;
}

.Overlay-backdrop--anchor {
@mixin Overlay-backdrop--anchor;
}

.Overlay-backdrop--side {
@mixin Overlay-backdrop--side;
}

.Overlay-backdrop--full {
@mixin Overlay-backdrop--full;
}

/* responsive variants */

/* --viewportRange-narrowLandscape */
@media (max-width: 767px) {
.Overlay-backdrop--center-whenNarrow {
@mixin Overlay-backdrop--center;
}

.Overlay-backdrop--anchor-whenNarrow {
@mixin Overlay-backdrop--anchor;
}

.Overlay-backdrop--side-whenNarrow {
@mixin Overlay-backdrop--side -whenNarrow;
}

.Overlay-backdrop--full-whenNarrow {
@mixin Overlay-backdrop--full;
}
}

@keyframes Overlay--motion-slideDown {
from {
transform: translateY(-100%);
Expand Down
20 changes: 9 additions & 11 deletions app/components/primer/alpha/dialog.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,19 @@ class Dialog < Primer::Component

DEFAULT_POSITION = :center
POSITION_MAPPINGS = {
DEFAULT_POSITION => "Overlay-backdrop--center",
:left => "Overlay-backdrop--side Overlay-backdrop--placement-left",
:right => "Overlay-backdrop--side Overlay-backdrop--placement-right"
DEFAULT_POSITION => "",
:left => "Overlay--placement-left",
:right => "Overlay--placement-right"
}.freeze
POSITION_OPTIONS = POSITION_MAPPINGS.keys

DEFAULT_POSITION_NARROW = :inherit
POSITION_NARROW_MAPPINGS = {
DEFAULT_POSITION_NARROW => "",
:bottom => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
:fullscreen => "Overlay-backdrop--full-whenNarrow",
:left => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
:right => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
:bottom => "Overlay--placement-bottom-whenNarrow",
:fullscreen => "Overlay--full-whenNarrow",
:left => "Overlay--placement-left-whenNarrow",
:right => "Overlay--placement-right-whenNarrow"
}.freeze
POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys

Expand Down Expand Up @@ -142,11 +142,9 @@ def initialize(
"Overlay-whenNarrow",
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
"Overlay--motion-scaleFade",
system_arguments[:classes]
)
@backdrop_classes = class_names(
POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)]
POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)],
system_arguments[:classes]
)
end

Expand Down
6 changes: 0 additions & 6 deletions app/components/primer/alpha/overlay.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@ anchored-position[popover] {
overflow: visible;
}

.Overlay {
display: flex;
border-width: 0;
padding: 0;
}

anchored-position:not(.Overlay) {
background: none;
}
Expand Down

0 comments on commit ffea5f9

Please sign in to comment.