Introduce tokens to support loading patterns #744

mperrotti · 2023-10-03T22:25:48Z

Summary

The primary goal of this PR was to add a design token to represent the amount of time we should wait before rendering a loading indicator or announcing a loading state to assistive technologies.

I also took some time to add other tokens I know we'll need to support the loading spinner and the "skeleton" loader.

List of notable changes:

Added

Duration to wait before showing a loading indicator
Duration it takes the Spinner indicator to complete a 360deg rotation
Duration it takes the skeleton loader's "shimmer" to go from left to right
Background color for skeleton loaders
Dimensions for the different Spinner sizes
Stroke width of the Spinner

What should reviewers focus on?

Does this taxonomy make sense?
Do these feel like the right tokens to add?

Steps to test:

TBD

Supporting resources (related issues, external links, etc):

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
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
Verify the design tokens changed in this PR are expected using the diffing results in this PR

changeset-bot · 2023-10-03T22:25:51Z

🦋 Changeset detected

Latest commit: 73f8697

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

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	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 · 2023-10-03T22:26:12Z

Variables changed

No variables changed

github-actions · 2023-10-03T22:27:15Z

Design Token Diff

/css/functional/size/size.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/size/size.css	2023-10-05 15:25:04.492731942 +0000
@@ -46,6 +46,10 @@
 --space-medium: 0.5rem;
 --space-large: 0.75rem;
 --space-xlarge: 1rem;
+  --spinner-strokeWidth-default: 0.125rem;
+  --spinner-size-small: 1rem;
+  --spinner-size-medium: 2rem;
+  --spinner-size-large: 4rem;
 --stack-padding-condensed: 0.5rem;
 --stack-padding-normal: 1rem;
 --stack-padding-spacious: 1.5rem;

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2023-10-05 15:25:03.596721150 +0000
@@ -181,6 +181,7 @@
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
 --sideNav-bgColor-selected: #21262d;
+  --skeletonLoader-bgColor: #161b22;
 --timelineBadge-bgColor: #21262d;
 --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
 --underlineNav-borderColor-active: #f78166;
@@ -598,6 +599,7 @@
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;
+    --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
   --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
   --underlineNav-borderColor-active: #f78166;

/css/functional/themes/dark-dimmed.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2023-10-05 15:25:02.736711009 +0000
@@ -181,6 +181,7 @@
 --selectMenu-borderColor: #545d68;
 --selectMenu-bgColor-active: #143d79;
 --sideNav-bgColor-selected: #373e47;
+  --skeletonLoader-bgColor: #2d333b;
 --timelineBadge-bgColor: #373e47;
 --treeViewItem-leadingVisual-iconColor-rest: #6d7986;
 --underlineNav-borderColor-active: #ec775c;
@@ -598,6 +599,7 @@
   --selectMenu-borderColor: #545d68;
   --selectMenu-bgColor-active: #143d79;
   --sideNav-bgColor-selected: #373e47;
+    --skeletonLoader-bgColor: #2d333b;
   --timelineBadge-bgColor: #373e47;
   --treeViewItem-leadingVisual-iconColor-rest: #6d7986;
   --underlineNav-borderColor-active: #ec775c;

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2023-10-05 15:25:04.052726643 +0000
@@ -181,6 +181,7 @@
 --selectMenu-borderColor: #7a828e;
 --selectMenu-bgColor-active: #1e60d5;
 --sideNav-bgColor-selected: #272b33;
+  --skeletonLoader-bgColor: #272b33;
 --timelineBadge-bgColor: #272b33;
 --treeViewItem-leadingVisual-iconColor-rest: #f0f3f6;
 --underlineNav-borderColor-active: #ff967d;
@@ -598,6 +599,7 @@
   --selectMenu-borderColor: #7a828e;
   --selectMenu-bgColor-active: #1e60d5;
   --sideNav-bgColor-selected: #272b33;
+    --skeletonLoader-bgColor: #272b33;
   --timelineBadge-bgColor: #272b33;
   --treeViewItem-leadingVisual-iconColor-rest: #f0f3f6;
   --underlineNav-borderColor-active: #ff967d;

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2023-10-05 15:25:03.160715898 +0000
@@ -181,6 +181,7 @@
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
 --sideNav-bgColor-selected: #21262d;
+  --skeletonLoader-bgColor: #161b22;
 --timelineBadge-bgColor: #21262d;
 --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
 --underlineNav-borderColor-active: #f78166;
@@ -598,6 +599,7 @@
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;
+    --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
   --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
   --underlineNav-borderColor-active: #f78166;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2023-10-05 15:25:02.112703870 +0000
@@ -181,6 +181,7 @@
 --selectMenu-borderColor: #484f58;
 --selectMenu-bgColor-active: #0c2d6b;
 --sideNav-bgColor-selected: #21262d;
+  --skeletonLoader-bgColor: #161b22;
 --timelineBadge-bgColor: #21262d;
 --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
 --underlineNav-borderColor-active: #f78166;
@@ -598,6 +599,7 @@
   --selectMenu-borderColor: #484f58;
   --selectMenu-bgColor-active: #0c2d6b;
   --sideNav-bgColor-selected: #21262d;
+    --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
   --treeViewItem-leadingVisual-iconColor-rest: #7d8590;
   --underlineNav-borderColor-active: #f78166;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2023-10-05 15:25:01.188693298 +0000
@@ -182,6 +182,7 @@
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #b6e3ff;
 --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #f6f8fa;
 --timelineBadge-bgColor: #eaeef2;
 --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
 --underlineNav-borderColor-active: #fd8c73;
@@ -599,6 +600,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #f6f8fa;
   --timelineBadge-bgColor: #eaeef2;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2023-10-05 15:25:01.664698744 +0000
@@ -182,6 +182,7 @@
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #9cd7ff;
 --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #e7ecf0;
 --timelineBadge-bgColor: #e7ecf0;
 --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
 --underlineNav-borderColor-active: #cd3425;
@@ -599,6 +600,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #9cd7ff;
   --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #e7ecf0;
   --timelineBadge-bgColor: #e7ecf0;
   --treeViewItem-leadingVisual-iconColor-rest: #368cf9;
   --underlineNav-borderColor-active: #cd3425;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2023-10-05 15:25:00.668687348 +0000
@@ -182,6 +182,7 @@
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #b6e3ff;
 --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #f6f8fa;
 --timelineBadge-bgColor: #eaeef2;
 --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
 --underlineNav-borderColor-active: #fd8c73;
@@ -599,6 +600,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #f6f8fa;
   --timelineBadge-bgColor: #eaeef2;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2023-10-05 15:25:00.064680437 +0000
@@ -182,6 +182,7 @@
 --selectMenu-borderColor: #ffffff00;
 --selectMenu-bgColor-active: #b6e3ff;
 --sideNav-bgColor-selected: #ffffff;
+  --skeletonLoader-bgColor: #f6f8fa;
 --timelineBadge-bgColor: #eaeef2;
 --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
 --underlineNav-borderColor-active: #fd8c73;
@@ -599,6 +600,7 @@
   --selectMenu-borderColor: #ffffff00;
   --selectMenu-bgColor-active: #b6e3ff;
   --sideNav-bgColor-selected: #ffffff;
+    --skeletonLoader-bgColor: #f6f8fa;
   --timelineBadge-bgColor: #eaeef2;
   --treeViewItem-leadingVisual-iconColor-rest: #54aeff;
   --underlineNav-borderColor-active: #fd8c73;

mperrotti · 2023-10-03T22:27:10Z

src/tokens/functional/color/dark/patterns-dark.json5

@@ -1933,6 +1933,12 @@
      },
    },
  },
+  skeletonLoader: {
+    bgColor: {
+      $value: '{bgColor.muted}',


Do we need to add an entry for dark mode if it's using the same token?

We use the same color between light and dark. We rely on bgColor.muted changing between dark and light modes.

Yes, we need dark and light mode, just not any of the sub-themes.

mperrotti · 2023-10-03T22:29:59Z

src/tokens/functional/color/light/patterns-light.json5

@@ -1931,6 +1931,12 @@
      },
    },
  },
+  skeletonLoader: {


I didn't add color tokens for the spinner because we just use currentColor with opacity. In most cases, this will mean the "track" of the spinner is fgColor.default @ 25% opacity, the bit that spins around the track is fgColor.default @ 100% opacity.

lukasoppermann · 2023-10-04T14:16:29Z

src/tokens/functional/motion/patterns.json5

+{
+  motion: {
+    spinner: {
+      rotationDuration: {


I am not sure, but WDYT think about a more general approach like spinner.speed and skeletonLoader.speed?

CC: @mperrotti @langermank

I feel like duration is different from speed in animation

Than maybe using just duration instead of rotationDuration and shimmerDuration?

I think duration could work for this case. When we start to add tokens for more complex animations, we might need to specify what the duration is for.

For example: If I have an animation that scales in (transform: scale()) at a different rate than it fades in (opacity), we'll need to differentiate the two durations.

Yes, true. But we could also think about nested naming? E.g. maybe this is part of the "scale"?

duration.scale and duration.opacity?

Do you think we need to figure this out now, or should we go with duration and see if we ever run into issues?

So motion-spinner-rotationDuration-default could be motion-spinner-duration-rotation

with future tokens like..

motion-spinner-duration-scale or motion-spinner-duration-opacity

I like this.

lukasoppermann

One comment / idea about a more general approach for speed

langermank

Looks good! I would add a changeset for this with a patch, and then hopefully we'll resolve the build error so you can merge 😄

lukasoppermann · 2023-10-05T10:35:52Z

I updated this PR to main and now it has the duration validation support from #749 and the test is not failing anymore.

mperrotti · 2023-10-05T14:16:31Z

I think we should add a transform for duration tokens that strips the unit. So CSS would get 1000ms, but JavaScript would just get 1000.

What do you think?

lukasoppermann · 2023-10-05T14:27:49Z

I think we should add a transform for duration tokens that strips the unit. So CSS would get 1000ms, but JavaScript would just get 1000.

What do you think?

We currently don't build js. So, I would say if we at some point go back to building js as an output, we can add it. Does that make sense?

lukasoppermann · 2023-10-05T14:30:19Z

Okay, I just merged the transformer as well: #751

lukasoppermann · 2023-10-05T14:37:58Z

@mperrotti once you add the changeset it should be ready to merge. The Show diff for v8 design token changes is fine, as we are adding tokens, so the change is expected.

mperrotti · 2023-10-05T15:07:58Z

We currently don't build js.

We might be able to get around using setTimeout by relying on CSS delays. If not, we can go back and add it.

Also, we still style in JS in PRC (for now).

lukasoppermann · 2023-10-05T15:10:16Z

We might be able to get around using setTimeout by relying on CSS delays. If not, we can go back and add it.

Also, we still style in JS in PRC (for now).

This is changing with v8, right @langermank? That was why we removed js from the output?

…tives into mp/loading-indicator-tokens

langermank · 2023-10-05T15:15:17Z

Also, we still style in JS in PRC (for now).

@mperrotti @lukasoppermann this is still an open question and I'm writing up a discussion/ADR to pave a path forward (using JS vs. CSS vars)

lukasoppermann · 2023-10-05T15:17:55Z

Also, we still style in JS in PRC (for now).

@mperrotti @lukasoppermann this is still an open question and I'm writing up a discussion/ADR to pave a path forward (using JS vs. CSS vars)

Okay, whatever we decide will be fine. Adding js back in is relatively quick.

mperrotti added 2 commits October 3, 2023 18:04

adds token for how long to wait before showing a loading indicator

e7a5086

adds other tokens to support loading patterns

defe3d8

mperrotti temporarily deployed to github-pages October 3, 2023 22:28 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview October 3, 2023 22:28 Inactive

adds token for spinner stroke width

23b747b

mperrotti commented Oct 3, 2023

View reviewed changes

mperrotti requested review from lukasoppermann and langermank October 3, 2023 22:33

lukasoppermann reviewed Oct 4, 2023

View reviewed changes

lukasoppermann approved these changes Oct 4, 2023

View reviewed changes

langermank approved these changes Oct 4, 2023

View reviewed changes

Merge branch 'main' into mp/loading-indicator-tokens

0b9a25a

lukasoppermann temporarily deployed to github-pages October 5, 2023 10:32 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview October 5, 2023 10:32 Inactive

Merge branch 'main' into mp/loading-indicator-tokens

38c607a

lukasoppermann temporarily deployed to github-pages October 5, 2023 14:33 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview October 5, 2023 14:33 Inactive

mperrotti added 2 commits October 5, 2023 11:11

update taxonomy for component motion tokens

e3b44e9

Merge branch 'mp/loading-indicator-tokens' of github.com:primer/primi…

5c1c32e

…tives into mp/loading-indicator-tokens

adds changeset

73f8697

mperrotti marked this pull request as ready for review October 5, 2023 15:24

mperrotti requested a review from a team as a code owner October 5, 2023 15:24

mperrotti requested a review from a team October 5, 2023 15:24

mperrotti enabled auto-merge (squash) October 5, 2023 15:24

mperrotti temporarily deployed to github-pages October 5, 2023 15:27 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview October 5, 2023 15:27 Inactive

mperrotti added the update snapshots Update visual regression test snapshots label Oct 5, 2023

github-actions bot removed the update snapshots Update visual regression test snapshots label Oct 5, 2023

mperrotti disabled auto-merge October 5, 2023 15:52

mperrotti merged commit 5f9eb77 into main Oct 5, 2023
27 of 28 checks passed

mperrotti deleted the mp/loading-indicator-tokens branch October 5, 2023 15:52

primer bot mentioned this pull request Oct 5, 2023

Release Tracking #746

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce tokens to support loading patterns #744

Introduce tokens to support loading patterns #744

mperrotti commented Oct 3, 2023 •

edited

Loading

changeset-bot bot commented Oct 3, 2023 •

edited

Loading

github-actions bot commented Oct 3, 2023 •

edited

Loading

github-actions bot commented Oct 3, 2023 •

edited

Loading

/css/functional/size/size.css

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-dimmed.css

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

mperrotti Oct 3, 2023

lukasoppermann Oct 4, 2023

mperrotti Oct 3, 2023

lukasoppermann Oct 4, 2023

langermank Oct 4, 2023

lukasoppermann Oct 5, 2023

mperrotti Oct 5, 2023

lukasoppermann Oct 5, 2023

langermank Oct 5, 2023

lukasoppermann left a comment

langermank left a comment

lukasoppermann commented Oct 5, 2023

mperrotti commented Oct 5, 2023 •

edited

Loading

lukasoppermann commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

mperrotti commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

langermank commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

Introduce tokens to support loading patterns #744

Introduce tokens to support loading patterns #744

Conversation

mperrotti commented Oct 3, 2023 • edited Loading

Summary

List of notable changes:

Added

What should reviewers focus on?

Steps to test:

Supporting resources (related issues, external links, etc):

Contributor checklist:

Reviewer checklist:

changeset-bot bot commented Oct 3, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Oct 3, 2023 • edited Loading

github-actions bot commented Oct 3, 2023 • edited Loading

Design Token Diff

/css/functional/size/size.css

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-dimmed.css

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

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 left a comment

Choose a reason for hiding this comment

langermank left a comment

Choose a reason for hiding this comment

lukasoppermann commented Oct 5, 2023

mperrotti commented Oct 5, 2023 • edited Loading

lukasoppermann commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

mperrotti commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

langermank commented Oct 5, 2023

lukasoppermann commented Oct 5, 2023

mperrotti commented Oct 3, 2023 •

edited

Loading

changeset-bot bot commented Oct 3, 2023 •

edited

Loading

github-actions bot commented Oct 3, 2023 •

edited

Loading

github-actions bot commented Oct 3, 2023 •

edited

Loading

mperrotti commented Oct 5, 2023 •

edited

Loading