Merge branch 'main' into dependabot/npm_and_yarn/docs/storybook/webpa…

…ck-5.94.0

.changeset/breezy-ghosts-yell.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': major
+---
+
+turn into esm module

.changeset/friendly-parrots-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+rm peerDep & unused dep

.changeset/gentle-toys-cough.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Fixes for colorblind themes

.changeset/kind-stingrays-collect.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': major
+---
+
+update to SDv4

.changeset/sweet-apes-bow.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Adds src to dist as "build" so that primer/brand can use it

.github/workflows/a11y-contrast.yml

@@ -47,19 +47,32 @@ jobs:
             const results = require('./color-contrast-check.json');
             const faildChecks = results.reduce((acc, {failingContrast}) => acc + failingContrast, 0);
 
-            // prepare comment body
-            const resultsMarkdown = '## Design Token Contrast Check\n\n' + 
-              results.map(({theme, failingContrast, markdownTable}) => 
-                "### \\`"+theme+"\\`: " + `${failingContrast === 0 ? '✅ all checks passed' : `❌ ${failingContrast} checks failed`}\n\n` +
+
+            // prepare outputs for all failed themes
+            const failedResults = results.filter(themeResults => themeResults.failingContrast > 0).map(({theme, failingContrast, markdownTable}) => ({
+              title: `# ❌ \`${theme}\`:  ${failingContrast} checks failed`,
+              body: `${markdownTable}`
+              identifier: `<!-- contrast check --><!-- Theme: ${theme} -->` 
+            }))
+
+            // prepare summary body
+            const summaryMarkdown = '## Design Token Contrast Check\n\n' + 
+              results.map(({theme, failingContrast, failedMarkdownTable}) => {
+                if(failingContrast === 0) {
+                  return "### \\`"+theme+"\\`: " + `✅ all checks passed\n\n`
+                }
+                // if there are failing checks, return a summary with a details section
+                return "### \\`"+theme+"\\`: " + `❌ ${failingContrast} checks failed\n\n` + 
                 '<details>' +
                 `<summary>Show results table for theme: ${theme}</summary>\n` +
                 "  \n"+
-                `  ${markdownTable}` +
+                `  ${failedMarkdownTable}` +
                 '\n</details>'
-              ).join('\n\n')
+              }).join('\n\n')
 
             // set output
-            core.setOutput('markdown', resultsMarkdown)
+            core.setOutput('summaryMarkdown', summaryMarkdown)
+            core.setOutput('failedResults', failedResults)
             core.setOutput('faildChecks', faildChecks)
 
             // fail action if any contrast check fails
@@ -71,12 +84,27 @@ jobs:
               core.info('\u001b[32;1m✅ All contrast checks passed!')
             }
 
+      - name: Report check results as summary
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const resultsMarkdown = `${{ steps.check-results.outputs.summaryMarkdown }}`
+
+            // output results to summary
+            core.summary.addRaw(resultsMarkdown, true)
+            core.summary.write({overwrite: true})
+
       - name: Report check results as comment
         if: github.event_name == 'pull_request'
         uses: actions/github-script@v7
+        env:
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
         with:
           script: |
-            const resultsMarkdown = `${{ steps.check-results.outputs.markdown }}`
+            const results = ${{ steps.check-results.outputs.failedResults }}
+
+            const WORKFLOW_SUMMARY_URL = `https://github.com/${{env.GITHUB_REPOSITORY}}/actions/runs/${{env.GITHUB_RUN_ID}}`
 
             // get comments
             const {data: comments} = await github.rest.issues.listComments({
@@ -85,38 +113,48 @@ jobs:
               repo: context.repo.repo
             });
 
+            // get comments of token issues
+            let currentComments = comments.filter(comment => possibleTitles.some(titleStart => comment.body.includes(titleStart)));
+
             // get token issue
-            const tokenCheckComment = comments.filter(comment => comment.body.includes('## Design Token Contrast Check'));
+            const tokenCheckComment = comments.filter(comment => comment.body.includes("<!-- contrast check -->"));
 
             // if token issue exists, update it
             if(tokenCheckComment.length > 0) {
-              await github.rest.issues.updateComment({
-                comment_id: tokenCheckComment[0].id,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                body: resultsMarkdown
-              })
+              for (const comment of tokenCheckComment) {
+                await github.rest.issues.deleteComment({
+                  comment_id: comment.id,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                })
+              }
             }
 
-            // if token issue does not exist, create it
-            else {
+            for (const {title, body, indentifier} of results) {
+              // get token issue
+
+              const outputBody = `${title}\n\n${body}\n\n<a href="${WORKFLOW_SUMMARY_URL}">→ Details</a>${indentifier}`
+
+              // if token issue does not exist, create it
               await github.rest.issues.createComment({
                 issue_number: context.issue.number,
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                body: resultsMarkdown
+                body: outputBody
               })
             }
 
-      - name: Report check results as summary
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const resultsMarkdown = `${{ steps.check-results.outputs.markdown }}`
-
-            // output results to summary
-            core.summary.addRaw(resultsMarkdown, true)
-            core.summary.write({overwrite: true})
+            // if token issue exists, update it
+            if(currentComments.length > 0) {
+              await currentComments.map(comment => {
+                console.log('deleting comment', comment.id, comment)
+                github.rest.issues.deleteComment({
+                  comment_id: comment.id,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                })
+              })
+            }
 
   Fail_action_on_contrast_failing:
     needs: build
@@ -147,15 +185,17 @@ jobs:
             });
 
             // get token issue
-            const tokenCheckComment = comments.filter(comment => comment.body.includes('## Design Token Contrast Check'));
+            const tokenCheckComment = comments.filter(comment => comment.body.includes("<!-- contrast check -->"));
 
             // if token issue exists, update it
             if(tokenCheckComment.length > 0) {
-              await github.rest.issues.deleteComment({
-                comment_id: tokenCheckComment[0].id,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-              })
+              for (const comment of tokenCheckComment) {
+                await github.rest.issues.deleteComment({
+                  comment_id: comment.id,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                })
+              }
             }
 
             // remove summary

.github/workflows/visual_regression_test.yml

@@ -25,16 +25,14 @@ jobs:
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci && npm run install:storybook
 
       - name: Build tokens
         run: npm run build
 
       - name: Build storybook
         working-directory: docs/storybook
-        run: |
-          npm ci
-          npm run build-storybook
+        run: npm run build-storybook
 
       - name: Run storybook
         id: storybook
@@ -46,7 +44,7 @@ jobs:
           sleep 5
 
       - name: Run Visual Regression Tests
-        uses: docker://mcr.microsoft.com/playwright:v1.45.1-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.47.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/primitives
 
+## 9.1.2
+
+### Patch Changes
+
+- [#1053](https://github.com/primer/primitives/pull/1053) [`8892a4c`](https://github.com/primer/primitives/commit/8892a4c0c0faea6000ae681f168ccb8fc6df58fb) Thanks [@langermank](https://github.com/langermank)! - Update `skeleton` pattern color
+
 ## 9.1.1
 
 ### Patch Changes

buildConfig.tsconfig.jsonc → build.tsconfig.jsonc

@@ -2,9 +2,9 @@
   "compilerOptions": {
     "jsx": "react",
     "target": "ES2016",
-    "module": "commonjs",
+    "module": "preserve",
     "lib": ["ESNext", "dom"],
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "esModuleInterop": true,
     "strict": true,
     "noImplicitAny": true,
@@ -19,9 +19,9 @@
     "paths": {
       "~/*": ["*"],
       // workaround for: https://github.com/vitest-dev/vitest/issues/4567
-      "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
-    }
+      "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"],
+    },
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["./src/@types", "**/*.test.ts", "src/test-utilities/*.ts", "vitest.config.ts"]
+  "exclude": ["**/*.test.ts", "src/test-utilities/*.ts", "vitest.config.ts"],
 }

contributor-docs/feature-flag-testing.md

@@ -0,0 +1,84 @@
+# Testing primitives using a feature flag
+
+## 1. Create a PR
+
+Start by creating a PR in `primer/primitives`. Once all the tests are passing you are ready to move on.
+
+You will needs the pre-release version later in the process. So copy the version number from the `Published @primer/primitives` job. This is something like `0.0.0-20241007214729`.
+
+## 2. Create the feature flag
+
+To create the feature flag, you need to log into the [DevPortal](https://devportal.githubapp.com/feature-flags) and navigate to the [feature flags](https://devportal.githubapp.com/feature-flags) section.
+
+Click on the `New feature flag` button and fill in the required information.
+
+**Important:** Make sure to choose a descriptive name that is easy to understand. You **CANNOT** change the name.
+
+Confirm with the `Save feature` button.
+
+## 3. Add yourself to the feature flag
+
+You should first add yourself to the feature flag and test that everything is working. Afterwards you can add others.
+
+To do so, open the feature flag and navigate to the `Targeting rules` tab.
+Now click the `Switch to another stamp` dropdown and select `ditcom`.
+Under `Actors` add yourself.
+
+## 4. Create a PR in `github/github`
+
+Now it is time to create a PR in `github/github` to add your feature for all users that have the feature flag active.
+
+This requires a few changes:
+
+### Preload the feature flag
+
+You need to add your feature flag to `app/controllers/application_controller/preload_feature_flags_dependency.rb`:
+
+```
+:primitives_my_feature_flag # a comment describing what the feature flag does
+```
+
+### Install your pre-release
+
+In `github/github` dependencies are installed in workspaces. Primitives are part of the `@npm-workspaces/primer` workspace.
+Additionally, since the stable version of primitives is already installed, you need to install your version with an [npm alias](https://docs.npmjs.com/cli/v8/commands/npm-install#:~:text=npm%20install%20%3Calias%3E%40npm%3A%3Cname%3E%3A).
+
+For example:
+
+```bash
+npm i @primer/primitives-my-feature-flag@npm:@primer/primitives@0.0.0-20241007214729 --workspace=@npm-workspaces/primer
+```
+
+**NOTE:** This package needs to be checked into git. On dotcom all packages are added in git.
+
+### Create a new bundle (optional)
+
+If you want to load some new tokens you can add a new bundle and load it for users who have the feature flags enabled.
+
+To do so, first create a new bundle by creating a new folder in `app/assets/stylesheets/bundles/` for example `primer-primitives-your-bundle`.
+In this folder add an `index.scss` file that includes all files you want to load:
+
+```scss
+@import '@primer/primitives-my-feature-flag/dist/css/functional/themes/new-theme.css';
+```
+
+You now need to load your css bundle if the feature flag is active by placing the code below in all nessesary places, for example `app/views/layouts/application.html.erb`.
+
+```ruby
+# this bundle (index.scss in the folder) will only be loaded if the users has the primitives_my_feature_flag feature flag enabled
+<%= stylesheet_bundle "primer-primitives-your-bundle" if user_feature_enabled?(:primitives_my_feature_flag) %>
+```
+
+Now you need to generate the `SERVICEOWNERS` and `CODEOWNERS` by running `bin/generate-service-files.rb` in the console or by running it as a task in vs code.
+
+It should add a line like this to the `SERVICEOWNERS`:
+
+```
+app/assets/stylesheets/bundles/primer-primitives-your-bundle/ :primer_dotcom
+```
+
+And a line like this to the `CODEOWNERS`:
+
+```
+/app/assets/stylesheets/bundles/primer-primitives-your-bundle/ @github/primer-reviewers
+```