Release 12.1.0

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 12.1.0
+
+### :rocket: Enhancement
+- Per-axis overflow utilities [#701](https://github.com/primer/css/pull/701)
+- Add `0` to responsive marketing positioning utilities (`top-lg-0`, et al) [#697](https://github.com/primer/css/pull/697)
+- Add negative offset utilities to marketing/utilities/layout [#639](https://github.com/primer/css/pull/639)
+
+### :memo: Documentation
+- Fix changelog committers list for 12.0.2 (accidentally listed under 12.0.1)
+
+### :house: Internal
+- Remove a bunch of unused dev dependencies [#703](https://github.com/primer/css/pull/703)
+- Update `script/selector-diff-report` to compare against `@primer/css` (not `primer`!)
+
+#### Committers: 3
+- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+- Tyson Rosage ([trosage](https://github.com/trosage))
+
 # 12.0.2
 
 ### :bug: Bug fix
@@ -13,8 +32,10 @@
 - Remove `postversion` script from `package.json` and update the [PR template](https://github.com/primer/css/blob/master/RELEASING.md#in-this-repo)
 - Rename InterUI font to "Inter", per [inter v3.3](https://github.com/rsms/inter/releases/tag/v3.3) [#696](https://github.com/primer/css/pull/696)
 
-#### Committers: 2
+#### Committers: 4
 - Ash Guillaume ([ashygee](https://github.com/ashygee))
+- David Graham ([dgraham](https://github.com/dgraham))
+- Mu-An Chiou ([muan](https://github.com/muan))
 - Shawn Allen ([shawnbot](https://github.com/shawnbot))
 
 # 12.0.1
@@ -27,10 +48,8 @@
 ### :house: Internal
 - Add `postversion` npm script that commits `package.json` and `package-lock.json` with consistent commit messages (`chore: v<version>`)
 
-#### Committers: 4
+#### Committers: 2
 - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
-- David Graham ([dgraham](https://github.com/dgraham))
-- Mu-An Chiou ([muan](https://github.com/muan))
 - Shawn Allen ([shawnbot](https://github.com/shawnbot))
 
 # 12.0.0

docs/markdown.js

@@ -12,7 +12,7 @@ export default function getComponents(page = {}) {
     h1: H1,
     // render links with our component
     a: Link,
-    // render code blocks with our wrapper around mdx-live
+    // render code blocks with our wrapper around react-live
     code: CodeExample,
     // render the outline for <p> tags with exactly the text "{:toc}"
     p: ({children, ...rest}) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.0.2",
+  "version": "12.1.0",
   "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
   "homepage": "http://primer.github.io/",
   "author": "GitHub, Inc.",
@@ -22,6 +22,7 @@
     "primer-migrate": "bin/primer-migrate"
   },
   "scripts": {
+    "fresh": "rm -rf node_modules; npm install",
     "dist": "script/dist",
     "build-storybook": "build-storybook -o build",
     "check-links": "script/check-links http://localhost:3000/css -v",
@@ -39,9 +40,8 @@
     "dev": "next dev",
     "start-storybook": "start-storybook -p 8000 -c .storybook",
     "sync": "script/sync",
-    "test": "npm-run-all -s test-jest test-urls test-migrate",
+    "test": "npm-run-all -s test-urls test-migrate",
     "test-all-modules": "ava --verbose tests/test-*.js",
-    "test-jest": "jest --passWithNoTests",
     "test-urls": "npm run sync && node docs-test/urls.js",
     "test-migrate": "script/test-migrate",
     "watch": "script/sync --watch"
@@ -60,10 +60,6 @@
     "action-status": "0.1.1",
     "autoprefixer": "9.4.7",
     "ava": "^0.23.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-minify": "^0.2.0",
-    "babel-preset-react": "^6.24.1",
     "broken-link-checker": "^0.7.8",
     "char-spinner": "^1.0.1",
     "chroma-js": "^1.4.1",
@@ -79,29 +75,22 @@
     "fs-extra": "^4.0.2",
     "fx": "11.0.1",
     "gh-pages": "^1.0.0",
-    "glob": "^7.1.2",
     "globby": "^6.1.0",
     "gray-matter": "^4.0.1",
     "hast-util-to-html": "^5.0.0",
     "hast-util-to-string": "^1.0.1",
     "html-2-jsx": "^0.5.1-dev",
     "html-to-react": "^1.2.11",
-    "isomorphic-fetch": "^2.2.1",
-    "jest": "24.0.0",
-    "klaw": "^3.0.0",
+    "klaw": "3.0.0",
     "loader-utils": "^1.1.0",
     "mdx-constant": "^0.1.0",
-    "mdx-live": "2.0.0-alpha.2",
     "metalsmith": "^2.3.0",
     "metalsmith-filter": "^1.0.2",
     "metalsmith-matters": "^1.2.0",
     "metalsmith-watch": "^1.0.3",
-    "minimatch": "^3.0.4",
     "next": "7.0.2",
-    "next-compose-plugins": "2.1.1",
     "now": "^12.1.8",
     "npm-run-all": "4.1.5",
-    "octicons": "^6.0.1",
     "postcss": "7.0.14",
     "postcss-load-config": "2.0.0",
     "postcss-loader": "^2.0.6",
@@ -112,10 +101,11 @@
     "prop-types": "^15.6.2",
     "raw-loader": "^0.5.1",
     "react": "16.6.1",
+    "react-bodymovin": "2.0.0",
     "react-dom": "16.6.1",
+    "react-live": "1.12.0",
     "react-measure": "^2.2.2",
     "refractor": "^2.6.2",
-    "registry-url": "^3.1.0",
     "remark": "^8.0.0",
     "remark-emoji": "^2.0.2",
     "remark-images": "^0.16.1",
@@ -136,8 +126,5 @@
     "unist-util-stringify-position": "^2.0.0",
     "unist-util-visit": "^1.4.0",
     "webpack": "4.20.2"
-  },
-  "dependencies": {
-    "react-bodymovin": "2.0.0"
   }
 }

script/selector-diff-report

@@ -5,26 +5,29 @@ 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
+function warn() {
+    echo "$@" 1>&2
+}
+
+pkg="@primer/css"
+path="dist/stats/primer.json"
+warn "Pulling the old $path from unpkg.com..."
+curl -sL "https://unpkg.com/$pkg/$path" > before.json
 
-if [[ ! -f dist/stats/primer.json ]]; then
-    log "Building the stats locally..."
-    npm run dist
-fi
-cp dist/stats/primer.json after.json
+warn "Building the stats locally..."
+npm run --silent dist
+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:"
+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/marketing/support/variables.scss

@@ -51,6 +51,7 @@ $marketing-spacers: (
 
 $marketing-all-spacers: map-merge(
   (
+    0: 0,
     1: $spacer-1,
     2: $spacer-2,
     3: $spacer-3,

src/marketing/utilities/docs/layout.md

@@ -24,3 +24,14 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
   <div class="border bg-white position-lg-absolute left-lg-1">.left-lg-1</div>
 </div>
 ```
+
+## Negative offset columns
+
+Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
+
+```html
+<div class="clearfix">
+  <div class="offset-n1 col-3 border p-3">.offset-n1</div>
+  <div class="offset-n2 col-3 border p-3">.offset-n2</div>
+</div>
+```

src/marketing/utilities/layout.scss

@@ -18,3 +18,12 @@
     }
   }
 }
+
+// Negative offset columns
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @for $offset from 1 through 7 {
+      .offset#{$variant}-n#{$offset} { margin-left: -($offset / 12 * 100%); }
+    }
+  }
+}

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 */