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]>

Author: 3 people

.changeset/proud-donkeys-happen.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add narrow/regular/wide viewport range utilities

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; }