Simplify responsive utilities with $responsive-variants

modules/primer-support/docs/breakpoints.md

@@ -58,3 +58,29 @@ Media queries are scoped from each breakpoint and upwards. In the example below,
   @include breakpoint(md) { font-size: 32px; }
 }
 ```
+
+## Responsive variants
+The `$responsive-variants` variable is a mapping of breakpoints to classname variants, and should be used like so:
+
+```scss
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    // Note: the first iteration gets `$variant == ""`
+    .overflow#{$variant}-auto { overflow: auto; }
+  }
+}
+```
+
+The resulting CSS would be:
+
+```css
+.overflow-auto { overflow: auto; }
+@media (min-width: 544px) { .overflow-sm-auto { overflow: auto; } }
+@media (min-width: 768px) { .overflow-md-auto { overflow: auto; } }
+@media (min-width: 1012px) { .overflow-lg-auto { overflow: auto; } }
+@media (min-width: 1280px) { .overflow-xl-auto { overflow: auto; } }
+```
+
+#### Caution!
+1. Don't precede the `#{$variation}` interpolation with a hyphen because the first value of `$variant` will be an empty string.
+1. For consistency, please put the `@include breakpoint($breakpoint)` call directly inside the `$responsive-variants` loop. This will help keep file sizes small by "batching" selectors in shared `@media` queries.

modules/primer-support/lib/mixins/layout.scss

@@ -1,21 +1,27 @@
 // Responsive media queries
 
 @mixin breakpoint($breakpoint) {
-  // Retrieves the value from the key
-  $value: map-get($breakpoints, $breakpoint);
-
-  // If the key exists in the map
-  @if $value != null {
-    // Prints a media query based on the value
-    @media (min-width: $value) {
-      @content;
-    }
+  @if $breakpoint == "" {
+    @content;
   }
 
-  // If the key doesn't exist in the map
   @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$breakpoints` map.";
+    // Retrieves the value from the key
+    $value: map-get($breakpoints, $breakpoint);
+
+    // If the key exists in the map
+    @if $value != null {
+      // Prints a media query based on the value
+      @media (min-width: $value) {
+        @content;
+      }
+    }
+
+    // If the key doesn't exist in the map
+    @else {
+      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Please make sure it is defined in `$breakpoints` map.";
+    }
   }
 }
 

modules/primer-support/lib/variables/layout.scss

@@ -65,3 +65,8 @@ $breakpoints: (
   // Extra large screen / wide desktop
   xl: $width-xl
 ) !default;
+
+$responsive-variants: ("": "");
+@each $key in map-keys($breakpoints) {
+  $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
+}

modules/primer-utilities/docs/borders.md

@@ -125,3 +125,20 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
   .circle
 </div>
 ```
+
+You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
+
+```html
+<div class="border rounded-top mb-2">
+  .rounded-top
+</div>
+<div class="border rounded-right mb-2">
+  .rounded-right
+</div>
+<div class="border rounded-bottom mb-2">
+  .rounded-bottom
+</div>
+<div class="border rounded-left mb-2">
+  .rounded-left
+</div>
+```

modules/primer-utilities/lib/borders.scss

@@ -20,46 +20,76 @@
 .border-dashed { border-style: dashed !important; }
 
 /* Use with .border to turn the border blue */
-.border-blue       { border-color: $border-blue !important; }
+.border-blue        { border-color: $border-blue !important; }
 /* Use with .border to turn the border blue-light */
 .border-blue-light  { border-color: $border-blue-light !important; }
 /* Use with .border to turn the border green */
-.border-green        { border-color: $border-green !important; }
+.border-green       { border-color: $border-green !important; }
 /* Use with .border to turn the border green light */
 .border-green-light { border-color: $border-green-light !important; }
 /* Use with .border to turn the border red */
-.border-red        { border-color: $border-red !important; }
+.border-red         { border-color: $border-red !important; }
 /* Use with .border to turn the border red-light */
 .border-red-light   { border-color: $border-red-light !important; }
 /* Use with .border to turn the border purple */
-.border-purple  { border-color: $border-purple !important; }
+.border-purple      { border-color: $border-purple !important; }
 /* Use with .border to turn the border yellow */
-.border-yellow  { border-color: $border-yellow !important; }
+.border-yellow      { border-color: $border-yellow !important; }
 /* Use with .border to turn the border gray-light */
-.border-gray-light { border-color: $border-gray-light !important; }
+.border-gray-light  { border-color: $border-gray-light !important; }
 /* Use with .border to turn the border gray-dark */
-.border-gray-dark  { border-color: $border-gray-dark !important; }
+.border-gray-dark   { border-color: $border-gray-dark !important; }
 /* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade { border-color: $border-black-fade !important; }
+.border-black-fade  { border-color: $border-black-fade !important; }
 
-// Without borders
-/* Remove all borders */
-.border-0        { border: 0 !important; }
-/* Remove the top border */
-.border-top-0    { border-top: 0 !important; }
-/* Remove the right border */
-.border-right-0  { border-right: 0 !important; }
-/* Remove the bottom border */
-.border-bottom-0 { border-bottom: 0 !important; }
-/* Remove the left border */
-.border-left-0   { border-left: 0 !important; }
+$edges: (
+  top: (top-left, top-right),
+  right: (top-right, bottom-right),
+  bottom: (bottom-right, bottom-left),
+  left: (bottom-left, top-left)
+);
+
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .border#{$variant}-0        { border: 0 !important; }
+    /* Remove the top border */
+    .border#{$variant}-top-0    { border-top: 0 !important; }
+    /* Remove the right border */
+    .border#{$variant}-right-0  { border-right: 0 !important; }
+    /* Remove the bottom border */
+    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
+    /* Remove the left border */
+    .border#{$variant}-left-0   { border-left: 0 !important; }
+
+    // Rounded corners
+    /* Remove the border-radius */
+    .rounded#{$variant}-0 { border-radius: 0 !important; }
+    /* Add a border-radius to all corners */
+    .rounded#{$variant}-1 { border-radius: $border-radius !important; }
+    /* Add a 2x border-radius to all corners */
+    .rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
+
+    @each $edge, $corners in $edges {
+      .rounded#{$variant}-#{$edge}-0 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: 0;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-1 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius;
+        }
+      }
+
+      .rounded#{$variant}-#{$edge}-2 {
+        @each $corner in $corners {
+          border-#{$corner}-radius: $border-radius * 2;
+        }
+      }
+    }
+  }
+}
 
-// Rounded corners
-/* Remove the border-radius */
-.rounded-0 { border-radius: 0 !important; }
-/* Add a border-radius to all corners */
-.rounded-1 { border-radius: $border-radius !important; }
-/* Add a 2x border-radius to all corners */
-.rounded-2 { border-radius: $border-radius * 2 !important; }
 /* Add a 50% border-radius to make something into a circle */
 .circle { border-radius: 50% !important; }

modules/primer-utilities/lib/flexbox.scss

@@ -1,80 +1,52 @@
 // Flex utility classes
-
 // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
 // stylelint-disable comment-empty-line-before
 
-// - - - - - - - - - - - - - - - - - - - - - - -
-// This is a template for generating the flex utility classes.
-// A version of each class will be generated without a breakpoint,
-// along with a variant for each breakpoint.
-// - - - - - - - - - - - - - - - - - - - - - - -
-
-@mixin flexUtility($breakpoint: 0) {
-
-  // This is the breakpoint that will be inserted into class names
-  $breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
-
-  // If there's no breakpoint, the $breakstring value will be blank.
-  @if $breakpoint == 0 {
-    $breakstring: ""; // example: `.d-flex`
-  }
-
-  // Flexbox classes
-  // Container
-
-  .flex#{$breakstring}-row         { flex-direction: row !important; }
-  .flex#{$breakstring}-row-reverse { flex-direction: row-reverse !important; }
-  .flex#{$breakstring}-column      { flex-direction: column !important; }
-
-  .flex#{$breakstring}-wrap     { flex-wrap: wrap !important; }
-  .flex#{$breakstring}-nowrap   { flex-wrap: nowrap !important; }
-
-  .flex#{$breakstring}-justify-start    { justify-content: flex-start !important; }
-  .flex#{$breakstring}-justify-end      { justify-content: flex-end !important; }
-  .flex#{$breakstring}-justify-center   { justify-content: center !important; }
-  .flex#{$breakstring}-justify-between  { justify-content: space-between !important; }
-  .flex#{$breakstring}-justify-around   { justify-content: space-around !important; }
-
-  .flex#{$breakstring}-items-start      { align-items: flex-start !important; }
-  .flex#{$breakstring}-items-end        { align-items: flex-end !important; }
-  .flex#{$breakstring}-items-center     { align-items: center !important; }
-  .flex#{$breakstring}-items-baseline   { align-items: baseline !important; }
-  .flex#{$breakstring}-items-stretch    { align-items: stretch !important; }
-
-  .flex#{$breakstring}-content-start    { align-content: flex-start !important; }
-  .flex#{$breakstring}-content-end      { align-content: flex-end !important; }
-  .flex#{$breakstring}-content-center   { align-content: center !important; }
-  .flex#{$breakstring}-content-between  { align-content: space-between !important; }
-  .flex#{$breakstring}-content-around   { align-content: space-around !important; }
-  .flex#{$breakstring}-content-stretch  { align-content: stretch !important; }
-
-  // Item
-  .flex#{$breakstring}-auto { flex: 1 1 auto !important; }
-  .flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
-
-  .flex#{$breakstring}-self-auto        { align-self: auto !important; }
-  .flex#{$breakstring}-self-start       { align-self: flex-start !important; }
-  .flex#{$breakstring}-self-end         { align-self: flex-end !important; }
-  .flex#{$breakstring}-self-center      { align-self: center !important; }
-  .flex#{$breakstring}-self-baseline    { align-self: baseline !important; }
-  .flex#{$breakstring}-self-stretch     { align-self: stretch !important; }
-
-  // Shorthand for equal width and height cols
-  .flex#{$breakstring}-item-equal {
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-}
-
-// Generate basic flexbox classes
-@include flexUtility();
-
-// Loop through the breakpoint values to create responsive classes
-@each $breakpoint in map-keys($breakpoints) {
-
-  // Loop through the spacer values
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    @include flexUtility($breakpoint);
+    // Flexbox classes
+    // Container
+    .flex#{$variant}-row         { flex-direction: row !important; }
+    .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
+    .flex#{$variant}-column      { flex-direction: column !important; }
+
+    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
+
+    .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
+    .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
+    .flex#{$variant}-justify-center   { justify-content: center !important; }
+    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
+    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
+
+    .flex#{$variant}-items-start      { align-items: flex-start !important; }
+    .flex#{$variant}-items-end        { align-items: flex-end !important; }
+    .flex#{$variant}-items-center     { align-items: center !important; }
+    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
+    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
+
+    .flex#{$variant}-content-start    { align-content: flex-start !important; }
+    .flex#{$variant}-content-end      { align-content: flex-end !important; }
+    .flex#{$variant}-content-center   { align-content: center !important; }
+    .flex#{$variant}-content-between  { align-content: space-between !important; }
+    .flex#{$variant}-content-around   { align-content: space-around !important; }
+    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
+
+    // Item
+    .flex#{$variant}-auto { flex: 1 1 auto !important; }
+    .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
+
+    .flex#{$variant}-self-auto        { align-self: auto !important; }
+    .flex#{$variant}-self-start       { align-self: flex-start !important; }
+    .flex#{$variant}-self-end         { align-self: flex-end !important; }
+    .flex#{$variant}-self-center      { align-self: center !important; }
+    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
+    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
+
+    // Shorthand for equal width and height cols
+    .flex#{$variant}-item-equal {
+      flex-grow: 1;
+      flex-basis: 0;
+    }
   }
-
 }

modules/primer-utilities/lib/layout.scss

@@ -50,23 +50,14 @@
 }
 
 // Floats
-/* Float to the right */
-.float-right { float: right !important; }
-/* Float to the left */
-.float-left { float: left !important; }
-/* Don't float left or right */
-.float-none { float: none !important; }
-
-// Responsive float utlities
-// .float-md-left, .float-lg-right, ...
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Float to the left at the #{$breakpoint} breakpoint */
-    .float-#{$breakpoint}-left  { float: left !important; }
-    /* Float to the right at the #{$breakpoint} breakpoint */
-    .float-#{$breakpoint}-right  { float: right !important; }
-    /* No float at the #{$breakpoint} breakpoint */
-    .float-#{$breakpoint}-none { float: none !important; }
+    /* Float to the left */
+    .float#{$variant}-left  { float: left !important; }
+    /* Float to the right */
+    .float#{$variant}-right  { float: right !important; }
+    /* No float */
+    .float#{$variant}-none { float: none !important; }
   }
 }
 
@@ -84,17 +75,11 @@
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }
 
-// Direction utilities
-/* Set the direction to rtl */
-.direction-rtl { direction: rtl !important; }
-/* Set the direction to ltr */
-.direction-ltr { direction: ltr !important; }
-
-@each $breakpoint in map-keys($breakpoints) {
+@each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    /* Set the direction to rtl at the #{$breakpoint} breakpoint */
-    .direction-#{$breakpoint}-rtl { direction: rtl !important; }
-    /* Set the direction to ltr at the #{$breakpoint} breakpoint */
-    .direction-#{$breakpoint}-ltr { direction: ltr !important; }
+    /* Set the direction to rtl */
+    .direction#{$variant}-rtl { direction: rtl !important; }
+    /* Set the direction to ltr */
+    .direction#{$variant}-ltr { direction: ltr !important; }
   }
 }