Merge branch 'main' into hpalacio/ol_type

Author: jonrohan

.changeset/tiny-mangos-breathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/css': major
+---
+
+Remove dependency on primer/octicons and force overflow visible

.github/workflows/release_canary.yml

@@ -56,7 +56,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output canary version number
-        uses: actions/github-script@v3
+        uses: actions/github-script@v4.0.2
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)

.github/workflows/release_candidate.yml

@@ -42,7 +42,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output candidate version number
-        uses: actions/github-script@v3
+        uses: actions/github-script@v4.0.2
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)

.github/workflows/triage.yml

@@ -9,7 +9,7 @@ jobs:
     name: Semantic Version Label
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@v3
+      - uses: actions/github-script@v4.0.2
         id: version-result
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
@@ -22,7 +22,7 @@ jobs:
               return match[0][1]
             }
 
-      - uses: actions/github-script@v3
+      - uses: actions/github-script@v4.0.2
         env:
           RELEASE: ${{ steps.version-result.outputs.result }}
         with:

deprecations.js

@@ -6,14 +6,8 @@
 const versionDeprecations = {
   '17.0.0': [
     {
-      selectors: [
-        '.btn-mktg[aria-disabled=true]',
-        '.btn-primary-mktg[aria-disabled=true]',
-        '.btn-outline-mktg[aria-disabled=true]',
-        '.btn-transparent[aria-disabled=true]',
-        '.btn-large-mktg'
-      ],
-      message: 'Removing marketing buttons'
+      selectors: ['.btn-large-mktg'],
+      message: `Please use the ".btn-lg-mktg" class instead of "btn-large-mktg".`
     },
     {
       selectors: [':-ms-input-placeholder'],

docs/content/components/buttons.md

@@ -105,7 +105,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
 
 ```html live
 <div class="f3">
-  <button class="btn btn-large btn-outline-blue mr-2" type="button">Large button button</button>
+  <button class="btn btn-large btn-outline mr-2" type="button">Large button button</button>
   <a class="btn btn-large" href="#url" role="button">Large link button</a>
 </div>
 ```

docs/content/components/links.md

@@ -10,39 +10,42 @@ bundle: links
   Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
 </Note>
 
-By default `<a>` elements already use the right link color and apply an underline on hover.
+By default `<a>` elements already use the right link color and apply an underline on hover. So in most cases the `.Link` class is not really needed.
 
 ```html live
-Some text with a default <a href="#url">link</a>
-```
-
-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 class="Link">span that behaves like a link</span>
+Some text with a <a href="#url">link</a>
+Some text with a <a href="#url" class="Link">link</a>
 ```
 
 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.**
 
+## Primary link
+
 Use `.Link--primary` to turn the link color to blue only on hover.
 
 ```html live
 <p class="color-text-secondary">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
 ```
 
+## Secondary link
+
 Use `.Link--secondary` for a more subtle link color that turns blue on hover.
 
 ```html live
 Some text with a <a class="Link--secondary" href="#url">Link--secondary</a>
 ```
 
+## Muted link
+
 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
 <p>Some text with a <a class="Link--secondary no-underline" href="#url">Link--muted</a></p>
 <p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
 ```
 
+## On hover link
+
 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
@@ -51,6 +54,18 @@ Use `.Link--onHover` to make any text color used with links to turn blue on hove
 </a>
 ```
 
+## Nested link
+
+The `.Link` class can be nested inside an `<a>` element if only part of it should be styled like a link.
+
+```html live
+<a class="color-text-primary no-underline" href="#url">
+  A nested <span class="Link">Link</span>
+</a>
+```
+
+## Link and color utilities
+
 Link classes in combination with [color utilities](../utilities/colors) lets you colorize information separately inside of a link but have all of the link turn into one color on hover.
 
 ```html live

package.json

@@ -30,7 +30,6 @@
     "release": "changeset publish"
   },
   "dependencies": {
-    "@primer/octicons": "13.0.0",
     "@primer/primitives": "4.3.0"
   },
   "devDependencies": {
@@ -39,28 +38,28 @@
     "@github/prettier-config": "0.0.4",
     "autoprefixer": "10.2.5",
     "cssstats": "4.0.2",
-    "eslint": "7.24.0",
+    "eslint": "7.25.0",
     "eslint-plugin-github": "4.1.3",
-    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jest": "24.3.6",
     "eslint-plugin-prettier": "3.4.0",
-    "filesize": "6.2.5",
+    "filesize": "6.3.0",
     "front-matter": "4.0.2",
     "fs-extra": "9.1.0",
     "globby": "11.0.3",
     "jest": "26.6.3",
     "js-yaml": "4.1.0",
-    "postcss": "8.2.10",
+    "postcss": "8.2.12",
     "postcss-import": "14.0.1",
     "postcss-load-config": "3.0.1",
     "postcss-node-sass": "3.1.0",
     "postcss-scss": "3.0.5",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.2.1",
     "semver": "7.3.5",
-    "stylelint": "13.12.0",
+    "stylelint": "13.13.0",
     "stylelint-config-primer": "11.0.1",
     "stylelint-scss": "3.19.0",
-    "table": "6.3.0"
+    "table": "6.5.1"
   },
   "jest": {
     "testEnvironment": "node",

src/base/index.scss

@@ -5,3 +5,4 @@
 @import "./base.scss";
 @import "./kbd.scss";
 @import "./typography-base.scss";
+@import "./octicons.scss";

src/base/octicons.scss

@@ -0,0 +1,6 @@
+.octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}