Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release 14.0.0 #925

Merged
merged 134 commits into from
Dec 4, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
134 commits
Select commit Hold shift + click to select a range
293f160
deps: add semantic-release, @octokit/rest
shawnbot Oct 25, 2019
9c041bf
add script/changelog.js
shawnbot Oct 25, 2019
f6da49b
add semantic-release plugin (wip)
shawnbot Oct 25, 2019
3b1c60b
add release.config.js
shawnbot Oct 25, 2019
e9642f4
add changelog workflow
shawnbot Oct 25, 2019
5a000bb
lint
shawnbot Oct 25, 2019
828e3dc
get branch name from GITHUB_REF
shawnbot Oct 25, 2019
15bc216
Introduce .flex-1 utility
simurai Oct 31, 2019
ab379c9
bump stylelint-config-primer@9, install stylelint-only
shawnbot Oct 31, 2019
66436c6
enable primer/colors in stylelint.config.js
shawnbot Oct 31, 2019
49d1196
autofix primer/colors
shawnbot Oct 31, 2019
34c9665
$white + $black -> $text-<color>
shawnbot Oct 31, 2019
323bc8c
add $bg-black, $bg-black-fade, $text-white, $text-black, and $border-…
shawnbot Oct 31, 2019
13b4847
move $black and $white to the top
shawnbot Oct 31, 2019
72e012e
use $bg-black-fade instead of $black-fade-50
shawnbot Oct 31, 2019
121b850
install stylelint-disable
shawnbot Oct 31, 2019
d350d4b
break up background properties in <select> + status indicators (spinn…
shawnbot Oct 31, 2019
c46c7d1
add stylelint-disable comments for primer/colors
shawnbot Oct 31, 2019
b52a7aa
enable primer/borders
shawnbot Oct 31, 2019
6af4ab1
npx stylelint-only primer/borders -- --fix src
shawnbot Oct 31, 2019
6559cb3
npx stylelint-disable primer/borders -- src
shawnbot Oct 31, 2019
009705d
autofix + disable primer/spacing
shawnbot Oct 31, 2019
4d5b4c6
autofix some font-weight values
shawnbot Oct 31, 2019
263dc4f
enable primer/typography
shawnbot Oct 31, 2019
f425cd6
fix errant empty line
shawnbot Oct 31, 2019
268c384
add stylelint-disable comments for primer/typography
shawnbot Oct 31, 2019
fef6e91
enable primer/box-shadow
shawnbot Oct 31, 2019
4ac0c7f
add stylelint-disabl comments for primer/box-shadow
shawnbot Oct 31, 2019
4529a10
Remove default values
simurai Oct 31, 2019
0c8a7be
Format
simurai Oct 31, 2019
2f3efb6
Update documentation
simurai Oct 31, 2019
3a12942
Remove .flex-item-equal
simurai Oct 31, 2019
769729d
npm version 14.0.0
shawnbot Sep 30, 2019
851a70a
Async/awaitify script/dist.js
BinaryMuse Oct 21, 2019
ef8d845
Resolve "output variable analysis to meta/variables.json in dist"
simurai Oct 31, 2019
8dc9609
Merge pull request #967 from primer/release-14.0.0-merge-conflict
shawnbot Oct 31, 2019
9df0fb8
add !default to $tooltip-background-color
shawnbot Oct 31, 2019
b2e1f74
use $bg-black and $text-black in tooltips
shawnbot Oct 31, 2019
7fd97bf
move grays up, add $border-color-button
shawnbot Oct 31, 2019
c5c4f15
transparentize($black, 0.8) -> $border-color-button
shawnbot Oct 31, 2019
71171fb
nix needless disables
shawnbot Oct 31, 2019
5762d95
use rgba() instead of transparentize() for $repo-private-icon
shawnbot Oct 31, 2019
f91cf59
add !default to $border-color-button
shawnbot Oct 31, 2019
a77bcc0
add !default to $highlight-yellow
shawnbot Oct 31, 2019
d936b3a
install stylelint-scss
shawnbot Oct 31, 2019
739f77b
add deprecation TODO comments for unused color vars
shawnbot Oct 31, 2019
5cf3ba8
add deprecation TODO comments, reorganize misc variables, add !default
shawnbot Oct 31, 2019
8177332
enforce scss/dollar-variable-default specifically
shawnbot Oct 31, 2019
8b0f3ee
add !default in marketing/support/variables; plan removal of unused m…
shawnbot Oct 31, 2019
ce49044
move $display-values from utilities to support/variables/layout
shawnbot Oct 31, 2019
0d4fe91
move $edges from utilities to support/variables/layout
shawnbot Oct 31, 2019
ed61a3a
add variable deprecation + tests
shawnbot Oct 31, 2019
b6969f7
improve test-deprecations output
shawnbot Oct 31, 2019
e57d1c0
fix placement of TODO deprecation for .UnderlineNav-item.selected
shawnbot Oct 31, 2019
bca8a59
BREAKING: remove .UnderlineNav-item.selected
shawnbot Oct 31, 2019
61ca4f8
add deprecation for .UnderlineNav-item.selected
shawnbot Oct 31, 2019
e6c6ae1
write variables object to data/deprecations.json
shawnbot Nov 1, 2019
62a5766
Update docs for variable deprecation data
shawnbot Nov 1, 2019
d4f87e4
move stylelint-disable to devDeps
shawnbot Nov 1, 2019
ade9104
update label guidance for new style docs
shawnbot Nov 1, 2019
beb5a8b
add deprecation docs in getting-started/contributing
shawnbot Nov 1, 2019
419837a
Add animated-ellipsis loader
simurai Nov 4, 2019
46c60dc
use $text-black instead of $text-dark-gray
shawnbot Nov 4, 2019
c539fcd
Merge pull request #968 from primer/stylelint-update
shawnbot Nov 4, 2019
c6be855
fix typo
shawnbot Nov 4, 2019
4fec939
Merge pull request #971 from primer/variable-deprecations
shawnbot Nov 4, 2019
2f1977d
BREAKING: remove $marketingSpacers, $allSpacers
shawnbot Nov 4, 2019
30a7faf
BREAKING: remove unused color aliases
shawnbot Nov 4, 2019
5ee234b
BREAKING: remove more misc. variables
shawnbot Nov 4, 2019
3620a1b
add deprecation notice for $highlight-yellow
shawnbot Nov 4, 2019
9998cbb
fix up script/test-deprecations.js
shawnbot Nov 4, 2019
47bad4a
fix: write marketing variable data to dist/variables.json
shawnbot Nov 4, 2019
5d79d2d
lint
shawnbot Nov 4, 2019
2e687a8
Merge pull request #973 from primer/variable-cleanup
shawnbot Nov 5, 2019
0cde1c4
Merge pull request #963 from primer/generate-changelog
shawnbot Nov 5, 2019
83f1f97
Add documentation
simurai Nov 5, 2019
1bb86e9
Replace animated-ellipsis with AnimatedEllipsis
simurai Nov 5, 2019
57cfc4f
Lint
simurai Nov 5, 2019
12aee98
Merge branch 'release-14.0.0' into flex-utilities
simurai Nov 5, 2019
eba17d2
Merge pull request #966 from primer/flex-utilities
simurai Nov 5, 2019
9811776
Deprecate .flex-item-equal
simurai Nov 5, 2019
b64b119
Add TODO
simurai Nov 5, 2019
4fe0cf3
Remove .flex-item-equal
simurai Nov 5, 2019
ce3dfe9
Make it prettier
simurai Nov 5, 2019
9791d87
clean up "master file" CSS comments
shawnbot Nov 5, 2019
08bfbcd
delete src/marketing/buttons/README.md
shawnbot Nov 5, 2019
f09d35d
delete out-of-date READMEs for marketing/{support,type,utilities}
shawnbot Nov 5, 2019
bdaaf3c
tidy up comments in marketing/support/variables.scss
shawnbot Nov 5, 2019
f755e43
Merge pull request #976 from primer/comment-tweaks
shawnbot Nov 6, 2019
714a01d
Update spacing.md
danchristian Nov 6, 2019
aa03ce9
Update docs/content/components/loaders.md
simurai Nov 7, 2019
40aa120
Merge pull request #974 from primer/loaders
simurai Nov 7, 2019
4ef4dd0
Introduce .css-truncate-overflow
simurai Nov 7, 2019
e4b82a7
Update documentation
simurai Nov 7, 2019
f61e5a6
Update docs/content/components/truncate.md
simurai Nov 8, 2019
6f1cf9f
Apply suggestions from code review
simurai Nov 8, 2019
663bd13
Merge pull request #978 from primer/truncate
simurai Nov 8, 2019
1dac253
Add radio-group styles
simurai Nov 8, 2019
dba2830
Add documentation
simurai Nov 8, 2019
2ba14f2
Lint
simurai Nov 8, 2019
149b135
Remove .octicon override
simurai Nov 8, 2019
1e31dfb
Lint
simurai Nov 8, 2019
53b637b
Update description
simurai Nov 8, 2019
27b522a
Add autocomplete and suggester styles
simurai Nov 12, 2019
a5e31ae
Add documentation
simurai Nov 12, 2019
a68f514
Lint
simurai Nov 13, 2019
7c74b45
Lint
simurai Nov 13, 2019
dd3db80
Remove .secondary-label
simurai Nov 14, 2019
827d35b
Use wildcard to override color
simurai Nov 14, 2019
0cd90f5
Merge branch 'master' into patch-1
danchristian Nov 14, 2019
807b442
Remove .is-auto-complete-loading
simurai Nov 15, 2019
1259519
Adjust padding
simurai Nov 15, 2019
75064c1
Fix border-radius
simurai Nov 15, 2019
2a266e7
Use variables for border and box-shadow
simurai Nov 15, 2019
0cd004f
Remove Chrome hack
simurai Nov 15, 2019
e8d79f7
Simplify markup
simurai Nov 15, 2019
9f52dd1
Lint
simurai Nov 15, 2019
a4c55c7
Fix top border + increase max-height
simurai Nov 15, 2019
f1540da
Introduce SelectMenu-icon--check modifier
simurai Oct 30, 2019
2c8afda
Prevent SelectMenu-icon from shrinking
simurai Oct 30, 2019
32a3fd7
Lint
simurai Nov 15, 2019
bc7cbe7
Deprecate .SelectMenu selectors
simurai Nov 15, 2019
a6a50de
Adjust spacing
simurai Nov 18, 2019
9aa9f79
Merge pull request #981 from primer/autocomplete
simurai Nov 19, 2019
6fecbe2
Merge pull request #979 from primer/radio-group
simurai Nov 19, 2019
033ee0a
Merge pull request #977 from danchristian/patch-1
shawnbot Nov 19, 2019
7c76bc4
Merge pull request #922 from primer/more-select-menu-improvements
simurai Nov 20, 2019
43c2fed
Add .position-sticky utility
simurai Nov 21, 2019
ab63d71
Add note about adding a direction
simurai Nov 21, 2019
a65a327
docs: add docs for flexbug no. 9
shawnbot Nov 21, 2019
0623f60
Merge pull request #988 from primer/flexbug-9
simurai Nov 22, 2019
3f39d57
Merge pull request #987 from primer/position-sticky
simurai Nov 26, 2019
2d56d37
Empty push
simurai Dec 4, 2019
5ed5812
Update CHANGELOG.md
simurai Dec 4, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions .github/workflows/changelog.yml
Original file line number Diff line number Diff line change
@@ -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
30 changes: 30 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
73 changes: 71 additions & 2 deletions deprecations.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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})
}
}
}

Expand All @@ -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
}
70 changes: 70 additions & 0 deletions docs/content/components/autocomplete.md
Original file line number Diff line number Diff line change
@@ -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>
```
17 changes: 17 additions & 0 deletions docs/content/components/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
26 changes: 26 additions & 0 deletions docs/content/components/loaders.md
Original file line number Diff line number Diff line change
@@ -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>
```
Loading