Upgrade to v9 primitives #717

rezrah · 2024-08-27T13:12:55Z

Summary

Part of https://github.com/github/primer/issues/3176

Completes the upgrade to v9 primitives, keeping all previous build configuration in-tact.

Diff of changes can be seen in the bot comment here 👀

Note

All changes in this PR are directly related to the upgrade only and focussed around end-user output.
Refactoring of implementation details is out-of-scope, and will be reviewed at a later date to keep this PR manageable.

List of notable changes:

completes upgrade to v9 primitives
fixed bug in CI diff, which wasn't emitting new tokens, only diffs to existing ones
updated eslint-plugin-primer-react dependency and subsequently impacted files

What should reviewers focus on?

Review the diff
Review Storybook and Docs for any obvious visual regressions

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
New visual snapshots have been generated / updated for any UI changes
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

changeset-bot · 2024-08-27T13:13:02Z

🦋 Changeset detected

Latest commit: 0fc2075

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-08-27T13:22:38Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

github-actions · 2024-08-27T18:34:31Z

🔍 Design token changes found

View CSS variable changes

+ --base-size-6: 0.375rem;

+ --base-size-2: 0.125rem;

- --brand-breakpoint-xxlarge: 90rem;
+ --brand-breakpoint-xxlarge: 87.5rem;

- @custom-media --brand-viewportRange-wide-viewport (min-width: 90rem);
+ @custom-media --brand-viewportRange-wide-viewport (min-width: 87.5rem);

…ves-upgrade

lukasoppermann · 2024-08-28T12:51:51Z

packages/design-tokens/scripts/style-dictionary.js

+ * transform: scss variable names
+ * example: `$namespace-item-variant-property-modifier`
+ */
+StyleDictionary.registerTransform({


You should be able to use this: https://github.com/primer/primitives/blob/main/src/transformers/namePathToKebabCase.ts

🙌 nice..

added as a follow up PR item

lukasoppermann · 2024-08-28T12:52:45Z

packages/design-tokens/scripts/style-dictionary.js

+ * transform: css variable names
+ * example: `--namespace-item-variant-property-modifier`
+ */
+StyleDictionary.registerTransform({


This can be removed, both scss and css are pathToKebabCase, the prefix is added later.

thanks, added as a follow up PR item

lukasoppermann · 2024-08-28T12:53:10Z

packages/design-tokens/scripts/style-dictionary.js

+ * example: `namespace.item.variant.property.modifier`
+ */
+StyleDictionary.registerTransform({
+  name: 'name/js',


You should be able to use this: https://github.com/primer/primitives/blob/main/src/transformers/namePathToDotNotation.ts

thanks, added as a follow up PR item. Will need the JS equivalent of that function to ship first.

lukasoppermann · 2024-08-28T12:53:45Z

packages/design-tokens/scripts/style-dictionary.js

+ * example: `NamespaceItemVariantPropertyModifier`
+ */
+StyleDictionary.registerTransform({
+  name: 'name/js/es6',


We can upstream this if you want.

yes please 🙏

Here we go: primer/primitives#1036

lukasoppermann · 2024-08-28T12:55:12Z

packages/design-tokens/scripts/style-dictionary.js

+
+// transform: px to rem
+StyleDictionary.registerTransform({
+  name: 'pxToRem',


If you have token: "dimension" on all your size tokens you could use: https://github.com/primer/primitives/blob/main/src/transformers/dimensionToRem.ts

Needs a bit more investigation...

...added as a follow up PR item.

lukasoppermann · 2024-08-28T12:55:56Z

packages/design-tokens/scripts/style-dictionary.js

+
+// ts output
+StyleDictionary.registerTransform({
+  name: 'attribute/typescript',


How does this work? Interesting. Can you explain it?

I'll get back to you on that... 😅

...added as a follow up PR item.

lukasoppermann · 2024-08-28T12:56:14Z

packages/design-tokens/scripts/style-dictionary.js

+
+// css output
+StyleDictionary.registerTransform({
+  name: 'attribute/css',


Why do you need this?

lukasoppermann · 2024-08-28T12:57:20Z

packages/design-tokens/scripts/style-dictionary.js

+
+// transform: composite typography to shorthands
+StyleDictionary.registerTransform({
+  name: 'typography/shorthand',


We should be able to use this: https://github.com/primer/primitives/blob/main/src/transformers/typographyToCss.ts

If not, this should be our goal to make it use this upstream transformer.

lukasoppermann · 2024-08-28T12:57:59Z

packages/design-tokens/scripts/style-dictionary.js

+// REGISTER THE CUSTOM TRANFORM GROUPS
+
+StyleDictionary.registerTransformGroup({
+  name: 'css',


Just FYI, you don't need to use TransformGroups, you can just add the transforms to the platform directly.

I meant to add this to scss, Although since scss and css are the same transforms, you could just use css for all.

lukasoppermann · 2024-08-28T12:58:40Z

packages/design-tokens/scripts/style-dictionary.js

+})
+
+StyleDictionary.registerFormat({
+  name: 'custom/format/custom-media',


Can you use this: https://github.com/primer/primitives/blob/main/src/formats/cssCustomMedia.ts ?

lukasoppermann · 2024-08-28T13:00:32Z

packages/design-tokens/scripts/style-dictionary.js

+      },
+      scss: {
+        buildPath: `${outputPath}/scss/`,
+        transformGroup: 'scss',


Suggested change

transformGroup: 'scss',

transformGroup: 'css',

They are the same.

We don't have CI diffing against the scss folder, so can't verify any regressions easily. Is this something you're super confident about @lukasoppermann, if so I can do it now. Alternatively, can do this one in a follow up PR.

lukasoppermann · 2024-08-28T13:01:20Z

packages/design-tokens/scripts/style-dictionary.js

+  pathToKebabCase,
+  pathToDotNotation,
+  capitalize,
+  pathToPascalCase,


Do you need to export them?

Probably not, let me remove these now 👍 thanks

lukasoppermann

Comments can be addressed in a separate PR.

rezrah · 2024-08-28T14:18:05Z

packages/design-tokens/scripts/style-dictionary.js

@@ -0,0 +1,495 @@
+/**
+ * Ported from primer/primitives, as it was removed in v8 release and we still need it


For posterity, this PR isn't where we'll refactor this file. That will happen in subsequent PRs. Tasklist added here.

danielguillan

Looking great! This is a really exciting update! 🚀

rezrah added 2 commits August 27, 2024 13:26

moved upstream build-file locally.. all working okay

d0c4e0d

fix token build locally

a4168e8

rezrah temporarily deployed to github-pages August 27, 2024 13:22 — with GitHub Actions Inactive

restore namespace to functional tokens that have been replced upstream

f6ab5d4

rezrah temporarily deployed to github-pages August 27, 2024 14:09 — with GitHub Actions Inactive

safelist size-* files

20b7ee3

rezrah temporarily deployed to github-pages August 27, 2024 14:18 — with GitHub Actions Inactive

copy over more files

79ee7f8

rezrah temporarily deployed to github-pages August 27, 2024 14:31 — with GitHub Actions Inactive

replace stylesheet replaces to xxlarge breakpoints with newer values

476b856

rezrah temporarily deployed to github-pages August 27, 2024 14:57 — with GitHub Actions Inactive

rezrah added 2 commits August 27, 2024 19:24

add new tokens to diff check

6cc3af5

fix failing command

b2924c6

primer deleted a comment from github-actions bot Aug 27, 2024

rezrah temporarily deployed to github-pages August 27, 2024 18:36 — with GitHub Actions Inactive

rezrah added 2 commits August 27, 2024 20:11

remove redundant diff line

030b44a

Merge branch 'main' of github.com:primer/brand into rezrah/v9-primiti…

a6ce2d6

…ves-upgrade

rezrah temporarily deployed to github-pages August 27, 2024 19:18 — with GitHub Actions Inactive

add logging

cbe93d0

rezrah temporarily deployed to github-pages August 27, 2024 19:28 — with GitHub Actions Inactive

more logging

f635c1a

rezrah temporarily deployed to github-pages August 27, 2024 19:42 — with GitHub Actions Inactive

normalise internal space on new tokens

38ed73b

rezrah temporarily deployed to github-pages August 28, 2024 08:59 — with GitHub Actions Inactive

rezrah added 2 commits August 28, 2024 12:19

upgrade primer-react eslint library

16d4b5d

reinstate temp dir removal

de77016

rezrah temporarily deployed to github-pages August 28, 2024 11:32 — with GitHub Actions Inactive

add changesets

cc5b1d2

rezrah temporarily deployed to github-pages August 28, 2024 12:07 — with GitHub Actions Inactive

rezrah requested review from danielguillan and lukasoppermann August 28, 2024 12:08

rezrah marked this pull request as ready for review August 28, 2024 12:08

restore missing aria-label

4d7721d

rezrah temporarily deployed to github-pages August 28, 2024 12:34 — with GitHub Actions Inactive

lukasoppermann reviewed Aug 28, 2024

View reviewed changes

lukasoppermann approved these changes Aug 28, 2024

View reviewed changes

rezrah commented Aug 28, 2024

View reviewed changes

remove unnecessary exports

0fc2075

rezrah temporarily deployed to github-pages August 28, 2024 14:26 — with GitHub Actions Inactive

danielguillan approved these changes Aug 28, 2024

View reviewed changes

rezrah merged commit 24fc6d0 into main Aug 28, 2024
17 of 18 checks passed

rezrah deleted the rezrah/v9-primitives-upgrade branch August 28, 2024 15:40

primer-css mentioned this pull request Aug 28, 2024

Release tracking #712

Merged

This was referenced Sep 21, 2024

[Snyk] Upgrade: , , JonathanXDR/Atom#37

Open

[Snyk] Upgrade: , , , postcss JonathanXDR/Atom#38

Open

kallie9750 mentioned this pull request Nov 2, 2024

[Snyk] Upgrade @primer/react-brand from 0.27.1 to 0.40.1 kallie9750/forgoodfirstissue#8

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to v9 primitives #717

Upgrade to v9 primitives #717

rezrah commented Aug 27, 2024 •

edited

Loading

changeset-bot bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 29, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 28, 2024

lukasoppermann Aug 28, 2024

lukasoppermann Aug 28, 2024

lukasoppermann Aug 28, 2024 •

edited

Loading

lukasoppermann Aug 28, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann Aug 28, 2024

rezrah Aug 28, 2024

lukasoppermann left a comment

rezrah Aug 28, 2024 •

edited

Loading

danielguillan left a comment

		@@ -0,0 +1,495 @@
		/**
		* Ported from primer/primitives, as it was removed in v8 release and we still need it

Upgrade to v9 primitives #717

Upgrade to v9 primitives #717

Conversation

rezrah commented Aug 27, 2024 • edited Loading

Summary

List of notable changes:

What should reviewers focus on?

Contributor checklist:

Reviewer checklist:

changeset-bot bot commented Aug 27, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 27, 2024 • edited Loading

🟢 No visual differences found

github-actions bot commented Aug 27, 2024 • edited Loading

🔍 Design token changes found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukasoppermann Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lukasoppermann left a comment

Choose a reason for hiding this comment

rezrah Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

danielguillan left a comment

Choose a reason for hiding this comment

rezrah commented Aug 27, 2024 •

edited

Loading

changeset-bot bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

lukasoppermann Aug 28, 2024 •

edited

Loading

rezrah Aug 28, 2024 •

edited

Loading