@primer/css 0.0.0-20220422221626 → 0.0.0-20220426005808

package/CHANGELOG.md

@@ -1,16 +1,62 @@
 # @primer/css
 
-## 0.0.0-20220422221626
+## 0.0.0-20220426005808
+
+### Major Changes
+
+- [#1744](https://github.com/primer/css/pull/1744) [`942f65a4`](https://github.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
+
+* [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector
+
+- [#1821](https://github.com/primer/css/pull/1821) [`daa2685c`](https://github.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://github.com/jonrohan)! - UnderlineNav `:focus` styles
+  Refactor selected state and spacing
+  Add selected bold state override from github/github
+
+### Patch Changes
+
+- Fake entry to force publishing
+
+## 19.8.2
+
+### Patch Changes
+
+- [#2019](https://github.com/primer/css/pull/2019) [`57be2d50`](https://github.com/primer/css/commit/57be2d50212b71f87ce612039375bcd5273eca53) Thanks [@langermank](https://github.com/langermank)! - [Bug] TreeView animation and padding fix
+
+## 19.8.1
+
+### Patch Changes
+
+- [#1996](https://github.com/primer/css/pull/1996) [`a4293bf9`](https://github.com/primer/css/commit/a4293bf921ebcb74c6973e3f50f07e470f495bd0) Thanks [@langermank](https://github.com/langermank)! - TreeView: remove bold active items + markup changes
+
+## 19.8.0
 
 ### Minor Changes
 
-- [#1998](https://github.com/primer/css/pull/1998) [`a2ac9394`](https://github.com/primer/css/commit/a2ac939475a9b01374b57b251fbd27f7ab71652e) Thanks [@bolonio](https://github.com/bolonio)! - Styles for the new Dialog Component
+- [#1997](https://github.com/primer/css/pull/1997) [`9806b54b`](https://github.com/primer/css/commit/9806b54b3829219c9ad141efd2fcd99fc5c08751) Thanks [@simurai](https://github.com/simurai)! - Add Tritanopia theme
 
 ### Patch Changes
 
-- [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts
+- [#2002](https://github.com/primer/css/pull/2002) [`a3bc51f6`](https://github.com/primer/css/commit/a3bc51f6c4af0d45a9ce39f00c3cf3297b090067) Thanks [@simurai](https://github.com/simurai)! - Always break long `branch-name`s
+
+## 19.7.1
+
+### Patch Changes
+
+- [#2001](https://github.com/primer/css/pull/2001) [`47cec404`](https://github.com/primer/css/commit/47cec40472173b412df59e6990c0ac1b1ed43d04) Thanks [@jdanyow](https://github.com/jdanyow)! - Remove IE11 support in tooltip
+
+* [#1995](https://github.com/primer/css/pull/1995) [`557b100a`](https://github.com/primer/css/commit/557b100a77a4befe6d07fac14cb48b08bed18356) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add narrow/regular/wide viewport range utilities
+
+- [#2000](https://github.com/primer/css/pull/2000) [`264a89a5`](https://github.com/primer/css/commit/264a89a51a75eefa6a371e6ad11518519cd98b36) Thanks [@khiga8](https://github.com/khiga8)! - More CSS updates to `Autocomplete`
 
-* Fake entry to force publishing
+## 19.7.0
+
+### Minor Changes
+
+- [#1994](https://github.com/primer/css/pull/1994) [`69fe8c65`](https://github.com/primer/css/commit/69fe8c6512a3f0bbdbfdf7080b916a39173c2df9) Thanks [@khiga8](https://github.com/khiga8)! - Add support for inline, stack label in autocomplete
+
+### Patch Changes
+
+- [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts
 
 ## 19.6.0
 

package/DEVELOP.md

@@ -3,29 +3,32 @@
 If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
 
 ## Structure
+
 Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
 
-* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
-* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
-* **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
+- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
+- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
+- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
 
 ### Paths
-Here's what you need to know about how the files are structured in both git and in the published npm module:
 
-* In git, all of the SCSS source files live in the `src/` directory.
-* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
+Here's what you need to know about how the files are structured in both git and in the published npm module:
 
-    ```scss
-    @import "@primer/css/utilities/index.scss";
-    ```
+- In git, all of the SCSS source files live in the `src/` directory.
+- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
 
-* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
+  ```scss
+  @import '@primer/css/utilities/index.scss';
+  ```
 
+- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
 
 ## Install
+
 Run `npm install` to install the npm dependencies.
 
 ## Docs site
+
 The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
 
 ```sh
@@ -35,41 +38,43 @@ npm start
 Then visit http://localhost:8000 to view the site.
 
 ### The docs directory
-The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
 
+The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
 
 ### Code blocks
+
 All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
 
 ## Storybook
 
-Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic. 
+Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
 
 ```sh
 npm run storybook
 ```
 
 ### The Storybook directory
+
 Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
 
 ### Stories
+
 Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
 
 ## Scripts
+
 Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
 
-* `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
-* `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
-* `stylelint` lints the CSS source files.
-* `eslint` lints the JavaScript source files.
-* `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
-* `start` runs the documentation site locally (alias: `dev`).
-* `test` runs our test suite.
-* `storybook` runs storybook local development server.
+- `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
+- `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
+- `stylelint` lints the CSS source files.
+- `eslint` lints the JavaScript source files.
+- `start` runs the documentation site locally (alias: `dev`).
+- `test` runs our test suite.
+- `storybook` runs storybook local development server.
 
 The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
 
-
 [@primer/css]: https://www.npmjs.com/package/@primer/css
 [run-scripts]: https://docs.npmjs.com/cli/run-script
 [now]: https://zeit.co/now

package/actionlist/action-list-item.scss

@@ -1,12 +1,5 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
-@mixin focusOutline {
-  position: relative;
-  z-index: 1;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
-}
-
 @mixin activeIndicatorLine {
   position: absolute;
   top: calc(50% - 12px);
@@ -314,6 +307,16 @@
     text-decoration: none;
   }
 
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
   &:focus-visible {
     @include focusOutline;
   }

package/actionlist/action-list-tree.scss

@@ -1,21 +1,10 @@
-// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, no-duplicate-selectors, selector-max-type
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, selector-max-type, primer/spacing
 // tree-view variant
 // renders ActionList with default styling for tree-view
 // collapse/expand icons presents as leadingActions, rotate 90deg
 // connecting vertical lines between collapse groups
 // consistent font-size between nested groups
 
-@mixin activeIndicatorLine {
-  position: absolute;
-  top: calc(50% - 12px);
-  left: -$actionList-item-padding-horizontal;
-  width: $spacer-1;
-  height: $spacer-4;
-  content: '';
-  background: var(--color-accent-fg);
-  border-radius: $border-radius;
-}
-
 @mixin treeConnectingLine($left) {
   position: absolute;
   left: $left;
@@ -40,96 +29,25 @@
       }
     }
 
-    // start: copy from ActionList proper- backwards compatible for treeview with different markup structure
-    &[aria-expanded] {
-      .ActionList--subGroup {
-        @media screen and (prefers-reduced-motion: no-preference) {
-          transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
-        }
-
-        .ActionList-content {
-          padding-left: $spacer-4;
-        }
-      }
-
-      // has 16px leading visual
-      .ActionList-content--visual16 + .ActionList--subGroup {
-        .ActionList-content {
-          padding-left: $spacer-5;
-        }
-      }
-
-      // has 20px leading visual
-      .ActionList-content--visual20 + .ActionList--subGroup {
-        .ActionList-content {
-          padding-left: $spacer-2 * 4.5; // 36px
-        }
-      }
-
-      // has 24px leading visual
-      .ActionList-content--visual24 + .ActionList--subGroup {
-        .ActionList-content {
-          padding-left: $spacer-6;
-        }
-      }
-    }
-
-    &[aria-expanded='true'] {
-      .ActionList-item-collapseIcon {
-        transition: transform 120ms linear;
-        transform: scaleY(-1);
-      }
-
-      .ActionList--subGroup {
-        height: auto;
-        overflow: visible;
-        visibility: visible;
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    &[aria-expanded='false'] {
-      .ActionList-item-collapseIcon {
-        transition: transform 120ms linear;
-        transform: scaleY(1);
-      }
-
-      .ActionList--subGroup {
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(-$spacer-3);
-      }
-
-      // show active indicator on parent collapse if child is active
-      // this class changed in ActionList proper
-      &.ActionList-item--hasActiveSubItem {
-        background: var(--color-action-list-item-default-selected-bg);
-
-        &::before,
-        + .ActionList-item::before {
-          visibility: hidden;
-        }
-
-        // blue accent line
-        &::after {
-          @include activeIndicatorLine;
+    // normal font-weight for any active item
+    &.ActionList-item--navActive {
+      &:not(.ActionList-item--subItem) {
+        .ActionList-item-label {
+          font-weight: $font-weight-normal;
         }
       }
     }
-    // end copy
+  }
 
+  .ActionList-content {
     // nesting (infinite levels)
     // target items inside expanded subgroup
     &[aria-expanded] {
-      .ActionList--subGroup {
+      + .ActionList--subGroup {
         position: relative;
 
         // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
         .ActionList-content {
-          // stylelint-disable-next-line primer/spacing
           padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
         }
       }
@@ -141,6 +59,13 @@
         transition: transform 120ms linear;
         transform: rotate(0deg);
       }
+
+      // normal weight for parent folder containing active child
+      &.ActionList-content--hasActiveSubItem {
+        > .ActionList-item-label {
+          font-weight: $font-weight-normal;
+        }
+      }
     }
 
     &[aria-expanded='false'] {
@@ -148,6 +73,12 @@
         transition: transform 120ms linear;
         transform: rotate(-90deg);
       }
+
+      &.ActionList-content--hasActiveSubItem {
+        > .ActionList-item-label {
+          font-weight: $font-weight-normal;
+        }
+      }
     }
   }
 

package/autocomplete/autocomplete.scss

@@ -1,8 +1,57 @@
+// Stacked label (default)
+.autocomplete-label-stacked {
+  display: block;
+  margin-bottom: $spacer-2 * 0.75;
+}
+
+// Inline label (non-default)
+.autocomplete-label-inline {
+  display: inline;
+  margin-right: $spacer-2 * 0.75;
+}
+
+// Switch to stacked at smaller viewport
+@media (max-width: $width-sm) {
+  .autocomplete-label-inline {
+    display: block;
+    margin-bottom: $spacer-2 * 0.75;
+  }
+}
+
+// Wrapper for the input and result elements to ensure alignment
+.autocomplete-body {
+  position: relative;
+  display: inline;
+}
+
+// Wrapper and conditional styles for when an icon is added
+.autocomplete-embedded-icon-wrap {
+  display: inline-flex;
+  padding: $spacer-1 $spacer-2;
+  align-items: center;
+
+  &:focus-within {
+    border-color: var(--color-accent-fg);
+
+    @include focusBoxShadowInset;
+  }
+
+  .form-control {
+    padding: 0;
+    margin-left: $spacer-2;
+    // stylelint-disable-next-line
+    border: none;
+    box-shadow: none;
+  }
+}
+
 // A pop up list of items used to show autocompleted results
 .autocomplete-results {
   position: absolute;
+  left: 0;
   z-index: 99;
-  width: 100%;
+  width: max-content;
+  min-width: 100%;
   max-height: 20em;
   overflow-y: auto;
   // stylelint-disable-next-line primer/typography

package/base/base.scss

@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 * {
   box-sizing: border-box;
 }
@@ -77,10 +77,70 @@ button {
 }
 
 details {
-  summary { cursor: pointer; }
+  summary {
+    cursor: pointer;
+  }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none !important; }
+    > *:not(summary) {
+      display: none !important;
+    }
+  }
+}
+
+// global focus styles
+
+a,
+button,
+[role='button'],
+input[type='radio'],
+input[type='checkbox'] {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+}
+
+a:not([class]),
+input[type='radio'],
+input[type='checkbox'] {
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusBoxShadowInset;
+}
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus,
+  *:focus-visible {
+    outline: solid 1px transparent;
+  }
+
+  input:not([type='radio'], [type='checkbox']),
+  textarea,
+  select {
+    &:focus,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
   }
 }

package/base/normalize.scss

@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

package/box/box-overlay.scss

@@ -1,4 +1,5 @@
 .Box--overlay {
+  // stylelint-disable-next-line primer/responsive-widths
   width: 448px;
   margin-right: auto;
   margin-left: auto;
@@ -22,6 +23,7 @@
 }
 
 .Box-overlay--wide {
+  // stylelint-disable-next-line primer/responsive-widths
   width: 640px;
 }
 

package/branch-name/branch-name.scss

@@ -8,6 +8,7 @@
   padding: 2px 6px;
   font: 12px $mono-font;
   color: var(--color-fg-muted);
+  word-break: break-all;
   background-color: var(--color-accent-subtle);
   border-radius: $border-radius;