Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay updates for Alpha::Dialog #2225

Merged
merged 14 commits into from
Aug 30, 2022
Merged

Overlay updates for Alpha::Dialog #2225

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
870f525
add size
langermank Aug 29, 2022
bc7d6ad
Stylelint auto-fixes
actions-user Aug 29, 2022
b05d7f1
update animations
langermank Aug 30, 2022
8d7ba23
Create swift-icons-stare.md
langermank Aug 30, 2022
603cc35
Merge branch 'overlay-size' of https://github.com/primer/css into ove…
langermank Aug 30, 2022
6db8635
format
langermank Aug 30, 2022
5a5843a
Merge branch 'main' into overlay-size
langermank Aug 30, 2022
1098342
Stylelint auto-fixes
actions-user Aug 30, 2022
77f0841
Update swift-icons-stare.md
langermank Aug 30, 2022
60ed545
i am so confused with git rn
langermank Aug 30, 2022
96e7dc5
Merge branch 'overlay-size' of https://github.com/primer/css into ove…
langermank Aug 30, 2022
c177eef
please work
langermank Aug 30, 2022
f4bdd2c
lint
langermank Aug 30, 2022
9c23d7d
Update src/overlay/overlay.scss
langermank Aug 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/swift-icons-stare.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@primer/css": patch
---

Overlay updates for Alpha::Dialog
- Size improvements
- Support buttom and side sheets
64 changes: 62 additions & 2 deletions src/overlay/overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,67 @@ $primer-borderRadius-large: 0.75rem;

.Overlay {
display: flex;
width: min(var(--overlay-width), 100vw - 2rem);
min-width: 192px;
max-height: min(calc(100vh - 2rem), var(--overlay-height));
flex-direction: column;
background-color: var(--color-canvas-overlay);
border-radius: $primer-borderRadius-large;
box-shadow: var(--color-overlay-shadow);
opacity: 1;

&.Overlay--size-auto {
min-width: 192px;
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 2rem);
}

&.Overlay--size-full {
width: 100vw;
height: 100vh;
}

&.Overlay--size-xsmall {
--overlay-width: 192px;

max-height: calc(100vh - 2rem);
}

&.Overlay--size-small {
--overlay-height: 256px;
--overlay-width: 320px;
}

&.Overlay--size-small-portrait {
--overlay-height: 432px;
--overlay-width: 320px;
}

&.Overlay--size-medium {
--overlay-height: 320px;
--overlay-width: 480px;
}

&.Overlay--size-medium-portrait {
--overlay-height: 600px;
--overlay-width: 480px;
}

&.Overlay--size-large {
--overlay-height: 432px;
--overlay-width: 640px;
}

&.Overlay--size-xlarge {
--overlay-height: 600px;
--overlay-width: 960px;
}

&.Overlay--height-auto {
height: auto;
}

// start deprecate in favor of Alpha::Dialog
&.Overlay--height-xsmall {
height: min(192px, 100vh - 2rem);
}
Expand Down Expand Up @@ -73,6 +123,8 @@ $primer-borderRadius-large: 0.75rem;
width: min(960px, 100vw - 2rem);
}

// end deprecate

&.Overlay--motion-scaleFade {
@media screen and (prefers-reduced-motion: no-preference) {
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
Expand Down Expand Up @@ -110,7 +162,7 @@ $primer-borderRadius-large: 0.75rem;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 #{-$border-width} var(--color-border-default);

+ .Overlay-body {
+.Overlay-body {
langermank marked this conversation as resolved.
Show resolved Hide resolved
padding-top: $spacer-3;
}
}
Expand Down Expand Up @@ -172,6 +224,7 @@ $primer-borderRadius-large: 0.75rem;
padding-top: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-gutter: stable;
font-size: $body-font-size;
flex-grow: 1;

Expand Down Expand Up @@ -293,6 +346,8 @@ $primer-borderRadius-large: 0.75rem;
justify-content: left;

.Overlay#{$responsiveVariant} {
height: 100vh;
max-height: unset;
border-radius: $primer-borderRadius-large;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
Expand All @@ -304,6 +359,8 @@ $primer-borderRadius-large: 0.75rem;
justify-content: right;

.Overlay#{$responsiveVariant} {
height: 100vh;
max-height: unset;
border-radius: $primer-borderRadius-large;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
Expand All @@ -315,6 +372,9 @@ $primer-borderRadius-large: 0.75rem;
justify-content: center;

.Overlay#{$responsiveVariant} {
width: 100vw;
height: auto;
max-height: calc(100vh - 2rem);
border-radius: $primer-borderRadius-large;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
Expand Down Expand Up @@ -342,7 +402,7 @@ $primer-borderRadius-large: 0.75rem;
max-width: 100vw;
height: 100%;
max-height: 100vh;
border-radius: unset;
border-radius: unset !important;
flex-grow: 1;
}
}
Expand Down