Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding tests that verify that the entire build setup is working as expected #1040

Merged
merged 1 commit into from
Sep 2, 2024

Conversation

lukasoppermann
Copy link
Contributor

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

@lukasoppermann lukasoppermann added the skip changeset Apply to PRs that should not result in a version bump. label Sep 2, 2024
@lukasoppermann lukasoppermann requested review from a team as code owners September 2, 2024 09:03
Copy link

changeset-bot bot commented Sep 2, 2024

⚠️ No Changeset found

Latest commit: 33100f4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

Copy link
Contributor

github-actions bot commented Sep 2, 2024

Design Token Diff

/css/functional/motion/motion.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/motion/motion.css	2024-09-02 10:28:14.290510752 +0000
@@ -1,5 +1,5 @@
:root {
-  --motion-skeletonLoader-shimmer-duration-scale: 1s;
-  --motion-spinner-duration-rotation: 1s;
-  --motion-loading-delay-default: 1s;
+  --motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
+  --motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
}

/css/functional/size/border.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/size/border.css	2024-09-02 10:28:14.006506599 +0000
@@ -1,5 +1,5 @@
:root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
+  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
 --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
 --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
 --borderWidth-thin: max(1px, 0.0625rem);
@@ -8,7 +8,7 @@
 --borderRadius-small: 0.1875rem;
 --borderRadius-medium: 0.375rem;
 --borderRadius-large: 0.75rem;
-  --borderRadius-full: 624.9375rem;
+  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
 --borderRadius-default: 0.375rem;
 --outline-focus-offset: -0.125rem;
 --outline-focus-width: 0.125rem;

/css/functional/typography/typography.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/typography/typography.css	2024-09-02 10:28:14.226509817 +0000
@@ -34,15 +34,15 @@
 --text-title-weight-medium: var(--base-text-weight-semibold);
 --text-title-weight-large: var(--base-text-weight-semibold);
 --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
}

/css/primitives.css

+++ /home/runner/work/primitives/primitives/dist/css/primitives.css	2024-09-02 10:28:14.398512332 +0000
@@ -26,12 +26,12 @@
 --base-text-weight-semibold: 600;
}
:root {
-  --motion-skeletonLoader-shimmer-duration-scale: 1s;
-  --motion-spinner-duration-rotation: 1s;
-  --motion-loading-delay-default: 1s;
+  --motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
+  --motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
}
:root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
+  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
 --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
 --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
 --borderWidth-thin: max(1px, 0.0625rem);
@@ -40,7 +40,7 @@
 --borderRadius-small: 0.1875rem;
 --borderRadius-medium: 0.375rem;
 --borderRadius-large: 0.75rem;
-  --borderRadius-full: 624.9375rem;
+  --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
 --borderRadius-default: 0.375rem;
 --outline-focus-offset: -0.125rem;
 --outline-focus-width: 0.125rem;
@@ -171,15 +171,15 @@
 --text-title-weight-medium: var(--base-text-weight-semibold);
 --text-title-weight-large: var(--base-text-weight-semibold);
 --text-display-weight: var(--base-text-weight-medium);
-  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace);
-  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace);
-  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif);
-  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
-  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
+  --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
+  --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
+  --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
+  --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
+  --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
+  --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
+  --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
}

it('it should transform with css/variables format', () => {
const output = fs.readFileSync(`${basePath}/build/css/variables.css`, 'utf8')
const expectedOutput = `:root {
--prefix-base-color-blue-500: #2C29FF; /* The primary color for interactive elements. */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

qq... should this test instead assert that the prefix isn't applied to base tokens and only functional ones?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? This is not the expected behavior for this config.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on https://github.com/primer/primitives/pull/1040/files#r1740667105 I think I got my answer. The opinionated rules are applied in a different stage in the build process, so this isn't representative of an end-to-end test.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I will add tests for this as well. Those are the baselines. :D

const output = fs.readFileSync(`${basePath}/build/css/variables.css`, 'utf8')
const expectedOutput = `:root {
--prefix-base-color-blue-500: #2C29FF; /* The primary color for interactive elements. */
--prefix-fg-color-link: #2C29FF;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar question for this one.. the input is fgColor but output is fg-color. Is that normals? I'd expect it to also be fgColor in output?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is currently just testing the default naming transforms. Here this is expected behavior. I will add our custom name transformers and then this would be the expected behavior.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah okay.. so there's another transformer that does that, i think that makes sense then 👍

.gitignore Outdated Show resolved Hide resolved
@github-actions github-actions bot temporarily deployed to Preview (Storybook) September 2, 2024 10:29 Inactive
@lukasoppermann lukasoppermann merged commit e12b1d2 into main Sep 2, 2024
26 checks passed
@lukasoppermann lukasoppermann deleted the e2e branch September 2, 2024 10:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
skip changeset Apply to PRs that should not result in a version bump.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants