Merge branch 'main' into toggle_switch

.changeset/nine-dragons-wave.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.

.github/workflows/axe.yml

@@ -15,7 +15,7 @@ jobs:
           fetch-depth: 0
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v18.6
+        uses: tj-actions/changed-files@v19
         with:
           files: |
             docs/content/components/**/*.md

CHANGELOG.md

@@ -1,5 +1,19 @@
 # @primer/css
 
+## 20.1.1
+
+### Patch Changes
+
+- [#2078](https://github.com/primer/css/pull/2078) [`92ac0e39`](https://github.com/primer/css/commit/92ac0e39e6f5aae0314397890c8f78227a6c6ba0) Thanks [@langermank](https://github.com/langermank)! - Setup new `primer-primitive` bundle
+
+## 20.1.0
+
+### Minor Changes
+
+- [#2072](https://github.com/primer/css/pull/2072) [`ab6f0840`](https://github.com/primer/css/commit/ab6f0840f0131b370fb8871551720afa20fb466e) Thanks [@JasonEtco](https://github.com/JasonEtco)! - Add `.text-capitalize` utility class
+
+* [#1998](https://github.com/primer/css/pull/1998) [`51e087aa`](https://github.com/primer/css/commit/51e087aa31f049c1cb148df6f04fdbc6de434cf0) Thanks [@bolonio](https://github.com/bolonio)! - Styles for the new Dialog Component
+
 ## 20.0.0
 
 ### Major Changes

docs/.storybook/main.js

@@ -8,5 +8,9 @@ module.exports = {
     '@whitespace/storybook-addon-html',
     'storybook-addon-designs',
     'storybook-color-picker'
-  ]
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5'
+  }
 }

docs/.storybook/preview.js

@@ -2,6 +2,17 @@ import '../../src/docs.scss'
 import '../../src/index.scss'
 import '../../src/base/index.scss'
 import '../src/stories/helpers/storybook-styles.scss'
+// temporary import until primitives moves to core bundle
+// importing the index from /css didn't play nice with Storybook
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
+import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'
 import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
 
 const customViewports = {

docs/gatsby-browser.js

@@ -0,0 +1,11 @@
+// temporary import until primitives moves to core bundle
+// importing the index from /css didn't play nice with Gatsby
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
+import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'

docs/package.json

@@ -15,10 +15,10 @@
     "@primer/gatsby-theme-doctocat": "3.1.1",
     "@primer/octicons": "17.0.0",
     "@primer/octicons-react": "17.0.0",
-    "@primer/primitives": "7.3.0",
+    "@primer/primitives": "7.8.3",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.4.2",
-    "babel-preset-gatsby": "^2.11.1",
+    "babel-preset-gatsby": "^2.14.0",
     "chroma-js": "^2.4.2",
     "clsx": "^1.1.1",
     "core-js": "^3.20.3",
@@ -28,7 +28,7 @@
     "gatsby-plugin-svgr": "2.1.0",
     "path": "0.12.7",
     "postcss": "8.4.5",
-    "postcss-import": "14.0.2",
+    "postcss-import": "14.1.0",
     "postcss-load-config": "3.1.0",
     "postcss-loader": "4.3.0",
     "postcss-scss": "4.0.3",
@@ -38,7 +38,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-frame-component": "^5.2.1",
-    "sass-loader": "10.2.0",
+    "sass-loader": "13.0.0",
     "styled-components": "^4.3.2",
     "title-case": "^3.0.3"
   },
@@ -47,16 +47,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@storybook/addon-a11y": "6.4.19",
-    "@storybook/addon-actions": "^6.4.12",
-    "@storybook/addon-essentials": "^6.4.12",
-    "@storybook/addon-links": "^6.4.12",
+    "@storybook/addon-a11y": "6.5.0",
+    "@storybook/addon-actions": "^6.5.0",
+    "@storybook/addon-essentials": "^6.5.0",
+    "@storybook/addon-links": "^6.5.0",
     "@storybook/addon-postcss": "2.0.0",
+    "@storybook/builder-webpack5": "^6.5.0",
+    "@storybook/manager-webpack5": "^6.5.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.4.19",
+    "@storybook/react": "6.5.0",
     "@whitespace/storybook-addon-html": "^5.0.0",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.5",
     "storybook-addon-designs": "6.2.1",
-    "storybook-color-picker": "2.3.0"
+    "storybook-color-picker": "2.3.1"
   }
 }

docs/src/stories/components/Layout/LayoutBeta.stories.jsx

@@ -371,7 +371,6 @@ export const LayoutTemplate = ({
           paneWidth && layoutClassName + '--paneWidth-' + `${paneWidth}`,
           panePosition && layoutClassName + '--panePos-' + `${panePosition}`,
           hasPaneDivider && layoutClassName + '--hasPaneDivider',
-          paneIsSticky && layoutClassName + '--isPaneSticky',
 
           layoutClassName + '--responsive-' + `${responsiveVariant}`,
           responsiveVariant === 'separateRegions' && layoutClassName + '--responsive-primary-' + `${primaryRegion}`,
@@ -403,6 +402,7 @@ export const LayoutTemplate = ({
                   className={clsx(
                     layoutClassName + '-region',
                     layoutClassName + '-pane',
+                    paneIsSticky && layoutClassName + '-pane--sticky',
                     paneDividerWhenNarrow &&
                       layoutClassName +
                         '-region--dividerNarrow-' +
@@ -433,6 +433,7 @@ export const LayoutTemplate = ({
                   className={clsx(
                     layoutClassName + '-region',
                     layoutClassName + '-pane',
+                    paneIsSticky && layoutClassName + '-pane--sticky',
                     paneDividerWhenNarrow &&
                       layoutClassName +
                         '-region--dividerNarrow-' +

docs/src/stories/components/Layout/SplitPageLayout.stories.jsx

@@ -163,6 +163,7 @@ Playground.args = {
   // Pane
   hasPane: true,
   paneWidth: 'wide',
+  paneIsSticky: true,
 
   // Content
   contentWidth: 'full',