diff --git a/.changeset/README.md b/.changeset/README.md new file mode 100644 index 0000000000..4f3b76b096 --- /dev/null +++ b/.changeset/README.md @@ -0,0 +1,8 @@ +# Changesets + +Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works +with multi-package repos, or single-package repos to help you version and publish your code. You can +find the full documentation for it [in our repository](https://github.com/changesets/changesets) + +We have a quick list of common questions to get you started engaging with this project in +[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) diff --git a/.changeset/config.json b/.changeset/config.json new file mode 100644 index 0000000000..6a5b9d29b2 --- /dev/null +++ b/.changeset/config.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json", + "changelog": ["@changesets/changelog-github", {"repo": "primer/css"}], + "commit": false, + "linked": [], + "access": "public", + "baseBranch": "main", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index faf4840888..bea5004e37 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -19,7 +19,7 @@ Guidelines for bug reports: 2. **Use the GitHub issue search** — check if the issue has already been reported. -3. **Check if the issue has been fixed** — try to reproduce it using the latest `master` branch in the repository. +3. **Check if the issue has been fixed** — try to reproduce it using the latest `main` branch in the repository. 4. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. @@ -56,7 +56,7 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub 1. Fork and clone [this repository](https://github.com/primer/css). 2. Configure and install the dependencies: `npm install` -3. Create a new branch from master `git checkout -b my-branch-name` +3. Create a new branch from main `git checkout -b my-branch-name` 4. Make your changes and commit them. 5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/ds-core`. 6. Wait for CI tests to finish. diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000000..abdd0568e0 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,13 @@ +# To get started with Dependabot version updates, you'll need to specify which +# package ecosystems to update and where the package manifests are located. +# Please see the documentation for all configuration options: +# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates + +version: 2 +updates: + - package-ecosystem: "npm" # See documentation for possible values + directory: "/docs" # Location of package manifests + schedule: + interval: "daily" + allow: + - dependency-name: "@primer/gatsby-theme-doctocat" diff --git a/.github/workflows/bundle_size.yml b/.github/workflows/bundle_size.yml new file mode 100644 index 0000000000..6fcdb54a08 --- /dev/null +++ b/.github/workflows/bundle_size.yml @@ -0,0 +1,23 @@ +name: Bundle report +on: [push] +jobs: + bundle: + name: Bundle report + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@master + + - name: Set up Node.js + uses: actions/setup-node@master + with: + node-version: 12 + + - name: Install dependencies + run: yarn + + - name: Build + run: yarn dist + + - name: Reporting bundle sizes + run: script/bundle-size-report.js --all diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml deleted file mode 100644 index 06b1c97a1c..0000000000 --- a/.github/workflows/changelog.yml +++ /dev/null @@ -1,18 +0,0 @@ -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 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9ad3402d6c..e9a10063a1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,25 +1,51 @@ name: CI -on: push +on: [push] jobs: - all: + ci: + name: CI runs-on: ubuntu-latest steps: - - uses: actions/checkout@master - - uses: actions/setup-node@master + - name: Checkout repository + uses: actions/checkout@master + + - name: Set up Node.js + uses: actions/setup-node@master with: - node-version: 11 - - name: install - run: npm install - - name: lint - run: script/lint-ci - - name: test - run: npm test - - name: prepublish - run: script/prepublish - - name: test deprecations - if: startsWith(github.ref, 'refs/heads/release-') - run: script/test-deprecations.js - - uses: primer/publish@v1.1.0 + node-version: 12 + + - name: Install dependencies + run: yarn + + - name: CSS Lint + run: yarn stylelint && yarn stylelint -- --report-needless-disables + + - name: Build + run: yarn dist + + - name: Test + run: yarn test + + - name: Create .npmrc + run: | + cat << EOF > "$HOME/.npmrc" + //registry.npmjs.org/:_authToken=$NPM_TOKEN + EOF + env: + NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }} + + - name: Publish canary version + run: | + echo "$( jq '.version = "0.0.0"' package.json )" > package.json + echo -e "---\n'@primer/css': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md + yarn changeset version --snapshot + yarn changeset publish --tag canary + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Output canary version number + run: | + name=$(jq -r .name package.json) + version=$(jq -r .version package.json) + npx action-status --context="Published $name" --state=success --description=$version --url "https://unpkg.com/$name@$version/" env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000000..784ffbd044 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,34 @@ +name: Release +on: + push: + branches: + - main +jobs: + release: + name: Release + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@master + with: + # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits + fetch-depth: 0 + + - name: Set up Node.js + uses: actions/setup-node@master + with: + node-version: 12.x + + - name: Install dependencies + run: yarn + + - name: Create release pull request or publish to npm + id: changesets + uses: changesets/action@master + with: + title: Release Tracking + # This expects you to have a script called release which does a build for your packages and calls changeset publish + publish: yarn release + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }} diff --git a/.node-version b/.node-version new file mode 100644 index 0000000000..420568d756 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +14.15.2 diff --git a/.npmignore b/.npmignore index 2803190acb..3e45a2bf01 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,5 @@ *.log +.changeset/ .github/ .next/ .storybook/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 722a4f9754..2020d5d613 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,49 @@ +# @primer/css + +## 16.0.2 + +### Patch Changes + +- [#1258](https://github.com/primer/css/pull/1258) [`c6945cd5`](https://github.com/primer/css/commit/c6945cd50c297b621a69aecb619440bfb2bf4c32) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing post publish storybook hook + +## 16.0.1 + +### Patch Changes + +- [#1247](https://github.com/primer/css/pull/1247) [`1b6ba39c`](https://github.com/primer/css/commit/1b6ba39c733433fc5488d60b0b8b384b6d2b4d7d) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding changesets to release workflow + +## 16.0.0 + +### :boom: Breaking Change + +- Update to Primer Primitives `4.0.0` [primer/primitives#43](https://github.com/primer/primitives/pull/43) +- Add color modes [#1131](https://github.com/primer/css/pull/1131) + +### :rocket: Enhancement + +- Add `flex-shrink: 0` to `.avatar` [#1183](https://github.com/primer/css/pull/1183) +- Adding timeline-badge success border [#1246](https://github.com/primer/css/pull/1246) +- Add `.anim-rotate` utility class [#1251](https://github.com/primer/css/pull/1251) + +### :nail_care: Polish + +- Move marketing `@font-face` declarations from vars to type [#1238](https://github.com/primer/css/pull/1238) + +### :memo: Documentation + +- Update documentation with color modes [#1186](https://github.com/primer/css/pull/1186) + ## 15.2.0 ### :rocket: Enhancements + - [#1145](https://github.com/primer/css/pull/1145) Make final position responsive - [#1148](https://github.com/primer/css/pull/1148) flex wrap reverse added - [#1157](https://github.com/primer/css/pull/1157) Overflow responsive variants - [#1156](https://github.com/primer/css/pull/1156) Add missing rounded-3 utility ### :memo: Documentation + - [#1160](https://github.com/primer/css/pull/1160) Remove custom emoji from SelectMenu docs - [#1165](https://github.com/primer/css/pull/1165) Replaced old octicons in examples - [#1146](https://github.com/primer/css/pull/1146) Corrected a few typos @@ -15,42 +52,47 @@ - [#1155](https://github.com/primer/css/pull/1155) Place search subnav example on new line ### :nail_care: Polish + - [#1147](https://github.com/primer/css/pull/1147) Increase input font-size on iOS - [#1152](https://github.com/primer/css/pull/1152) Remove .autocomplete-results inset border that is occluded by items ### Committers + - [@MauricioHernanCabrera](https://github.com/MauricioHernanCabrera) - [@ashygee](https://github.com/ashygee) - [@esdraspavon](https://github.com/esdraspavon) - [@neildaniels](https://github.com/neildaniels) - [@nicksloan](https://github.com/nicksloan) - ## 15.1.0 ### :rocket: Enhancements + - [#1062](https://github.com/primer/css/pull/1062) Make tabnav responsive - [#1128](https://github.com/primer/css/pull/1128) Add support for table border - [#1132](https://github.com/primer/css/pull/1132) Add .bg-orange to the list of colors ### :memo: Documentation + - [#1122](https://github.com/primer/css/pull/1122) fix comment typo ### :nail_care: Polish + - [#1121](https://github.com/primer/css/pull/1121) Update layout when the Counter is empty - [#1126](https://github.com/primer/css/pull/1126) Increase border contrast for Label--yellow ### Committers + - [@colinkeany](https://github.com/colinkeany) - [@garman](https://github.com/garman) - [@nikolasveneti](https://github.com/nikolasveneti) - [@nuthinking](https://github.com/nuthinking) - [@simurai](https://github.com/simurai) - ## 15.0.0 ### :rocket: Enhancements + - [#1116](https://github.com/primer/css/pull/1116) Improve accessibility - [#1083](https://github.com/primer/css/pull/1083) Make sure autocomplete resets button styles - [#1074](https://github.com/primer/css/pull/1074) Update pagination @@ -64,6 +106,7 @@ - [#1022](https://github.com/primer/css/pull/1022) Update border radius ### :nail_care: Polish + - [#1109](https://github.com/primer/css/pull/1109) Polish 9 - [#1090](https://github.com/primer/css/pull/1090) Polish 8 - [#1077](https://github.com/primer/css/pull/1077) Polish 7 @@ -73,24 +116,29 @@ - [#1041](https://github.com/primer/css/pull/1041) Polish ### Committers + - [@muan](https://github.com/muan) - [@simurai](https://github.com/simurai) ## 14.4.0 ### :rocket: Enhancements + - [#1089](https://github.com/primer/css/pull/1089) Accessible Progress ### :bug: Bug fixes + - [#1060](https://github.com/primer/css/pull/1060) Add support for aria-current=false ### :memo: Documentation + - [#1059](https://github.com/primer/css/pull/1059) Typo in scss.md - [#1065](https://github.com/primer/css/pull/1065) Convert markdown page to one big example - [#1075](https://github.com/primer/css/pull/1075) chore: add missing link to color utilities - [#1067](https://github.com/primer/css/pull/1067) Add .text-gray-light to docs ### Committers + - [@daniseguraf](https://github.com/daniseguraf) - [@metonym](https://github.com/metonym) - [@simurai](https://github.com/simurai) @@ -103,14 +151,17 @@ - [#1028](https://github.com/primer/css/pull/1028) Improve .form-group accessibility ### :bug: Bug fixes + - [#670](https://github.com/primer/css/pull/670) Fix Box row top border - [#1042](https://github.com/primer/css/pull/1042) Fix UnderlineNav in Safari - [#1035](https://github.com/primer/css/pull/1035) Update UnderlineNav-item to not wrap counter & icon ### :memo: Documentation + - [#1018](https://github.com/primer/css/pull/1018) Update MIGRATING.md ### Committers + - [@emplums](https://github.com/emplums) - [@jonrohan](https://github.com/jonrohan) - [@simurai](https://github.com/simurai) @@ -118,21 +169,25 @@ ## 14.2.0 ### :rocket: Enhancements + - [#1006](https://github.com/primer/css/pull/1006) Use ARIA attributes for states - [#1014](https://github.com/primer/css/pull/1014) Add aria-disabled state - [#1001](https://github.com/primer/css/pull/1001) Add Inter bold font file - [#982](https://github.com/primer/css/pull/982) Applies .selected styles to [aria-selected=true] ### :bug: Bug fixes + - [#1002](https://github.com/primer/css/pull/1002) Fix marketing utilities - [#1005](https://github.com/primer/css/pull/1005) Add .selected back to the .UnderlineNav ### :memo: Documentation + - [#1012](https://github.com/primer/css/pull/1012) Improve margin/padding docs - [#1013](https://github.com/primer/css/pull/1013) Fix docs links - [#1004](https://github.com/primer/css/pull/1004) rm deprecated flash-banner component from docs ### Committers + - [@flavianunes](https://github.com/flavianunes) - [@ktravers](https://github.com/ktravers) - [@simurai](https://github.com/simurai) @@ -140,21 +195,26 @@ ## 14.1.0 ### :rocket: Enhancements + - [#994](https://github.com/primer/css/pull/994) Responsive line-height utilities - [#995](https://github.com/primer/css/pull/995) Add bold weight to marketing font variables ### :bug: Bug fixes + - [#998](https://github.com/primer/css/pull/998) Use a gray background when hovering SelectMenu items ### :memo: Documentation + - [#989](https://github.com/primer/css/pull/989) Add link to the Stylelint guide - [#1000](https://github.com/primer/css/pull/1000) Update contributing guide for a general audience - [#972](https://github.com/primer/css/pull/972) Variables page ### :house: Internal + - [#997](https://github.com/primer/css/pull/997) Fix CHANGELOG links ### Committers + - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) - [@skullface](https://github.com/skullface) @@ -162,11 +222,13 @@ ## 14.0.0 ### :boom: Breaking changes + - [#922](https://github.com/primer/css/pull/922) More SelectMenu improvements - [#966](https://github.com/primer/css/pull/966) Rename `.flex-item-equal` to `.flex-1` - [#973](https://github.com/primer/css/pull/973) Deprecate variables in 14.0.0 ### :rocket: Enhancements + - [#987](https://github.com/primer/css/pull/987) Add .position-sticky utility - [#979](https://github.com/primer/css/pull/979) Add `.radio-group` component - [#981](https://github.com/primer/css/pull/981) Autocomplete + Suggester components @@ -175,15 +237,18 @@ - [#971](https://github.com/primer/css/pull/971) Add variable deprecation data and tests ### :memo: Documentation + - [#988](https://github.com/primer/css/pull/988) Add docs for flexbug no. 9 - [#977](https://github.com/primer/css/pull/977) Update spacing.md ### :house: Internal + - [#952](https://github.com/primer/css/pull/952) Async/awaitify script/dist.js - [#963](https://github.com/primer/css/pull/963) Generate changelog with semantic-release - [#968](https://github.com/primer/css/pull/968) Stylelint update ### Committers + - [@BinaryMuse](https://github.com/BinaryMuse) - [@danchristian](https://github.com/danchristian) - [@shawnbot](https://github.com/shawnbot) @@ -192,22 +257,27 @@ # 13.2.0 ### :rocket: Enhancements + - [#959](https://github.com/primer/css/pull/959) More buttons - [#950](https://github.com/primer/css/pull/950) Add Diffstat component - [#913](https://github.com/primer/css/pull/913) Importing TimelineItem from .com and creating matching docs - [#953](https://github.com/primer/css/pull/953) Add IssueLabel component ### :bug: Bug fixes + - [#945](https://github.com/primer/css/pull/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected` ### :memo: Documentation + - [#939](https://github.com/primer/css/pull/939) Fix `Box--overlay` example - [#943](https://github.com/primer/css/pull/943) Fix broken links to typography utilities ### :house: Internal + - [#946](https://github.com/primer/css/pull/946) Add `TODO@version` stylelint rule (local) ### Committers + - [@MohamedElidrissi](https://github.com/MohamedElidrissi) - [@jonrohan](https://github.com/jonrohan) - [@shawnbot](https://github.com/shawnbot) @@ -216,30 +286,36 @@ # 13.1.0 ### :rocket: Enhancement -- [#904](https://github.com/primer/css/pull/904) Add Keyboard Shortcuts `kbd` from github/github + +- [#904](https://github.com/primer/css/pull/904) Add Keyboard Shortcuts `kbd` from github/github - [#926](https://github.com/primer/css/pull/926) Add Flash Banner `.flash-banner` from github/github - [#927](https://github.com/primer/css/pull/927) Add `.flex-column-reverse` utilities ### :memo: Documentation + - [#932](https://github.com/primer/css/pull/932) Fix CDN links in documentation - [#933](https://github.com/primer/css/pull/933) Convert most ERB examples to HTML ### Committers + - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) # 13.0.2 ### :memo: Documentation + - Use inline octicon in branch name example [#886](https://github.com/primer/css/pull/886) - Move select menu list into the modal div [#903](https://github.com/primer/css/pull/903) - Improve SelectMenu docs [#923](https://github.com/primer/css/pull/923) ### :house: Internal + - Update "Ship checklist" [#902](https://github.com/primer/css/pull/902) - Bump stylelint, et al; add CI tests and script for removing needless disables [#912](https://github.com/primer/css/pull/912) ### Committers + - [@colebemis](https://github.com/colebemis) - [@mxie](https://github.com/mxie) - [@shawnbot](https://github.com/shawnbot) @@ -248,32 +324,39 @@ # 13.0.1 ### :bug: Bug Fix + - Remove "Segoe UI Symbol" from font stack [#906](https://github.com/primer/css/pull/906) ### Committers + - [@simurai](https://github.com/simurai) # 13.0.0 ### :boom: Breaking Change + - Remove `.container`, `.columns`, `.column`, and related classes [#662](https://github.com/primer/css/pull/662) - Remove `.btn-purple` [#736](https://github.com/primer/css/pull/736) :wave: πŸ’œ - Remove `.text-pending` and `.bg-pending` [#888](https://github.com/primer/css/pull/888) - Remove `.dropdown-menu-content` [#884](https://github.com/primer/css/pull/884) ### :nail_care: Polish + - Select menu improvements [#893](https://github.com/primer/css/pull/893) ### :memo: Documentation + - The layout docs, formerly available at `/css/objects/layout`, are gone and will redirect to `/css/objects/grid`. ### :house: Internal + - Add deprecations test script [#889](https://github.com/primer/css/pull/889) - Clean up scripts and dev dependencies [#890](https://github.com/primer/css/pull/890) - Upgrade stylelint-config-primer to v8.0.0 [#892](https://github.com/primer/css/pull/892) - Upgrade doctocat, live code wrappers [#895](https://github.com/primer/css/pull/895) ### Committers + - [@jonrohan](https://github.com/jonrohan) - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) @@ -282,18 +365,22 @@ # 12.7.0 ### :rocket: Enhancement + - Import Dropdown component; add dark variants for dropdown and text fields [#862](https://github.com/primer/css/pull/862) - Add `.break-word` utility and improve word-break docs [#880](https://github.com/primer/css/pull/880) - Publish deprecation data [#883](https://github.com/primer/css/pull/883) ### :memo: Documentation + - Fix mistake in flex-justify-start explanation [#877](https://github.com/primer/css/pull/877) ### :house: Internal + - Fix CSS bundle size report when adding bundles [#879](https://github.com/primer/css/pull/879) - Migrate to GitHub Actions v2 [#881](https://github.com/primer/css/pull/881) ### Committers + - [@dcastil](https://github.com/dcastil) - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) @@ -302,31 +389,39 @@ # 12.6.2 ### :nail_care: Polish + - Add default background-color to SideNav https://github.com/primer/css/pull/873 ### :house: Internal + - Change order in RELEASING.md https://github.com/primer/css/pull/875 ### Committers + - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) # 12.6.1 ### :bug: Bug Fix + - Remove non-ascii characters (en dashes?) from SCSS comments [#870](https://github.com/primer/css/pull/870) - Fix SideNav "jumping" in Safari [#868](https://github.com/primer/css/pull/868) ### :nail_care: Polish + - Improve Select Menu spacing [#844](https://github.com/primer/css/pull/844) ### :memo: Documentation + - Update colorable URL [#867](https://github.com/primer/css/pull/867) ### :house: Internal + - Update changelog for 12.6.0 [#866](https://github.com/primer/css/pull/866) ### Committers + - [@jonrohan](https://github.com/jonrohan) - [@kiendang](https://github.com/kiendang) - [@shawnbot](https://github.com/shawnbot) @@ -336,6 +431,7 @@ # 12.6.0 ### πŸš€ Enhancements + - Loading toast styles [#852](https://github.com/primer/css/pull/852) - Header component [#845](https://github.com/primer/css/pull/845) - Import `.octicon` CSS in the core bundle [#857](https://github.com/primer/css/pull/857) @@ -343,15 +439,18 @@ - Don't let State labels wrap [#863](https://github.com/primer/css/pull/863) ### πŸ“ Documentation + - Fix some links in linting docs [#856](https://github.com/primer/css/pull/856) - Updates to the development docs [#855](https://github.com/primer/css/pull/855) - Generate bundle source READMEs from a template [#859](https://github.com/primer/css/pull/859) - Render Octicon Ruby helper in docs [#847](https://github.com/primer/css/pull/847) ### 🏠 Internal + - Add GitHub `styleguide.css` to Storybook [#849](https://github.com/primer/css/pull/849) ### Committers + - [@ashygee](https://github.com/ashygee) - [@emilybrick](https://github.com/emilybrick) - [@jonrohan](https://github.com/jonrohan) @@ -361,6 +460,7 @@ # 12.5.0 ### :rocket: Enhancement + - Add `.Toast` component [#831](https://github.com/primer/css/pull/831) - Add `.SideNav` component [#827](https://github.com/primer/css/pull/827) - Add `.SelectMenu` component [#808](https://github.com/primer/css/pull/808) @@ -369,15 +469,18 @@ - Change default for `$marketing-font-path` to `/fonts/` [#837](https://github.com/primer/css/pull/837) ### :bug: Bug Fix + - Improve monospaced font on Chrome Android [#812](https://github.com/primer/css/pull/812) ### :memo: Documentation + - Add multi-word naming conventions to BEM docs [#836](https://github.com/primer/css/pull/836) - Color system docs updates [#811](https://github.com/primer/css/pull/811) - Color utility table tweaks [#842](https://github.com/primer/css/pull/842) - Fix markdown typos in Contributing docs page [#846](https://github.com/primer/css/pull/846) ### Committers + - [@ampinsk](https://github.com/ampinsk) - [@emilybrick](https://github.com/emilybrick) - [@emplums](https://github.com/emplums) @@ -390,9 +493,11 @@ # 12.4.1 ### :bug: Bug fixes + - Fix [#822](https://github.com/primer/css/issues/822) (`.border-dashed` issues) via [#824](https://github.com/primer/css/issues/824) ### :memo: Documentation + - Typos fixed in [#802](https://github.com/primer/css/issues/802) (thank you, [@The-Compiler](https://github.com/The-Compiler)!) - Nav updates [#803](https://github.com/primer/css/issues/803) - Fix tables of contents [#762](https://github.com/primer/css/issues/762) @@ -400,30 +505,35 @@ - Lots more documentation updates in [#814](https://github.com/primer/css/issues/814) ### :house: Internal + - Decommission `primer/deploy` [#809](https://github.com/primer/css/issues/809) ### Committers + - [@emplums](https://github.com/emplums) - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) - [@The-Compiler](https://github.com/The-Compiler) - # 12.4.0 ### :rocket: Enhancement + - More responsive border utilities [#775](https://github.com/primer/css/pull/775) - Add `overflow: visible` utilities [#798](https://github.com/primer/css/pull/798) - Add `yellow` color utilities that will replace `pending` [#737](https://github.com/primer/css/pull/737) ### :bug: Bug Fix + - Fix Ruby Sass compiler warnings by quoting keys in `$hue-maps` declaration [#794](https://github.com/primer/css/pull/794) ### :house: Internal + - Remove `test-all-modules` scripts and old monorepo test scripts [#795](https://github.com/primer/css/pull/795) - Resolve all but one ([#796](https://github.com/primer/css/pull/796)) vulnerability in npm dev dependencies [#797](https://github.com/primer/css/pull/797) ### Committers + - [@broccolini](https://github.com/broccolini) - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) @@ -431,33 +541,41 @@ # 12.3.1 ### πŸ› Bug Fix + - Add `aria-selected="true"` support to tabbed navigation styles to play nicely with [``](https://github.com/github/tab-container-element) ### 🏠 Internal + - Resolve the vulnerability alert with `tar@<4.4.2` in [CVE-2018-20834](https://nvd.nist.gov/vuln/detail/CVE-2018-20834) ### Committers + - [@shawnbot](https://github.com/shawnbot) # 12.3.0 ### :rocket: Enhancement + - More color utilities! [#760](https://github.com/primer/css/pull/760) ([@shawnbot](https://github.com/shawnbot)) - Add pink to Primer! πŸ’–πŸŒΈπŸ’•πŸŒ·πŸ’žπŸŽ€πŸ’—πŸŒΊπŸ’ [#776](https://github.com/primer/css/pull/776), [#778](https://github.com/primer/css/pull/778) ([@emplums](https://github.com/emplums))) ### :house: Internal + - Update storybook [#777](https://github.com/primer/css/pull/777) ([@emplums](https://github.com/emplums)) - Add bundle size report [#772](https://github.com/primer/css/pull/772) ([@shawnbot](https://github.com/shawnbot)) ### :memo: Documentation + - Update Primer references to Primer CSS [#771](https://github.com/primer/css/pull/771) ([@emplums](https://github.com/emplums)) - Add Edit on GitHub links to docs [#770](https://github.com/primer/css/pull/770) ([@emplums](https://github.com/emplums)) - Anchor Link in Docs [#768](https://github.com/primer/css/pull/768) ([@emplums](https://github.com/emplums)) ### :house: Internal + - Update RELEASING [#757](https://github.com/primer/css/pull/757) ([@simurai](https://github.com/simurai)) ### Committers + - [@emplums](https://github.com/emplums) - [@shawnbot](https://github.com/shawnbot) - [@simurai](https://github.com/simurai) @@ -465,59 +583,74 @@ # 12.2.3 ### :bug: Bug Fix + - Remove references to a non-existent `Progress-value` class https://github.com/primer/css/pull/751 ### :house: Internal + - Upgrade stylelint config https://github.com/primer/css/pull/753 #### Committers: 1 + - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 12.2.2 ### :bug: Bug Fix + - Fix hide utilities when toggling between breakpoints [#746](https://github.com/primer/css/pull/746) ### :house: Internal -- Prevent Storybook publish failures from breaking builds on `master` [#728](https://github.com/primer/css/pull/728) + +- Prevent Storybook publish failures from breaking builds on `main` [#728](https://github.com/primer/css/pull/728) - Upgrade to [cssstats v3.3.0](https://github.com/cssstats/cssstats/releases/tag/v3.3.0), which fixes our selector stats JSON files #### Committers: 2 + - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - Simurai ([simurai](https://github.com/simurai)) # 12.2.1 ### :bug: Bug Fix + - Fix source order of directional border utilities [#727](https://github.com/primer/css/pull/727) - Fix UnderlineNav selected border width [#733](https://github.com/primer/css/pull/733) ### :memo: Documentation + - Fix changelog committers listings for versions 12.0.1 and 12.0.2 [#729](https://github.com/primer/css/pull/729) - Fix code examples from being cut off [#725](https://github.com/primer/css/pull/725) #### Committers: 2 + - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - Simurai ([simurai](https://github.com/simurai)) # 12.2.0 ### :rocket: Enhancement + - Add more `.border-white-fade` utilities [#713](https://github.com/primer/css/pull/713) ### :nail_care: Polish + - Fix `
` spacing [#675](https://github.com/primer/css/pull/675) ### :bug: Bug Fixes + - Accessibility fixes for marketing buttons [#716](https://github.com/primer/css/pull/716) ### :memo: Documentation + - Fix scrolling of code examples [#717](https://github.com/primer/css/pull/717) ### :house: Internal + - Fix `npm link` ([#715](https://github.com/primer/css/issue/715)) by removing `prepare` npm script [#718](https://github.com/primer/css/pull/718) #### Committers: 4 + - Diana Mounter ([broccolini](https://github.com/broccolini)) - Max Stoiber ([mxstbr](https://github.com/mxstbr)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) @@ -526,15 +659,19 @@ # 12.1.1 ### :bug: Bug Fix + - Remove UI from font file path [#709](https://github.com/primer/css/pull/709) ### :memo: Documentation + - Removes sync functionality from docs [#710](https://github.com/primer/css/pull/710) ### :house: Internal + - Fixes Storybook [#707](https://github.com/primer/css/pull/707) and [#711](https://github.com/primer/css/pull/711) #### Committers: 3 + - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - Emily Plummer ([emplums](https://github.com/emplums)) @@ -542,18 +679,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)) @@ -561,19 +702,23 @@ # 12.0.2 ### :bug: Bug fix + - Restore missing marketing padding utilities [#695](https://github.com/primer/css/pull/695) ### :memo: Documentation + - Explain why `.tooltipped` should be used sparingly [#676](https://github.com/primer/css/pull/676) - Fix trailing slash errors in Next.js [#681](https://github.com/primer/css/pull/681) - Add static assets to Now deployments [#687](https://github.com/primer/css/pull/687) - Shiny new social and README header by @ashygee [#689](https://github.com/primer/css/pull/689) ### :house: Internal -- Remove `postversion` script from `package.json` and update the [PR template](https://github.com/primer/css/blob/master/RELEASING.md#in-this-repo) + +- Remove `postversion` script from `package.json` and update the [PR template](https://github.com/primer/css/blob/main/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: 4 + - Ash Guillaume ([ashygee](https://github.com/ashygee)) - David Graham ([dgraham](https://github.com/dgraham)) - Mu-An Chiou ([muan](https://github.com/muan)) @@ -582,53 +727,63 @@ # 12.0.1 ### :bug: Bug Fix + - Add missing `h000-mktg` class [#667](https://github.com/primer/css/pull/667) - Fix UnderlineNav overflow issues [#684](https://github.com/primer/css/pull/684) - Fix double borders on Box-header [#686](https://github.com/primer/css/pull/686) ### :house: Internal + - Add `postversion` npm script that commits `package.json` and `package-lock.json` with consistent commit messages (`chore: v`) #### Committers: 2 + - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 12.0.0 -:rotating_light: **Starting with version 12.0.0, the `primer` package is now known as `@primer/css`**. See [MIGRATING.md](https://github.com/primer/css/tree/master/MIGRATING.md) for more info. +:rotating_light: **Starting with version 12.0.0, the `primer` package is now known as `@primer/css`**. See [MIGRATING.md](https://github.com/primer/css/tree/main/MIGRATING.md) for more info. #### :boom: Breaking Change -* [#666](https://github.com/primer/css/pull/666) Reorganize into a single `@primer/css` package ([@shawnbot](https://github.com/shawnbot)) + +- [#666](https://github.com/primer/css/pull/666) Reorganize into a single `@primer/css` package ([@shawnbot](https://github.com/shawnbot)) #### Committers: 2 + - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) # 11.0.0 #### :boom: Breaking Change -* [#438](https://github.com/primer/primer/pull/438) Remove `primer-page-sections` package. ([@sophshep](https://github.com/sophshep)) -* [#439](https://github.com/primer/primer/pull/439) Remove `primer-page-headers` package. ([@sophshep](https://github.com/sophshep)) -* [#440](https://github.com/primer/primer/pull/440) Remove `primer-tables` package. ([@sophshep](https://github.com/sophshep)) -* [#459](https://github.com/primer/primer/pull/459) Move responsive position utilities from marketing to core. ([@sophshep](https://github.com/sophshep)) -* [#656](https://github.com/primer/primer/pull/656) Remove colorizeTooltip mixin. ([@shawnbot](https://github.com/shawnbot)) -* [#657](https://github.com/primer/primer/pull/657) Remove `BtnGroup-form` class. ([@shawnbot](https://github.com/shawnbot)) -* [#658](https://github.com/primer/primer/pull/658) Remove `.avatar-stack` in favor of `.AvatarStack`. ([@shawnbot](https://github.com/shawnbot)) + +- [#438](https://github.com/primer/primer/pull/438) Remove `primer-page-sections` package. ([@sophshep](https://github.com/sophshep)) +- [#439](https://github.com/primer/primer/pull/439) Remove `primer-page-headers` package. ([@sophshep](https://github.com/sophshep)) +- [#440](https://github.com/primer/primer/pull/440) Remove `primer-tables` package. ([@sophshep](https://github.com/sophshep)) +- [#459](https://github.com/primer/primer/pull/459) Move responsive position utilities from marketing to core. ([@sophshep](https://github.com/sophshep)) +- [#656](https://github.com/primer/primer/pull/656) Remove colorizeTooltip mixin. ([@shawnbot](https://github.com/shawnbot)) +- [#657](https://github.com/primer/primer/pull/657) Remove `BtnGroup-form` class. ([@shawnbot](https://github.com/shawnbot)) +- [#658](https://github.com/primer/primer/pull/658) Remove `.avatar-stack` in favor of `.AvatarStack`. ([@shawnbot](https://github.com/shawnbot)) #### :rocket: Enhancement -* [#583](https://github.com/primer/primer/pull/583) Updates to Marketing Typography. ([@sophshep](https://github.com/sophshep)) -* [#660](https://github.com/primer/primer/pull/660) Add `$marketing-font-path`. ([@shawnbot](https://github.com/shawnbot)) -* [#661](https://github.com/primer/primer/pull/661) Spacer variable refactor. ([@shawnbot](https://github.com/shawnbot)) -* [#663](https://github.com/primer/primer/pull/663) Add deprecation warning for column grid classes and add `container-sm` utility class. ([@jonrohan](https://github.com/jonrohan)) + +- [#583](https://github.com/primer/primer/pull/583) Updates to Marketing Typography. ([@sophshep](https://github.com/sophshep)) +- [#660](https://github.com/primer/primer/pull/660) Add `$marketing-font-path`. ([@shawnbot](https://github.com/shawnbot)) +- [#661](https://github.com/primer/primer/pull/661) Spacer variable refactor. ([@shawnbot](https://github.com/shawnbot)) +- [#663](https://github.com/primer/primer/pull/663) Add deprecation warning for column grid classes and add `container-sm` utility class. ([@jonrohan](https://github.com/jonrohan)) #### :bug: Bug Fix -* [#654](https://github.com/primer/primer/pull/654) Fix typo ("Chroma") in `primer-base` comment. ([@Jiang-Xuan](https://github.com/Jiang-Xuan)) -* [#655](https://github.com/primer/primer/pull/655) Fix typo ("conditonally") in `docs/src/SideNav.js` comment. ([@0xflotus](https://github.com/0xflotus)) + +- [#654](https://github.com/primer/primer/pull/654) Fix typo ("Chroma") in `primer-base` comment. ([@Jiang-Xuan](https://github.com/Jiang-Xuan)) +- [#655](https://github.com/primer/primer/pull/655) Fix typo ("conditonally") in `docs/src/SideNav.js` comment. ([@0xflotus](https://github.com/0xflotus)) ### :house: Internal -* [#659](https://github.com/primer/primer/pull/659) Generate CSS selector diff report on Travis. ([@shawnbot](https://github.com/shawnbot)) + +- [#659](https://github.com/primer/primer/pull/659) Generate CSS selector diff report on Travis. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 4 + - 0xflotus ([0xflotus](https://github.com/0xflotus)) - Jiang-Xuan ([Jiang-Xuan](https://github.com/Jiang-Xuan)) - Jon Rohan ([jonrohan](https://github.com/jonrohan)) @@ -638,106 +793,131 @@ # 10.10.5 #### :bug: Bug Fix -* [#650](https://github.com/primer/primer/pull/650) Fix border radius edge utility specificity. ([@shawnbot](https://github.com/shawnbot)) + +- [#650](https://github.com/primer/primer/pull/650) Fix border radius edge utility specificity. ([@shawnbot](https://github.com/shawnbot)) #### :memo: Documentation -* [#649](https://github.com/primer/primer/pull/649) Sandboxed code examples. ([@shawnbot](https://github.com/shawnbot)) + +- [#649](https://github.com/primer/primer/pull/649) Sandboxed code examples. ([@shawnbot](https://github.com/shawnbot)) #### :house: Internal + - Only check links on Travis if `[check-links]` is included in the commit message -- a5658d3 Run `now alias` without the branch name on merge to `master` +- a5658d3 Run `now alias` without the branch name on merge to `main` #### Committers: 1 -- Shawn Allen ([shawnbot](https://github.com/shawnbot)) +- Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 10.10.4 #### :memo: Documentation -* [#642](https://github.com/primer/primer/pull/642) docs: add Ash's new header illustration. ([@shawnbot](https://github.com/shawnbot)) + +- [#642](https://github.com/primer/primer/pull/642) docs: add Ash's new header illustration. ([@shawnbot](https://github.com/shawnbot)) #### :house: Internal -* [#641](https://github.com/primer/primer/pull/641) test(docs): improve style guide URL path test. ([@shawnbot](https://github.com/shawnbot)) -* [#635](https://github.com/primer/primer/pull/635) docs: Releases link, Status key page move. ([@shawnbot](https://github.com/shawnbot)) + +- [#641](https://github.com/primer/primer/pull/641) test(docs): improve style guide URL path test. ([@shawnbot](https://github.com/shawnbot)) +- [#635](https://github.com/primer/primer/pull/635) docs: Releases link, Status key page move. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 1 + - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 10.10.3 #### :memo: Documentation -* [#632](https://github.com/primer/primer/pull/632) Happy new year! ([@shawnbot](https://github.com/shawnbot)) -* [#626](https://github.com/primer/primer/pull/626) Branch deployment, docs for the docs. ([@shawnbot](https://github.com/shawnbot)) -* [#616](https://github.com/primer/primer/pull/616) Start up the docs directory. ([@shawnbot](https://github.com/shawnbot)) + +- [#632](https://github.com/primer/primer/pull/632) Happy new year! ([@shawnbot](https://github.com/shawnbot)) +- [#626](https://github.com/primer/primer/pull/626) Branch deployment, docs for the docs. ([@shawnbot](https://github.com/shawnbot)) +- [#616](https://github.com/primer/primer/pull/616) Start up the docs directory. ([@shawnbot](https://github.com/shawnbot)) #### :house: Internal -* [#631](https://github.com/primer/primer/pull/631) Docs release fixes. ([@shawnbot](https://github.com/shawnbot)) + +- [#631](https://github.com/primer/primer/pull/631) Docs release fixes. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 2 + - Emily Brick ([emilybrick](https://github.com/emilybrick)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 10.10.2 #### :memo: Documentation -* [#614](https://github.com/primer/primer/pull/614) fix broken border-radius helper example. ([@joelhawksley](https://github.com/joelhawksley)) + +- [#614](https://github.com/primer/primer/pull/614) fix broken border-radius helper example. ([@joelhawksley](https://github.com/joelhawksley)) #### :house: Internal -* [#615](https://github.com/primer/primer/pull/615) pin npm-run-all@4.1.5. ([@shawnbot](https://github.com/shawnbot)) + +- [#615](https://github.com/primer/primer/pull/615) pin npm-run-all@4.1.5. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 2 + - Joel Hawksley ([joelhawksley](https://github.com/joelhawksley)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 10.10.1 #### :memo: Documentation -* [#606](https://github.com/primer/primer/pull/606) Fix for Progress Broken Package Link. ([@emilybrick](https://github.com/emilybrick)) + +- [#606](https://github.com/primer/primer/pull/606) Fix for Progress Broken Package Link. ([@emilybrick](https://github.com/emilybrick)) #### :house: Internal -* [#608](https://github.com/primer/primer/pull/608) Update releasing docs. ([@shawnbot](https://github.com/shawnbot)) + +- [#608](https://github.com/primer/primer/pull/608) Update releasing docs. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 2 + - Emily Brick ([emilybrick](https://github.com/emilybrick)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 10.10.0 #### :rocket: Enhancement -* [#573](https://github.com/primer/primer/pull/573) Add Progress component. ([@emilybrick](https://github.com/emilybrick)) -* [#561](https://github.com/primer/primer/pull/561) Add HTML `hidden` attribute docs, increase `[hidden]` selector specificity. ([@shawnbot](https://github.com/shawnbot) h/t @jonrohan) + +- [#573](https://github.com/primer/primer/pull/573) Add Progress component. ([@emilybrick](https://github.com/emilybrick)) +- [#561](https://github.com/primer/primer/pull/561) Add HTML `hidden` attribute docs, increase `[hidden]` selector specificity. ([@shawnbot](https://github.com/shawnbot) h/t @jonrohan) #### :bug: Bug Fix -* [#604](https://github.com/primer/primer/pull/604) Fix Button group focus ring z-index issues. ([@shawnbot](https://github.com/shawnbot)) -* [#570](https://github.com/primer/primer/pull/570) Make `.blankslate-narrow` responsive. ([@crhallberg](https://github.com/crhallberg)) -* [#591](https://github.com/primer/primer/pull/591) Add fs-extra to `primer-module-build.dependencies`. ([@shawnbot](https://github.com/shawnbot)) + +- [#604](https://github.com/primer/primer/pull/604) Fix Button group focus ring z-index issues. ([@shawnbot](https://github.com/shawnbot)) +- [#570](https://github.com/primer/primer/pull/570) Make `.blankslate-narrow` responsive. ([@crhallberg](https://github.com/crhallberg)) +- [#591](https://github.com/primer/primer/pull/591) Add fs-extra to `primer-module-build.dependencies`. ([@shawnbot](https://github.com/shawnbot)) #### :memo: Documentation -* [#585](https://github.com/primer/primer/pull/585) Improve contributing docs and add DEVELOP.md. ([@shawnbot](https://github.com/shawnbot)) + +- [#585](https://github.com/primer/primer/pull/585) Improve contributing docs and add DEVELOP.md. ([@shawnbot](https://github.com/shawnbot)) #### :house: Internal -* [#597](https://github.com/primer/primer/pull/597) Fix primerize, add "fresh" run-script, etc. ([@shawnbot](https://github.com/shawnbot)) + +- [#597](https://github.com/primer/primer/pull/597) Fix primerize, add "fresh" run-script, etc. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 3 + - Chris Hallberg ([crhallberg](https://github.com/crhallberg)) - Emily Brick ([emilybrick](https://github.com/emilybrick)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) # 10.9.0 + #### :rocket: Enhancement -* [#586](https://github.com/primer/primer/pull/586) Hiding .Counter component when it's empty.. ([@jonrohan](https://github.com/jonrohan)) -* [#545](https://github.com/primer/primer/pull/545) Simplify responsive utilities with $responsive-variants. ([@shawnbot](https://github.com/shawnbot)) -* [#557](https://github.com/primer/primer/pull/557) Add !important to [hidden]. ([@muan](https://github.com/muan)) + +- [#586](https://github.com/primer/primer/pull/586) Hiding .Counter component when it's empty.. ([@jonrohan](https://github.com/jonrohan)) +- [#545](https://github.com/primer/primer/pull/545) Simplify responsive utilities with \$responsive-variants. ([@shawnbot](https://github.com/shawnbot)) +- [#557](https://github.com/primer/primer/pull/557) Add !important to [hidden]. ([@muan](https://github.com/muan)) #### :memo: Documentation -* [#580](https://github.com/primer/primer/pull/580) Remove invalid button classes. ([@shawnbot](https://github.com/shawnbot)) + +- [#580](https://github.com/primer/primer/pull/580) Remove invalid button classes. ([@shawnbot](https://github.com/shawnbot)) #### :house: Internal -* [#581](https://github.com/primer/primer/pull/581) Use code-blocks. ([@shawnbot](https://github.com/shawnbot)) -* [#530](https://github.com/primer/primer/pull/530) Adding user details to storybook publish script. ([@jonrohan](https://github.com/jonrohan)) -* [#579](https://github.com/primer/primer/pull/579) Upgrade to lerna@2.11, rebuild package-lock. ([@shawnbot](https://github.com/shawnbot)) + +- [#581](https://github.com/primer/primer/pull/581) Use code-blocks. ([@shawnbot](https://github.com/shawnbot)) +- [#530](https://github.com/primer/primer/pull/530) Adding user details to storybook publish script. ([@jonrohan](https://github.com/jonrohan)) +- [#579](https://github.com/primer/primer/pull/579) Upgrade to lerna@2.11, rebuild package-lock. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 5 + - Jon Rohan ([jonrohan](https://github.com/jonrohan)) - Mickaël Derriey ([mderriey](https://github.com/mderriey)) - Mu-An Chiou ([muan](https://github.com/muan)) @@ -745,27 +925,35 @@ - Sophie Shepherd ([sophshep](https://github.com/sophshep)) # 10.8.1 + #### :bug: Bug Fix -* [#554](https://github.com/primer/primer/pull/554) Fixes peer dependency issues ([@emplums](https://github.com/emplums)) + +- [#554](https://github.com/primer/primer/pull/554) Fixes peer dependency issues ([@emplums](https://github.com/emplums)) #### :memo: Documentation -* [#554](https://github.com/primer/primer/pull/554) Updates releasing documentation ([@emplums](https://github.com/emplums)) + +- [#554](https://github.com/primer/primer/pull/554) Updates releasing documentation ([@emplums](https://github.com/emplums)) #### :rocket: Enhancement -* [#555](https://github.com/primer/primer/pull/555) Add version check to CI ([@shawnbot](https://github.com/shawnbot)) + +- [#555](https://github.com/primer/primer/pull/555) Add version check to CI ([@shawnbot](https://github.com/shawnbot)) # 10.8.0 + #### :rocket: Enhancement -* [#525](https://github.com/primer/primer/pull/525) Add $spacer-0 alias. ([@AustinPaquette](https://github.com/AustinPaquette)) -* [#522](https://github.com/primer/primer/pull/522) Add .BtnGroup-parent, deprecate .BtnGroup-form. ([@muan](https://github.com/muan)) -* [#544](https://github.com/primer/primer/pull/544) Add lh-0 utility class. ([@shawnbot](https://github.com/shawnbot)) -* [#548](https://github.com/primer/primer/pull/548) Add text underline utility. ([@AustinPaquette](https://github.com/AustinPaquette)) -* [#549](https://github.com/primer/primer/pull/549) Add .user-select-none utility class. ([@AustinPaquette](https://github.com/AustinPaquette)) + +- [#525](https://github.com/primer/primer/pull/525) Add \$spacer-0 alias. ([@AustinPaquette](https://github.com/AustinPaquette)) +- [#522](https://github.com/primer/primer/pull/522) Add .BtnGroup-parent, deprecate .BtnGroup-form. ([@muan](https://github.com/muan)) +- [#544](https://github.com/primer/primer/pull/544) Add lh-0 utility class. ([@shawnbot](https://github.com/shawnbot)) +- [#548](https://github.com/primer/primer/pull/548) Add text underline utility. ([@AustinPaquette](https://github.com/AustinPaquette)) +- [#549](https://github.com/primer/primer/pull/549) Add .user-select-none utility class. ([@AustinPaquette](https://github.com/AustinPaquette)) #### :memo: Documentation -* [#528](https://github.com/primer/primer/pull/528) Update release docs. ([@emplums](https://github.com/emplums)) + +- [#528](https://github.com/primer/primer/pull/528) Update release docs. ([@emplums](https://github.com/emplums)) #### Committers: 3 + - Austin Paquette ([AustinPaquette](https://github.com/AustinPaquette)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - Mu-An Chiou ([@muan](https://github.com/muan)) @@ -774,20 +962,24 @@ # 10.7.0 #### :nail_care: Polish -* [#511](https://github.com/primer/primer/pull/511) change double quotes to single quotes in Avatar stack stories. ([@AustinPaquette](https://github.com/AustinPaquette)) + +- [#511](https://github.com/primer/primer/pull/511) change double quotes to single quotes in Avatar stack stories. ([@AustinPaquette](https://github.com/AustinPaquette)) #### :memo: Documentation -* [#520](https://github.com/primer/primer/pull/520) Update issue templates. ([@broccolini](https://github.com/broccolini)) -* [#516](https://github.com/primer/primer/pull/516) Fix modules/primer-product/README.md. ([@9585999](https://github.com/9585999)) -* [#513](https://github.com/primer/primer/pull/513) Deleting the dev branch workflow instructions. ([@jonrohan](https://github.com/jonrohan)) -* [#507](https://github.com/primer/primer/pull/507) Moving the color docs to the style guide. ([@jonrohan](https://github.com/jonrohan)) + +- [#520](https://github.com/primer/primer/pull/520) Update issue templates. ([@broccolini](https://github.com/broccolini)) +- [#516](https://github.com/primer/primer/pull/516) Fix modules/primer-product/README.md. ([@9585999](https://github.com/9585999)) +- [#513](https://github.com/primer/primer/pull/513) Deleting the dev branch workflow instructions. ([@jonrohan](https://github.com/jonrohan)) +- [#507](https://github.com/primer/primer/pull/507) Moving the color docs to the style guide. ([@jonrohan](https://github.com/jonrohan)) #### :house: Internal -* [#517](https://github.com/primer/primer/pull/517) Modifying notify script to publish from each package. ([@jonrohan](https://github.com/jonrohan)) -* [#515](https://github.com/primer/primer/pull/515) Auto publish storybook. ([@jonrohan](https://github.com/jonrohan)) -* [#510](https://github.com/primer/primer/pull/510) [WIP] Patch release 10.6.2. ([@shawnbot](https://github.com/shawnbot)) + +- [#517](https://github.com/primer/primer/pull/517) Modifying notify script to publish from each package. ([@jonrohan](https://github.com/jonrohan)) +- [#515](https://github.com/primer/primer/pull/515) Auto publish storybook. ([@jonrohan](https://github.com/jonrohan)) +- [#510](https://github.com/primer/primer/pull/510) [WIP] Patch release 10.6.2. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 5 + - Austin Paquette ([AustinPaquette](https://github.com/AustinPaquette)) - Diana Mounter ([broccolini](https://github.com/broccolini)) - DieGOs ([9585999](https://github.com/9585999)) @@ -797,52 +989,60 @@ # 10.6.1 #### :bug: Bug Fix -* [#506](https://github.com/primer/primer/pull/506) Fix white border on last avatar in AvatarStack (take two). ([@shawnbot](https://github.com/shawnbot)) -* [#501](https://github.com/primer/primer/pull/501) Set different z-index for .details-overlay. ([@muan](https://github.com/muan)) + +- [#506](https://github.com/primer/primer/pull/506) Fix white border on last avatar in AvatarStack (take two). ([@shawnbot](https://github.com/shawnbot)) +- [#501](https://github.com/primer/primer/pull/501) Set different z-index for .details-overlay. ([@muan](https://github.com/muan)) #### Committers: 2 + - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - [muan](https://github.com/muan) - # 10.6.0 #### :bug: Bug Fix -* [#491](https://github.com/primer/primer/pull/491) Add `backface-visibility` to `.hover-grow`. ([@brandonrosage](https://github.com/brandonrosage)) + +- [#491](https://github.com/primer/primer/pull/491) Add `backface-visibility` to `.hover-grow`. ([@brandonrosage](https://github.com/brandonrosage)) #### :memo: Documentation -* [#490](https://github.com/primer/primer/pull/490) Add release documentation. ([@emplums](https://github.com/emplums)) + +- [#490](https://github.com/primer/primer/pull/490) Add release documentation. ([@emplums](https://github.com/emplums)) #### :house: Internal -* [#475](https://github.com/primer/primer/pull/475) Import primer-module-build to the monorepo. ([@shawnbot](https://github.com/shawnbot)) -* [#479](https://github.com/primer/primer/pull/479) Add "scoreboard" test suite. ([@shawnbot](https://github.com/shawnbot)) + +- [#475](https://github.com/primer/primer/pull/475) Import primer-module-build to the monorepo. ([@shawnbot](https://github.com/shawnbot)) +- [#479](https://github.com/primer/primer/pull/479) Add "scoreboard" test suite. ([@shawnbot](https://github.com/shawnbot)) #### Committers: 4 + - Brandon Rosage ([brandonrosage](https://github.com/brandonrosage)) - Emily ([emplums](https://github.com/emplums)) - Shawn Allen ([shawnbot](https://github.com/shawnbot)) - [muan](https://github.com/muan) - # 10.5.0 #### :rocket: Enhancement -* [#487](https://github.com/primer/primer/pull/487) Import Pagination Component. ([@emplums](https://github.com/emplums)) -* [#474](https://github.com/primer/primer/pull/474) Add text-mono utility class. ([@emplums](https://github.com/emplums)) -* [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan)) + +- [#487](https://github.com/primer/primer/pull/487) Import Pagination Component. ([@emplums](https://github.com/emplums)) +- [#474](https://github.com/primer/primer/pull/474) Add text-mono utility class. ([@emplums](https://github.com/emplums)) +- [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan)) #### :bug: Bug Fix -* [#465](https://github.com/primer/primer/pull/465) Fix Popover--right-bottom caret positioning. ([@shawnbot](https://github.com/shawnbot)) -* [#458](https://github.com/primer/primer/pull/458) Fix broken pointer from packages to modules. ([@tysongach](https://github.com/tysongach)) + +- [#465](https://github.com/primer/primer/pull/465) Fix Popover--right-bottom caret positioning. ([@shawnbot](https://github.com/shawnbot)) +- [#458](https://github.com/primer/primer/pull/458) Fix broken pointer from packages to modules. ([@tysongach](https://github.com/tysongach)) #### :memo: Documentation -* [#486](https://github.com/primer/primer/pull/486) Documenting the text-inheritance color utility. ([@jonrohan](https://github.com/jonrohan)) -* [#481](https://github.com/primer/primer/pull/481) Styleguide Polish. ([@emplums](https://github.com/emplums)) -* [#464](https://github.com/primer/primer/pull/464) Fix markdown stories. ([@shawnbot](https://github.com/shawnbot)) -* [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan)) -* [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos)) + +- [#486](https://github.com/primer/primer/pull/486) Documenting the text-inheritance color utility. ([@jonrohan](https://github.com/jonrohan)) +- [#481](https://github.com/primer/primer/pull/481) Styleguide Polish. ([@emplums](https://github.com/emplums)) +- [#464](https://github.com/primer/primer/pull/464) Fix markdown stories. ([@shawnbot](https://github.com/shawnbot)) +- [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan)) +- [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos)) #### Committers: 7 + - Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos)) - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) - Emily ([emplums](https://github.com/emplums)) @@ -854,13 +1054,16 @@ # 10.4.0 (2018-03-14) #### :rocket: Enhancement -* [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan)) + +- [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan)) #### :memo: Documentation -* [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan)) -* [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos)) + +- [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan)) +- [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos)) #### Committers: 3 + - Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos)) - Jon Rohan ([jonrohan](https://github.com/jonrohan)) - [muan](https://github.com/muan) @@ -868,23 +1071,29 @@ # 10.3.0 (2018-01-17) #### :rocket: Enhancement -* [#426](https://github.com/primer/primer/pull/426) Add em spacer variables. ([@broccolini](https://github.com/broccolini)) -* [#430](https://github.com/primer/primer/pull/430) Increase input font-size to 16px on mobile. ([@broccolini](https://github.com/broccolini)) + +- [#426](https://github.com/primer/primer/pull/426) Add em spacer variables. ([@broccolini](https://github.com/broccolini)) +- [#430](https://github.com/primer/primer/pull/430) Increase input font-size to 16px on mobile. ([@broccolini](https://github.com/broccolini)) #### :bug: Bug Fix -* [#416](https://github.com/primer/primer/pull/416) Point style field to build file in subhead component. ([@muan](https://github.com/muan)) -* [#424](https://github.com/primer/primer/pull/424) Add missing $spacer-12 in $marketingSpacers variable. ([@gladwearefriends](https://github.com/gladwearefriends)) + +- [#416](https://github.com/primer/primer/pull/416) Point style field to build file in subhead component. ([@muan](https://github.com/muan)) +- [#424](https://github.com/primer/primer/pull/424) Add missing $spacer-12 in $marketingSpacers variable. ([@gladwearefriends](https://github.com/gladwearefriends)) #### :nail_care: Polish -* [#418](https://github.com/primer/primer/pull/418) Button color contrast improvements. ([@broccolini](https://github.com/broccolini)) + +- [#418](https://github.com/primer/primer/pull/418) Button color contrast improvements. ([@broccolini](https://github.com/broccolini)) #### :memo: Documentation -* [#427](https://github.com/primer/primer/pull/427) Adding stories from markdown for the other modules that didn't have any stories. ([@jonrohan](https://github.com/jonrohan)) + +- [#427](https://github.com/primer/primer/pull/427) Adding stories from markdown for the other modules that didn't have any stories. ([@jonrohan](https://github.com/jonrohan)) #### :house: Internal -* [#420](https://github.com/primer/primer/pull/420) Update licenses to 2018 🎊. ([@jonrohan](https://github.com/jonrohan)) + +- [#420](https://github.com/primer/primer/pull/420) Update licenses to 2018 🎊. ([@jonrohan](https://github.com/jonrohan)) #### Committers: 4 + - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) - Diana Mounter ([broccolini](https://github.com/broccolini)) - Jon Rohan ([jonrohan](https://github.com/jonrohan)) @@ -893,15 +1102,18 @@ # 10.2.0 (2017-12-11) #### :rocket: Enhancement -* [#376](https://github.com/primer/primer/pull/376) Extend spacing scale for marketing. ([@gladwearefriends](https://github.com/gladwearefriends)) -* [#409](https://github.com/primer/primer/pull/409) Add Sass key to package.json. ([@broccolini](https://github.com/broccolini)) -* [#358](https://github.com/primer/primer/pull/358) automatically style first and last breadcrumb. ([@gronke](https://github.com/gronke)) -* [#394](https://github.com/primer/primer/pull/394) Point style field to built css. ([@koddsson](https://github.com/koddsson)) + +- [#376](https://github.com/primer/primer/pull/376) Extend spacing scale for marketing. ([@gladwearefriends](https://github.com/gladwearefriends)) +- [#409](https://github.com/primer/primer/pull/409) Add Sass key to package.json. ([@broccolini](https://github.com/broccolini)) +- [#358](https://github.com/primer/primer/pull/358) automatically style first and last breadcrumb. ([@gronke](https://github.com/gronke)) +- [#394](https://github.com/primer/primer/pull/394) Point style field to built css. ([@koddsson](https://github.com/koddsson)) #### :memo: Documentation -* [#411](https://github.com/primer/primer/pull/411) Updates to stylelint package links/docs for new structure. ([@jonrohan](https://github.com/jonrohan)) + +- [#411](https://github.com/primer/primer/pull/411) Updates to stylelint package links/docs for new structure. ([@jonrohan](https://github.com/jonrohan)) #### Committers: 4 + - Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends)) - Diana Mounter ([broccolini](https://github.com/broccolini)) - Jon Rohan ([jonrohan](https://github.com/jonrohan)) @@ -911,14 +1123,17 @@ # 10.1.0 (2017-11-15) #### :rocket: Enhancement -* [#385](https://github.com/primer/primer/pull/385) New Avatar stack. ([@califa](https://github.com/califa) & [@sophshep](https://github.com/sophshep)) -* [#404](https://github.com/primer/primer/pull/404) Tooltip component updates ([@broccolini](https://github.com/broccolini)) + +- [#385](https://github.com/primer/primer/pull/385) New Avatar stack. ([@califa](https://github.com/califa) & [@sophshep](https://github.com/sophshep)) +- [#404](https://github.com/primer/primer/pull/404) Tooltip component updates ([@broccolini](https://github.com/broccolini)) #### :memo: Documentation -* [#405](https://github.com/primer/primer/pull/405) Add deprecation warning for `.avatar-stack`. ([@jonrohan](https://github.com/jonrohan)) -* [#391](https://github.com/primer/primer/pull/391) Update shields.io url to https. ([@NuttasitBoonwat](https://github.com/NuttasitBoonwat)) + +- [#405](https://github.com/primer/primer/pull/405) Add deprecation warning for `.avatar-stack`. ([@jonrohan](https://github.com/jonrohan)) +- [#391](https://github.com/primer/primer/pull/391) Update shields.io url to https. ([@NuttasitBoonwat](https://github.com/NuttasitBoonwat)) #### Committers: 5 + - Diana Mounter ([broccolini](https://github.com/broccolini)) - Joel Califa ([califa](https://github.com/califa)) - Jon Rohan ([jonrohan](https://github.com/jonrohan)) @@ -929,40 +1144,45 @@ #### :bug: Bug Fix -* Fixing `peerDependencies` to be greater than equal to versions. Fixing version mismatch with buttons and box. +- Fixing `peerDependencies` to be greater than equal to versions. Fixing version mismatch with buttons and box. # 10.0.0 (2017-11-13) #### :boom: Breaking Change -* [#395](https://github.com/primer/primer/pull/395) Renaming primer-css to primer. ([@jonrohan](https://github.com/jonrohan)) -* [#379](https://github.com/primer/primer/pull/379) Deprecating primer-cards and form-cards. ([@jonrohan](https://github.com/jonrohan)) -* [#336](https://github.com/primer/primer/pull/336) Move `primer-breadcrumbs` from marketing to core ([@jonrohan]((https://github.com/jonrohan)) + +- [#395](https://github.com/primer/primer/pull/395) Renaming primer-css to primer. ([@jonrohan](https://github.com/jonrohan)) +- [#379](https://github.com/primer/primer/pull/379) Deprecating primer-cards and form-cards. ([@jonrohan](https://github.com/jonrohan)) +- [#336](https://github.com/primer/primer/pull/336) Move `primer-breadcrumbs` from marketing to core ([@jonrohan](<(https://github.com/jonrohan)>) #### :rocket: Enhancement -* [#371](https://github.com/primer/primer/pull/371) Add .details-reset. ([@muan](https://github.com/muan)) -* [#375](https://github.com/primer/primer/pull/375) New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle. ([@sophshep](https://github.com/sophshep)) -* [#383](https://github.com/primer/primer/pull/383) Add 'Popover' component. ([@brandonrosage](https://github.com/brandonrosage)) -* [#377](https://github.com/primer/primer/pull/377) Refactor and add underline nav component. ([@ampinsk](https://github.com/ampinsk)) -* [#337](https://github.com/primer/primer/pull/337) Add marketing buttons to primer-marketing. ([@gladwearefriends](https://github.com/gladwearefriends)) -* [#342](https://github.com/primer/primer/pull/342) Add Subhead component. ([@shawnbot](https://github.com/shawnbot)) -* [#341](https://github.com/primer/primer/pull/341) Add branch-name component from github/github. ([@shawnbot](https://github.com/shawnbot)) + +- [#371](https://github.com/primer/primer/pull/371) Add .details-reset. ([@muan](https://github.com/muan)) +- [#375](https://github.com/primer/primer/pull/375) New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle. ([@sophshep](https://github.com/sophshep)) +- [#383](https://github.com/primer/primer/pull/383) Add 'Popover' component. ([@brandonrosage](https://github.com/brandonrosage)) +- [#377](https://github.com/primer/primer/pull/377) Refactor and add underline nav component. ([@ampinsk](https://github.com/ampinsk)) +- [#337](https://github.com/primer/primer/pull/337) Add marketing buttons to primer-marketing. ([@gladwearefriends](https://github.com/gladwearefriends)) +- [#342](https://github.com/primer/primer/pull/342) Add Subhead component. ([@shawnbot](https://github.com/shawnbot)) +- [#341](https://github.com/primer/primer/pull/341) Add branch-name component from github/github. ([@shawnbot](https://github.com/shawnbot)) #### :bug: Bug Fix -* [#360](https://github.com/primer/primer/pull/360) Remove ::before ::after padding hack on markdown. ([@jonrohan](https://github.com/jonrohan)) -* [#320](https://github.com/primer/primer/pull/320) Remove -webkit-text-decoration-skip override. ([@antons](https://github.com/antons)) -* [#359](https://github.com/primer/primer/pull/359) Change markdown li break to handle Safari 10.x user stylesheet bug. ([@feministy](https://github.com/feministy)) -* [#388](https://github.com/primer/primer/pull/388) Button border-radius fix to override Chroma 62. ([@broccolini](https://github.com/broccolini)) -* [#307](https://github.com/primer/primer/pull/307) Do not suppress opacity transition for tooltipped-no-delay. ([@astorije](https://github.com/astorije)) + +- [#360](https://github.com/primer/primer/pull/360) Remove ::before ::after padding hack on markdown. ([@jonrohan](https://github.com/jonrohan)) +- [#320](https://github.com/primer/primer/pull/320) Remove -webkit-text-decoration-skip override. ([@antons](https://github.com/antons)) +- [#359](https://github.com/primer/primer/pull/359) Change markdown li break to handle Safari 10.x user stylesheet bug. ([@feministy](https://github.com/feministy)) +- [#388](https://github.com/primer/primer/pull/388) Button border-radius fix to override Chroma 62. ([@broccolini](https://github.com/broccolini)) +- [#307](https://github.com/primer/primer/pull/307) Do not suppress opacity transition for tooltipped-no-delay. ([@astorije](https://github.com/astorije)) #### :house: Internal -* [#396](https://github.com/primer/primer/pull/396) Use lerna-changelog to generate a changelog. ([@jonrohan](https://github.com/jonrohan)) -* [#382](https://github.com/primer/primer/pull/382) Update Button docs. ([@JasonEtco](https://github.com/JasonEtco)) -* [#390](https://github.com/primer/primer/pull/390) Updating `storiesFromMarkdown` to read in rails Octicons helper and replace with react component. ([@jonrohan](https://github.com/jonrohan)) -* [#389](https://github.com/primer/primer/pull/389) Publish alpha release any time we're not on a release branch or master. ([@jonrohan](https://github.com/jonrohan)) -* [#384](https://github.com/primer/primer/pull/384) Add test to check for the current year in the license and source. ([@jonrohan](https://github.com/jonrohan)) -* [#374](https://github.com/primer/primer/pull/374) Improve Pull Request template. ([@agisilaos](https://github.com/agisilaos)) + +- [#396](https://github.com/primer/primer/pull/396) Use lerna-changelog to generate a changelog. ([@jonrohan](https://github.com/jonrohan)) +- [#382](https://github.com/primer/primer/pull/382) Update Button docs. ([@JasonEtco](https://github.com/JasonEtco)) +- [#390](https://github.com/primer/primer/pull/390) Updating `storiesFromMarkdown` to read in rails Octicons helper and replace with react component. ([@jonrohan](https://github.com/jonrohan)) +- [#389](https://github.com/primer/primer/pull/389) Publish alpha release any time we're not on a release branch or main. ([@jonrohan](https://github.com/jonrohan)) +- [#384](https://github.com/primer/primer/pull/384) Add test to check for the current year in the license and source. ([@jonrohan](https://github.com/jonrohan)) +- [#374](https://github.com/primer/primer/pull/374) Improve Pull Request template. ([@agisilaos](https://github.com/agisilaos)) #### Committers: 13 + - Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos)) - Amanda Pinsker ([ampinsk](https://github.com/ampinsk)) - Anton Sotkov ([antons](https://github.com/antons)) @@ -977,44 +1197,52 @@ - Sophie Shepherd ([sophshep](https://github.com/sophshep)) - liz abinante! ([feministy](https://github.com/feministy)) -**Special thanks to @shaharke for transferring ownership of the Primer npm package to us so that we could make the rename happen!** :heart: +**Special thanks to @shaharke for transferring ownership of the Primer npm package to us so that we could make the rename happen!** :heart: # 9.6.0 ### Added + - Storybook. We've added a storybook prototyping environment for testing components in seclusion. To start the server run `npm start` - Adding yeoman generator for creating a primer module. `generator-primer-module` - Importing `stylelint-config-primer` from https://github.com/primer/stylelint-config-primer/ into monorepo. - Importing `stylelint-selector-no-utility` from https://github.com/primer/stylelint-selector-no-utility into monorepo. ### Changes + - Deployment and publishing scripts refinements. # 9.5.0 ### Added + - It's now possible to style `` elements as buttons and have them appear in the active/selected state when the enclosing [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) is open. #346 ### Changes + - Updates our release candidate versioning logic so that prerelease increments are done on a per-module basis, fixing #350. # 9.4.0 ### Added + - Add `v-align-baseline` class to `primer-utilities` #324 - Add deprecation warnings for `primer-cards` and `primer-forms/lib/form-validation.scss` #347 (these will be removed in v10.0.0) ### Changes + - Update npm metadata for `primer`, `primer-core`, `primer-product`, and `primer-marketing` #328 - Remove `HEAD` heading from the changelog #327 # 9.3.0 ## Added + - Docs for `primer-layout` (grid), `primer-support`, `primer-utilities`, and `primer-marketing-utilities` - Primer keys for `category` and `module_type` to `package.json` (for use in documentation and gathering stats) ## Changes + - Removes `docs` from `gitignore` - Removes the `^` from all dependencies so that we can publish exact versions - Consolidates release notes from various sources into one changelog located in `/modules/primer/CHANGELOG.md` @@ -1080,9 +1308,11 @@ See PR [#243](https://github.com/primer/primer/pull/243) ## Changes ### Primer Core v6.0.0 + - Fixed `primer-base` dependency to point to latest version **Repo urls corrected from `packages` to `modules` in:** + - primer-base v1.1.5 - primer-box v2.1.8 - primer-buttons v2.0.6 @@ -1098,6 +1328,7 @@ See PR [#243](https://github.com/primer/primer/pull/243) ### Primer Product v5.0.2 **Repo urls corrected from `packages` to `modules` in:** + - primer-alerts v1.1.8 - primer-avatars v1.0.2 - primer-blankslate v1.0.2 @@ -1108,6 +1339,7 @@ See PR [#243](https://github.com/primer/primer/pull/243) ### Primer Marketing v5.0.2 **Repo urls corrected from `packages` to `modules` in:** + - primer-breadcrumb v1.0.2 - primer-cards v0.1.8 - primer-marketing-support v1.0.2 @@ -1122,16 +1354,18 @@ See PR [#243](https://github.com/primer/primer/pull/243) Fixes issues with the ordering of imports in each of our meta-packages. See PR [#239](https://github.com/primer/primer/pull/239) - ## Changes ### Primer Core v5.0.1 + - Re-ordered imports in `index.scss` to ensure utilities come last in the cascade ### Primer Product v5.0.1 + - Re-ordered imports in `index.scss` to move markdown import to end of list to match former setup in GitHub.com ### Primer Marketing v5.0.1 + - Re-ordered imports in `index.scss` to ensure marketing utilities come last in the cascade # 7.0.0 - Monorepo @@ -1152,29 +1386,34 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 ### Primer Core v4.0.3 #### primer-support v4.0.5 + - Update fade color variables to use rgba instead of transparentize color function for better Sass readability - Update support variables and mixins to use new color variables #### primer-layout v1.0.3 + - Update grid gutter styles naming convention and add responsive modifiers - Deprecate `single-column` and `table-column` from layout module - Remove `@include clearfix` from responsive container classes #### primer-utilities v4.3.3 + - Add `show-on-focus` utility class for accessibility - Update typography utilities to use new color variables - Add `.p-responsive` class #### primer-base v1.1.3 + - Update `b` tag font weight to use variable in base styles ### Primer Marketing v4.0.3 #### primer-tables -- Update marketing table colors to use new variables +- Update marketing table colors to use new variables # 6.0.0 + - Add `State--small` to labels module - Fix responsive border utilities - Added and updated typography variables and mixins; updated variables used in typography utilities; updated margin, padding, and typography readmes @@ -1186,6 +1425,7 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Updated syntax and classnames for `Counters` and `Labels`, moved into combined module with states. # 5.1.0 + - Add negative margin utilities - Move `.d-flex` & `.d-flex-inline` to be with other display utility classes in `visibility-display.scss` - Delete `.shade-gradient` in favor of `.bg-shade-gradient` @@ -1194,6 +1434,7 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Add green border utility # 5.0.0 + - Added new border variable and utility, replaced deprecated flash border variables - Updated variable name in form validation - Updated `.sr-only` to not use negative margin @@ -1215,9 +1456,11 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Added form utility to override Webkit's incorrect assumption of where to try to autofill contact information # 4.7.0 + - Update primer modules to use bold variable applying `font-weight: 600` # 4.6.0 + - Added `CircleBadge` component for badge-like displays within product/components/avatars - Added Box shadow utilities `box-shadow`, `box-shadow-medium`, `box-shadow-large`, `box-shadow-none` - Moved visibility and display utilities to separate partial at the end of the imports list, moved flexbox to it's own partial @@ -1227,6 +1470,7 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Added `.wb-break-all` utility # 4.4.0 + - Adding primer-marketing module to primer - Added red and blue border color variables and utilities - Updated: `$spacer-5` has been changed to `32px` from `36px` @@ -1234,6 +1478,7 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Deprecated `link-blue`, updated `link-gray` and `link-gray-dark`, added `link-hover-blue` - Updated: blankslate module to use support variables for sizing # 4.3.0 + - Renamed `.flex-table` to `.TableObject` - Updated: `$spacer-1` has been changed to `4px` from `3px` - Updated: `$spacer-2` has been changed to `6px` from `8px` @@ -1245,17 +1490,17 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Refactor: Button groups into some cleaner CSS - Updated: Reorganizing how we separate primer-core, primer-product, primer-marketing css - # 4.2.0 -- Added: Responsive styles for margin and padding utilities, display, float, and new responsive hide utility, and updates to make typography responsive + +- Added: Responsive styles for margin and padding utilities, display, float, and new responsive hide utility, and updates to make typography responsive - Added: new container styles and grid styles with responsive options - Added: updated underline nav styles - Deprecate: Deprecating a lot of color and layout utilities - Added: More type utilities for different weights and larger sizes. - Added: Well defined browser support - # 4.1.0 + - Added: [primer-markdown](https://github.com/primer/markdown) to the build - Fixes: Pointing "style" package.json to `build/build.css` file. - Added: Update font stack to system fonts @@ -1267,15 +1512,19 @@ See PR for more details on this change: https://github.com/primer/primer/pull/23 - Added: Changing from font icons to SVG # 4.0.2 + - Added npm build scripts to add `build/build.css` to the npm package # 4.0.1 + - Fixed: missing primer-layout from build # 4.0.0 + - Whole new npm build system, pulling in the code from separate component repos # 3.0.0 + - Added: Animation utilities - Added: Whitespace scale, and margin and padding utilities - Added: Border utilities diff --git a/MIGRATING.md b/MIGRATING.md deleted file mode 100644 index ef419e6e01..0000000000 --- a/MIGRATING.md +++ /dev/null @@ -1,74 +0,0 @@ -# 12.0.0 -The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package β€” `@primer/css` β€” which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app: - -## npm -First, install the new package. - -```sh -npm install --save @primer/css -``` - -If you use the `primer` package, all you'll need to do is: - -```sh -npm uninstall --save primer -``` - -If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them: - -```sh -jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json -``` - -And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles: - -## Sass -There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help. - -### Sass imports -Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**: - -* If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done! -* Otherwise... - 1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g. - * `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss` - * `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss` - 1. Replace `primer-` with `@primer/css/`, e.g. - * `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss` - * `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss` - 1. Delete `lib/` from every Primer CSS path, e.g. - * `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss` - * `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss` - -If your text editor supports search and replace regular expressions, the following patterns should work: - -| find | replace | -| :--- | :--- | -| `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` | -| `primer-(\w+)(\/lib)?` | `@primer/css/$1` | -| `primer\b` | `@primer/css` - -#### `primer-migrate` -You can also use the included [`primer-migrate` script](bin/primer-migrate): - -```sh -npx -p @primer/css primer-migrate path/to/**/*.scss -``` - -### Sass include paths -If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada: - -If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out. - -## Compiled CSS files - -The compiled CSS files can be found under `/dist` in case you want to directly link to them. - -## Fonts -The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following: - -1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`. -1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`. -1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served. - -[help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration diff --git a/README.md b/README.md index 826a7bb260..a3ee0619ed 100644 --- a/README.md +++ b/README.md @@ -13,13 +13,13 @@ - + - +

@@ -65,5 +65,5 @@ The [Primer CSS docs site](https://primer.style/css) is deployed from this repo [install-npm]: https://docs.npmjs.com/getting-started/installing-node [npm]: https://www.npmjs.com/ -[primer]: https://primer.style +[primer]: https://primer.style/ [sass]: http://sass-lang.com/ diff --git a/RELEASING.md b/RELEASING.md index 89cb87732d..90f306475f 100644 --- a/RELEASING.md +++ b/RELEASING.md @@ -5,7 +5,7 @@ 1. Decide which [PRs](https://github.com/primer/css/pulls) should be part of the next release and if it will be a major, minor or patch ``. You may also check the [release tracking project ](https://github.com/primer/css/projects/2#column-4482699) or ask your team members in Slack. -1. Create a new release branch from `master` and name it `release-`. +1. Create a new release branch from `main` and name it `release-`. 1. Run [`npm version `](https://docs.npmjs.com/cli/version) to update the `version` field in both `package.json` and `package-lock.json`. @@ -51,12 +51,12 @@ - [ ] Update `github/github` - [ ] Tell the world (Slack, Twitter, Team post) - For more details, see [RELEASING.md](https://github.com/primer/css/blob/master/RELEASING.md). + For more details, see [RELEASING.md](https://github.com/primer/css/blob/main/RELEASING.md). /cc @primer/ds-core ``` -1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `master` to the `release-` branch before merging. +1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `main` to the `release-` branch before merging. 1. Update `CHANGELOG.md` and the PR description. **Tip**: You can copy&paste the changelog from `Checks > changelog > all > changelog`. It gets generated based on adding the `Tag` labels to PRs. diff --git a/deprecations.js b/deprecations.js index 331d3ef9d5..6b879d557e 100644 --- a/deprecations.js +++ b/deprecations.js @@ -4,6 +4,454 @@ * array and a "message" string. */ const versionDeprecations = { + '16.0.0': [ + { + selectors: [ + '.btn-blue', + '.btn-blue:focus', + '.btn-blue.focus', + '.btn-blue:hover', + '.btn-blue.hover', + '.btn-blue:active', + '.btn-blue.selected', + '.btn-blue[aria-selected=true]', + '[open]>.btn-blue', + '.btn-blue:disabled', + '.btn-blue.disabled', + '.btn-blue[aria-disabled=true]', + '.btn-blue .Counter', + '.markdown-body li', + '.input-dark', + '.input-dark:-ms-input-placeholder', + '.input-dark::-ms-input-placeholder', + '.input-dark::placeholder', + '.input-dark.focus', + '.input-dark:focus', + '::-ms-input-placeholder', + '.border-blue', + '.border-blue-light', + '.border-green', + '.border-green-light', + '.border-red', + '.border-red-light', + '.border-purple', + '.border-yellow', + '.border-gray-light', + '.border-gray-dark', + '.border-black-fade', + '.border-white-fade', + '.border-white-fade-15', + '.border-white-fade-30', + '.border-white-fade-50', + '.border-white-fade-70', + '.border-white-fade-85', + '.box-shadow', + '.box-shadow-medium', + '.box-shadow-large', + '.box-shadow-extra-large', + '.bg-white', + '.bg-blue', + '.bg-blue-light', + '.bg-gray-dark', + '.bg-gray', + '.bg-gray-light', + '.bg-green', + '.bg-green-light', + '.bg-red', + '.bg-red-light', + '.bg-yellow', + '.bg-yellow-light', + '.bg-yellow-dark', + '.bg-purple', + '.bg-pink', + '.bg-purple-light', + '.bg-orange', + '.color-gray-0', + '.bg-gray-0', + '.color-gray-1', + '.bg-gray-1', + '.color-gray-2', + '.bg-gray-2', + '.color-gray-3', + '.bg-gray-3', + '.color-gray-4', + '.bg-gray-4', + '.color-gray-5', + '.bg-gray-5', + '.color-gray-6', + '.bg-gray-6', + '.color-gray-7', + '.bg-gray-7', + '.color-gray-8', + '.bg-gray-8', + '.color-gray-9', + '.bg-gray-9', + '.color-blue-0', + '.bg-blue-0', + '.color-blue-1', + '.bg-blue-1', + '.color-blue-2', + '.bg-blue-2', + '.color-blue-3', + '.bg-blue-3', + '.color-blue-4', + '.bg-blue-4', + '.color-blue-5', + '.bg-blue-5', + '.color-blue-6', + '.bg-blue-6', + '.color-blue-7', + '.bg-blue-7', + '.color-blue-8', + '.bg-blue-8', + '.color-blue-9', + '.bg-blue-9', + '.color-green-0', + '.bg-green-0', + '.color-green-1', + '.bg-green-1', + '.color-green-2', + '.bg-green-2', + '.color-green-3', + '.bg-green-3', + '.color-green-4', + '.bg-green-4', + '.color-green-5', + '.bg-green-5', + '.color-green-6', + '.bg-green-6', + '.color-green-7', + '.bg-green-7', + '.color-green-8', + '.bg-green-8', + '.color-green-9', + '.bg-green-9', + '.color-yellow-0', + '.bg-yellow-0', + '.color-yellow-1', + '.bg-yellow-1', + '.color-yellow-2', + '.bg-yellow-2', + '.color-yellow-3', + '.bg-yellow-3', + '.color-yellow-4', + '.bg-yellow-4', + '.color-yellow-5', + '.bg-yellow-5', + '.color-yellow-6', + '.bg-yellow-6', + '.color-yellow-7', + '.bg-yellow-7', + '.color-yellow-8', + '.bg-yellow-8', + '.color-yellow-9', + '.bg-yellow-9', + '.color-orange-0', + '.bg-orange-0', + '.color-orange-1', + '.bg-orange-1', + '.color-orange-2', + '.bg-orange-2', + '.color-orange-3', + '.bg-orange-3', + '.color-orange-4', + '.bg-orange-4', + '.color-orange-5', + '.bg-orange-5', + '.color-orange-6', + '.bg-orange-6', + '.color-orange-7', + '.bg-orange-7', + '.color-orange-8', + '.bg-orange-8', + '.color-orange-9', + '.bg-orange-9', + '.color-red-0', + '.bg-red-0', + '.color-red-1', + '.bg-red-1', + '.color-red-2', + '.bg-red-2', + '.color-red-3', + '.bg-red-3', + '.color-red-4', + '.bg-red-4', + '.color-red-5', + '.bg-red-5', + '.color-red-6', + '.bg-red-6', + '.color-red-7', + '.bg-red-7', + '.color-red-8', + '.bg-red-8', + '.color-red-9', + '.bg-red-9', + '.color-purple-0', + '.bg-purple-0', + '.color-purple-1', + '.bg-purple-1', + '.color-purple-2', + '.bg-purple-2', + '.color-purple-3', + '.bg-purple-3', + '.color-purple-4', + '.bg-purple-4', + '.color-purple-5', + '.bg-purple-5', + '.color-purple-6', + '.bg-purple-6', + '.color-purple-7', + '.bg-purple-7', + '.color-purple-8', + '.bg-purple-8', + '.color-purple-9', + '.bg-purple-9', + '.color-pink-0', + '.bg-pink-0', + '.color-pink-1', + '.bg-pink-1', + '.color-pink-2', + '.bg-pink-2', + '.color-pink-3', + '.bg-pink-3', + '.color-pink-4', + '.bg-pink-4', + '.color-pink-5', + '.bg-pink-5', + '.color-pink-6', + '.bg-pink-6', + '.color-pink-7', + '.bg-pink-7', + '.color-pink-8', + '.bg-pink-8', + '.color-pink-9', + '.bg-pink-9', + '.text-blue', + '.text-red', + '.text-gray-light', + '.text-gray', + '.text-gray-dark', + '.text-green', + '.text-yellow', + '.text-orange', + '.text-orange-light', + '.text-purple', + '.text-pink', + '.text-white', + '.link-gray', + '.link-gray:hover', + '.link-gray-dark', + '.link-gray-dark:hover', + '.link-hover-blue:hover', + '.muted-link', + '.muted-link:hover', + '.text-shadow-dark', + '.text-shadow-light', + '.dropdown-menu-dark', + '.dropdown-menu-dark::before', + '.dropdown-menu-dark::after', + '.dropdown-menu-dark .dropdown-header', + '.dropdown-menu-dark .dropdown-divider', + '.dropdown-menu-dark .dropdown-item', + '.dropdown-menu-dark.dropdown-menu-w::before', + '.dropdown-menu-dark.dropdown-menu-w::after', + '.dropdown-menu-dark.dropdown-menu-e::before', + '.dropdown-menu-dark.dropdown-menu-e::after', + '.dropdown-menu-dark.dropdown-menu-ne::before', + '.dropdown-menu-dark.dropdown-menu-ne::after', + '.Label--outline', + '.Label--gray', + '.Label--gray-darker', + '.Label--yellow', + '.Label--orange', + '.Label--red', + '.Label--outline-green', + '.Label--green', + '.Label--blue', + '.Label--purple', + '.Label--pink', + '.State--green', + '.State--red', + '.State--purple', + '.Counter--gray-light', + '.Counter--gray', + '.btn-transparent:active' + ], + message: `This selector is not available in Primer CSS 16.0.0. Please refer to the documentation.` + }, + { + variables: [ + '$bg-black', + '$bg-black-fade', + '$bg-blue', + '$bg-blue-light', + '$bg-diffstat-added', + '$bg-diffstat-deleted', + '$bg-diffstat-neutral', + '$bg-gray', + '$bg-gray-dark', + '$bg-gray-light', + '$bg-green', + '$bg-green-light', + '$bg-orange', + '$bg-pink', + '$bg-purple', + '$bg-purple-light', + '$bg-red', + '$bg-red-light', + '$bg-white', + '$bg-yellow', + '$bg-yellow-dark', + '$bg-yellow-light', + '$black', + '$black-fade-15', + '$black-fade-30', + '$black-fade-50', + '$black-fade-70', + '$black-fade-85', + '$blue', + '$blue-000', + '$blue-100', + '$blue-200', + '$blue-300', + '$blue-400', + '$blue-500', + '$blue-600', + '$blue-700', + '$blue-800', + '$blue-900', + '$border-black-fade', + '$border-blue', + '$border-blue-light', + '$border-color', + '$border-color-button', + '$border-gray', + '$border-gray-dark', + '$border-gray-darker', + '$border-gray-light', + '$border-green', + '$border-green-light', + '$border-purple', + '$border-red', + '$border-red-light', + '$border-white', + '$border-white-fade', + '$border-yellow', + '$box-shadow', + '$box-shadow-extra-large', + '$box-shadow-focus', + '$box-shadow-highlight', + '$box-shadow-inset', + '$box-shadow-large', + '$box-shadow-medium', + '$btn-active-shadow', + '$btn-input-focus-shadow', + '$form-control-shadow', + '$gray', + '$gray-000', + '$gray-100', + '$gray-200', + '$gray-300', + '$gray-400', + '$gray-500', + '$gray-600', + '$gray-700', + '$gray-800', + '$gray-900', + '$gray-dark', + '$gray-light', + '$green', + '$green-000', + '$green-100', + '$green-200', + '$green-300', + '$green-400', + '$green-500', + '$green-600', + '$green-700', + '$green-800', + '$green-900', + '$orange', + '$orange-000', + '$orange-100', + '$orange-200', + '$orange-300', + '$orange-400', + '$orange-500', + '$orange-600', + '$orange-700', + '$orange-800', + '$orange-900', + '$pink-000', + '$pink-100', + '$pink-200', + '$pink-300', + '$pink-400', + '$pink-500', + '$pink-600', + '$pink-700', + '$pink-800', + '$pink-900', + '$purple', + '$purple-000', + '$purple-100', + '$purple-200', + '$purple-300', + '$purple-400', + '$purple-500', + '$purple-600', + '$purple-700', + '$purple-800', + '$purple-900', + '$red', + '$red-000', + '$red-100', + '$red-200', + '$red-300', + '$red-400', + '$red-500', + '$red-600', + '$red-700', + '$red-800', + '$red-900', + '$text-black', + '$text-blue', + '$text-gray', + '$text-gray-dark', + '$text-gray-light', + '$text-green', + '$text-orange', + '$text-orange-light', + '$text-pink', + '$text-purple', + '$text-red', + '$text-white', + '$text-yellow', + '$tooltip-background-color', + '$tooltip-text-color', + '$white', + '$white-fade-15', + '$white-fade-30', + '$white-fade-50', + '$white-fade-70', + '$white-fade-85', + '$yellow', + '$yellow-000', + '$yellow-100', + '$yellow-200', + '$yellow-300', + '$yellow-400', + '$yellow-500', + '$yellow-600', + '$yellow-700', + '$yellow-800', + '$yellow-900', + '$blue-mktg', + '$green-mktg' + ], + message: `This variable is not available in Primer CSS 16.0.0. Please refer to the documentation.` + } + ], '15.0.0': [ { selectors: [ diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md index c571476697..fdc50ca63d 100644 --- a/docs/content/components/alerts.md +++ b/docs/content/components/alerts.md @@ -2,7 +2,7 @@ title: Alerts path: components/alerts status: Stable -source: 'https://github.com/primer/css/tree/master/src/alerts' +source: 'https://github.com/primer/css/tree/main/src/alerts' bundle: alerts --- diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md index 3c2ab567b5..fcf2968141 100644 --- a/docs/content/components/autocomplete.md +++ b/docs/content/components/autocomplete.md @@ -2,7 +2,7 @@ title: Autocomplete path: components/autocomplete status: Stable -source: 'https://github.com/primer/css/tree/master/src/autocomplete' +source: 'https://github.com/primer/css/tree/main/src/autocomplete' bundle: autocomplete --- diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md index 6b832a744f..881839979e 100644 --- a/docs/content/components/avatars.md +++ b/docs/content/components/avatars.md @@ -2,7 +2,7 @@ title: Avatars path: components/avatars status: Stable -source: 'https://github.com/primer/css/tree/master/src/avatars' +source: 'https://github.com/primer/css/tree/main/src/avatars' bundle: avatars --- @@ -28,7 +28,7 @@ We occasionally use smaller avatars. Anything less than `24px` wide should inclu ### Avatar sizes -Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size. +Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only supported for the `20px` avatar size. ```html live jonrohan @@ -207,10 +207,10 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the ### Small ```html live - + - + diff --git a/docs/content/components/blankslate.md b/docs/content/components/blankslate.md index 34b1925e1b..55dfd44b4d 100644 --- a/docs/content/components/blankslate.md +++ b/docs/content/components/blankslate.md @@ -2,7 +2,7 @@ title: Blankslate path: components/blankslate status: Stable -source: 'https://github.com/primer/css/tree/master/src/blankslate' +source: 'https://github.com/primer/css/tree/main/src/blankslate' bundle: blankslate --- @@ -92,7 +92,7 @@ Add an additional optional class to the `.blankslate` to change its appearance. ``` -**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used toghether. +**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used toghether. ### Add border diff --git a/docs/content/components/box.md b/docs/content/components/box.md index a90a4d6e85..f4273588ea 100644 --- a/docs/content/components/box.md +++ b/docs/content/components/box.md @@ -3,7 +3,7 @@ title: Box path: components/box status_issue: 'https://github.com/github/design-systems/issues/198' status: Stable -source: 'https://github.com/primer/css/tree/master/src/box' +source: 'https://github.com/primer/css/tree/main/src/box' bundle: box --- diff --git a/docs/content/components/branch-name.md b/docs/content/components/branch-name.md index 88ed1285c0..de83e88493 100644 --- a/docs/content/components/branch-name.md +++ b/docs/content/components/branch-name.md @@ -2,7 +2,7 @@ title: Branch name path: components/branch-name status: Stable -source: 'https://github.com/primer/css/tree/master/src/branch-name' +source: 'https://github.com/primer/css/tree/main/src/branch-name' bundle: branch-name --- diff --git a/docs/content/components/breadcrumb.md b/docs/content/components/breadcrumb.md index 27868fdf57..ee575ba877 100644 --- a/docs/content/components/breadcrumb.md +++ b/docs/content/components/breadcrumb.md @@ -2,7 +2,7 @@ title: Breadcrumbs path: components/breadcrumb status: Stable -source: 'https://github.com/primer/css/tree/master/src/breadcrumb' +source: 'https://github.com/primer/css/tree/main/src/breadcrumb' bundle: breadcrumb --- diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index d86b97a1da..2b1498e606 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -2,104 +2,115 @@ title: Buttons path: components/buttons status: Stable -source: 'https://github.com/primer/css/tree/master/src/buttons' +source: 'https://github.com/primer/css/tree/main/src/buttons' bundle: buttons --- + + Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. + Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. -## Default button - -Use the standardβ€”yet classyβ€”`.btn` for form actions and primary page actions. These are used extensively around the site. +```html live + +``` -When using a ` Link button ``` -You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. +## Button types + +### Default + +Use the standard β€” yet classy β€” `.btn` for form actions and general page actions. These are used extensively around the site. ```html live - - + ``` -## Primary button +### Primary Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizesβ€”just add `.btn-primary`. ```html live - - + ``` -## Danger button +### Outline -Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`. +Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. ```html live - - + ``` -## Outline button +### Danger -Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. +Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`. ```html live - - + ``` -## Large button +## Button states -Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections. +### Selected -[Type scale utilities](/support/typography#type-scale) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size. +Adding an `aria-selected="true"` attribute will keep the button in a selected state. Typically used for [`BtnGroups`](#button-groups). ```html live - -Large link button -``` - -Use `.btn-large` with a type scale utility to transform the text to a bigger size. +
+ + + +
-```html live -
- - Large link button +
+ + +
``` -## Disabled state +### Disabled Disable ` -Disabled button + + + + ``` -Similar styles are applied to primary, danger, and outline buttons: +## Button variations -```html live - -Disabled button -``` +### Sizes + +Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrese or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections. + +[Type scale utilities](/support/typography#type-scale) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size. ```html live - -Disabled button + + + ``` +Use `.btn-large` with a type scale utility to transform the text to a bigger size. + ```html live - -Disabled button +
+ + Large link button +
``` -## Block button +### Block button Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text. @@ -108,7 +119,7 @@ Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, chang ``` -## Link button +### Link button Create a button that looks like a link with `.btn-link`. Rather than using an `` to trigger JS, this style on a ` ``` -## Invisible button +### Invisible button When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms. @@ -127,44 +138,17 @@ When you want a link, but you want it padded and line heighted like a button bes ``` -## Octicon button +### Hidden text button -Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover. +Use `.hidden-text-expander` to indicate and toggle hidden text. ```html live - - - - - - - + + + ``` - - -## Close button - -When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles. - -```html live - -``` +You can also make the expander appear inline by adding `.inline`. ## Button with icons @@ -201,6 +185,43 @@ Icons can be added to any button. ``` +### Icon-only button + +Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover. + +```html live + + + + + + + +``` + +### Close button + +When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles. + +```html live + +``` + ## Button with counts You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button. @@ -243,22 +264,26 @@ You can also use the [counter](./labels#counters) component within buttons: Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically. ```html live -
- - - +
+ + +
-
- - - +
+ + +
+``` + +Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items. +```html live
- - - + + +
``` @@ -274,15 +299,3 @@ Add `.BtnGroup-parent` to parent elements, like `
`s or `
`s, withi
``` - -## Hidden text button - -Use `.hidden-text-expander` to indicate and toggle hidden text. - -```html live - - - -``` - -You can also make the expander appear inline by adding `.inline`. diff --git a/docs/content/components/dropdown.md b/docs/content/components/dropdown.md index a00e2c135e..0737e7eac2 100644 --- a/docs/content/components/dropdown.md +++ b/docs/content/components/dropdown.md @@ -3,6 +3,10 @@ title: Dropdown status: New --- + + Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. + + Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. ## Basic examples @@ -200,29 +204,3 @@ Align the direction of dropdown menus and their arrows with modifier classes.
``` - -### Dark - -```html live -
-
- - Dropdown -
- - -
-
- Dropdown header -
- -
-
-
-``` diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md index a130a36e1b..2450631c4f 100644 --- a/docs/content/components/forms.md +++ b/docs/content/components/forms.md @@ -2,7 +2,7 @@ title: Forms path: components/forms status: Stable -source: 'https://github.com/primer/css/tree/master/src/forms' +source: 'https://github.com/primer/css/tree/main/src/forms' bundle: forms --- @@ -15,7 +15,7 @@ Overview: - Always declare a `type` on your ` + + ``` -##### Large +## Customization + +### Form contrast + +Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`. ```html live
- + +
``` -##### Block +### Disabled state + +Add the `disabled` attribute to make a `.form-control` appear disabled. ```html live
- +
``` -##### Dark +### Dark ```html live
@@ -127,9 +149,9 @@ Make inputs smaller, larger, or full-width with an additional class.
``` -##### Hide webkit's contact info autofill icon +### Hide WebKit's contact info autofill icon -Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon. +WebKit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon. ```html live
@@ -142,7 +164,7 @@ Webkit sometimes gets confused and tries to add an icon/dropdown to autofill con
``` -#### Selects +## Selects Primer CSS adds light `height` and `vertical-align` styles to ``s for al ``` -##### Small +### Small Use the `.select-sm` class to resize both default and custom ``s to matc ``` -#### Form groups +## Form groups ```html live
@@ -219,10 +241,12 @@ Use the `.select-sm` class to resize both default and custom ` - - - - -
-``` - -#### Form actions - -Align buttons to the rightβ€”via `float: right` on the buttonsβ€”in forms with `.form-actions`. The floats are automatically cleared for you. - -```html live -
- - -
-``` diff --git a/docs/content/components/header.md b/docs/content/components/header.md index c6cf3b2565..58484e1c55 100644 --- a/docs/content/components/header.md +++ b/docs/content/components/header.md @@ -2,7 +2,7 @@ title: Header path: components/header status: Stable -source: 'https://github.com/primer/css/tree/master/src/header' +source: 'https://github.com/primer/css/tree/main/src/header' bundle: header --- diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index 13a89076f7..e0b0032f37 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -3,10 +3,14 @@ title: Labels path: components/labels status_issue: 'https://github.com/github/design-systems/issues/332' status: Stable -source: 'https://github.com/primer/css/tree/master/src/labels' +source: 'https://github.com/primer/css/tree/main/src/labels' bundle: labels --- + + Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. + + Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items. ## Labels @@ -18,57 +22,44 @@ GitHub also programmatically generates and applies a background color for labels The base `Label` style does not apply a background color and only uses the default border: ```html live -design -``` - -**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label. - -```html live - -New select component design +design ``` ### Label contrast -Use `Label--gray` to create a label with a lighter text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors. +Use `Label--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`. -Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`. +Use `Label--secondary` to create a label with a subtler text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors. ```html live -Default -Gray -Dark gray +Default +Primary +Secondary ``` ### Colored labels -Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. A typical use of the themes are: +Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently. -- `Label--yellow` -> Pending/highlight -- `Label--orange` -> Warning -- `Label--red` -> Error -- `Label--green` -> Success -- `Label--blue` -> Info +- `Label--info` +- `Label--success` +- `Label--warning` +- `Label--danger` ```html live -Pending -Warning -Error -Success -Info -PRO -Sponsor +Info +Success +Warning +Danger ``` -Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference. - ### Label sizes If space allows, add the `Label--large` modidfier to add a bit more padding to lables. ```html live -Default -Large +Default +Large ``` ### Inline labels @@ -77,77 +68,75 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele ```html live

- Lorem Ipsum is simply dummy text - of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text.

``` - ## Issue labels Issue labels are used for adding labels to issues and pull requests. They also come with emoji support. ```html live -Primer -bug πŸ› -help wanted -πŸš‚ deploy: train +Primer +bug πŸ› +help wanted +πŸš‚ deploy: train ``` If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. ```html live -Primer -bug πŸ› -help wanted -πŸš‚ deploy: train +Primer +bug πŸ› +help wanted +πŸš‚ deploy: train ``` - ## States -Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. - -```html live title="State" -Default -``` - -### State themes +Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function. -States come in a few variations that apply different colors. Use the state that best communicates the status or function. +- `State` +- `State State--draft` +- `State State--open` +- `State State--merged` +- `State State--closed` ```html live - +Draft + + Open - - - - Closed - - + + Merged -``` -**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content. + + + + Closed + +``` ### Small states Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content. ```html live -Default - +Default + Open - + Closed @@ -156,12 +145,18 @@ Use `State--small` for a state label with reduced padding a smaller font size. T ## Counters -Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden. +Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: + +1. the default `Counter`, +2. the `Counter--primary` with a stronger background color +3. and `Counter--secondary` with a more subtler text color. + +Note: When a counter is empty, its visibility will be hidden. ```html live 1 -23 -456 +23 +456 ``` Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation). @@ -169,7 +164,7 @@ Use the `Counter` in navigation to indicate the number of items without the user ```html live
diff --git a/docs/content/components/links.md b/docs/content/components/links.md new file mode 100644 index 0000000000..4c0dd0498d --- /dev/null +++ b/docs/content/components/links.md @@ -0,0 +1,52 @@ +--- +title: Links +path: components/links +status: New +source: 'https://github.com/primer/css/tree/main/src/links' +bundle: links +--- + + + Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. + + +By default `` elements already use the right link color and apply an underline on hover. + +```html live +Some text with a default link +``` + +If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class. + +```html live +Some text with a span that behaves like a link +``` + +If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.** + +Use `.Link--primary` to turn the link color to blue only on hover. + +```html live +

Some text with a Link--primary

+``` + +Use `.Link--secondary` for a more subtle link color that turns blue on hover. + +```html live +Some text with a Link--secondary +``` + +Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`. + +```html live +

Some text with a Link--muted

+

Some text with a Link--primary no-underline

+``` + +Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover. + +```html live + + A link with a partial Link--onHover + +``` diff --git a/docs/content/components/loaders.md b/docs/content/components/loaders.md index aacec584a6..51268475a0 100644 --- a/docs/content/components/loaders.md +++ b/docs/content/components/loaders.md @@ -2,7 +2,7 @@ title: Loaders path: components/loaders status: New -source: 'https://github.com/primer/css/tree/master/src/loaders' +source: 'https://github.com/primer/css/tree/main/src/loaders' bundle: loaders --- diff --git a/docs/content/components/markdown.md b/docs/content/components/markdown.md index 666a004229..36d328936b 100644 --- a/docs/content/components/markdown.md +++ b/docs/content/components/markdown.md @@ -2,7 +2,7 @@ title: Markdown path: components/markdown status: Stable -source: 'https://github.com/primer/css/tree/master/src/markdown' +source: 'https://github.com/primer/css/tree/main/src/markdown' bundle: markdown --- diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md index 7c09d0eea0..86cf02dd67 100644 --- a/docs/content/components/marketing-buttons.md +++ b/docs/content/components/marketing-buttons.md @@ -2,24 +2,24 @@ title: Marketing Buttons path: components/marketing-buttons status: New -source: 'https://github.com/primer/css/tree/master/src/marketing/buttons' +source: 'https://github.com/primer/css/tree/main/src/marketing/buttons' bundle: marketing-buttons --- Marketing buttons come in different colors and sizes, and are also available in a blue outlined version. -## Colors and outlined +## Colors, outlined and transparent Marketing buttons can be solid blue, outlined blue, solid green, or transparent. The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis. ```html live - - - -
- + + + +
+
``` @@ -29,9 +29,10 @@ Available in two sizes, marketing buttons have a default size and a large size. ```html live - + +
- + ``` diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md index ed825ce517..c8faa5d9af 100644 --- a/docs/content/components/navigation.md +++ b/docs/content/components/navigation.md @@ -2,7 +2,7 @@ title: Navigation path: components/navigation status: Stable -source: 'https://github.com/primer/css/tree/master/src/navigation' +source: 'https://github.com/primer/css/tree/main/src/navigation' bundle: navigation --- @@ -161,23 +161,23 @@ Use `.UnderlineNav--right` to right align the navigation.
- +
@@ -469,7 +469,7 @@ You can also use a `subnav-search-context` to display search help in a select me
- +
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md index 26f6f2e983..950e4f65b3 100644 --- a/docs/content/components/pagination.md +++ b/docs/content/components/pagination.md @@ -2,7 +2,7 @@ title: Pagination path: components/pagination status: New -source: 'https://github.com/primer/css/tree/master/src/pagination' +source: 'https://github.com/primer/css/tree/main/src/pagination' bundle: pagination --- diff --git a/docs/content/components/popover.md b/docs/content/components/popover.md index 20e7c88875..9a2ef564d8 100644 --- a/docs/content/components/popover.md +++ b/docs/content/components/popover.md @@ -2,7 +2,7 @@ title: Popover path: components/popover status: Experimental -source: 'https://github.com/primer/css/tree/master/src/popover' +source: 'https://github.com/primer/css/tree/main/src/popover' bundle: popover --- @@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

@@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

@@ -80,7 +80,7 @@ Defaults to caret oriented top-center. ```html live title="Bottom"
-
+

Popover heading

Message about this particular piece of UI.

@@ -95,7 +95,7 @@ Defaults to caret oriented top-center. ```html live title="Bottom-right"
-
+

Popover heading

Message about this particular piece of UI.

@@ -109,7 +109,7 @@ Defaults to caret oriented top-center. ```html live title="Bottom-left"
-
+

Popover heading

Message about this particular piece of UI.

@@ -124,7 +124,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

@@ -139,7 +139,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

@@ -154,7 +154,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

@@ -168,7 +168,7 @@ Defaults to caret oriented top-center. ```html live title="Right"
-
+

Popover heading

Message about this particular piece of UI.

@@ -183,7 +183,7 @@ Defaults to caret oriented top-center. ```html live title="Right-bottom"
-
+

Popover heading

Message about this particular piece of UI.

@@ -198,7 +198,7 @@ Defaults to caret oriented top-center. ```html live title="Right-top"
-
+

Popover heading

Message about this particular piece of UI.

@@ -214,7 +214,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

@@ -229,7 +229,7 @@ Defaults to caret oriented top-center.
-
+

Popover heading

Message about this particular piece of UI.

diff --git a/docs/content/components/progress.md b/docs/content/components/progress.md index e9b0fb1d2f..99be53374c 100644 --- a/docs/content/components/progress.md +++ b/docs/content/components/progress.md @@ -2,7 +2,7 @@ title: Progress path: components/progress status: New -source: 'https://github.com/primer/css/tree/master/src/progress' +source: 'https://github.com/primer/css/tree/main/src/progress' bundle: progress --- @@ -10,7 +10,7 @@ Use progress components to visualize task completion. The `Progress` class adds ```html live - + ``` @@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default. ```html live - + ``` @@ -30,7 +30,7 @@ Small progress bars are shorter than the default. ```html live - + ``` @@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i ```html live 4 of 16 -
+
``` @@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a ```html live
- +
``` @@ -64,11 +64,10 @@ To show the progress of tasks in multiple states (such as "done", "in progress", ```html live
- - - - - + + + +
``` diff --git a/docs/content/components/select-menu-deprecated.md b/docs/content/components/select-menu-deprecated.md index 41c5440f36..374f023002 100644 --- a/docs/content/components/select-menu-deprecated.md +++ b/docs/content/components/select-menu-deprecated.md @@ -2,7 +2,7 @@ title: Select menu (deprecated) path: components/select-menu status: Deprecated -source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/select-menu.scss' +source: 'https://github.com/github/github/blob/main/app/assets/stylesheets/components/select-menu.scss' symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner] --- @@ -761,7 +761,7 @@ Open the select menu below and click different options to see it in action. ```erb
@@ -772,7 +772,7 @@ Open the select menu below and click different options to see it in action.
<%= octicon("check", :class => "select-menu-item-icon") %> - master + main <%= octicon("check", :class => "select-menu-item-icon") %> @@ -798,7 +798,7 @@ As shown below, emphasized text works great with the stateful text functionality
@@ -809,7 +809,7 @@ As shown below, emphasized text works great with the stateful text functionality
<%= octicon("check", :class => "select-menu-item-icon") %> - master + main <%= octicon("check", :class => "select-menu-item-icon") %> diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md index a9582ca768..660e9d941a 100644 --- a/docs/content/components/select-menu.md +++ b/docs/content/components/select-menu.md @@ -1,7 +1,7 @@ --- title: Select menu status: New -source: 'https://github.com/primer/css/tree/master/src/select-menu' +source: 'https://github.com/primer/css/tree/main/src/select-menu' bundle: select-menu --- @@ -210,9 +210,7 @@ The list of items is arguably the most important subcomponent within the menu. B - + @@ -583,7 +581,7 @@ When adding the `.SelectMenu` component on github.com, use the [`` ```erb
- + Choose diff --git a/docs/content/components/subhead.md b/docs/content/components/subhead.md index 5ddc891821..44ffbb47f0 100644 --- a/docs/content/components/subhead.md +++ b/docs/content/components/subhead.md @@ -3,7 +3,7 @@ title: Subhead path: components/subhead status: Stable status_issue: 'https://github.com/github/design-systems/issues/101' -source: 'https://github.com/primer/css/tree/master/src/subhead' +source: 'https://github.com/primer/css/tree/main/src/subhead' bundle: subhead --- @@ -77,4 +77,3 @@ Use the `.Subhead-heading--danger` modifier to make the text bold and red. This
Danger zone
``` - diff --git a/docs/content/components/timeline.md b/docs/content/components/timeline.md index 16bcd11cda..141c5c562a 100644 --- a/docs/content/components/timeline.md +++ b/docs/content/components/timeline.md @@ -26,7 +26,7 @@ The `TimelineItem` component is used to display items on a vertical timeline, co ## TimelineItem-badge -The default TimelineItem-badge color is dark text on a light grey background. +The default TimelineItem-badge color is dark text on a light gray background. ```html live diff --git a/docs/content/components/toasts.md b/docs/content/components/toasts.md index 40f59be7c3..52bc108961 100644 --- a/docs/content/components/toasts.md +++ b/docs/content/components/toasts.md @@ -156,7 +156,7 @@ Include a link to allow users to take actions within a Toast. /> - Toast message goes here Action. + Toast message goes hereAction.
``` diff --git a/docs/content/components/tooltips.md b/docs/content/components/tooltips.md index 07d112ef72..edc766509f 100644 --- a/docs/content/components/tooltips.md +++ b/docs/content/components/tooltips.md @@ -2,7 +2,7 @@ title: Tooltips path: components/tooltips status: Stable -source: 'https://github.com/primer/css/tree/master/src/tooltips' +source: 'https://github.com/primer/css/tree/main/src/tooltips' bundle: tooltips --- diff --git a/docs/content/components/truncate.md b/docs/content/components/truncate.md index c9b454ad01..5e72f0f0e3 100644 --- a/docs/content/components/truncate.md +++ b/docs/content/components/truncate.md @@ -2,12 +2,11 @@ title: Truncate path: components/truncate status: Stable -source: 'https://github.com/primer/css/tree/master/src/truncate' +source: 'https://github.com/primer/css/tree/main/src/truncate' bundle: truncate --- - -The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible. +The `css-truncate` class will shorten text with an ellipsis. ## Truncate overflow @@ -15,8 +14,7 @@ Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text t ```html live
-
+
branch-name-that-is-really-long
@@ -31,8 +29,7 @@ Combine the `css-truncate` and `css-truncate-target` classes for inline (or inli ```html live Some text with a - + branch-name-that-is-really-long ``` @@ -41,8 +38,7 @@ You can override the maximum width of the truncated text with an inline `style` ```html live Some text with a - + branch-name-that-is-really-long ``` @@ -51,8 +47,7 @@ You can reveal the entire string on hover with the addition of `.expandable`. ```html live Some text with a -