Add narrow/regular/wide viewport range utilities (#1995)

* Add viewport range utilities * Add comment about wide viewport range size * Stylelint auto-fixes * Create proud-donkeys-happen.md * Add support for `.show-whenRegular.hide-whenWide` As per discussion in https://github.com/primer/css/pull/1995/files#r834365336 Co-authored-by: Actions Auto Build <[email protected]> Co-authored-by: Katie Langerman <[email protected]>
primer · Mar 25, 2022 · 557b100 · 557b100
1 parent 09f9d84
commit 557b100
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/.changeset/proud-donkeys-happen.md b/.changeset/proud-donkeys-happen.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add narrow/regular/wide viewport range utilities
diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
@@ -38,6 +38,55 @@
   }
 }
 
+// Show/Hide Viewport range utilities
+
+.show-whenNarrow,
+.show-whenRegular,
+.show-whenWide,
+.show-whenRegular.hide-whenWide {
+  display: none !important;
+}
+
+.hide-whenNarrow,
+.hide-whenRegular,
+.hide-whenWide {
+  display: block !important;
+}
+
+@media (max-width: $width-md - 0.02px) {
+  .show-whenNarrow {
+    display: block !important;
+  }
+
+  .hide-whenNarrow {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-md) {
+  .show-whenRegular,
+  .show-whenRegular.hide-whenWide {
+    display: block !important;
+  }
+
+  .hide-whenRegular {
+    display: none !important;
+  }
+}
+
+// The width of a `wide` viewport range may change as we're finalizing
+// the Primer primitives viewport ranges proposal
+@media (min-width: $width-xl) {
+  .show-whenWide {
+    display: block !important;
+  }
+
+  .hide-whenWide,
+  .show-whenRegular.hide-whenWide {
+    display: none !important;
+  }
+}
+
 /* Set the table-layout to fixed */
 .table-fixed { table-layout: fixed !important; }