Merge pull request #2076 from eBay/16.2.1

ArtBlue · web-flow · commit 2b16d3a7c213 · 2023-06-02T14:31:53.000-07:00
PR for patch release v16.2.1
diff --git a/dist/alert-dialog/alert-dialog.css b/dist/alert-dialog/alert-dialog.css
@@ -6,10 +6,13 @@
 }
 .alert-dialog[role="alertdialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-start;
diff --git a/dist/calendar/calendar.css b/dist/calendar/calendar.css
@@ -114,10 +114,13 @@
 .calendar__range::before {
   border: solid transparent;
   border-width: 1px 0;
+  bottom: 0;
   content: "";
-  inset: 0;
+  left: 0;
   pointer-events: none;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .calendar__range--start::before {
   border-left-width: 1px;
diff --git a/dist/carousel/carousel.css b/dist/carousel/carousel.css
@@ -56,10 +56,13 @@
 }
 .carousel__list--image-treatment > li::after {
   background: rgba(0, 0, 0, 0.05);
+  bottom: 0;
   content: "";
   display: block;
-  inset: 0;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .carousel__list--image-treatment > li > img {
   display: inline-block;
@@ -77,10 +80,13 @@
 }
 .carousel__list--image-treatment-large > li::after {
   background: rgba(0, 0, 0, 0.05);
+  bottom: 0;
   content: "";
   display: block;
-  inset: 0;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .carousel__list--image-treatment-large > li > img {
   display: inline-block;
diff --git a/dist/confirm-dialog/confirm-dialog.css b/dist/confirm-dialog/confirm-dialog.css
@@ -6,10 +6,13 @@
 }
 .confirm-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-start;
diff --git a/dist/drawer-dialog/drawer-dialog.css b/dist/drawer-dialog/drawer-dialog.css
@@ -6,10 +6,13 @@
 }
 .drawer-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-end;
diff --git a/dist/fullscreen-dialog/fullscreen-dialog.css b/dist/fullscreen-dialog/fullscreen-dialog.css
@@ -6,10 +6,13 @@
 }
 .fullscreen-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
 }
diff --git a/dist/infotip/infotip.css b/dist/infotip/infotip.css
@@ -105,7 +105,10 @@ span.infotip__mask {
   right: -4px;
 }
 .infotip__pointer--right-bottom {
-  inset: auto -4px 12px auto;
+  bottom: 12px;
+  left: auto;
+  right: -4px;
+  top: auto;
 }
 .infotip__pointer--right-top {
   left: auto;
diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css
@@ -6,10 +6,13 @@
 }
 .lightbox-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-start;
diff --git a/dist/panel-dialog/panel-dialog.css b/dist/panel-dialog/panel-dialog.css
@@ -6,10 +6,13 @@
 }
 .panel-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
   flex-direction: column;
diff --git a/dist/tooltip/tooltip.css b/dist/tooltip/tooltip.css
@@ -120,7 +120,10 @@ button.tooltip__close {
   right: -4px;
 }
 .tooltip__pointer--right-bottom {
-  inset: auto -4px 12px auto;
+  bottom: 12px;
+  left: auto;
+  right: -4px;
+  top: auto;
 }
 .tooltip__pointer--right-top {
   left: auto;
diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css
@@ -125,7 +125,10 @@ button.tourtip__close > svg {
   right: -4px;
 }
 .tourtip__pointer--right-bottom {
-  inset: auto -4px 12px auto;
+  bottom: 12px;
+  left: auto;
+  right: -4px;
+  top: auto;
 }
 .tourtip__pointer--right-top {
   left: auto;
diff --git a/dist/utility/utility.css b/dist/utility/utility.css
@@ -51,10 +51,13 @@
 }
 .image-treatment::after {
   background: rgba(0, 0, 0, 0.05);
+  bottom: 0;
   content: "";
   display: block;
-  inset: 0;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .image-treatment > img {
   display: inline-block;
@@ -72,10 +75,13 @@
 }
 .image-treatment-large::after {
   background: rgba(0, 0, 0, 0.05);
+  bottom: 0;
   content: "";
   display: block;
-  inset: 0;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .image-treatment-large > img {
   display: inline-block;
diff --git a/dist/video/video.css b/dist/video/video.css
@@ -8,14 +8,17 @@
 .video-player__overlay {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.6);
+  bottom: 0;
   color: var(--color-neutral-0);
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  inset: 0;
   justify-content: center;
+  left: 0;
   position: absolute;
+  right: 0;
   text-align: center;
+  top: 0;
 }
 .video-player__overlay-text {
   margin: 20px 20px 0;
diff --git a/src/less/calendar/calendar.less b/src/less/calendar/calendar.less
@@ -154,10 +154,13 @@
     // Only visible in WHCM
     border: solid transparent;
     border-width: 1px 0;
+    bottom: 0;
     content: "";
-    inset: 0;
+    left: 0;
     pointer-events: none;
     position: absolute;
+    right: 0;
+    top: 0;
 }
 
 .calendar__range--start::before {
diff --git a/src/less/mixins/private/bubble-mixins.less b/src/less/mixins/private/bubble-mixins.less
@@ -150,5 +150,8 @@
 }
 
 .pointer-right-bottom() {
-    inset: auto -4px 12px auto;
+    bottom: 12px;
+    left: auto;
+    right: -4px;
+    top: auto;
 }
diff --git a/src/less/mixins/private/dialog-mixins.less b/src/less/mixins/private/dialog-mixins.less
@@ -9,10 +9,13 @@
 
 .dialog-base() {
     background-color: var(--dialog-scrim-color-show);
-    inset: 0;
+    bottom: 0;
+    left: 0;
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
     position: fixed;
+    right: 0;
+    top: 0;
     will-change: background-color;
     z-index: 100000; // because global header has an element with 99999
 
diff --git a/src/less/mixins/public/utility-mixins.less b/src/less/mixins/public/utility-mixins.less
@@ -33,10 +33,13 @@
 
     &::after {
         background: rgba(0, 0, 0, 0.05);
+        bottom: 0;
         content: "";
         display: block;
-        inset: 0;
+        left: 0;
         position: absolute;
+        right: 0;
+        top: 0;
     }
 
     > img {
diff --git a/src/less/video/video.less b/src/less/video/video.less
@@ -13,14 +13,17 @@
 .video-player__overlay {
     align-items: center;
     background-color: rgba(0, 0, 0, 0.6);
+    bottom: 0;
     color: var(--color-neutral-0);
     cursor: pointer;
     display: flex;
     flex-direction: column;
-    inset: 0;
     justify-content: center;
+    left: 0;
     position: absolute;
+    right: 0;
     text-align: center;
+    top: 0;
 }
 
 .video-player__overlay-text {

Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,10 @@ span.infotip__mask {`
`105`	`105`	`right: -4px;`
`106`	`106`	`}`
`107`	`107`	`.infotip__pointer--right-bottom {`
`108`		`- inset: auto -4px 12px auto;`
	`108`	`+ bottom: 12px;`
	`109`	`+ left: auto;`
	`110`	`+ right: -4px;`
	`111`	`+ top: auto;`
`109`	`112`	`}`
`110`	`113`	`.infotip__pointer--right-top {`
`111`	`114`	`left: auto;`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,10 @@ button.tooltip__close {`
`120`	`120`	`right: -4px;`
`121`	`121`	`}`
`122`	`122`	`.tooltip__pointer--right-bottom {`
`123`		`- inset: auto -4px 12px auto;`
	`123`	`+ bottom: 12px;`
	`124`	`+ left: auto;`
	`125`	`+ right: -4px;`
	`126`	`+ top: auto;`
`124`	`127`	`}`
`125`	`128`	`.tooltip__pointer--right-top {`
`126`	`129`	`left: auto;`