Merge pull request #701 from primer/overflow-utils

Add x- and y-axis overflow utilities

script/selector-diff-report

@@ -5,26 +5,31 @@ function log() {
     echo "$@" 1>&2
 }
 
-# TODO: update this to pull from @primer/css
-old_path="primer/build/data.json"
-log "Pulling the old $old_path ..."
-curl -sL "https://unpkg.com/$old_path" > before.json
+pkg="@primer/css"
+path="dist/stats/primer.json"
+log "Pulling the old $path from unpkg.com..."
+curl -sL "https://unpkg.com/$pkg/$path" > before.json
 
-if [[ ! -f dist/stats/primer.json ]]; then
+if [[ ! -f $path ]]; then
     log "Building the stats locally..."
     npm run dist
 fi
-cp dist/stats/primer.json after.json
+cp $path after.json
 
 function list_selectors() {
     jq -r '.cssstats.selectors.values[]' $1 | sort
 }
 
-jq -r '.cssstats.selectors.values[]' before.json > before.txt
-jq -r '.selectors.values[]' after.json > after.txt
+key=".selectors.values[]"
+jq -r $key before.json > before.txt
+jq -r $key after.json > after.txt
 
-echo "[selector report] diff:"
+function warn() {
+    echo "$@" 1>&2
+}
+
+warn "[selector report] diff:"
 (diff before.txt after.txt | tee selector-diff.log) || log "(no diff!)"
-echo "[selector report] end"
+warn "[selector report] end"
 
 rm {before,after}.{json,txt}

src/utilities/docs/layout.md

@@ -41,7 +41,7 @@ As of [Primer v10.10.0](https://github.com/primer/css/releases/v10.10.0), `prime
 
 Rather than toggling the `d-none` class in JavaScript, you should toggle the `hidden` property on an element. This means that you won't have to restore any more specific display utility (`d-inline` or `d-flex`, for instance) just to work around the order in which they're listed in the stylesheet.
 
-```js
+```js dead
 // Good:
 element.hidden = !visible
 
@@ -105,6 +105,15 @@ Adjust the visibility of an element with `.v-hidden` and `.v-visible`.
 ## Overflow
 Adjust element overflow with `.overflow-hidden`, `.overflow-scroll`, and `.overflow-auto`. `.overflow-hidden` can also be used to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) or clear floats.
 
+Overflow utilities can also target x- and y-axes independently via:
+
+* `.overflow-x-auto`
+* `.overflow-x-hidden`
+* `.overflow-x-scroll`
+* `.overflow-y-auto`
+* `.overflow-y-hidden`
+* `.overflow-y-scroll`
+
 ## Floats
 Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
 ```html

src/utilities/layout.scss

@@ -38,12 +38,11 @@
 // Overflow utilities
 // overflow-hidden can also be used to create a new
 // block formatting context or clear floats.
-/* Set the overflow hidden */
-.overflow-hidden { overflow: hidden !important; }
-/* Set the overflow scroll */
-.overflow-scroll { overflow: scroll !important; }
-/* Set the overflow auto */
-.overflow-auto   { overflow: auto !important; }
+@each $overflow in (hidden, scroll, auto) {
+  .overflow-#{$overflow} { overflow: $overflow !important; }
+  .overflow-x-#{$overflow} { overflow-x: $overflow !important; }
+  .overflow-y-#{$overflow} { overflow-y: $overflow !important; }
+}
 
 // Clear floats
 /* Clear floats around the element */