Overlay updates for Alpha::Dialog

.changeset/swift-icons-stare.md

@@ -0,0 +1,8 @@
+---
+"@primer/css": patch
+---
+
+Overlay updates for Alpha::Dialog
+- Size improvements
+- Support buttom and side sheets
+- Preliminary animations for sheets

src/overlay/overlay.scss

@@ -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);
   }
@@ -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;
@@ -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;
 
@@ -293,9 +346,15 @@ $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;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideInRight;
+      }
     }
   }
 
@@ -304,9 +363,15 @@ $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;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideInLeft;
+      }
     }
   }
 
@@ -315,9 +380,16 @@ $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;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideUp;
+      }
     }
   }
 
@@ -342,7 +414,7 @@ $primer-borderRadius-large: 0.75rem;
     max-width: 100vw;
     height: 100%;
     max-height: 100vh;
-    border-radius: unset;
+    border-radius: unset !important;
     flex-grow: 1;
   }
 }
@@ -383,3 +455,21 @@ $primer-borderRadius-large: 0.75rem;
     @include Overlay-backdrop--full;
   }
 }
+
+@keyframes Overlay--motion-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}