FormControl + Overlay bug fixes (#2124)

langermank · web-flow · commit f1b3e55f141d · 2022-06-17T14:44:28.000-07:00
diff --git a/.changeset/flat-toys-try.md b/.changeset/flat-toys-try.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+FormControl + Overlay bug fixes
diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
@@ -114,7 +114,7 @@
   height: var(--primer-control-medium-size, 32px);
   background-color: var(--color-canvas-default);
   border-radius: var(--primer-borderRadius-medium, 6px);
-  box-shadow: var(--primer-borderInset-thin, 1px) var(--color-border-default);
+  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
   grid-template-rows: auto;
   gap: var(--primer-controlStack-medium-gap-condensed, 8px);
   align-items: center;
@@ -143,7 +143,7 @@
   }
 
   &.FormControl-fieldWrap--invalid:not(:focus-within) {
-    box-shadow: var(--primer-borderInset-thin, 1px) var(--color-danger-emphasis);
+    box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-danger-emphasis);
   }
 
   // if leadingVisual is present
diff --git a/src/overlay/overlay.scss b/src/overlay/overlay.scss
@@ -27,50 +27,50 @@ $primer-borderRadius-large: 0.75rem;
   }
 
   &.Overlay--height-xsmall {
-    height: min(192px, 100% - 2rem);
+    height: min(192px, 100vh - 2rem);
   }
 
   &.Overlay--height-small {
-    height: min(256px, 100% - 2rem);
+    height: min(256px, 100vh - 2rem);
   }
 
   &.Overlay--height-medium {
-    height: min(320px, 100% - 2rem);
+    height: min(320px, 100vh - 2rem);
   }
 
   &.Overlay--height-large {
-    height: min(432px, 100% - 2rem);
+    height: min(432px, 100vh - 2rem);
   }
 
   &.Overlay--height-xlarge {
-    height: min(600px, 100% - 2rem);
+    height: min(600px, 100vh - 2rem);
   }
 
   &.Overlay--width-auto {
     width: auto;
   }
 
   &.Overlay--width-small {
-    width: min(256px, 100% - 2rem);
+    width: min(256px, 100vw - 2rem);
   }
 
   &.Overlay--width-medium {
-    width: min(320px, 100% - 2rem);
+    width: min(320px, 100vw - 2rem);
   }
 
   &.Overlay--width-large {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(480px, 100% - 2rem);
+    width: min(480px, 100vw - 2rem);
   }
 
   &.Overlay--width-xlarge {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(640px, 100% - 2rem);
+    width: min(640px, 100vw - 2rem);
   }
 
   &.Overlay--width-xxlarge {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(960px, 100% - 2rem);
+    width: min(960px, 100vw - 2rem);
   }
 
   &.Overlay--motion-scaleFade {
@@ -255,6 +255,7 @@ $primer-borderRadius-large: 0.75rem;
 
 @mixin Overlay-backdrop--transparent() {
   position: absolute;
+  z-index: 999;
   background-color: transparent;
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/css": patch
 +---
++
 +FormControl + Overlay bug fixes
Original file line number	Diff line number	Diff line change
`@@ -27,50 +27,50 @@ $primer-borderRadius-large: 0.75rem;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`&.Overlay--height-xsmall {`
`30`		`- height: min(192px, 100% - 2rem);`
	`30`	`+ height: min(192px, 100vh - 2rem);`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`&.Overlay--height-small {`
`34`		`- height: min(256px, 100% - 2rem);`
	`34`	`+ height: min(256px, 100vh - 2rem);`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`&.Overlay--height-medium {`
`38`		`- height: min(320px, 100% - 2rem);`
	`38`	`+ height: min(320px, 100vh - 2rem);`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`&.Overlay--height-large {`
`42`		`- height: min(432px, 100% - 2rem);`
	`42`	`+ height: min(432px, 100vh - 2rem);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`&.Overlay--height-xlarge {`
`46`		`- height: min(600px, 100% - 2rem);`
	`46`	`+ height: min(600px, 100vh - 2rem);`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`&.Overlay--width-auto {`
`50`	`50`	`width: auto;`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`&.Overlay--width-small {`
`54`		`- width: min(256px, 100% - 2rem);`
	`54`	`+ width: min(256px, 100vw - 2rem);`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`&.Overlay--width-medium {`
`58`		`- width: min(320px, 100% - 2rem);`
	`58`	`+ width: min(320px, 100vw - 2rem);`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`&.Overlay--width-large {`
`62`	`62`	`// stylelint-disable-next-line primer/responsive-widths`
`63`		`- width: min(480px, 100% - 2rem);`
	`63`	`+ width: min(480px, 100vw - 2rem);`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`&.Overlay--width-xlarge {`
`67`	`67`	`// stylelint-disable-next-line primer/responsive-widths`
`68`		`- width: min(640px, 100% - 2rem);`
	`68`	`+ width: min(640px, 100vw - 2rem);`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`&.Overlay--width-xxlarge {`
`72`	`72`	`// stylelint-disable-next-line primer/responsive-widths`
`73`		`- width: min(960px, 100% - 2rem);`
	`73`	`+ width: min(960px, 100vw - 2rem);`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`&.Overlay--motion-scaleFade {`
`@@ -255,6 +255,7 @@ $primer-borderRadius-large: 0.75rem;`
`255`	`255`
`256`	`256`	`@mixin Overlay-backdrop--transparent() {`
`257`	`257`	`position: absolute;`
	`258`	`+ z-index: 999;`
`258`	`259`	`background-color: transparent;`
`259`	`260`	`}`
`260`	`261`