Merge pull request #925 from primer/release-14.0.0

Release 14.0.0

.github/workflows/changelog.yml

@@ -0,0 +1,18 @@
+name: changelog
+on:
+  push:
+    branches:
+      - 'release-*'
+      - '*changelog*'
+jobs:
+  all:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 11
+      - name: install
+        run: npm install
+      - name: changelog
+        run: script/changelog.js

CHANGELOG.md

@@ -1,3 +1,33 @@
+## 14.0.0
+
+### :boom: Breaking changes
+- [#922](https://github.com/primer/css/922) More SelectMenu improvements
+- [#966](https://github.com/primer/css/966) Rename `.flex-item-equal` to `.flex-1`
+- [#973](https://github.com/primer/css/973) Deprecate variables in 14.0.0
+
+### :rocket: Enhancements
+- [#987](https://github.com/primer/css/987) Add .position-sticky utility
+- [#979](https://github.com/primer/css/979) Add `.radio-group` component
+- [#981](https://github.com/primer/css/981) Autocomplete + Suggester components
+- [#978](https://github.com/primer/css/978) Add `.css-truncate-overflow`
+- [#974](https://github.com/primer/css/974) Add Animated Ellipsis
+- [#971](https://github.com/primer/css/971) Add variable deprecation data and tests
+
+### :memo: Documentation
+- [#988](https://github.com/primer/css/988) Add docs for flexbug no. 9
+- [#977](https://github.com/primer/css/977) Update spacing.md
+
+### :house: Internal
+- [#952](https://github.com/primer/css/952) Async/awaitify script/dist.js
+- [#963](https://github.com/primer/css/963) Generate changelog with semantic-release
+- [#968](https://github.com/primer/css/968) Stylelint update
+
+### Committers
+- [@BinaryMuse](https://github.com/BinaryMuse)
+- [@danchristian](https://github.com/danchristian)
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+
 # 13.2.0
 
 ### :rocket: Enhancements

deprecations.js

@@ -4,6 +4,60 @@
  * array and a "message" string.
  */
 const versionDeprecations = {
+  '14.0.0': [
+    {
+      selectors: [
+        '.SelectMenu-item+.SelectMenu-item',
+        '.SelectMenu-divider:first-child',
+        '.SelectMenu-divider:last-child',
+        '.SelectMenu--hasFilter .SelectMenu-item:last-child',
+        '.SelectMenu-item[aria-checked="true"] .SelectMenu-icon'
+      ],
+      message: `These selectors are deprecated and not used anymore.`
+    },
+    {
+      selectors: [
+        '.flex-item-equal',
+        '.flex-sm-item-equal',
+        '.flex-md-item-equal',
+        '.flex-lg-item-equal',
+        '.flex-xl-item-equal'
+      ],
+      message: `This variable is deprecated. Use "flex-1" instead.`
+    },
+    {
+      selectors: ['.UnderlineNav-item.selected', '.UnderlineNav-item.selected .UnderlineNav-octicon'],
+      message: `Please use aria-selected="true" to indicate the selected state of an UnderlineNav item.`
+    },
+    {
+      variables: ['$status-pending'],
+      message: `This variable is deprecated.`
+    },
+    {
+      variables: ['$highlight-yellow'],
+      message: `This variable is deprecated.`
+    },
+    {
+      variables: ['$repo-private-text', '$repo-private-bg', '$repo-private-icon'],
+      message: `These variables are deprecated.`
+    },
+    {
+      variables: ['$marketingSpacers', '$allSpacers'],
+      message: `Please use the $marketing-spacers and $marketing-all-spacers variables.`
+    },
+    {
+      variables: ['$exploregrid-item-border-radius'],
+      message: `This variable is deprecated. Use "4px" instead.`
+    },
+    {
+      variables: ['$stats-switcher-py', '$stats-viewport-height'],
+      message: `These variables are deprecated.`
+    },
+    {
+      variables: ['$min_tab_size', '$max_tab_size'],
+      message: `These variables are deprecated.`
+    }
+  ],
   '13.0.0': [
     {
       selectors: [
@@ -68,11 +122,15 @@ const semver = require('semver')
 
 // map selectors to the version and message of their deprecation
 const selectorDeprecations = new Map()
+const variableDeprecations = new Map()
 for (const [version, deps] of Object.entries(versionDeprecations)) {
-  for (const {selectors, message} of deps) {
+  for (const {selectors = [], variables = [], message} of deps) {
     for (const selector of selectors) {
       selectorDeprecations.set(selector, {version, message})
     }
+    for (const variable of variables) {
+      variableDeprecations.set(variable, {version, message})
+    }
   }
 }
 
@@ -81,4 +139,15 @@ function isSelectorDeprecated(selector, version = CURRENT_VERSION) {
   return deprecation ? semver.gte(deprecation.version, version) : false
 }
 
-module.exports = {versionDeprecations, selectorDeprecations, isSelectorDeprecated}
+function isVariableDeprecated(variable, version = CURRENT_VERSION) {
+  const deprecation = variableDeprecations.get(variable)
+  return deprecation ? semver.gte(deprecation.version, version) : false
+}
+
+module.exports = {
+  versionDeprecations,
+  selectorDeprecations,
+  variableDeprecations,
+  isSelectorDeprecated,
+  isVariableDeprecated
+}

docs/content/components/autocomplete.md

@@ -0,0 +1,70 @@
+---
+title: Autocomplete
+path: components/autocomplete
+status: Stable
+source: 'https://github.com/primer/css/tree/master/src/autocomplete'
+bundle: autocomplete
+---
+
+## Autocomplete
+
+A list of items used to show autocompleted results. Use the [`<auto-complete>`](https://github.com/github/auto-complete-element) element to add functionality.
+
+```html live
+<div class="position-relative">
+  <input class="form-control input-block" type="text" aria-label="Search" placeholder="Search">
+  <ul class="autocomplete-results">
+    <li class="autocomplete-item" aria-selected="true">Option 1</li>
+    <li class="autocomplete-item">Option 2</li>
+    <li class="autocomplete-item">Option 3</li>
+  </ul>
+</div>
+
+<style>.frame-example {width:300px;height:160px;}</style>
+```
+
+Autocomplete items can contain attional content, like an `.avatar`. Or use utility classes to cusotmize the text style.
+
+```html live
+<div class="position-relative">
+  <input class="form-control input-block" type="text" aria-label="Search by user" placeholder="Search by user">
+  <ul class="autocomplete-results">
+    <li class="autocomplete-item" aria-selected="true">
+      <img src="https://github.com/github.png" width="20" class="avatar mr-1" alt="">
+      <span>GitHub Inc.</span>
+      <span class="text-normal">@github</span>
+    </li>
+    <li class="autocomplete-item">
+      <img src="https://github.com/hubot.png" width="20" class="avatar mr-1" alt="">
+      <span>Hubot</span>
+      <span class="text-normal">@hubot</span>
+    </li>
+    <li class="autocomplete-item">
+      <img src="https://github.com/octocat.png" width="20" class="avatar mr-1" alt="">
+      <span>Monalisa Octocat</span>
+      <span class="text-normal">@octocat</span>
+    </li>
+  </ul>
+</div>
+
+<style>.frame-example {width:300px;height:160px;}</style>
+```
+
+## Suggester
+
+The `.suggester` component is meant for showing suggestions while typing in a larger text area. Use the [`<text-expander>`](https://github.com/github/text-expander-element) element to add functionality.
+
+```html live
+<div class="form-group position-relative">
+  <textarea class="form-control width-full" placeholder="Leave a comment" aria-label="Comment body">This is on top of #</textarea>
+  <ul class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
+    <li aria-selected="true"> <small>#924</small> <span>Markdown tables are inaccessible</span> </li>
+    <li> <small>#980</small> <span>Use actual book emoji in Flexbox docs</span> </li>
+    <li> <small>#979</small> <span>Add `.radio-group` component</span> </li>
+    <li> <small>#925</small> <span>Release 14.0.0</span> </li>
+    <li> <small>#978</small> <span>Add `.css-truncate-overflow`</span> </li>
+  </ul>
+</div>
+
+<style>.frame-example {height:260px;}</style>
+```

docs/content/components/forms.md

@@ -305,6 +305,23 @@ Content that is hidden by default should only be done so if it is non-essential
 </form>
 ```
 
+#### Radio group
+
+Radio groups are tab like controls. Their blue border gives extra emphasis to what is selected.
+
+```html live
+<form>
+  <div class="radio-group">
+    <input class="radio-input" id="option-a" type="radio" name="options">
+    <label class="radio-label" for="option-a">Option A</label>
+    <input class="radio-input" id="option-b" type="radio" name="options">
+    <label class="radio-label" for="option-b">Option B</label>
+    <input class="radio-input" id="option-c" type="radio" name="options">
+    <label class="radio-label" for="option-c">Option C</label>
+  </div>
+</form>
+```
+
 #### Input group
 
 Attached an input and button to one another.

docs/content/components/loaders.md

@@ -0,0 +1,26 @@
+---
+title: Loaders
+path: components/loaders
+status: New
+source: 'https://github.com/primer/css/tree/master/src/loaders'
+bundle: loaders
+---
+
+Loaders inform users that an action is still in progress and might take a while to complete.
+
+## Animated Ellipsis
+
+Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
+
+```html live
+<span>Loading</span><span class="AnimatedEllipsis"></span>
+```
+
+It can also be used in combination with other components.
+
+```html live
+<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
+<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<button class="btn mt-3" disabled><span>Loading</span><span class="AnimatedEllipsis"></span></button>
+```