feat(page-grid): updated components to standard breakpoints (#2046)

eBay · Apr 14, 2023 · 0e52b8c · 0e52b8c
1 parent 3c54c93
commit 0e52b8c
Show file tree

Hide file tree

Showing 39 changed files with 60 additions and 65 deletions.
diff --git a/.percy.yml b/.percy.yml
@@ -1,6 +1,7 @@
 version: 2
 snapshot:
-    widths: [602]
+    widths: [320,512,768,1280]
+discovery:
     device-pixel-ratio: 2
 storybook:
     include: []
diff --git a/dist/alert-dialog/alert-dialog.css b/dist/alert-dialog/alert-dialog.css
@@ -89,12 +89,12 @@
 .alert-dialog--hide-init .alert-dialog__window--fade {
   opacity: 1;
 }
-@media (min-width: calc(768px + 1px)) and (max-width: 1024px) {
+@media (min-width: 768px) {
   .alert-dialog__window {
     max-width: calc(88% - 32px);
   }
 }
-@media (min-width: calc(1024px + 1px)) {
+@media (min-width: 1024px) {
   .alert-dialog__window {
     max-width: 616px;
   }

diff --git a/dist/breadcrumbs/breadcrumbs.css b/dist/breadcrumbs/breadcrumbs.css
@@ -90,7 +90,7 @@ nav.breadcrumbs .menu-button__menu {
 [dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
   transform: rotate(180deg);
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   nav.breadcrumbs {
     margin: 16px 0;
   }

diff --git a/dist/carousel/carousel.css b/dist/carousel/carousel.css
@@ -129,15 +129,15 @@ div.carousel {
 .carousel__control:focus:not(:focus-visible) {
   outline: none;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
   }
   .carousel:focus-within .carousel__control[aria-disabled="true"] {
     opacity: 0.3;
   }
 }
-@media (min-width: 601px) and (hover: hover) {
+@media (min-width: 512px) and (hover: hover) {
   .carousel:hover .carousel__control {
     opacity: 0.92;
   }
@@ -259,7 +259,7 @@ span.carousel__container {
     scroll-snap-coordinate: 0 0;
   }
   /* autoprefixer: on */
-  @media (min-width: 601px) {
+  @media (min-width: 512px) {
     div.carousel {
       margin: 16px 0;
     }

diff --git a/dist/confirm-dialog/confirm-dialog.css b/dist/confirm-dialog/confirm-dialog.css
@@ -93,12 +93,12 @@ button.confirm-dialog__confirm {
 .confirm-dialog--hide-init .confirm-dialog__window--fade {
   opacity: 1;
 }
-@media (min-width: calc(768px + 1px)) and (max-width: 1024px) {
+@media (min-width: 768px) {
   .confirm-dialog__window {
     max-width: calc(88% - 32px);
   }
 }
-@media (min-width: calc(1024px + 1px)) {
+@media (min-width: 1024px) {
   .confirm-dialog__window {
     max-width: 616px;
   }

diff --git a/dist/date-textbox/date-textbox.css b/dist/date-textbox/date-textbox.css
@@ -19,7 +19,7 @@
 .date-textbox__popover[hidden] {
   display: none;
 }
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 512px) {
   .date-textbox__popover {
     left: 0;
     margin-left: 0;

diff --git a/dist/infotip/infotip.css b/dist/infotip/infotip.css
@@ -135,7 +135,7 @@ button.infotip__close,
 .infotip__close {
   margin-left: 16px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .infotip__overlay {
     max-width: 400px;
   }

diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css
@@ -130,20 +130,10 @@ button.icon-btn.lightbox-dialog__close {
 .lightbox-dialog--hide-init .lightbox-dialog__window--fade {
   opacity: 1;
 }
-@media (min-width: 601px) and (max-width: 768px) {
+@media (min-width: 512px) {
   .lightbox-dialog__window {
     max-width: calc(88% - 32px);
   }
-}
-@media (min-width: 769px) {
-  .lightbox-dialog__window {
-    max-width: 616px;
-  }
-  .lightbox-dialog--wide .lightbox-dialog__window {
-    max-width: 896px;
-  }
-}
-@media (min-width: 601px) {
   .lightbox-dialog__window .lightbox-dialog__footer {
     flex-direction: row;
     justify-content: flex-end;
@@ -154,3 +144,11 @@ button.icon-btn.lightbox-dialog__close {
     margin-top: initial;
   }
 }
+@media (min-width: 768px) {
+  .lightbox-dialog__window {
+    max-width: 616px;
+  }
+  .lightbox-dialog--wide .lightbox-dialog__window {
+    max-width: 896px;
+  }
+}
diff --git a/dist/page-notice/page-notice.css b/dist/page-notice/page-notice.css
@@ -104,7 +104,7 @@ p.page-notice__cta {
   margin-right: 16px;
   margin-top: 16px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   section.page-notice,
   div[role="region"].page-notice {
     margin: 16px 0;

diff --git a/dist/panel-dialog/panel-dialog.css b/dist/panel-dialog/panel-dialog.css
@@ -148,7 +148,7 @@ button.icon-btn.panel-dialog__close {
 .panel-dialog--hide-init .panel-dialog__window--slide {
   transform: translateX(0);
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .panel-dialog__window {
     width: 384px;
   }

diff --git a/dist/progress-bar/progress-bar.css b/dist/progress-bar/progress-bar.css
@@ -20,7 +20,7 @@
 .progress-bar--fluid {
   width: 100%;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .progress-bar {
     margin: 16px 0;
   }

diff --git a/dist/progress-stepper/progress-stepper.css b/dist/progress-stepper/progress-stepper.css
@@ -168,7 +168,7 @@ hr.progress-stepper__separator {
   margin-left: inherit;
   margin-right: 11px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   hr.progress-stepper__separator {
     min-width: 120px;
   }

diff --git a/dist/section-notice/section-notice.css b/dist/section-notice/section-notice.css
@@ -81,7 +81,7 @@ p.section-notice__cta {
   margin: 4px 0 0;
 }
 /* LARGE SCREEN ADJUSTMENTS */
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   section.section-notice,
   div[role="region"].section-notice {
     margin: 16px 0;

diff --git a/dist/section-title/section-title.css b/dist/section-title/section-title.css
@@ -74,7 +74,7 @@
 [dir="rtl"] .section-title__info {
   margin: 0 8px 0 24px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .section-title__title {
     font-size: 1.5rem;
     font-weight: 700;

diff --git a/dist/snackbar-dialog/snackbar-dialog.css b/dist/snackbar-dialog/snackbar-dialog.css
@@ -59,7 +59,7 @@
   color: var(--snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
   text-decoration: underline;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .snackbar-dialog {
     bottom: 20px;
   }

diff --git a/dist/square-corner-theme/square-corner-theme.css b/dist/square-corner-theme/square-corner-theme.css
@@ -62,7 +62,7 @@ button.expand-btn {
 .toast-dialog {
   --toast-dialog-border-radius: 0;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .toast-dialog {
     --toast-dialog-large-border-radius: 0;
   }

diff --git a/dist/toast-dialog/toast-dialog.css b/dist/toast-dialog/toast-dialog.css
@@ -109,7 +109,7 @@ button.toast-dialog__close > svg {
 .toast-dialog__footer button.btn--secondary:not([disabled]):active {
   background-color: var(--color-state-information-active);
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .toast-dialog {
     border-radius: var(--toast-dialog-border-radius, var(--border-radius-100));
     bottom: 16px;

diff --git a/dist/tooltip/tooltip.css b/dist/tooltip/tooltip.css
@@ -131,7 +131,7 @@ button.tooltip__close {
 .tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
   display: block;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .tooltip__overlay {
     max-width: 400px;
   }

diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css
@@ -168,7 +168,7 @@ span.tourtip__heading {
   color: var(--tourtip-index-color, var(--color-foreground-secondary));
   flex: 1;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .tourtip__overlay {
     max-width: 400px;
   }

diff --git a/dist/typography/typography.css b/dist/typography/typography.css
@@ -79,7 +79,7 @@
 .small-section-title {
   font-weight: 700;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .giant-product-title,
   .giant-section-title {
     font-size: 1.875rem;

diff --git a/src/less/alert-dialog/alert-dialog.less b/src/less/alert-dialog/alert-dialog.less
@@ -82,14 +82,13 @@
     }
 }
 
-// In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: calc(@_screen-size-MD + 1px)) and (max-width: @_screen-size-LG) {
+@media (min-width: @_screen-size-MD) {
     .alert-dialog__window {
         max-width: calc(88% - @spacing-400;);
     }
 }
 
-@media (min-width: calc(@_screen-size-LG + 1px)) {
+@media (min-width: @_screen-size-LG) {
     .alert-dialog__window {
         max-width: @dialog-lightbox-max-width;
     }

diff --git a/src/less/breadcrumbs/breadcrumbs.less b/src/less/breadcrumbs/breadcrumbs.less
@@ -113,7 +113,7 @@ nav.breadcrumbs .menu-button__menu {
     transform: rotate(180deg);
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     nav.breadcrumbs {
         margin: 16px 0;
     }

diff --git a/src/less/carousel/carousel.less b/src/less/carousel/carousel.less
@@ -63,7 +63,7 @@
     // progressive enhancement for browsers with support
     // :focus-within and :hover cannot be combined as
     // IE/Edge will discard the entire rule
-    @media (min-width: 601px) {
+    @media (min-width: @_screen-size-SM) {
         .carousel:focus-within & {
             .show-control();
         }
@@ -300,7 +300,7 @@ span.carousel__container {
         scroll-snap-coordinate: 0 0;
     }
     /* autoprefixer: on */
-    @media (min-width: 601px) {
+    @media (min-width: @_screen-size-SM) {
         div.carousel {
             margin: 16px 0;
         }

diff --git a/src/less/confirm-dialog/confirm-dialog.less b/src/less/confirm-dialog/confirm-dialog.less
@@ -87,14 +87,13 @@ button.confirm-dialog__confirm {
     }
 }
 
-// In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: calc(@_screen-size-MD + 1px)) and (max-width: @_screen-size-LG) {
+@media (min-width: @_screen-size-MD) {
     .confirm-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
 }
 
-@media (min-width: calc(@_screen-size-LG + 1px)) {
+@media (min-width: @_screen-size-LG) {
     .confirm-dialog__window {
         max-width: @dialog-lightbox-max-width;
     }

diff --git a/src/less/date-textbox/date-textbox.less b/src/less/date-textbox/date-textbox.less
@@ -25,7 +25,7 @@
     display: none;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: @_screen-size-SM) {
     .date-textbox__popover {
         left: 0;
         margin-left: 0;

diff --git a/src/less/infotip/infotip.less b/src/less/infotip/infotip.less
@@ -123,7 +123,7 @@ button.infotip__close,
     margin-left: @spacing-200;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .infotip__overlay {
         .bubble-large-screen();
     }

diff --git a/src/less/lightbox-dialog/lightbox-dialog.less b/src/less/lightbox-dialog/lightbox-dialog.less
@@ -95,13 +95,17 @@ button.icon-btn.lightbox-dialog__close {
 }
 
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: 601px) and (max-width: 768px) {
+@media (min-width: @_screen-size-SM) {
     .lightbox-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
+
+    .lightbox-dialog__window .lightbox-dialog__footer {
+        .dialog-footer-content-large();
+    }
 }
 
-@media (min-width: 769px) {
+@media (min-width: @_screen-size-MD) {
     .lightbox-dialog__window {
         max-width: @dialog-lightbox-max-width;
     }
@@ -110,9 +114,3 @@ button.icon-btn.lightbox-dialog__close {
         max-width: @dialog-lightbox-wide-max-width;
     }
 }
-
-@media (min-width: 601px) {
-    .lightbox-dialog__window .lightbox-dialog__footer {
-        .dialog-footer-content-large();
-    }
-}
diff --git a/src/less/page-notice/page-notice.less b/src/less/page-notice/page-notice.less
@@ -134,7 +134,7 @@ p.page-notice__cta {
     margin-top: @spacing-200;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     section.page-notice,
     div[role="region"].page-notice {
         margin: @spacing-200 0;

diff --git a/src/less/panel-dialog/panel-dialog.less b/src/less/panel-dialog/panel-dialog.less
@@ -129,7 +129,7 @@ button.icon-btn.panel-dialog__close {
 // MEDIA QUERIES
 //-----------------------------
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .panel-dialog__window {
         width: 384px;
     }

diff --git a/src/less/progress-bar/progress-bar.less b/src/less/progress-bar/progress-bar.less
@@ -28,7 +28,7 @@
     width: 100%;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .progress-bar {
         margin: @spacing-200 0;
     }

diff --git a/src/less/progress-stepper/progress-stepper.less b/src/less/progress-stepper/progress-stepper.less
@@ -280,7 +280,7 @@ hr.progress-stepper__separator {
     }
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     hr.progress-stepper__separator {
         min-width: @progress-stepper-large-min-width;
     }

diff --git a/src/less/section-notice/section-notice.less b/src/less/section-notice/section-notice.less
@@ -105,7 +105,7 @@ p.section-notice__cta {
 
 /* LARGE SCREEN ADJUSTMENTS */
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     section.section-notice,
     div[role="region"].section-notice {
         margin: @spacing-200 0;

diff --git a/src/less/section-title/section-title.less b/src/less/section-title/section-title.less
@@ -94,7 +94,7 @@
     }
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .section-title__title {
         .typography-large-2();
     }