Merge branch 'main' into fix-avatar-stack

.changeset/fresh-llamas-stare.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix nested `<ul>` in footnotes

CHANGELOG.md

@@ -1,5 +1,40 @@
 # @primer/css
 
+## 20.4.6
+
+### Patch Changes
+
+- [#2266](https://github.com/primer/css/pull/2266) [`c28cdf7e`](https://github.com/primer/css/commit/c28cdf7effbd3bd750585543ff774e1e7c84873a) Thanks [@langermank](https://github.com/langermank)! - Remove scrollbar CSS property from Overlay
+
+* [#2255](https://github.com/primer/css/pull/2255) [`1a9a6689`](https://github.com/primer/css/commit/1a9a668931c51cb4ca0867173af78f1e18d2662d) Thanks [@jdrush89](https://github.com/jdrush89)! - Fixing ActionList Item hover focus style
+
+- [#2249](https://github.com/primer/css/pull/2249) [`81083778`](https://github.com/primer/css/commit/81083778a73c1d1f0f37b4efefe5359926ce4269) Thanks [@koddsson](https://github.com/koddsson)! - Increase specificy for Overlay styles as they relate to the backdrop and positioning options
+  - If a Dialog opens a second Dialog, each Dialog properties should be contained to its own scope
+
+## 20.4.5
+
+### Patch Changes
+
+- [#2242](https://github.com/primer/css/pull/2242) [`ef31fd98`](https://github.com/primer/css/commit/ef31fd988d52391317cc8982caf06ef45732ca70) Thanks [@JoshBowdenConcepts](https://github.com/JoshBowdenConcepts)! - This border change was made to ensure that assignee avatars would stack next to one another correctly.
+
+## 20.4.4
+
+### Patch Changes
+
+- [#2218](https://github.com/primer/css/pull/2218) [`6205337b`](https://github.com/primer/css/commit/6205337b4c871b6ce431c8b211ddb0bbd176946f) Thanks [@langermank](https://github.com/langermank)! - - Adding readonly styles
+  - Fixing focus background color for inset field
+
+* [#2211](https://github.com/primer/css/pull/2211) [`8e5f6224`](https://github.com/primer/css/commit/8e5f62244192a8e2a191be7e7ad20d00f4b4bedb) Thanks [@imjohnbo](https://github.com/imjohnbo)! - Remove outline reset of `.SelectMenu-closeButton`
+
+- [#2220](https://github.com/primer/css/pull/2220) [`1a8e7db5`](https://github.com/primer/css/commit/1a8e7db5f6c7b369fcfb6598df2edc42d0511da7) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Update Marketing Typography (marketing-type.md)
+
+* [#2229](https://github.com/primer/css/pull/2229) [`8a4c0878`](https://github.com/primer/css/commit/8a4c0878857ff65447906bf7d969211f96715197) Thanks [@jonrohan](https://github.com/jonrohan)! - ActionList hide the first divider if there's hidden items in front of it.
+
+- [#2225](https://github.com/primer/css/pull/2225) [`56ea4ab1`](https://github.com/primer/css/commit/56ea4ab17644ad0d521373f700d551d66217268a) Thanks [@langermank](https://github.com/langermank)! - Overlay updates for Alpha::Dialog
+  - Size improvements
+  - Support buttom and side sheets
+  - Preliminary animations for sheets
+
 ## 20.4.3
 
 ### Patch Changes

docs/content/utilities/marketing-type.md

@@ -6,20 +6,20 @@ source: 'https://github.com/primer/css/tree/main/src/marketing/type'
 bundle: marketing-type
 ---
 
-The typography for our marketing pages differs from Primer CSS's core—it is responsive, on a slightly different scale, and headlines are set in the [defined marketing font](https://github.com/primer/css/blob/main/src/marketing/support/variables.scss).
+The typography for our marketing pages differs from Primer CSS's core. It is responsive, on a slightly different scale, and headlines are set in the [defined marketing font](https://github.com/primer/css/blob/main/src/marketing/support/variables.scss).
 
 ## Heading utilities
 
 Use `.h0-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
 
 ```html live title="Heading Utilities"
-<p class="h0-mktg">This is a heading 0</p>
-<p class="h1-mktg">This is a heading 1</p>
-<p class="h2-mktg">This is a heading 2</p>
-<p class="h3-mktg">This is a heading 3</p>
-<p class="h4-mktg">This is a heading 4</p>
-<p class="h5-mktg">This is a heading 5</p>
-<p class="h6-mktg">This is a heading 6</p>
+<p class="h0-mktg">This is heading 0</p>
+<p class="h1-mktg">This is heading 1</p>
+<p class="h2-mktg">This is heading 2</p>
+<p class="h3-mktg">This is heading 3</p>
+<p class="h4-mktg">This is heading 4</p>
+<p class="h5-mktg">This is heading 5</p>
+<p class="h6-mktg">This is heading 6</p>
 ```
 
 ## Body content utilities

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.4.3",
+  "version": "20.4.6",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -50,28 +50,28 @@
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
     "@primer/stylelint-config": "^12.4.0",
-    "autoprefixer": "10.4.8",
+    "autoprefixer": "10.4.12",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
-    "eslint": "8.21.0",
+    "eslint": "8.23.1",
     "eslint-plugin-github": "4.3.7",
     "eslint-plugin-jest": "26.8.2",
     "eslint-plugin-prettier": "4.2.1",
     "filesize": "9.0.11",
     "front-matter": "4.0.2",
     "fs-extra": "10.1.0",
     "globby": "13.1.2",
-    "jest": "28.1.3",
+    "jest": "29.0.3",
     "js-yaml": "4.1.0",
     "postcss": "8.4.16",
     "postcss-calc": "8.2.4",
-    "postcss-import": "14.1.0",
+    "postcss-import": "15.0.0",
     "postcss-load-config": "4.0.1",
     "postcss-scss": "4.0.4",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.7.1",
     "semver": "7.3.7",
-    "stylelint": "14.10.0",
+    "stylelint": "14.11.0",
     "table": "6.8.0"
   },
   "jest": {

src/actionlist/action-list-item.scss

@@ -32,7 +32,7 @@
         cursor: pointer;
         background-color: var(--color-action-list-item-default-hover-bg);
 
-        &:not(.ActionList-item--navActive) {
+        &:not(.ActionList-item--navActive):not(:focus-visible) {
           // Support for "Windows high contrast mode"
           outline: $border-style $border-width transparent;
           outline-offset: -$border-width;
@@ -113,6 +113,11 @@
     }
   }
 
+  // Make sure that the first visible item isn't a divider
+  &[hidden] + .ActionList-sectionDivider {
+    display: none;
+  }
+
   // Autocomplete [aria-selected] items
 
   &[aria-selected='true'] {

src/avatars/avatar-stack.scss

@@ -58,7 +58,7 @@
     // stylelint-enable selector-max-type
 
     // Account for 4+ avatars
-    &:nth-child(n+4) {
+    &:nth-child(n + 4) {
       display: none;
       opacity: 0;
     }
@@ -70,7 +70,7 @@
       margin-right: 3px;
     }
 
-    .avatar:nth-child(n+4) {
+    .avatar:nth-child(n + 4) {
       display: flex;
       opacity: 1;
     }
@@ -120,6 +120,10 @@
       // stylelint-disable-next-line primer/spacing
       margin-left: 3px;
     }
+
+    .avatar:not(:last-child) {
+      border-left: 0;
+    }
   }
 
   .avatar.avatar-more {

src/markdown/footnotes.scss

@@ -19,6 +19,12 @@
 
     ol {
       padding-left: $spacer-3;
+
+      ul {
+        display: inline-block;
+        padding-left: $spacer-3;
+        margin-top: $spacer-3;
+      }
     }
 
     li {

src/overlay/overlay.scss

@@ -15,17 +15,67 @@ $primer-borderRadius-large: 0.75rem;
 
 .Overlay {
   display: flex;
+  width: min(var(--overlay-width), 100vw - 2rem);
   min-width: 192px;
+  max-height: min(calc(100vh - 2rem), var(--overlay-height));
   flex-direction: column;
   background-color: var(--color-canvas-overlay);
   border-radius: $primer-borderRadius-large;
   box-shadow: var(--color-overlay-shadow);
   opacity: 1;
 
+  &.Overlay--size-auto {
+    min-width: 192px;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+  }
+
+  &.Overlay--size-full {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.Overlay--size-xsmall {
+    --overlay-width: 192px;
+
+    max-height: calc(100vh - 2rem);
+  }
+
+  &.Overlay--size-small {
+    --overlay-height: 256px;
+    --overlay-width: 320px;
+  }
+
+  &.Overlay--size-small-portrait {
+    --overlay-height: 432px;
+    --overlay-width: 320px;
+  }
+
+  &.Overlay--size-medium {
+    --overlay-height: 320px;
+    --overlay-width: 480px;
+  }
+
+  &.Overlay--size-medium-portrait {
+    --overlay-height: 600px;
+    --overlay-width: 480px;
+  }
+
+  &.Overlay--size-large {
+    --overlay-height: 432px;
+    --overlay-width: 640px;
+  }
+
+  &.Overlay--size-xlarge {
+    --overlay-height: 600px;
+    --overlay-width: 960px;
+  }
+
   &.Overlay--height-auto {
     height: auto;
   }
 
+  // start deprecate in favor of Alpha::Dialog
   &.Overlay--height-xsmall {
     height: min(192px, 100vh - 2rem);
   }
@@ -73,6 +123,8 @@ $primer-borderRadius-large: 0.75rem;
     width: min(960px, 100vw - 2rem);
   }
 
+  // end deprecate
+
   &.Overlay--motion-scaleFade {
     @media screen and (prefers-reduced-motion: no-preference) {
       animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
@@ -292,40 +344,59 @@ $primer-borderRadius-large: 0.75rem;
     align-items: center;
     justify-content: left;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
+      height: 100vh;
+      max-height: unset;
       border-radius: $primer-borderRadius-large;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideInRight;
+      }
     }
   }
 
   &.Overlay-backdrop--placement-right#{$responsiveVariant} {
     align-items: center;
     justify-content: right;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
+      height: 100vh;
+      max-height: unset;
       border-radius: $primer-borderRadius-large;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideInLeft;
+      }
     }
   }
 
   &.Overlay-backdrop--placement-bottom#{$responsiveVariant} {
     align-items: end;
     justify-content: center;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
+      width: 100vw;
+      height: auto;
+      max-height: calc(100vh - 2rem);
       border-radius: $primer-borderRadius-large;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideUp;
+      }
     }
   }
 
   &.Overlay-backdrop--placement-top#{$responsiveVariant} {
     align-items: start;
     justify-content: center;
 
-    .Overlay#{$responsiveVariant} {
+    > .Overlay#{$responsiveVariant} {
       border-radius: $primer-borderRadius-large;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -342,7 +413,7 @@ $primer-borderRadius-large: 0.75rem;
     max-width: 100vw;
     height: 100%;
     max-height: 100vh;
-    border-radius: unset;
+    border-radius: unset !important;
     flex-grow: 1;
   }
 }
@@ -383,3 +454,21 @@ $primer-borderRadius-large: 0.75rem;
     @include Overlay-backdrop--full;
   }
 }
+
+@keyframes Overlay--motion-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}